Share
În pașii următori veți afla cum să creați o panglică simplă pe web în Adobe Photoshop. Este o introducere destul de simplă în lucrul cu instrumente vectoriale în Photoshop. În principiu, veți avea nevoie doar de instrumentul Rectangle și de instrumentul Polygon pentru a crea forme de pornire, plus instrumentul Add Anchor Point împreună cu Instrumentul de convertire a punctelor și Instrumentul de selecție directă pentru a adăuga și regla unele puncte de ancorare. Faceți o încercare și veți găsi, de asemenea, câteva sfaturi de bază despre cum să obțineți forme perfecte pentru pixeli.
Deschideți Photoshop și apăsați Control + N pentru a crea un document nou. Introduceți toate datele afișate în imaginea de mai jos și faceți clic pe OK.
Activați Grilă (Vizualizare> Afișare> Grilă) și Glisați la Grilă (Vizualizare> Glisați la> Grilă). Veți avea nevoie de o rețea la fiecare 5px. Accesați Edit> Preferences> Guides, Grid & Slices și focalizați pe secțiunea Grid. Introduceți 5 în caseta Gridline Every și 1 în caseta Subdivision. De asemenea, setați culoarea grila la # a7a7a7. Odată ce ați setat toate aceste proprietăți, faceți clic pe OK. Nu te descuraja de grila asta. Vă va ușura munca mai târziu. De asemenea, trebuie să deschideți panoul Informații (Fereastră> Info) pentru o previzualizare live cu dimensiunea și poziția formelor dvs..
Setați culoarea primului rând la # 5abbff, alegeți instrumentul Rectangle și creați o formă de vector de 195 x 50 px.
Dezactivați grila (Afișați> Afișați> Grilă). Alegeți instrumentul dreptunghi, focalizați pe bara de sus și faceți clic pe pictograma săgeată mică pentru a deschide panoul Opțiuni dreptunghi. Verificați butonul "Dimensiune fixă" și caseta "Snap to Pixels" apoi introduceți 195 în lățimea (caseta W :) și 1 în caseta înălțime (H :). Setați culoarea primului rând la # 656565 și faceți clic pur și simplu în interiorul documentului. Acest lucru va crea un dreptunghi de 195 de 1px. Plasați-o așa cum se arată în prima imagine și asigurați-vă că această nouă formă de vector rămâne selectată. Continuați cu Instrumentul dreptunghi, bifați butonul Adăugați din bara superioară, adăugați un al doilea dreptunghi de 195 de 1px și plasați-l după cum se arată în a doua imagine. Asigurați-vă că există o diferență de 2px între aceste două forme de vector subțiri. Opțiunile Snap to Pixels vă vor ușura munca.
Focalizați pe panoul Straturi și selectați forma realizată în etapa anterioară. Alegeți Instrumentul de selecție directă și selectați toate punctele de ancorare care alcătuiesc această formă a vectorului. Acum, țineți apăsată tasta ALT și SHIFT, apoi faceți clic simplu și glisați pentru a adăuga o copie a căii selectate. Plasați aceste noi căi vectoriale așa cum se arată în a doua imagine. Continuați să focalizați asupra formei vectoriale editate în acest pas, modificați Modul de amestecare la suprapunere, apoi faceți dublu clic pe ea (în panoul Straturi) pentru a deschide fereastra Stil strat. Activați Umbra de Drop și introduceți proprietățile afișate în imaginea următoare.
Duplicați forma vectorului făcută în al doilea pas (CTRL + J). Selectați această copie, aduceți-o în față (SHIFT + CTRL +)), micșorați Fill to 0% și deschideți fereastra Style Layer. Activați acoperirea cu gradient și introduceți proprietățile afișate în imaginea următoare. Numerele albe din imaginea de acoperire cu gradient reprezintă procentajul de locație, în timp ce numerele galbene reprezintă procentajul opacității.
Activați Grilă (Vizualizare> Afișați> Grilă). Setați culoarea primului rând la # 54a5e8, alegeți instrumentul Rectangle și deschideți panoul Opțiuni dreptunghi. Verificați butonul Unconstrained, apoi creați o vectoră de 60 x 50 px și plasați-o după cum se arată în prima imagine. Asigurați-vă că această nouă formă a vectorului este încă selectată, prindeți instrumentul Add Anchor Point și adăugați un nou punct de ancorare, așa cum se arată în a doua imagine. Treceți la instrumentul Convert Point și pur și simplu faceți clic pe acest nou punct de ancorare. În cele din urmă, utilizând Instrumentul de selecție directă, selectați acest nou punct de ancorare și trageți-l cu 30px spre dreapta.
Dezactivați grila (Afișați> Afișați> Grilă). Alegeți instrumentul Rectangle, deschideți panoul Opțiuni dreptunghi, verificați butonul "Dimensiune fixă", apoi introduceți 60 în caseta de lățime (W :) și 1 în caseta înălțime (H :). Setați culoarea prim-planului în negru și faceți clic pur și simplu în interiorul documentului. Selectați dreptunghiul nou creat, plasați-l după cum se arată în prima imagine și asigurați-vă că acesta rămâne selectat. Continuați cu Instrumentul dreptunghi, bifați butonul Adăugați din bara superioară, adăugați un al doilea dreptunghi de 195 de 1px și plasați-l după cum se arată în a doua imagine. Din nou, asigurați-vă că există o diferență de 2px între aceste două căi vectoriale subțiri.
Concentrați-vă pe forma vectorului făcută în etapa anterioară și folosiți din nou tehnica menționată în al patrulea pas pentru a adăuga o copie a căii existente. Plasați copii după cum se arată în prima imagine. Asigurați-vă că această formă a vectorului negru rămâne selectată și activați Gridul (Vizualizare> Afișați> Grilă). Alegeți instrumentul dreptunghi, verificați butonul Intersect din bara superioară și deschideți panoul Opțiuni dreptunghi. Verificați butonul Unconstrained, apoi creați o vectoră de 60 x 50px și plasați-o așa cum se arată în a doua imagine. Nimic nu ar trebui să se schimbe pentru moment. Prindeți instrumentul Add Anchor Point și adăugați un nou punct de ancorare pentru această cale de vector așa cum este prezentat în a treia imagine. Treceți la instrumentul Convert Point și pur și simplu faceți clic pe acest nou punct de ancorare. În cele din urmă, utilizând Instrumentul de selecție directă, selectați acest nou punct de ancorare și trageți-l cu 30px spre dreapta. Deplasați-vă la Layere, deschideți fereastra Layer Style pentru această formă de vector negru și introduceți proprietățile afișate în imaginile următoare.
Duplicați forma vectorului realizată în etapa a șasea (CTRL + J). Selectați această copie, aduceți-o în față (SHIFT + CTRL +)), micșorați Fill to 0% și deschideți fereastra Style Layer. Activați acoperirea cu gradient și introduceți proprietățile afișate în imaginea următoare.
Setați culoarea primului câmp la # e6e6e6, alegeți instrumentul Rectangle, creați o vectoră de 20 x 60px și plasați-o după cum se arată în prima imagine. Asigurați-vă că această nouă formă a vectorului rămâne selectată și treceți la Instrumentul de selecție directă. Selectați punctul de ancorare din partea de jos, stânga și trageți pur și simplu 10px în sus. În final, forma vectorului ar trebui să arate ca în a doua imagine. Concentrați-vă pe panoul Straturi, țineți apăsat CTRL și faceți clic pe forma vectorului făcută în pasul anterior. Aceasta va încărca o simplă selecție în jurul acelei forme. Continuați să focalizați pe panoul Straturi, asigurați-vă că forma vectorului făcută în acest pas este selectată și pur și simplu faceți clic pe butonul "Adăugați stratul de mască". În final, forma vectorului mascat ar trebui să arate ca în a patra imagine. Scoateți această selecție (CTRL + D) și concentrați asupra acestei forme de vector mascate. Coborâți-l la 0%, apoi deschideți fereastra Style Layer. Asigurați-vă că bifați caseta "Effect Mask Layer Hidden", apoi activați Drop Shadow și introduceți proprietățile afișate în imaginea următoare.
Alegeți instrumentul Rectangle, creați o formă de vector de 20 de 10 pixeli și plasați-o după cum se arată în prima imagine. Asigurați-vă că această nouă formă a vectorului rămâne selectată, treceți la instrumentul Delete Anchor Point și faceți clic pur și simplu pe punctul de ancorare din partea de jos, stânga. În final, forma vectorului ar trebui să arate ca în a doua imagine. Focalizați pe panoul Straturi, deschideți fereastra Style Layer pentru acest triunghi mic și introduceți proprietățile prezentate în imaginile următoare.
Selectați cele cinci forme de vector realizate în ultimii șase pași și grupați-i (CTRL + G). Treceți la panoul Straturi, faceți clic dreapta pe acest grup și mergeți la Grupul duplicat. Selectați grupul nou creat și mergeți la Edit> Transform> Flip Horizontal. Trageți această copie de grup pe 215px spre dreapta și asigurați-vă că este așezată așa cum se arată în a treia imagine. Reveniți la panoul Straturi și concentrați asupra formelor vectoriale din interiorul celui de-al doilea grup. Deschideți fereastra Style Layer pentru formele vectoriale cu efectul Overlay Gradient și forma vectorului mascat cu efectul Drop Shadow și pur și simplu editați unghiurile așa cum se arată în imaginea următoare.
Dezactivați grila (Afișați> Afișați> Grilă). Alegeți instrumentul de poligon, focalizați pe bara superioară, introduceți 5 în caseta "Sides" și faceți clic pe săgeata mică pentru a deschide fereastra Opțiuni poligon. Setați raza la 8px, bifați caseta Star și introduceți 45 în caseta Indent. Setați culoarea prim planului la # 1569af și pur și simplu faceți clic în interiorul documentului pentru a obține forma dvs. de stea mică. Faceți o copie a acestei forme noi (CTRL + J) apoi plasați aceste stele mici așa cum se arată în prima imagine. Deschideți fereastra Style Layer pentru aceste noi forme vectoriale și introduceți proprietățile afișate în imaginile următoare.
Setați culoarea primului rând la # e6f5ff, alegeți Instrumentul de tip și adăugați textul.
Activați Grilă (Vizualizare> Afișați> Grilă). Setați culoarea primului câmp la # e6e6e6, alegeți Instrumentul dreptunghi, creați o formă de vector de 195 x 50px și plasați-o după cum se arată în prima imagine. Asigurați-vă că această nouă formă rămâne selectată și continuați cu instrumentul Rectangle. Verificați butonul Adăugați din bara superioară și adăugați o vectoră de 60 x 50 pixeli, așa cum se arată în a doua imagine. Concentrați-vă pe partea stângă a acestei noi forme vectoriale, prindeți instrumentul Add Anchor Point și adăugați un nou punct de ancorare, așa cum se arată în a treia imagine. Treceți la instrumentul Convert Point și pur și simplu faceți clic pe acest nou punct de ancorare. În cele din urmă, utilizând Instrumentul de selecție directă, selectați noul punct de ancorare și trageți-l cu 30px spre dreapta. În final, forma dvs. de vector ar trebui să arate ca în a patra imagine.
Selectați forma vectorului făcută în etapa anterioară și apucați Instrumentul dreptunghiular. Verificați butonul Adăugați din bara superioară și adăugați o vectoră de 60 x 50 pixeli așa cum este prezentat în prima imagine. Focalizați pe partea dreaptă a acestei noi forme de vectori, apucați instrumentul Add Anchor Point și adăugați un nou punct de ancorare, așa cum se arată în a doua imagine. Treceți la instrumentul Convert Point și pur și simplu faceți clic pe acest nou punct de ancorare. În sfârșit, utilizând Instrumentul de selecție directă, selectați noul punct de ancorare și trageți-l cu 30px spre stânga. În final, forma dvs. de vector ar trebui să arate ca în a treia imagine. Asigurați-vă că acesta este încă selectat, trimiteți-l înapoi (SHIFT + CTRL + [), micșorați-l la 0%, apoi deschideți fereastra Stil strat și introduceți proprietățile afișate în imaginea următoare.
Duplicați forma vectorială editată în pasul anterior (CTRL + J). Deschideți fereastra Layer Style pentru această copie și editați proprietățile utilizate pentru Shadow Drop după cum se arată în imaginea următoare. Faceți clic pe OK și ați terminat.
Acum munca ta sa terminat. Iată cum ar trebui să arate. Sper că v-ați bucurat de acest tutorial și puteți aplica aceste tehnici în proiectele viitoare.
Accentsconagua