Lag en Mobile App ikon i Photoshop

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.

  • Wood Texture


    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.