Cum se creează o pictogramă Moka Express

Capsula oricărui mic dejun italian este o cafea espresso de origine, preparată cu o cutie iconică "Moka Express". În acest tutorial, vom crea un Moka în întregime de la zero utilizând forme, efecte de strat și o grămadă de sfaturi de creștere a productivității. Apoi vom trece la transformarea design-ului nostru într-o pictogramă profesională Leopard și Vista-ready. Așa că pregătiți cani de cafea și începeți să beți!

Imagine finală a imaginii

Acest tutorial este destinat utilizatorilor intermediari Photoshop, prin urmare, comanda de interfață și cunoștințele de comenzi rapide de la tastatură sunt necesare. Uitați-vă la imaginea de mai jos pentru a vedea cum va arăta pictograma finită.

Pasul 1

Înainte de a începe începeți să luăm apă cu vasul nostru de cafea. Citiți totul despre aceasta, apoi aruncați o privire la imaginea următoare. Acesta este propriul meu iubit Moka Express fără de care nu am putut începe o zi. Arată complicat, dar într-adevăr nu este.

Putem vedea că Moka este alcătuit din: un rezervor octogonal de fund, cu o supapă pe o parte, o cameră octogonală cu șuruburi, cu un cioc pentru turnarea cafelei și o bază inelară, un capac acoperit de un buton și mâner conectat la balama capacului. Există două materiale aici: plastic negru pentru buton și mâner și aluminiu pentru corp.

Pasul 2

Să începem de la inel. Creați un nou document RGB gol și setați dimensiunea acestuia la 512 pixeli cu 512 de pixeli, rezoluția maximă a pictogramelor OS X Leopard.

De-a lungul tutorialului utilizați straturi de fundal alb, gri și întuneric pentru a vă ajuta să vedeți mai bine opera de artă. Să ne pregătim documentul. Apăsați D pentru a activa culorile implicite negre (prim plan) și alb (fundal). Din meniul Vizualizare, activați Rulers (Command + R) și Snap (Command + Shift + Colon). Suntem gata să plecăm.

Folosind instrumentul Ellipse și cu ajutorul unor ghidaje, trageți două elipse pe două straturi separate. Faceți elipsă inferioară negru și denumiți stratul acesteia "de jos". Asigurați-vă ca elipsa de sus este albă și denumiți stratul acesteia "de bază".

Pasul 3

Cu instrumentul Margine rectangulară (M), faceți o selecție în centrul ghidurilor de pe stratul "de jos", apoi apăsați Alt + Backspace pentru al umple cu culoarea prim-planului negru (vezi imaginea 3a).

Apăsați Command + D pentru a deselecta toate. În timp ce se află încă în stratul "de jos", faceți clic pe miniatura elipsei albe de pe stratul "bază" pentru a selecta conturul acesteia, apoi apăsați Delete pentru a șterge această selecție din elipsa neagră (fig.3b).

Opriți stratul "bază" pentru a vedea rezultatul (fig.3c). Ștergeți cele două triunghiuri din partea de sus, închizându-le cu o selecție dreptunghiulară, apoi ștergând conținutul. Avem acum un semnal de inel (fig 3d). Redenumiți acest strat pentru a "suna".

Pasul 4

Acum, să adăugăm câteva materiale. Pentru a simula reflecțiile de mediu asupra aluminiului, adăugați un stil de acoperire cu gradient în stratul "inel". Creați un gradient linear orizontal cu mai multe variante de culoare. Încercați să sugerați nuanțe ușoare ținând în același timp aproape un mediu de culoare gri. De asemenea, faceți bricheta din dreapta să indice direcția luminii. Vedeți imaginea pentru detalii.

Pasul 5

Aluminiule arata destul de bine, dar dorim sa-i dam o textura periabila pentru ao face mai realista. Pe un nou strat creați un dreptunghi alb cu proporții similare cu inelul (fig.5a). Acum rotiți-l cu 90 de grade, deci este în poziție verticală. Utilizați Free Transform Tool (Command + T) pentru a roti și mențineți Shift apăsat pentru a fixa unghiuri drepte (fig.5b).

Asigurați-vă că ați activat culorile alb-negru implicite și mergeți la Filter> Render> Fibers și ajustați setările până când obțineți multe dungi subțiri cu doar o mică variație (fig.5c). Acum vedeți motivul pentru care a trebuit să rotim dreptunghiul: filtrul a creat fibre verticale, dar avem nevoie ca ele să fie orizontale.

