Lag en skinnende låsikondesign

Et populært ikon som du finner på internett er låsikonet. Det er mye brukt til å identifisere sikre websider. Det indikerer ofte passordfelt for sikre filer. Uansett hvor du ønsker å plassere et låsikon, vil denne opplæringen vise deg hvordan du lager en attraktiv en for deg å bruke!

Redaktørens merknad: Denne opplæringen ble opprinnelig publisert på tsjekkisk språk på Grafika Online. Grafika har gitt lov til Vaclav for å publisere her på Psdtuts + for de av oss som ikke har mestret Tsjekkia ...

Endelig bildeforhåndsvisning

Før vi begynner, la oss ta en titt på bildet vi skal skape. Som alltid er den fulle Photoshop-filen tilgjengelig via vårt Psdtuts + Plus-medlemskap.

Trinn 1

La oss starte med et nytt dokument, fylt med en lysegrå farge (# D5D5D5). Velg det avrundede rektangelverktøyet. Tegn deretter den grunnleggende formen på en lås. Sett radien slik du føler det er riktig. Deretter fylles den med en lysegrå farge (#DDDDDD).

Steg 2

La oss legge til den øvre delen. Bruk Ellipseverktøyet til å tegne en sirkel. Velg den med Path Selection Tool, og kopier, lim inn og gjør det litt mindre med (Ctrl + T). Deretter trekker du den minste sirkelen fra den større ved å slå et hull i den.

Trinn 3

Endre verktøyet til rektangelverktøyet, og trykk Alt-tasten (subtraherer) ved å tegne et rektangel som vist nedenfor. Deretter med samme verktøy, men med Shift-tasten trykket (legger til), ferdig venstre og høyre side.

Gjør den venstre enden avrundet ved å tegne en ellipse med Ellipseverktøyet, igjen med Shift-tasten trykket. Hvis du vil gjøre det pikselaktig, må du slå på nettet.

Trinn 4

La oss begynne å legge til noen effekter for å gjøre låsen ser realistisk ut. Vi starter med bunndelen og bruker noen lagseffekter. Lag litt mørkere rundt kantene med den indre skyggeeffekten.

Trinn 5

Noen effekter må gjøres manuelt. La oss legge til en sterk skygge ved å kopiere laget (Ctrl + J). Velg verktøyet Velg vei (A). Velg deretter kopi (Ctrl + C) og sett inn (Ctrl + V). Deretter beveger du noen få piksler oppover og setter avtrekksstilen. Fyll den formen vi nettopp har laget med en mørkegrå farge (# 505050). Skyggen (nederste disposisjon) er ferdig.

Nå lurer du kanskje på hvorfor vi brukte denne teknikken, og brukte ikke bare en indre skyggeeffekt? Vel, det er fordi vi ikke vil at skyggen skal brukes på hele låsen. Derfor legger vi til lagmasken. Plukk opp et penselverktøy (svart myk børste) og tegne midt på en form. Det vil gjøre skyggen mindre synlig og legge litt mer plasticitet til vårt endelige bilde. Som du ser i det siste bildet under, forsvinner skyggen når vi går videre til midten.

Trinn 6

Ok, la oss mørke vår lås mer. Over formlaget (av en nederste del), opprett et nytt lag (Ctrl + Alt + Shift + N). Sett laget som en skjæremaske av forrige lag ved å trykke på (Ctrl + Alt + G). Plukk opp børsteverktøyet (stor myk svart). Still Opacity for å si si 30%. Trekk deretter til venstre og høyre side. Det vil skape myke skygger.

Du kan tegne lettere deler akkurat som du trakk skyggene. Bruk en lys farget pensel med lignende ugjennomtrengelighet. Tegn dem inn i enten nytt eller det samme laget. Følg bildene nedenfor for veiledning.

Trinn 7

La oss lage refleksjoner på toppkanten neste. Velg alle bunnlagene (Ctrl + klikk på laget). Gå til Velg> Endre> Kontrakt. Fyll deretter valget (i et nytt lag) med en hvit farge (Alt + backspace). Flytt valget to piksler ned (bare trykk på nedpilen to ganger). Deretter treffer du Slett-tasten for å slette denne delen av laget. Ikke glem å avmarkere med Ctrl + D!

Trinn 8

Deretter begynner du å definere plastisiteten til en lås ved hjelp av større refleksjoner. Bruk Rectangle Selection Tool til å lage et rektangel i et nytt lag. Tegn en lineær gradient (Gradient Tool) fra hvit til gjennomsiktig.

Trinn 9

Velg en 2-pixel linje øverst med rektanguleringsvalgverktøyet, som vist nedenfor. Så Skew det, som i det andre bildet nedenfor. Slik reflekterer refleksjonen låsens form.

Trinn 10

Akkurat som det, skape refleksjoner på den andre siden, men mye større.

Trinn 11

Vi gjør det større, så det ser ikke ut til å være like. Vi er nesten ferdige med bunnen. Nedenfor er hvordan låsen vår skal se så langt ut.

Trinn 12

Neste legger vi til en stripe! Sett igjen valg et utvalg. Deretter tegner du en gradient i dette valget fra gult (# F5E02F) til oransje (# F3BB2A).

Trinn 13

Deretter velger du Single Row Marquee Tool. Velg deretter den første og siste linjen i det forrige valget (velg begge linjene med Shift trykket).

Bruk et børsteverktøy og en mørk farge for å tilfredsstille dine behov. Slik gjør du forskjellen mellom bakgrunnen og stripen.

Trinn 14

Lag et valg ved å trykke Ctrl-klikk på et nytt lag. Deretter legger du til et nytt mønsterfyll i Lag-menyen. Bruk dette mønsteret, bare skift skala til 50% for å matche ikonstørrelsen. Sett deretter lagestilen til Multiply. Da blir bare svarte striper synlige.

Trinn 15

For å gjøre mønsteret mindre nær kantene, gjør masken større til høyre og på venstre side. Rassteriser deretter laget (Lag> Rasterize> Fyll innhold).

Trinn 16

Deretter smalre ned venstre og høyre side. Klipp ut deler og endre størrelsen etter behov. Dette vil få sidene til å avta og kutte i en vinkel. Dette kan gjøres noen ganger for å maksimere effekten.

Trinn 17

Legg til et annet lag. Tegn litt for å mørke sidene på stripen. Igjen, bruk børsteverktøyet med en svart farge, myk og senket opasitet.

Trinn 18

Den nederste delen av låsen er ferdig, flott! La oss jobbe på den øvre delen. Start med et nytt øverste lag og begynn å fargelegge og definere kantene. Bruk en grå farge (# D5D5D5). Deretter gir den en Inner Glow effekt med 1px størrelse, grå farge # 848484. Det burde gjøre det helt greit. Still blandemodus til Multiply.

Trinn 19

Som vi lærte før, er en viktig del av en metalloverflate refleksjonen. Så la oss lage en refleksjon som bare vil bli brukt på halvparten av den øvre delen. En annen form kan hjelpe oss. Kopier den vi har ved å trykke Ctrl + J og farge den svart så vi ser nøyaktig hvor kantene er. Deretter tar du markeringsverktøyet og bruker det til å velge den indre sirkelen. Så gjør det større med Ctrl + T.

Trinn 20

Over venstre og høyre side tegner du to rektangler med Alt-tastetrykket (subtraksjon).

Trinn 21

Senk opaciteten av denne formen ned til 30%. Opprett et nytt lag mellom dette og den originale formen. Deretter tegner du en lineær gradient fra hvit til gjennomsiktig. Trykk Ctrl + Alt + G (skjær masken til forrige lag) for å gjøre refleksjonen synlig bare på vårt ikon.

Trinn 22

Som på bunnen, vil vi legge til to større refleksjoner her. De må bare formes som formen de er på, så de vil ikke være rektangler, men ellipser. Tegn en ellipse ved hjelp av Ellipse Tool, som i bildet nedenfor.

Trinn 23

Roter det med Ctrl + T omtrent 45 grader.

Trinn 24

Til slutt, bruk Direct Selection Tool (A) for å velge to punkter i midten av ellipsen. Flytt dem så til ellipsen emulerer kurven til den øvre delen av låsen.

Trinn 25

Dupliser dette laget (Ctrl + J). Deretter snu den horisontalt, og flytt den til høyre side.

Trinn 26

Låsen er nesten ferdig. Vi vil bare mørke kantene på enkelte steder, så ikonet er fullstendig skilt fra bakgrunnen.

Først lag et lagvalg av den nedre delen av låsikonet (Ctrl + Klikk på et lag). Lag et nytt lag. Trekk deretter inn i det nye laget. Bruk vår kjente mørke, myke børste til å tegne flekker der du vil gjøre låsen mørkere. Når du er ferdig, gjør valget 1 pixel mindre ved å gå til Velg> Endre> Kontrakt. Deretter treffer du Slett-tasten. Følgende bilde viser scenen like før du sletter.

Trinn 27

Nedenfor er 100% visningen etter sletting. Vi er nesten ferdige.

Trinn 28

Nøyaktig samme teknikk kan brukes til å oppnå et høyt detaljnivå på den øvre delen av en lås. Pilene viser deg hvor du skal mørke.

Trinn 29

Når du bestemmer deg for å sette ikonet inn i ditt design, ikke glem å legge til den grå fargen litt fra en fargestil av bakgrunnen den vil bli plassert på. I det følgende bildet ble mer lilla lagt til for å passe inn i applikasjonsdesignet.

Konklusjon

Og det er alt. Jeg håper du har lært noe nytt. Det endelige bildet er under.