Share
Først av, rekvisitter til Dan Wiersema (min venn og Creative Director at Guifx) for å være hjernen bak denne opplæringen. Koncept og wireframe ble begge utviklet av ham. Han hjalp meg også med å stryke ut krøllene når det gjelder å rangere arbeidet mitt fra begynnelse til slutt.
I denne opplæringen lager vi et hovedmeny-grensesnitt for et fiktivt iPhone-spill. Vi går gjennom å konfigurere Photoshop for å vise målskjermstørrelsen nøyaktig, sette opp en trådramme for prosjektet, lage en bakgrunn, lage en logo, lage klippestruktur til sidefeltet og tretekstur for den lagrede spillboksen og knappene . Vi legger også til å lage grønt for detaljer og godt mål. Dette kommer til å bli en lang, så tålmodighet er en dyd. Også, kaffe hjelper!
Ta en titt på bildet vi skal skape.
Gå over til pxcalc.com og følg instruksjonene. Å gjøre dette vil tillate deg å se designet i den endelige størrelsen - Den virkelige levestørrelsen til selve iPhone-skjermen - på din egen datamaskin.
Opprett et nytt dokument med en bredde på 480 px med 320 px høyde, med en oppløsning på 164,83 piksler / tommer. Angi fargemodus til RGB 8bit.
Jeg anbefaler å lage en wireframe for prosjektet ditt som det du ser på bildet nedenfor. Den beste måten å gjøre dette på, er å klikke med zoomverktøyet ditt og velg utskriftsstørrelse. Hvis du fulgte trinn 1, vil du nå se på dokumentet ditt med den nøyaktige størrelsen sluttbrukeren vil på sin iPhone. Dette hjelper deg med å bestemme hvor stor knappene skal være for å kunne fungere tilstrekkelig på en berøringsskjerm. Merk: Prøv å fysisk klikke på skjermen, og husk å ta med tykke fingre.
Bruk rektangulærverktøyet og dra ut røffe plasseringsførere for de ulike elementene. Hold fargene på figurene hvite og legg til et svart 1px indre slag. Det er også en god ide å mock konseptet med blyant og papir. Selv om du ikke er en god frihåndskunstner (jeg er ikke, men jeg gjør det fortsatt), hjelper serviettskisser deg med å holde øynene dine på premien!
Opprett et nytt lag og kaller det "Bakgrunn." Sett forgrunnsfargen din til # 5e1114 og bakgrunnen din til # 140306. Velg Gradient Tool, og med innstillingene som er vist nedenfor, drar du fra topp til bunn som pilen indikerer.
Til "Bakgrunn" -laget, bruk følgende lagstiler.
Tilbakestill forgrunnen og bakgrunnsfargene til svart og samtidig ved å klikke på D-tasten på tastaturet. Opprett et nytt lag og kaller det "bg_clouds." Gå nå til Filter> Render> Clouds. Sett dette lagets blandingstilstand til Overlegg. Dab på det i tilfeldige områder med viskelærverktøyet, sett til en 30-50% Opacity med en myk børste for å skape interessante høydepunkter. Prøv å matche resultatet mitt under.
Last ned dette bildet fra sxc.hu (Takk Javier González). Ring laget "slott", endre størrelsen på den og plasser den omtrent i toppen av scenen. Still lagets blandingstilstand til Multiply og Opacity til 60%. Bruk Eraser Tool til å slette eventuelle harde kanter. Nedenfor er resultatet mitt etter dette trinnet.
Ok, så langt så bra. La oss begynne å lage vår logo. Ta tak i pennverktøyet ditt og skaffe omrisset av en dragehodet. For å gjøre dette kan du enten spore et tilfeldig dragebilde, eller lage din egen. Dette vil imidlertid ende opp med noen kraftige lagstileffekter, så prøv å holde formen ganske enkel.
Det finnes et bredt utvalg av gratis former og dingbats du kan bruke i stedet, hvis du ikke vil bruke tidsporing eller komme opp med et dragehode. Der det er vilje er det en vei.
Dupliser din form 2 ganger (lag> duplikat lag ...), slik at du har 3 dragonhead-lag. Navngi den nederste en "dragon_1", den midtre "dragon_2" og den øverste "dragon_3".
Tid for å få vår drage til å skinne. Denne teknikken er sterkt basert på Elliot AKA TrueLovePrevails 'opplæring om hvordan man kopierer warcraft-logostilen, så en stor thanx går ut til ham for å utvikle denne fantastiske teknikken, og for å la meg bruke den. Klikk her for å besøke den opprinnelige opplæringen.)
Bruk følgende lagstiler for hvert lag, begynn med "dragon_1" -laget
Bruk nå følgende lagstiler til "dragon_2" og sett dette lagets fylle Opacity til 0%.
Og igjen til "dragon_3" og sett dette lagets fylle Opacity til 0%.
Høyre, dragen ser bra ut - sjekk! Neste opp er teksten.
Gå over til Fontcraft.com og last ned eller kjøp Scurlock. Scurlock er gratis som en demo font, så sørg for å lese vilkårene for bruk, og kjøp en lisens hvis du vil bruke denne fonten til kommersielle formål.
Velg ditt Typeverktøy og sett størrelsen til 60pt. Skriv ut teksten "Dragon". Høyreklikk på laget og velg Konverter til form. Årsaken til dette er at vi vil fjerne underskriften til "o." For å gjøre dette bruker vi Direct Selection Tool. Aktiver vektormasken ved å klikke på miniatyrbildet og velg alle nodene i understreken, og klikk deretter slett på tastaturet. Hvis du ikke kan få dem alle på en gang, hold nede Skift for å legge til i valget.
Deretter griper du markeringsverktøyet og klikker på "o." Gå til rediger> Gratis transformer og dra ned den nederste senterkoden, slik at "o" ser ut som den tilhører resten av teksten. Dupliserer laget to ganger, akkurat som vi gjorde med dragonhead. Navngi lagene fra henholdsvis nederste og oppover "dragontext_1", "" dragontext_2 "og dragontext_3".
La oss gjemme "slott" -laget for nå, siden det er liten betydning for oppsettet, og det forårsaker hovedsakelig litt distraksjon mens du designer.
Høyreklikk laget "dragon_1" og velg "copy layer style." Høyreklikk på "dragontext_1" -laget og velg Lim inn lagstil. Høyreklikk laget "dragon_2" og velg Copy Layer Style. Høyreklikk "dragontext_2" -laget og velg Lim inn lagstil. Endre skyggemodusens opasitet under skrå og preg til 43%.
Velg "dragontext_3" og sett fyllingsopaciteten til 0%. Bruk deretter stilene som vises i bildet nedenfor. Når du er ferdig, gjenta trinn 9 og 10 for "Storm" -teksten (navngi lagene stormtext_ #) og legg teksten grovt som vist under.
Kommando-kik vektormaske-miniatyrbildet av "dragontext_2" -lag for å laste inn valget. Du ser at marsjemyrene dukker opp rundt teksten din. Pass på at "dragontext_2" er ditt aktive lag, da dette vil sørge for at vi legger justeringslaget vi skal lage rett over "dragontext_2".
Klikk nå på Create New Fill eller Adjustment Layer-knappen som ligger under lagpaletten din. Fra listen velger du Fargebalanse og bruker innstillingene nedenfor. Deretter klikker du på Kommando + D for å fjerne markeringen. Gjør det samme for «swordtext_2» -laget.
Detaljer snakker for seg selv, så vi kan kaste inn litt mer tekst for ekstra effekt. Skriv ut "Scroll of the Wicked" ved hjelp av Scurlock font igjen, med en størrelse på 18,5 pt. For "Scroll" og "Wicked" -teksten, still inn tekststørrelsen til 14,5 pt. For "av" -teksten, bruk # C9C9C9 som tekstfargen og bruk følgende lagstiler.
Forhåpentligvis er du fortsatt med meg. La oss gå videre til sidefeltet.
Bruk pennverktøyet, og opprett en blokklignende form som den i bildet nedenfor. Vær kreativ her. Det er ingen rett eller galt når du lager ting som dette, så bare kaster en form sammen uten å betale for mye oppmerksomhet på detaljer. Dupliser dette laget og ring den øverste en "sidebar_base". Navngi den nederste en "sidebar_perspective." Bruk nå følgende lagstiler til laget "sidebar_base".
Nudge "sidebar_perspective" laget 6px til venstre, høyreklikk det og velg Rasterize Layer.
Sett brennstoffverktøyet opp med innstillingene under, og lakk perspektivets kant - hold lyskilden fra konseptskissen i tankene - der lyset er minst sannsynlig å treffe det. Med Dodge Tool, male de motsatte områdene. Når jeg gjør dette for steinstrukturer, finner jeg at det er effektivt å dabere enn slag, da dette skaper illusjonen av en grov overflate. Til slutt, gi laget en dråpe skygge.
Last ned denne pensel settet av Lee Richardson. Opprett et nytt lag over "sidebar_base" og navngi det "sidebar_texture_1." Nå, Kommandoklikk "sidebar_base" -laget for å laste formevalget. Uten å slippe kommandoen, trykk Skift for å legge til i valget og klikk på "sidebar_perspective" -laget. Neste Ta tak i børsteverktøyet ditt og velg den andre børsten i settet du nettopp lastet ned. Med forgrunnsfargen din satt til svart, klikk en gang inne i valget og trykk på Kommando + D på tastaturet. Sett dette lagets Opacity til 50%.
Sett forgrunnsfargen din til # 160A02 og opprett et nytt lag. Navngi denne - du gjettet det - "sidebar_texture_2." Gjenta prosessen fra trinn 15, denne gangen ved å bruke den fjerde børsten på settet. Det er mindre, så du trenger to klikk for å dekke hele overflaten. Med dette laget valgt, gå til Filter> Uklarhet> Gaussisk uskarphet. Sett den til en radius på 1,5 og klikk deretter OK. Du bør ha noe som bildet nedenfor.
La oss legge til noen ufullkommenheter til fjelloverflaten. Lag et nytt lag og betegn det "sprekker". Velg børsteverktøyet og variere mellom en mesterradius på 2px til 5px, hardhet 60% til 80%, og hold børstenes opacity på 55%. Prøv å ikke bekymre deg for å få det Ikke sant. Lagstilen vil gjøre det meste av arbeidet, og den rareste formen kan vise seg bra. Når du er fornøyd med sprekkene, bruk følgende lagestil og bli enda lykkeligere.
Lag enda et lag, dette over "crack" -laget, og kaller det "edge_bumps". Velg blyantverktøyet med en masterdiameter på 1px og tegne inn noen ufullkommenheter i svart farge langs den uthevede linjen nedenfor. sett lagets Opacity til 76%, og bruk deretter følgende lagstil til laget.
Lag et nytt lag over "edge_bumps" -laget. Kommando-klikk på "sidebar_perspective" -laget. Ta tak i noen av Photoshops standard spatterbørster og dab her og der nedover kanten, samtidig som du holder borstens opasitet på 55%. Kopier lagestilen fra "edge_bumps" -laget og lim inn på dette laget. Still lagene Opacity til 55%.
La oss fortsette å skape treet. Lag en form som den nedenfor for vårt store tre lagrede spillbrett. Still farge på formen til # 463118. Ring laget "saved_games_base" og bruk følgende stiler til det.
Bruk pennverktøyet ditt, prøv å replikere formen du ser nedenfor, og legg den under lagret_games_base-laget. De viktige kantene er uthevet i rødt. Gi det navnet "saved_games_perspective" og sett fargen på denne figuren til # 14100D. Også, bruk en dråpe skygge som vist.
Last ned den første teksten fra denne teksten sett av cgtextures.com. Slipp den på scenen din og endre størrelsen / roter den til du liker hvordan den ser ut. Plasser den over og over laget "saved_games_base" og endre navnet på "wood_texture_1". Kommandoklikk "saved_games_base", deretter Command + Shift-klikk "saved_games_perspective" for å legge til i valget. Velg "wood_texture_1" og klikk på Legg til lagmaske-knappen, som ligger under lagpaletten. Still inn denne lagsmedusjonsmodus til mykt lys.
Dupliser dette laget en gang, navnet "wood_texture_2", sett blandingsmodusen til Overlay og Opacity til 15%.
Gjenta trinnene 20-22 for knappene. Prøv å variere gradienten litt, og bruk reflektert i stedet for radial. For å holde oversikt over lagene dine, vil du kanskje legge til knappelagene i en gruppe. Prøv å matche resultatene som vises nedenfor.
La oss lette opp ting litt. velg det øverste laget av dokumentet, og klikk på Create New Fill eller Adjustment Layer, akkurat som vi gjorde i trinn 11 for teksten. Denne gangen velger du nivåer fra listen, og drar midtkoden til 1,39, som er litt til venstre.
Kommando-klikk på "stormtext_1" -laget, trykk nå Command-shift og klikk både "dragontext_1" og "dragon_1" -lagene. Velg nivået lag miniatur og gå til Rediger> Fyll, og fyll ut valget med svart. Nå blir ikke teksten og dragonhead påvirket av nivålaget.
Deretter skal vi legge til et lysstyrke / kontrastjusteringslag, ved å bruke nøyaktig samme metode vi brukte for nivåer, inkludert å sørge for "Dragon Storm" Kun tekst Denne gangen påvirkes ikke av dette laget ved å maskere det ut. Still Lysstyrken til 25 og Kontrast til 35.
Med rektangelverktøyet ditt over "wood_texture_2" -laget lager du en firkantet form som i bildene nedenfor. Navngi dette laget "inset_rim," dupliser nå dette laget og ring den øverste en "inset_base".
Bruk følgende stiler henholdsvis, begynner med "inset_rim" og bruker en Fill Opacity på 0%.
For "inset_base" bruker du de samme innstillingene og en Fyll Opacity på 60%.
Dupliser både "inset_rim" og "inset_base" to ganger og sett som vist nederst på bildene nedenfor.
Last ned "Livingstone" av PrimaFont fra dafont.com. Skriv ut all teksten du ser nedenfor, ved hjelp av #ECDECB som tekstfargen. Størrelsen er ikke så viktig, bare prøv å matche omtrent det som vises nedenfor. Bruk deretter følgende stil på alle disse tekstlagene.
Sett forgrunnsfargen din til # 636363 og opprett et nytt lag under knappene. Bruk børsteverktøyet til 85% Hardhet med en hoveddiameter på 1px, maling a O form, som i bildet nedenfor. Se marching ant utvalg. Dupliser det, og plasser kopiene som vist.
Gjør det ovennevnte trinnet for alle områdene i bildet under som har kjeder og bruk følgende stil til alle lag. Det kommer til å være mange lag, så bruk grupper til å holde styr på dem.
La oss lage "slott" laget synlig igjen. Siden vi går inn i detaljeringstrinnet i dette prosjektet, er det fint å få en klar oversikt over hva sluttresultatet vil bli.
Nå, bruk pennverktøyet igjen, med svart satt til forgrunnsfargen din, opprett en form som den som er inne i den lagrede spillboksen nedenfor. Gjør det hovedsakelig firkantet, men kutt hjørnene for å gi det en mer interessant form. Ring dette laget "tavle". Bruk følgende lagstiler:
Bruk fonten Livingstone igjen, skriv ut teksten du ser i den lagrede spill-stenttabellen nedenfor, og bruk følgende lagstiler. Når du er ferdig, kopier hele tabletten og legg den i den andre boksen, som vist på bildet nedenfor.
Sett forgrunnsfargen din til # 2E343A, og med Pen Tool gir du en liten diamantform (ca 10px med 10px). Dette kommer til å være basen av våre nagler. Gi navnet "rivet_inset", og dupliser det to ganger. Navngjenn det midterste nitlaget "rivet_base" og den øverste "rivet_style". Legg til følgende stiler henholdsvis, begynner med "rivet_inset."
Bruk nå følgende lagstiler til "rivet_base" -laget.
Bruk nå følgende lagstiler til "rivet_style" -laget.
Nå dupliserer hele nitten tre ganger og plasserer en i hvert hjørne av den lagrede spillboksen, akkurat som i bildet nedenfor.
Opprett 4 små sirkler (ca. 4px ved 4px) ved foten av den lagrede spillboksen, ved hjelp av ellipseverktøyet og # CCB55A som forgrunnsfarge. Disse blir sidetallene som ofte finnes i iPhone-applikasjoner. Til de tre første, bruk disse stilene.
Endre fargen på den fjerde sirkelen til # FFA200 ved å dobbeltklikke på farge miniatyrbildet. Bruk deretter følgende stil.
Tid til å dykke inn i det siste og sannsynligvis det vanskeligste trinnet. Dette kan faktisk være en helt annen opplæring i seg selv, men jeg vil prøve å holde det grunnleggende. Jeg skal prøve å forklare dette til beste av evnen min med bilder, men det blir en læring ved å gjøre erfaring for alle som er ny på denne teknikken.
Eventuelt kan du også legge til en uskarpe maske til bladet hvis du vil ha skarpere detaljer. Innstillingene vil være i tråd med beløp på 50%, radius 0.5px og terskel på 0 nivåer.
Legg til grønt, her og der for å gjøre det ser mer interessant ut. Du kan gå enda lenger enn jeg gjorde, og legge til litt på den lagrede spillboksen også. Tusen takk for at du følger med denne opplæringen, og jeg håper du lærte noen nye teknikker. Nedenfor er det ferdige resultatet.
Accentsconagua