Create en Mobile App ikon i Photoshop
Denne opplæringen er en del av en tredelt serie som forklarer hvordan du kan designe UI elementer for mobile applikasjoner i Photoshop. I denne delen vil vi forklare hvordan å designe et ikon for den mobile enheten startskjerm. La oss komme i gang!
Instruksjons Eiendeler
Følgende eiendeler ble brukt under produksjonen av denne opplæringen.
Trinn 1
Opprett et nytt dokument. I denne opplæringen vil vi være å utforme vår ikonet på 1024x1024 piksler, men føler seg fri til å designe din på 256x256 eller 512x512 piksler.
Trinn 2
Med Avrundet rektangel Tool (U) tegner en form ved hjelp av en rød farge. (Jeg samplet pipetteverktøyet (I) på offisielle PSDTUTS + ikon).
Trinn 3
Med Brush Tool (B) Male et levende lys rød farge for å skape en lys flekk på øvre høyre del av ikonet.
Trinn 4
Legg en svart skygge med Brush Tool. Bruk bildet som referanse.
Trinn 5
Legg til en form som dette på toppen av ikonet med følgende lag stil.
Trinn 6
Kopier og redusere den siste formen med Cmd /Ctrl + T. i et nytt lag, satt som et Clipping Mask (Alt-klikk på delelinjen mellom to lag i lagpaletten), male litt lys rød farge med Brush Tool (B).
Trinn 7
Spesifiser øvre lysene ved hjelp av Brush Tool (B) vekslende lys og mørk rød.
< h2> trinn 8
jeg raffinert den nederste delen bruker samme måte som forrige trinn.
trinn 9
i et eget lag, bruker Rectangular Selection Tool (M) legge to tynne striper og velg blanding modus i Overlay.
Step 10
Lag Rectangular Selection. Fyll den med Gradient Tool (G) innstilt hvitt til gjennomsiktig. Forvrenge lag med Cmd /Ctrl + T og sette lagets overgangsmodus til Overlegg.
Trinn 11
Lag et nytt lag og med Rectangular Selection (M) velge en tynn stripe av piksel. Fyll den med svart og forvrenge lag med Cmd /Ctrl + T for å oppnå et resultat som bildet nedenfor. Plasser lag nær grensen til sentrum kvit. Som du kan se jeg duplisert stripe for høyre side.
Step 12
Spesifiser skyggen med Brush Tool (B) i et nytt lag.
Trinn 13
Legg to Høydepunkter striper. Bruk Step 11 metoden igjen.
Step 14
Litt justering med Brush Tool (B) til sentrum rampelyset og grenser. Jeg gjør en gruppe med midtsjikt og lagt til en lagmaske for å glatte linjene bare litt.
Step 15
Legg til en subtil tekstur til ikonet med filter Noise > Legg Noise, sett blending mode til Soft Light. Prøv å endre lag med Cmd /Ctrl + T.
Step 16
Med den rektangulære formen Tool (U) skape et pluss form og legg til følgende Layer Style.
Step 17
Duplicate pluss form og skifte det litt til bunnen med Move Tool (V). Legg dette Layer Style.
Step 18
Legg til noen refleksjoner med Pen Tool (P). Tegn noen tilfeldige svart form og med en lav lags opasitet.
Step 19
Jeg raffinert grensen av det øvre tverr legge hvite linjer med blyantverktøyet.
Trinn 20
Magic Wand gang. Legg en svart sylinder med dette Layer Style.
Step 21
Legg til en annen hvite figurer på toppen av staven med denne stilen.
Step 22
Og til slutt den siste formen med følgende lag Style.
Step 23
Børsten består av to deler. Først tegner hovedformen med Pen Tool (P). Bruk denne Layer Style.
Trinn 24
Med Brush Tool (B) begynner å male inne børsten med en liten hard børste. Bruk mellomrom anstendighet inne i Brush Panel (F5) for å øke hastigheten på dette trinnet. Prøv å endre børsten farge også.
Trinn 25
Jeg har lagt en bunn skygge og farget med gul den øverste delen med Brush Tool (B) i en ny Layer.
trinn 26
Tegn en sylinderform med Pen Tool (P) Bruk følgende Layer Style.
trinn 27
Plasser tre tekstur i dokumentet og bruke den til forrige Shape som Clipping Mask i overlegg Mode.
Step 28
for metalldelen, trekke et form med denne Layer Style. Jeg raffinert skyggen av denne delen i en ny Layer ved å male noen svart inni.
Step 29
Lag et nytt lag og male røyken ved hjelp av Brush Tool (B) med lilla og gule farger.
Step 30
Tegn en stjerne ved hjelp av Custom Shape Tool. Legg dette Layer Style.
Step 31
Duplicate stjernen form og gjøre det mørkere ved å velge en mørk gul farge. Ordne dette laget bak den forrige. Jeg dupliseres stjernen to ganger og plassert den kopierte rundt staven i forskjellige størrelse.
Step 32
En siste trinnet er å avgrense hele ikonet belysning i et eget lag med Brush Tool (B). Jeg har lagt noen små detaljer til ikonet, som maling dråpe, sparkle, skygger rett og slett bare male dem.
Step 33
Jeg har lagt et blått lys farge mellom objekter med Brush Tool (B) i et nytt lag.
Trinn 34
til slutt lagde jeg en skygge av ikonet, og en tilpasset oransje bakgrunn, i separate lag.
< hr>
Final Bilde
Ekstra Resources
Hvis du er interessert i å få litt hjelp med din app ikon design, har Envato Studio en stor samling av app ikon designere som du kanskje har lyst til å utforske. Du kan også ta en titt på ikoner på Envato Market.