Share
Först, rekvisita till Dan Wiersema (min vän och Creative Director på Guifx) för att vara hjärnan bakom denna handledning. Koncept och wireframe utvecklades båda av honom. Han hjälpte mig också att stryka ut veckorna när det gäller att betygsätta mitt arbete från början till slut.
I den här handledningen skapar vi ett huvudmeny-gränssnitt för ett fiktivt iPhone-spel. Vi kommer att gå igenom konfigurationen av Photoshop för att exakt visa skärmstorlek, konfigurera en trådram för projektet, skapa en bakgrund, skapa en logotyp, skapa stenstruktur för sidofältet och trästruktur för den sparade spelboxen och knapparna . Vi lägger också till att du skapar grönska för detaljer och bra mått. Detta kommer att bli en lång, så tålamod är en dygd. Dessutom hjälper kaffe!
Ta en titt på bilden vi ska skapa.
Gå vidare till pxcalc.com och följ anvisningarna. Genom att göra det här kan du se designen i den slutliga storleken - Den verkliga levnadsstorleken på den faktiska iPhone-skärmen - på din egen dator.
Skapa ett nytt dokument med en 480px bredd med 320px höjd, med en upplösning på 164,83 pixlar / tum. Ställ in färgläget till RGB 8bit.
Jag rekommenderar att du skapar en wireframe för ditt projekt som det i bilden nedan. Det bästa sättet att göra detta är med högerklickning med ditt Zoomverktyg valt och valt utskriftsstorlek. Om du följde steg 1 tittar du nu på ditt dokument i exakt storlek slutanvändaren kommer på sin iPhone. Detta hjälper dig att bestämma hur stor knapparna ska vara för att fungera tillräckligt på en pekskärmsenhet. Obs! Försök fysiskt klicka på skärmen och kom ihåg att ta med tjocka fingrar.
Använd rektangelverktyget och dra ut grova placeringsguider för de olika elementen. Håll färgen på formen vit och lägg till en svart 1px inre stroke. Det är också en bra idé att mocka konceptet med hjälp av penna och papper. Även om du inte är en bra frihandskonstnär (jag är inte, men jag gör det fortfarande), hjälper servettskisser dig att hålla ögonen på priset!
Skapa ett nytt lager och namnge det "Bakgrund." Ange din förgrundsfärg till # 5e1114 och din bakgrund till # 140306. Välj Gradient Tool, och med inställningarna nedan visas dra från topp till botten som pilen indikerar.
Till lagret "Bakgrund" tillämpar du följande lagerformat.
Återställ dina förgrunds- och bakgrundsfärger till svart och samtidigt genom att klicka på D-tangenten på tangentbordet. Skapa ett nytt lager och namnge det "bg_clouds." Gå nu till Filter> Render> Clouds. Ställ in det här lagrets blandningsläge till Överlagring. Dab på det i slumpartade områden med suddgummin, inställd på en 30-50% opacitet med en mjuk borste för att skapa intressanta höjdpunkter. Försök att matcha mitt resultat nedan.
Ladda ner den här bilden från sxc.hu (Tack Javier González). Ring lagret "slott", ändra storlek och placera det ungefär i stadens övre mittpunkt. Ställ in lagrets blandningsläge till Multiplicera och opacitet till 60%. Använd raderverktyget för att radera eventuella hårda kanter. Nedan är mitt resultat efter det här steget.
Okej, så långt så bra. Låt oss börja skapa vår logotyp. Ta tag i ditt pennverktyg och skapa kontur av en drakens huvud. För att göra detta kan du antingen spåra en slumpmässig drakebild, eller skapa din egen. Den här kommer dock att hamna med några tunga lager stil effekter, så försök att hålla formen ganska enkelt.
Det finns ett brett utbud av fria former och dingbats som du kan använda istället, om du inte vill spendera tidspårning eller komma upp med ett drakhuvud. Där det finns en vilja finns det en väg.
Duplicera din form 2 gånger (lager> dubbletter ...), så att du har 3 dragonhead-lager. Namn den understa "dragon_1", den mellersta "dragon_2" och den övre "dragon_3".
Tiden för att få vår drake att lysa. Denna teknik är starkt baserad på Elliot AKA TrueLovePrevails 'handledning om hur man kopierar warcraft-logotypen, så en stor thanx går ut till honom för att utveckla denna fantastiska teknik och för att låta mig använda den. Klicka här för att besöka den ursprungliga handledningen.)
Applicera följande lagerformat till respektive lager, med början av "dragon_1" -laget
Applicera nu följande lagerformat till "dragon_2" och sätt det här lagrets fyllnadsopacitet till 0%.
Och igen till "dragon_3" och sätt det här lagrets fyllnadsopacitet till 0%.
Höger, draken ser bra ut - kolla! Nästa upp är texten.
Gå över till Fontcraft.com och ladda ner eller köp Scurlock. Scurlock är gratis som en demo typsnitt, så se till att läsa användarvillkoren och köp en licens om du vill använda denna typsnitt för kommersiella ändamål.
Välj ditt typverktyg och ställ in storleken till 60pt. Skriv ut texten "Dragon". Högerklicka på laget och välj Convert to Shape. Anledningen till detta är att vi vill ta bort underskriften av "o". För att göra detta använder vi Direct Selection Tool. Aktivera vektormasken genom att klicka på miniatyren och välj alla noder av underlaget och tryck sedan på radera på tangentbordet. Om du inte kan få dem alla på en gång, håll ned Skift för att lägga till i urvalet.
Ta sedan tag i sökvalsverktyget och klicka på "o". Gå till Redigera> Gratis transformera och dra ner den nedre centrala noden så att "o" ser ut som det hör till resten av texten. Kopiera nu laget två gånger, precis som vi gjorde med dragonhead. Nämn lagren från den nedre och uppåt "dragontext_1", respektive "dragontext_2" och dragontext_3 ".
Låt oss gömma lagret "Slott" för nu, eftersom det är av liten betydelse för layouten, och orsakar främst lite distraktion under designen.
Högerklicka på lagret "dragon_1" och välj "kopiera lagstil." Högerklicka på "dragontext_1" -lagret och välj Klistra in Style. Högerklicka på lagret "dragon_2" och välj Copy Layer Style. Högerklicka på "dragontext_2" -lagret och välj Pasta Layer Style. Ändra skugglägesopaciteten under avfasning och prägling till 43%.
Välj "dragontext_3" och ställ in Opacity-fyllningen till 0%. Använd sedan de stilar som visas i bilden nedan. När du är färdig, upprepa steg 9 och 10 för "Storm" -texten (namngivna lagen stormtext_ #) och placera texten grovt som visas nedan.
Kommando-cik vektormask miniatyrbilden av "dragontext_2" -lagret för att ladda valet. Du ser att de marscherande myrorna visas runt din text. Se till att "dragontext_2" är ditt aktiva lager, eftersom det kommer att se till att vi lägger justeringsskiktet som vi ska skapa precis ovanför "dragontext_2".
Klicka nu på Create New Fill eller Adjustment Layer-knappen under din lagpalett. På listan väljer du Färgbalans och tillämpar inställningarna nedan. Därefter klickar du på Kommandot + D för att avmarkera. Gör nu samma för "swordtext_2" -laget.
Detaljer talar för sig själva, så vi kan kasta in lite mer text för extra effekt. Skriv ut "Scroll of the Wicked" med Scurlock font igen, med en storlek på 18,5 pt. För texten "Scroll" och "Wicked" ställer du in textstorleken till 14,5 pt. För "av" texten, använd # C9C9C9 som textfärg och tillämpa följande lagerstilar.
Förhoppningsvis är du fortfarande med mig. Låt oss gå vidare till sidofältet.
Använd din Pen Tool, skapa en blockliknande form som den i bilden nedan. Var kreativ här. Det är inte rätt eller fel när du gör saker så här, så bara kasta en form tillsammans utan att betala för mycket uppmärksamhet på detaljer. Duplicera det här skiktet och ring det översta "sidebar_base". Namn på botten ett "sidebar_perspective." Applicera nu följande lagerstilar Till lagret "sidebar_base".
Nudge "sidebar_perspective" -laget 6px till vänster, högerklicka på det och välj Rasterize Layer.
Ställ in bränningsverktyget med hjälp av inställningarna nedan och måla perspektivkanten - håll ljuskällan från konceptets skiss i åtanke - där ljuset är minst sannolikt att träffa det. Med Dodge Tool, måla de motsatta områdena. När jag gör det för stentexturer, finner jag att det är effektivt att dab istället för stroke, eftersom det här skapar en illusion av en grov yta. Slutligen ge skiktet en droppskugga.
Ladda ner denna penseluppsättning av Lee Richardson. Skapa ett nytt lager ovanför "sidebar_base" och namnge det "sidebar_texture_1." Nu, Kommandoklicka på "sidebar_base" -laget för att ladda formulärvalet. Utan att släppa kommandot trycker du på Skift för att lägga till i urvalet och klicka på "sidebar_perspective" -laget. Nästa Ta tag i borstverktyget och välj den andra borsten i den set som du just laddat ner. Med din förgrundsfärg inställd till svart, klicka en gång inuti urvalet och klicka på Kommando + D på tangentbordet. Ställ in det här lagerets opacitet till 50%.
Ställ in förgrundsfärgen till # 160A02 och skapa ett annat lager. Namn den här - du gissade den - "sidebar_texture_2." Upprepa processen från steg 15, den här gången med den fjärde borsten i uppsättningen. Det är mindre, så du behöver två klick för att täcka hela ytan. Med det här skiktet valt, gå till Filter> Blur> Gaussian Blur. Ställ in den i en radie av 1,5 och klicka sedan på OK. Du borde ha något som bilden nedan.
Låt oss lägga till några imperfektioner på bergytan. Skapa ett nytt lager och namnge det "sprickor". Välj borstverktyget och variera mellan en mastradius på 2px till 5px, hårdhet 60% till 80% och håll borstens opacitet vid 55%. Försök att inte oroa dig för att få det höger. Skiktstilen kommer att göra det mesta av arbetet, och den konstigaste formen kan bli bra. När du är nöjd med sprickorna, använd följande lagerstil och bli ännu lyckligare.
Skapa ännu ett lager, det här ovanför "sprickor" -laget, och kalla det "edge_bumps". Välj blyertsverktyget med en masterdiameter på 1px och dra in vissa felaktigheter i svart färg längs den markerade linjen nedan. sätt skiktets opacitet till 76% och applicera sedan följande skiktstil på skiktet.
Skapa ett nytt lager ovanför "edge_bumps" -laget. Kommando-klicka på "sidebar_perspective" -laget. Ta tag i någon av Photoshops standardstänkborstar och dab här och där nerför kanten, samtidigt som du håller borstens opacitet vid 55%. Kopiera lagstilen från "edge_bumps" -laget och klistra in på det här laget. Ställ lagren Opacity till 55%.
Låt oss fortsätta att skapa träet. Gör en form som den nedan för vår stora trä sparade spelbräda. Ställ in färgen på formen till # 463118. Ring lagret "saved_games_base" och tillämpa följande stilar på den.
Använd ditt pennverktyg, försök att replikera formen du ser nedan och placera den under lagret_games_base. De viktiga kanterna är markerade i rött. Namnge det "saved_games_perspective" och ange färgen på denna form till # 14100D. Applicera också en droppskugga som visas.
Ladda ner den första konsistensen från denna texturuppsättning av cgtextures.com. Släpp det på ditt stadium och ändra storlek / rotera tills du gillar hur det ser ut. Placera det ovan och över lagret "saved_games_base" och byt namn på det "wood_texture_1". Kommandoklicka "saved_games_base", sedan Kommandot + Skift-klicka "saved_games_perspective" för att lägga till valet. Välj "wood_texture_1" och klicka på knappen Lägg till lagmask, som ligger under lagpaletten. Ställ in detta lager blandningsläge till Soft Light.
Duplicera detta lager en gång, namnge det "wood_texture_2", sätt blandningsläget till överlagring och opacitet till 15%.
Upprepa steg 20-22 för knapparna. Försök att variera gradienten en bit och använd reflekterad istället för radiell. För att hålla reda på dina lager kan du lägga till knapplagren till en grupp. Försök att matcha resultaten nedan.
Låt oss lätta upp sakerna lite. välj det översta lagret i dokumentet och klicka på Create New Fill eller Adjustment Layer, precis som vi gjorde i steg 11 för texten. Den här gången väljer du nivåer från listan och drar mittnodet till 1,39, vilket är lite till vänster.
Kommandoklicka på "stormtext_1" -laget, tryck nu på Command-shift och klicka på både "dragontext_1" och "dragon_1" -lagren. Välj miniatyren för nivålager och gå till Redigera> Fyll och fyll i valet med svart. Nu påverkas inte texten och drakehuvudet av nivåskiktet.
Nästa kommer vi att lägga till ett ljusstyrka / kontrastjusteringslager, med samma metod som vi använde för nivåer, inklusive att se till att "Dragon Storm" TEXT ENDAST den här tiden påverkas inte av detta lager genom att maskera ut det. Ställ in ljusstyrkan till 25 och kontrast till 35.
Med ditt rektangelverktyg, ovanför trädet "wood_texture_2", skapar du en fyrkantig form som i bilderna nedan. Namn det här skiktet "inset_rim", duplicera nu det här skiktet och ring det översta "inset_base".
Applicera följande stilar, från och med "inset_rim" och använd en fyllnadsopacitet på 0%.
För "inset_base" använder du samma inställningar och fyllnadsdisplay på 60%.
Kopiera både "inset_rim" och "inset_base" två gånger och placera som visas i nedre delen av bilderna nedan.
Hämta "Livingstone" av PrimaFont från dafont.com. Skriv ut all text som du ser nedan, med #ECDECB som textfärg. Storlek är inte för viktig, bara försök att matcha ungefär vad som visas nedan. Lägg sedan till följande stil på alla dessa textlager.
Ställ in förgrundsfärgen till # 636363 och skapa ett nytt lager under knapparna. Använd ditt borstverktyg inställt på 85% Hårdhet med en masterdiameter på 1px, måla a O form, som i bilden nedan. Se det marscherande antvalet. Kopiera det och placera kopiorna som visas.
Gör ovanstående steg för alla områden i bilden nedan som har kedjor och tillämpa följande stil på alla lager. Det kommer att bli många lager, så använd grupper för att hålla reda på dem.
Låt oss göra "slott" -laget synligt igen. Eftersom vi går in i detaljprojektet i projektet är det trevligt att få en klar bild av vad slutresultatet kommer att bli.
Nu, med hjälp av ditt pennverktyg igen, med svart satt till din förgrundsfärg, skapa en form som den som finns i den sparade spelrutan nedan. Gör det huvudsakligen torget, men klippa hörnen för att ge den en mer intressant form. Ring det här skiktet "tablett". Applicera följande lager stilar:
Använd teckensnittet Livingstone igen genom att skriva ut texten du ser i den sparade spelstenstabellen nedan och tillämpa följande lagerformat. När du är färdig, duplicera hela tabletten och placera den i den andra rutan, som visas på bilden nedan.
Ange din förgrundsfärg till # 2E343A, och med ditt Pen Tool skapar du en liten diamantform (ca 10px med 10px). Detta kommer att bli basen av våra nitar. Nämn skiktet "rivet_inset" och duplicera det två gånger. Nämn den mellanliggande nittskiktet "rivet_base" och den översta "nitten". Lägg till följande stilar respektive som börjar med "rivet_inset".
Applicera nu följande lagerformat till "nittet" -lagret.
Applicera nu följande lagerformat till "nitti-stil" -laget.
Kopiera nu hela niten tre gånger och placera en i varje hörn av den sparade spelboxen, precis som i bilden nedan.
Skapa 4 små cirklar (ungefär 4px med 4px) i basen av den sparade spelrutan, med hjälp av ellipsverktyget och # CCB55A som förgrundsfärg. Dessa blir sidindikatorerna som ofta hittas i iPhone-applikationer. Till de tre första, tillämpa dessa stilar.
Ändra färgen på den fjärde cirkeln till # FFA200 genom att dubbelklicka på miniatyrbilden för formfärg. Använd sedan följande stil.
Tiden att dyka in i det sista och förmodligen det svåraste steget. Detta kan faktiskt vara en hel annan handledning i sig, men jag ska försöka hålla det grundläggande. Jag ska försöka förklara detta till bästa möjliga med hjälp av bilder, men det kommer att bli ett lärande genom att göra erfarenhet för alla som är ny på denna teknik.
Eventuellt kan du också lägga till en oskarp mask till bladet om du vill ha skarpare detaljer. Inställningarna skulle vara i linje med beloppet 50%, Radius 0.5px och tröskelvärdet på 0 nivåer.
Lägg till grön, här och där för att det ska bli mer intressant. Du kan gå ännu längre än jag gjorde och lägga till lite i rutan sparade spel. Tack så mycket för att följa med den här handledningen och jag hoppas du lärde dig några nya tekniker. Nedan är det färdiga resultatet.
Accentsconagua