Det är crunch tid, och en klient vill se sin design som det skulle se ut på en iPhone eller iPad. Fröken inte; Det finns ett antal färdiga mockups på marknaden som väntar på din anpassning.
Att anpassa en mockup är ett enkelt sätt att visa upp ett designprojekt i en realistisk miljö som säkert kommer att imponera på kunder. Att använda en mockup kan hjälpa andra att bättre visualisera hur designen verkligen kommer att se ut med en viss skala. (Ibland är det lätt att glömma, inte alla ser och föreställer ett projekt på samma sätt som du gör.)
Om du aldrig har anpassat en mockup, kan det vara lite skrämmande först, men vi går igenom processen.
Välj en Mockup
Det första steget är att välja en mockup som fungerar för dina projekt och arbetsflöde. Alternativ att tänka på inkluderar filformat och dimensionering samt designen av mockupen och om den kommer att komplimangera ditt projekt. Vissa mockups kommer med en enda bild för att infoga mönster i medan andra kommer i mer av ett kitformat med flera mockups och alternativ.
Här är några bra ställen att börja leta efter en bra mockup-design:
- Mockup Templates har en bra samling av olika, fria mockups
- 100 + iPhone PSD & Vector Mockups
- 100+ iPad Mockups: PSD, foton och vektorer
- 100+ MacBook PSD & Vector Mockups
- 50+ Apple Watch Mockups & Graphics
- 40+ iMac Mockups: PSD, foton och vektorer
Tänk om storlek och skala
Innan du köper eller laddar ner en mockup, tänk på hur du planerar att använda den. Kommer det att skickas till e-post för snabb visning eller tryckning på affischtavlan för en styrelsemöte? Detta hjälper dig att avgöra om du kan använda en mindre PSD-mockup eller behöver en vektorbaserad version. (Personligen väljer jag alltid vektor eftersom du aldrig vet vad som kan dyka upp och jag hatar scrambling i sista minuten.)
Det andra formatet är hur bekvämt du är med programvaran som du ska redigera designen i. PSD-versioner kräver anständig kunskap om Adobe Photoshop och användning av lager, medan vektorformat vanligtvis redigeras i Adobe Illustrator.
Välj en realistisk miljö
Bakgrunden till mockups kan variera från en iPhone eller iPad på en vit bakgrund till alternativ med full realistisk bildvisning som en hand som håller en telefon.
En realistisk miljö kan hjälpa en klient att visa designen som den faktiskt skulle användas - och är en av dessa presentationer? Tricks? som kan wow En mockup utan bakgrund fokuserar enbart på designen, vilket är det som många designers föredrar. Det finns också versioner i mitten, med iPhone eller iPads ovanpå bakgrundsbilder som nästan faller bort, till exempel en bordplatta eller mot ett subtilt mönster.
Komplimanger designen
Oavsett vilken mockupstil du väljer, borde den komplettera designen. Använd inte en woodgrain-bakgrund för ett distansbaserat tema; juxtapositionen krossas. (En träkorns bakgrund med en naturbaserad design skulle vara lämpligare.)
Inte bara kommer din design att kommunicera, men när man använder en mockup säger den övergripande kvaliteten på presentationen något om projektet också.
Förbered din design
Det största steget i att förbereda din design för en mockup skapar en kopia för den storleken enheten. Det spelar ingen roll vilken typ av miljö du bygger webbplatsen eller appen i.
För PSD mockups kan du göra något så enkelt som att ta en skärmdump av designen.
För vektorbaserade format behöver du bara se till att bilden är tillräckligt stor för vad du planerar att göra med mockup. (Ibland är en skärmdump inte tillräcklig.)
Om du använder samma programvarusupport - som Adobe - för att dessa projekt kan flytta en design till en mockup kan det vara lika enkelt som en kopia och klistra in. (Verkligen!)
Slå samman mockup och design
När du har en mockup och en design, vill du sammanfoga de två i en enda fil för fullständig anpassning. Det stora med de flesta iPhone och iPad mockups är att de är gjorda för dig att göra så många förändringar som du vill med grupperade och organiserade lager.
Öppna Mockup och Design
Du kan behöva unzip mockupen för att starta. Öppna filen i lämplig programvara.
Öppna din design eller designvariationer, eller ta den skärmdump som du kommer att använda för mockup (det här är den föredragna metoden för många nybörjare för att göra filstrukturerna mindre klumpiga).
Lär filstrukturen
När du väl kommit in i iPhone eller iPad mockup för första gången, vill du titta runt för att känna en känsla för filstrukturen.
Lägg till din design
Då är du redo att lägga till din design. Du vill skapa en bra uppsättning arbetsflöden och filrutiner så att du enkelt kan använda en mockup. Här är ett förslag på arbetsflöde för anpassning:
- Skapa en ny mapp, namnge den baserat på projektet och lägg till dina designelement i den nya mappen? eller
- Lägg till dina designelement på den fördefinierade platsen i mockupen (många mockups inkluderar en förinställd mapp)
- Justera placeringen så att mockupen är i rätt lager (vanligtvis nära baksidan)
- Rotera, skeva eller skala efter behov för att passa in i mockupen
- Stäng av alla onödiga lager
- Spara
Slutsats
Så, var hittar du en kvalitet iPhone eller iPad mockup? Vad ska du förvänta dig att betala?
Du hittar några av de bästa mockuperna här (alla bilder i det här inlägget är från dessa samlingar):
- 100 + iPhone PSD & Vector Mockups
- 100+ iPad Mockups: PSD, foton och vektorer
- 100+ MacBook PSD & Vector Mockups
- 50+ Apple Watch Mockups & Graphics
- 40+ iMac Mockups: PSD, foton och vektorer
Mockups varierar i pris från gratis till kit med flera versioner i skalbara format som vanligtvis är mindre än 20 dollar.(Många fria versioner ser bra ut men är lämpliga endast för digital visning.) Du kommer mycket att använda från dessa verktyg och genom att använda en gemensam uppsättning mockups kommer förberedelserna att bli en del av ditt arbetsflöde.
iPad Mockups
En vacker iPad mockup kan vara ett utmärkt sätt att visa upp din iPad app, lyhörd webbplats eller gränssnittsdesign. Allt som är utformat för en surfplatta ser bra ut i en iPad-mockup, och den här serien hjälper dig att komma igång. Hitta de bästa iPad-mockupsna för olika modeller och lära dig hur du använder dem!