Acum, rotiți dreptunghiul cu 90 de grade înapoi în poziția orizontală inițială. Denumiți acest strat "brushed_alu" și schimbați modul de amestecare pe ecran. Aceasta va ascunde părțile negre, lăsând strălucitoare linii strălucitoare să strălucească (fig.5d).

Pasul 6

Acum trebuie să răsuciți textura periată astfel încât să se potrivească cu inelul nostru. Setați opacitatea stratului la 25%, astfel încât soneria să fie vizibilă. Încă o dată invocați Free Transform Tool (Command + T), faceți clic dreapta și selectați Warp (fig.6a).

Va apărea o rețea. Trageți manual mânerele și punctele interioare pentru a face plasa să se potrivească cu inelul. Încercați să păstrați o distanțare uniformă între liniile de plasă, astfel încât stratul să se deformeze corect (fig.6b).

Faceți clic pe butonul "Inel", apoi utilizați această selecție pentru a masca stratul "brushed_alu" sau pur și simplu inversați această selecție (Command + Shift + I), apoi apăsați Del pentru a scăpa de toți pixelii extra. Ce frumos textura subtilă (fig.6c)! Vom repeta această tehnică de fiecare dată când vrem să obținem aspectul periat.

Pasul 7

Întoarceți din nou stratul "bază". Mutați-l sub stratul "inel" și duplicați-l apăsând Command + J. Scalați noua elipsă în jos și mutați-o puțin. Faceți acest strat negru (Alt + Backspace) și rasterizați-l. Aplicați un filtru Gaussian Blur (Filtru> Blur> Blur Gaussian) cu un rază de 5px. Aceasta va fi umbra inelului.

Pasul 8

Cu inelul și umbra lui în loc, să trecem la rezervor. Duplicați stratul "de bază", mutați-l în jos și micșorați-l (fig.8a). Denumiți acest strat "de fund".

Configurați o grilă de ghiduri pentru a defini dimensiunea și poziția rezervorului. Utilizați întotdeauna funcția Snap pentru a vă ajuta să scalați și să mutați elementele în locația lor potrivită. Cu grilă în loc, alegeți Pen Tool (P) în modul strat-formă și desenați fața frontală a octogonului (fig.8b). Faceți-i orice culoare doriți, o vom schimba curând. Denumiți acest strat "centru".

Pasul 9

Duplicați stratul "centru" pentru a crea fața în dreapta. Mutați-o și ajustați-o cu Instrumentul de transformare liberă (Command + T), alternativ selectând Distort și Șchiop, făcând clic dreapta pentru a corecta perspectiva. Denumiți acest strat "drept".

Duplicați și oglindiți-o, denumiți-o "stânga" și mutați-o în stânga stratului "centru". Tot ce trebuie să faceți acum este să adăugați cele două fețe extreme utilizând aceeași tehnică descrisă aici. Denumiți aceste straturi "la dreapta" și "la stânga".

Pasul 10

Să dăm rezervorului ceva textura. Mai întâi adăugați fiecărui chip un strat de strat de acoperire cu gradient, apoi folosiți tehnica învățată în pașii 5 și 6, adăugați un strat de aluminiu periat chiar deasupra acestuia. Utilizați gradienți liniari de la gri până la mediu gri, rotiți pentru a se alinia cu perspectiva.

Aluminiu este destul de reflectorizant, prin urmare, culoarea sa este profund afectată de mediul înconjurător. Vor fi obiecte luminoase și întunecate provenind din mai multe direcții, astfel încât să nu faceți ca pantele să meargă la fel. O metodă bună de a da un sentiment de adâncime este de a face un contrast puternic între două fețe adiacente, după cum puteți vedea în imaginea de mai jos, în cazul în care un gri cu adevărat întunecat se întâlnește cu unul foarte luminos. De asemenea, rețineți că stratul de aluminiu periat este distorsionat astfel încât liniile să curgă cu perspectiva.

Pasul 11

