Share
For denne nye delen av serien "Opprett et sett med digitale malerikoner" vil vi lage en penntablette fra grunnen, spesielt Wacom 12 "Cintiq-tabellen. Denne modellen kombinerer berøring og trykkfølsomhet, noe som gjør at brukere kan tegne direkte på skjermen Disse egenskapene gjør det til en favoritt for illustratorer. La oss komme til å fungere.
Nedenfor er de fem ikonene vi lager i denne serien.
Ta en titt på det ferdige ikonet for denne opplæringen. Vi tegner nettbrettet og styluset med skinnende skjerm, sideknapper og blå LED-statuslampe.
Brann opp Photoshop og opprett et nytt RGB-blank dokument, og velg et 512px x 512px kvadrat lerret. Velg en mørk grå forgrunnsfarge, og velg deretter Rundet rektangelverktøy (U) fra verktøylinjen. I innstillingslinjen øverst på skjermen oppgir du 30px for hjørneradiusen (1a) og deretter Alt-klikk og dra fra midten av lerretet for å opprette hoveddelen av tabletten (1b). Alt-klikker sentreformer, valg og transformasjoner rundt musen. Det er en ganske nyttig hurtigtast, så merk det ned. Når du er fornøyd med formen, høyreklikk på laget og velg Rasterize Layer. Gi det navnet "base".
La oss nå etablere at lyset kommer fra toppen. Dette krever at vi gjør alle oppovervendte flater lettere og alle nedovervendte flater mørkere. Vi vil holde fast ved denne regelen gjennom hele opplæringen.
Tablettens hoveddel ser flat ut. La oss legge til litt belysning ved å velge en lysegrå som forgrunnsfarge og holde det forrige mørkegrået som bakgrunnsfarge (2a). Trykk G for å velge Gradient Tool. Før vi maler graden, la vi imidlertid låse grunnlaget for gjennomsiktigheten ved å klikke på den gjennomsiktige firkanten øverst på paletten Lag (2b). Nå kan vi trygt male over hele nettbrettet fordi vi vil være begrenset til eksisterende piksler. Lakk gradienten med et vertikalt slag, lys til mørkt (2c).
Tablettens overflate er ikke så glatt. Det er et veldig fint korn. For å opprette det, gå til Filter> Støy> Legg til støy og velg 1%, Ensartet og Monokromatisk (3a). Se resultatet (3b). Vi trenger også å gi tabletten litt tykkelse, så dobbeltklikk på "base" -laget for å åpne Lag Style-vinduet og klikk på Bevel and Emboss. Se bilde 3c for innstillingene. Nå har tabletten tykkelse og en mild kurve rundt kantene (3d).
La oss tegne glassflaten. Velg det avrundede rektangelverktøyet (U) igjen, men denne gangen angir du Radius til 10px (4a). Tegn et mindre rektangel i øverste senter og betegn det "glass" (4b). Rasterize den, lås gjennomsiktigheten og fyll den med en vertikal gradient fra et medium til en veldig mørk grå (4c).
Det faktiske aktive området er litt mindre enn glasset og har skarpe kanter. Tegn det med rektangulærverktøyet og gi det en Gradient Overlay-stil, lys til middels grå (5a). Nå er det også på tide å legge til en logo nederst på glasset. Bruk tekstverktøyet (T) og en veldig lysegrå (men ikke hvit) for å legge til din egendefinerte logo (5b).
Glasset er innspilt fra tablettens grunnplastoverflate. Dupliser "glass" laget og navnet på kopien "glassfelt". Sett fyll på til 0% (6a). Lagets faktiske piksler er usynlige, men noen lagstil vi legger til, vil ikke. Det er et pent trick når du bare vil bruke et lags kontur uten å vise innholdet. Det vi ønsker er Bevel og Emboss igjen. Pass på at du velger "Ned" -alternativet, som vil skape en innfellingsskråning (6b). Nå har glasset et hardt, grunt kantinntak fra basen (6c).
For å fullføre skjermen legger vi til et stort reflekterende høydepunkt. Cmd-klikk på "glass" (7a) og fyll deretter et nytt lag med hvitt (7b). Gi det navnet "refleksjon" (7c). Ved hjelp av Polygonal Lasso Tool (L) gjør du et skråt utvalg over høyre side av laget (7d). Legg til valget som en maske (7e) og sett lagets blandingstilstand til skjerm, 20% opacity (7f). Skjermen er ferdig (7g), slik at vi kan gruppere alle relaterte lag nå (7h).
For LED-lampen, velg Ellipseverktøyet (U) og tegne en 7x3 piksel, lyseblå ellipse øverst til venstre på tabletten (8a). Gi det navnet "LED 1", og legg til en Outer Glow (8b) og Inner Glow (8c) lagstil. Vi har nå et fint lysende statuslys (8d).
Dupliser LED-lampen og legg til noen symboler under dem. Gjør din egen eller referer til bilder av selve Cintiq.
På på sideknappene. Først la oss lage berøringsstripen. Velg det samme grå som "basen" laget. Ved å bruke det avrundede rektangelverktøyet (U) med en radius på 2 px tegne en tynn vertikal stripe på glassets venstre side (10a). Stripen er innspill fra hoveddelen, så la oss legge til en kommando og Emboss-stil (10b). Aktiver også konturalternativet (10c). Se resultatet (10d).
Ved siden av berøringslisten er det en annen scalloped-seksjon som inneholder de fire funksjonstastene. Dupliser stripen, flytt den til høyre og utvid den så de fire tastene passer. Gi det navnet "nøkkelstrimmel".
For funksjonstastene velges en lysere grå farge. Tegn toppnøkkelen med rektangulærverktøyet (12a) og betegn det "toppnøkkel". De nøkkelen gir en skygge rundt seg selv. Lag den skyggen med en Outer Glow-stil (12b). De resterende nøklene kan enkelt opprettes ved å duplisere "toppnøkkelen", tilpasse sine proporsjoner og plassere dem på stripen (12c).
Grupper begge stripene og de fem tastene i en gruppe kalt "BUTTONS L." Dupliserer gruppen, navnet på den nye "KNAPPER R", flytt den til høyre for glasset og vri den horisontalt (13a). For å fullføre tabletten la oss legge til en dråpeskygge. På et nytt lag under "basen" tegner en tynn, lang, svart ellipse. Sett den til Multiply, 70% opacity. Gå til Filter> Blur> Gaussian Blur og velg 3px. Resultatet er en myk, naturlig utseende skygge (13b).
Tid til å lage stylus nå. Tegn den høyre halvdelen av pennen med pennverktøyet i formlagsmodus (14a). Opprett den andre halvdelen (14b) og slå sammen de to figurene sammen. Bruk en middels grå som grunnfarge (14c). Gi navnet "pennekroppen" navnet.
La oss legge til hovedhøydepunktet. Dupliser pennelaget og skala det ned horisontalt. Lys det med enten Hue / Saturation (Cmd + U) eller Lysstyrke / Kontrast (15a). Til slutt legg til en 1px Gaussian Blur for å blande den med bunnlaget (15b). Du må kanskje sette høydepunktets blandingstilstand til Skjerm, avhengig av fargene du valgte og resultatet du ønsker. Gi navnet "pennekropp refleksjon".
Ved å bruke det rektangulære markeringsverktøyet (M), velg en tynn, horisontal stripe på "pennelysrefleksjon" -laget halvveis opp til avsmalningsenden. Mørk markeringen (16a). Nå velger du tipset på begge lagene og sletter, etterlater en flat ende (16b).
Legg nibet som et enkelt mørkegrå rektangel (17a) på et lag under "pennekroppen". Viskelæret kan opprettes med en mørk grå ellipse, også på et lag under pennen (17b). Siden viskelæret er avrundet må vi legge til litt fargevariasjon på overflaten. Vi gjør dette med en Gradient Overlay-stil (17c).
Tegn gummigrepet med et avrundet rektangel litt avsmalnet slik at det blusser oppe (18a). Radien skal være veldig liten, ca 3px. Legg til en Gradient Overlay-stil (18b). Gummigrepet vises nå rundt (18c).
La oss tegne sideknappen på pennen. Tegn et mørkt grått rektangel på et nytt lag, hvor du vil tommelen hvis du grep stylusen (19a). Marquee-velg de nederste to tredjedelene (19b), og klikk deretter Cmd + J for å kopiere valget til et nytt lag. Denne siden av knappen vender oppover, derfor må vi lyse den (19c). Trykk Cmd + E for å fusjonere dette ansiktet nedover. Nå må vi bare legge til et ytre glød for å simulere hullet der knappen er satt (19d). Sideknappen er fullført (19e).
Grupper alle lagene som utgjør pennen og navn gruppen "PEN" (20a). Hold lagstrukturen for senere modifikasjoner. Dupliserer gruppen og treffer Cmd + E for å slå sammen alle lagene i ett. På dette punktet kan vi legge til en Drop Shadow (20b) og plassere pennen hvor vi vil. Vi er ferdige (20c).
Jeg håper du har lært et par triks fra denne opplæringen. Kanskje det gjorde at du vil kjøpe en nettbrett! Som alltid med ikondesign, stod vi på vektorformer og lagstiler for å oppnå maksimal effekt og fleksibilitet. Skulle du ønske å bytte farger, tykkelser eller lysretning, kan du alltid gå tilbake til lagstrukturen og foreta nødvendige justeringer. Vi ser deg neste gang for vårt endelige design i denne serien når vi lager et ikon for bybildeskjerm!
Accentsconagua