Deplasați stratul "de bază" sub straturile rezervorului și completați spațiul cu alb. La fel ca și înainte, adăugați un strat de strat cu strat de gradient și un strat de aluminiu periat. Aveți grijă să potriviți direcția luminii: colțul din dreapta jos trebuie să fie luminos în timp ce partea stângă sus ar trebui să fie întunecată. Această consistență va da realism icoanelor noastre. De asemenea, rețineți modul în care stratul "de fund" a fost întunecat.

Pasul 12

În lumea reală, nici o margine nu este perfect ascuțită. Există întotdeauna o bandă subțire de material care va prinde evidențiază unde se întâlnesc fețele. Deci, din motive de realism, să adăugăm această atingere îngustă. Duplicați fața "centrală", redenumiți-o "evidențiați" și reduceți valoarea acesteia la 0%. Aceasta va ascunde conținutul stratului, păstrând în același timp stilurile straturilor vizibile.

Adăugați un stil strat de Stroke utilizând acești parametri: Culoarea albului, Dimensiunea 1px, Poziția exterioară și Opacitatea de 30%. Apoi adăugați un stil de strălucire exterioară: modul de amestecare normal, culoarea albă, opacitatea de 50% și dimensiunea de 5px (a se vedea imaginea). Repetați acest proces pentru fețele "stânga" și "dreapta".

Pasul 13

Cele mai importante nu vor rula întreaga înălțime a rezervorului, așa că trebuie să ascundem fundul. Puneți cele trei straturi de evidențiere într-un nou grup de straturi denumit "evidențiere".

Selectați grupul și apăsați Command + E pentru a fuziona: veți avea acum un strat ("highlight") și stilurile straturilor vor fi coapte. Hit Q pentru a intra în Quick Mask și cu un soft, rotund, negru peria vopsea partea de jos a marginilor.

Utilizați Opacitate 100% în partea inferioară și descreșteți-o treptat, pe măsură ce vă mișcați în sus marginile pentru a face o selecție treptată. Când loviți din nou Q, părțile vopsite vor fi mascate de o selecție inversă. Utilizați-l pentru a masca stratul, aplicând eventual masca atunci când sunteți mulțumit de rezultate.

Pasul 14

Să construim acum camera de sus. Creați o nouă elipsă pe partea superioară a inelului (fig.14a). Aceasta va fi baza camerei. Acum trageți partea dreaptă spre dreapta a octogonului, la fel ca în pasul 8. Setați ghidajele, activați Snap și utilizați instrumentul Pen (P) în modul strat-formă (fig. 14b). Duplicați acest strat, răsuciți-l orizontal și plasați-l lângă primul (fig.14c).

Adăugați Suprapuneri de gradient (fig.14d) și textura din aluminiu periat (fig.14e). Construiți cele mai exterioare fețe și le texturăți în același mod (fig.14f). Denumiți aceste straturi, respectiv "dreapta", "stânga", "din dreapta" și "din stânga".

Pasul 15

Să adăugăm și niște margini fine în partea superioară. Utilizați aceeași tehnică explicată în pașii 12 și 13, dar de această dată dați un Stroke Negru straturilor "stânga" și "stânga" și un Accident alb la straturile "drepte" și "drepte". Acest lucru se datorează faptului că am subliniat anterior partea dreaptă a rezervorului, amintiți-vă?

Pasul 16

Pentru a păstra lucrurile organizate, grupați toate straturile cu nume semnificative precum "BASE", "RING" și "TOP". Duplicați grupul "TOP" și răsuciți-l vertical (fig.16a). Scalați-o vertical doar puțin. Cu ajutorul prietenilor noștri de culoare albastră (ghizi), trageți un octogon alb în spațiul dintre cele două topuri (fig.16b). Aruncați partea superioară top deoarece nu mai avem nevoie de ea.

Pasul 17

Duplicați octogonul alb și faceți-l negru (figura 17a). Umpleți golurile la colțurile octogonului alb (zonele încovoiate din figura 17b). Faceți selecții dreptunghiulare pe octogul alb și întunecați-le puțin pentru a simula reflexiile pe grosimea capacului (vezi dreptunghiul din figura 17b). Amintiți-vă să păstrați bricheta din dreapta. Acum avem un capac subțire frumos. Desenați o elipsă albă ușor deasupra centrului capacului. Acesta va fi baza butonului din plastic (fig. 17b).

Pasul 18

Acum trageți partea superioară a capacului. Utilizând instrumentul Pen (P), desenați patru triunghiuri (fig.18a), apoi copiați-le și le răsuciți în cealaltă parte. Adăugați Suprapuneri de gradient (fig.18b) și textura periat (fig.18c). Capacul este acum complet.

Pasul 19

Pentru ca butonul să copieze elipsa mică, măriți-o și dați-i un stil de acoperire cu gradient (fig.19a). Trageți un trapez pe partea dreaptă (fig.19b), oglindiți-l în partea stângă. Rasterizati ambele straturi apoi imbinati-le intr-unul. Dați acestui strat o suprapunere orizontală de gradient pentru a face să pară rotundă (fig.19c).

Pasul 20

Acum, să lămurim cu butonul. Duplicați elipsei superioare, setați valoarea acesteia la 0% și dați-i un Accident alb (fig.20a). Puneți acest strat într-un grup și îmbinați-l. Acum introduceți Masca rapidă și pictați piesele de care nu avem nevoie (fig.20b). Ieșiți din modul Mască rapidă, transformați selecția într-o mască și aplicați-o (faceți clic dreapta pe mască și alegeți Aplicare mască). Adăugați doar un pic de Gaussian Blur și ați terminat (fig.20c)!

Pasul 21

Acum, hai să adăugăm niște sculping pe buton. Desenați o formă ovală de-a lungul mijlocului (fig.21a) și dați-i o umbra interioară (fig.21b) și un accident vascular cerebral (fig.21c). Duplicați acest strat de două ori (figura 21d). Acum puneți toate aceste straturi într-un nou grup numit "KNOB".

Pasul 22

Să adăugăm o reflecție. Duplicați grupul "KNOB" și îmbinați grupul "KNOB copy" rezultat. Împingeți-l vertical și mutați-l în spatele și sub butuc (fig.22a). În Masca rapidă, faceți o selecție de gradient (fig.22b) și folosiți-o pentru a masca stratul. Setați Modul de amestecare pe Pin Light și opacitatea la 50%.

Pasul 23

Acum, la cioc. Desenați o serie de forme și adăugați suprapuneri de gradient la fel ca în imaginea de mai jos. În cele din urmă, adăugați o textura periată tuturor părților, așa cum am învățat mai devreme. Pune toate aceste straturi în grupul "BEAK".

Pasul 24

Urmați un proces similar pentru a desena balama. Observați că cercul mic ( butuc) are un accident vascular cerebral închis la culoare. Pune aceste straturi într-un nou grup numit "HINGE".

Pasul 25

Pentru a desena mânerul creați un nou strat de formă neagră (fig.25a). Ajustați calea până când sunteți mulțumit de ea, apoi rasterizați-o. Acum, alegeți Color Dodge Tool (O), alegeți o perie rotundă semi-transparentă și moale și pictați cu atenție cele mai importante elemente de pe partea superioară a mânerului și în jos pentru a simula lumina de fundal (fig.25b), apoi rafinați culminarea de sus pentru a face este mai proeminent (fig.25c).

Mânerul are și o scoică. Desenați-o cu un strat de formă și dați-i o albă subțire albă interioară, setând Modul de amestecare la Normal și jucând cu opacitatea până când sunteți mulțumit (fig.25d). Mânerul este terminat!

Pasul 26

Acum, pentru ultimul pas, să punem supapa. Mai întâi să tragem șurubul. Faceți un strat de formă și culoarea acestuia este gri medie, faceți o copie mai ușoară și mutați-o lângă prima (fig.26a).

Adăugați formele rămase și acoperiți-le cu gradienți pentru a le arăta rotunjite (fig.26b-26e). În cele din urmă, puneți toate piesele într-un nou grup denumit "VALVE", rotiți-l și plasați-l în partea laterală a rezervorului (fig.26f). Au fost efectuate!

Concluzie

Băiatul a fost îndelung rănit! A meritat, totuși, nu crezi? Acum, că Moka Express este făcut, tot ce trebuie să facem este să-l diminuăm până la 256px (pentru Vista), 128px (pentru aplicațiile de andocare), 48px, 32px și 16px (pentru diferitele vizualizări de pictograme / și importați toate dimensiunile în software-ul nostru preferat de editare a pictogramelor. Sper că te-ai distrat și ai învățat multe tehnici utile în timpul acestui tur de forță. Acum du-te prepara câteva icoane ale tale!