20 de trucuri Photoshop pentru web designeri

Probabil că fiecare designer de web are propriul set de trucuri Photoshop preferate în mâneci. Din motive întemeiate. Editarea puternică a imaginilor Adobe este un element esențial al lumii designului web. Foarte puține programe de acolo pot rivaliza cu acest software excelent și cu gama sa largă de caracteristici.

Cu toate acestea, în timp ce majoritatea designerilor web își cunosc calea în jurul Photoshop-ului, există întotdeauna mai multe lucruri pe care le puteți învăța. La urma urmei, programul nu este doar puternic, ci și complex. În plus, lucrurile noi sunt adăugate în mod regulat prin actualizări.

Din acest motiv, este o idee bună să continuați să explorați instrumentul dvs. preferat. Pentru a vă ajuta să faceți acest lucru, în acest articol, vom analiza unele dintre cele mai bune trucuri Photoshop de acolo. Lucruri care vă pot îmbunătăți fluxul de lucru, vă pot ușura munca și viața, vă pot economisi timp și vă pot ajuta să proiectați cele mai bune site-uri web posibile.

Sunteți gata să aflați mai multe despre Photoshop? Apoi continuați să citiți.

Trucuri Photoshop pentru a vă transforma într-un expert de proiectare web

Următoarele sfaturi variază de la nivel pentru începători la materiale mai complexe. Fiecare dintre ele este ales pentru a vă ajuta să fiți cel mai bun designer web pe care îl puteți fi.

1. Optimizați-vă spațiul de lucru

Să începem cu elementele de bază. Primul lucru de făcut pentru a vă îmbunătăți fluxul de lucru este să configurați Photoshop într-un mod care să susțină modul în care îl utilizați. La urma urmei, munca devine mai ușoară cu un instrument mai ascuțit.

Din acest motiv, prima noastră oprire este Window> Workspace> Graphic and Web . Alegerea acestei opțiuni va schimba instrumentele disponibile în ceea ce este cel mai probabil să utilizați pentru designul web.

După aceea, treceți la Editare> Preferințe . Aici, una dintre cele mai importante opriri este Unit & Rulers. Indiferent de măsurarea pe care o alegeți aici (cel mai probabil pixeli), va fi valoarea implicită pentru toate documentele viitoare.

(Sugestie rapidă: pentru a schimba riglele pentru documente simple, pur și simplu faceți clic dreapta pe ele și alegeți unitatea de măsurare dorită.)

După aceea, accesați Preferințe> Performanță> Istoric și cache și faceți clic pe Web / UI Design .

Dacă faceți acest lucru, veți schimba setările cache-ului pentru a favoriza fișierele mai mici, cu multe straturi, ceea ce veți lucra în principal.

În același loc, puteți alege și numărul stărilor istorice. Aceasta este cantitatea de pași pe care îi puteți întoarce dacă doriți să anulați ceva.

În cele din urmă, ieșiți din preferințe, închideți toate documentele și apăsați butonul T de pe tastatură. Acest lucru va face ca meniul de fonturi să apară în partea de sus a ecranului. Orice ai seta aici va fi de atunci înainte standard pentru documente noi. Pentru că nimănui nu îi place atât de mult Myriad Pro.

2. Aflați comenzile rapide de la tastatură

Pentru orice program pe care îl utilizați în mod regulat, învățarea comenzilor rapide de la tastatură este, în general, un sfat bun.

De exemplu, folosesc Ctrl + Alt + 2/3 pentru a crea titluri h2 și h3 în timp ce scriu această postare. Este mult mai rapid decât să folosesc bara de instrumente editor pentru aceasta, deoarece nu trebuie să-mi iau mâinile de pe tastatură.

Același lucru este valabil și pentru Photoshop. A ști cum să efectuezi acțiune cu apăsări simple de tastă este infinit mai rapid decât să dai clic pe meniuri.

Vom menționa o grămadă de comenzi rapide de la tastatură în acest articol. Cu toate acestea, recomand și această foaie de trucuri pentru a învăța comenzile rapide la cele mai frecvente operații Photoshop. În afară de aceasta, este, de asemenea, o idee bună să vă faceți un obicei să căutați în comenzile rapide de la tastatură lucrurile pe care le faceți din nou și din nou.

3. Straturi de grup și nume

Când lucrați cu Photoshop, veți lucra cu o mulțime de straturi. Nu numai că majoritatea elementelor primesc propriul strat, dar modificări precum luminozitatea / contrastul sunt adăugate și ca straturi.

Din acest motiv, se poate confunda foarte repede. Din fericire, există o mulțime de opțiuni pentru ao face mai puțin, dintre care două sunt abilitatea de a grupa și a denumi straturi.

Mai întâi, făcând dublu clic pe orice strat, îi puteți schimba numele cu orice doriți.

În acest fel, veți înțelege cu ușurință dacă un strat conține imaginea de fundal, meniul sau bara laterală.

Alternativ, puteți alege, de asemenea, mai multe straturi simultan, fie ținând apăsat Ctrl pentru a alege straturi individuale, fie Shift pentru a marca o gamă de straturi vecine. Ctrl + G apoi le transformă într-un grup.

Alternativ, faceți clic dreapta pe straturi și alegeți opțiunea de grup de acolo. Oricum ar fi, straturile dvs. se organizează mult mai mult. În plus, puteți numi și straturile grupate!

4. Straturi de filtrare

Denumirea și gruparea straturilor este un început bun. Cu toate acestea, atunci când lucrați cu zeci sau chiar sute dintre aceștia, vă puteți confunda cu ușurință.

Pentru aceste cazuri, aveți și opțiunea de a vă filtra straturile. Pentru a face acest lucru, pur și simplu utilizați meniul din partea de sus a meniului Straturi pentru a filtra după tip, nume, efect, culoare și multe altele.

Alternativ, selectați direct un strat folosind instrumentul Mutare , ținând apăsat Ctrl și făcând clic pe un strat sau obiect.

5. Creați o grilă

Imagine de PureSolution / shutterstock.com.

Grila este unul dintre cele mai importante principii în designul web. Acesta aduce ordine în proiectare și vă ajută să vă plasați obiectele. Din acest motiv, are sens doar să creezi o grilă și în Photoshop.

Pentru aceasta, utilizați Vizualizare> Aspect ghid nou . Alternativ, creați ghidaje orizontale și verticale făcând clic pe o riglă și glisând în document. Folosiți Ctrl pentru a muta ghidajele existente.

6. Importați mostre de culoare

Puteți încărca specimene de culoare direct în Photoshop din fișiere HTML, CSS sau SVG. În acest fel, aveți un punct de plecare excelent pentru schema dvs. de culori atunci când lucrați cu materiale existente, cum ar fi un logo.

Pentru a profita de acest truc Photoshop, trebuie doar să deschideți panoul Swatches , să faceți clic pe meniul derulant din colțul din dreapta sus și să alegeți Load Swatches . Navigați acum la fișierul în cauză și deschideți-l pentru a importa noua probă de culoare.

7. Salvați forme personalizate

Mai ales atunci când proiectați mai multe pagini pentru același site sau site-uri web care au un design similar, vă veți găsi folosind aceleași obiecte și forme de mai multe ori. Din acest motiv, este logic să le salvați ca forme personalizate pentru reutilizare rapidă.

Pentru a face acest lucru, faceți clic dreapta pe forma în cauză cu instrumentul de selectare a căii (săgeata neagră). Apoi, alegeți Definire formă personalizată . După ce ați făcut acest lucru, puteți accesa această formă prin intermediul opțiunilor barei de sus a instrumentului Formă personalizată . Doar faceți clic pe meniul derulant unde scrie Formă: și alegeți forma salvată.

8. Comutați între culorile de fundal și culorile prim-plan

Două comută înainte și înapoi între fundal și culoarea din prim-plan fără a face clic pe pictogramă, pur și simplu apăsați X pe tastatură. În plus, dacă doriți ca culorile să revină la alb-negru simplu, puteți face acest lucru apăsând D.

9. Schimbați opacitatea prin tastatură

O altă comandă rapidă de la tastatură: pentru orice instrument care poate schimba opacitatea, puteți face acest lucru pur și simplu prin intermediul tastaturii. Numerele de la 1 la 0 vor seta opacitatea la orice valoare între 10% și 100%. Același lucru funcționează și cu opacitatea straturilor.

10. Desenați linii drepte

Pentru a desena o linie dreaptă cu orice instrument, țineți apăsată tasta Shift . După aceea, puteți trasa o linie (atât pe orizontală, cât și pe verticală) care va fi automată drept ca un cui. Alternativ, faceți clic pe două puncte diferite pentru a crea o linie dreaptă între ele.

11. Culoarea probei

În sacul nostru de trucuri Photoshop urmează abilitatea de a proba orice culoare. Dacă aveți nevoie de culoarea din orice obiect, țineți apăsat butonul Alt și faceți clic pe nuanța dorită. Acest lucru funcționează atât cu Pensula , Creionul , Găleată de vopsea și orice alte instrumente care utilizează culori.

12. Adăugați sau eliminați din selecție

Puteți adăuga la o selecție existentă ținând apăsată tasta și selectând partea pe care doriți să o includeți. Pentru a scădea, faceți același lucru, dar cu butonul Alt .

13. Anulați mai mult de un pas

Modul clasic de a anula ultima acțiune este utilizarea Ctrl + Z. Cu toate acestea, acest lucru funcționează doar pentru ultimul lucru pe care l-ați făcut. Pentru a reveni la mai mulți pași, utilizați Ctrl + Alt + Z.

14. Schimbați dinamic dimensiunea pensulei

Pentru a vă schimba dimensiunea pensulei, nu este nevoie să faceți clic pe meniul derulant și să o trageți la dimensiunea potrivită. În schimb, țineți apăsat Alt și butonul drept al mouse-ului și apoi trageți la stânga și la dreapta pentru a micșora și a mări dimensiunea pensulei.

15. Salvați pentru web

Utilizarea funcției Safe for Web este esențială, deoarece asigură dimensiunea imaginii cât mai mică posibil. Acest lucru este foarte important pentru a îmbunătăți viteza site-ului.

În Photoshop, puteți face acest lucru prin Fișier> Export> Salvare pentru web . Cu toate acestea, o modalitate mai rapidă este de a utiliza Ctrl + Alt + Shift + S. Cu plăcere!

16. Deschideți imaginile ca straturi

Uneori este necesar să importați simultan un număr mare de imagini în Photoshop. Cu toate acestea, atunci când le trageți pur și simplu în spațiul dvs. de lucru, vi se va cere să le plasați manual.

Un mod mai practic de a face acest lucru este Fișier> Scripturi> Încărcare fișiere în stivă . Navigați la imaginile în cauză, marcați-le și apăsați Ok de două ori. Acum, fiecare imagine va fi importată automat în propriul strat.

17. Copiați CSS direct din Photoshop

Unul dintre cele mai confortabile trucuri Photoshop pentru designerii de web este faptul că programul creează CSS pe care îl puteți exporta. Nu este nevoie să tastați totul manual sau să folosiți încercări și erori pentru a-l implementa.

Pentru a profita de acest lucru, faceți clic dreapta pe un strat și alegeți Copiere CSS . Alternativ, utilizați meniul Layer pentru a găsi aceeași opțiune. Acum aveți toate stilurile necesare pentru a lipi pur și simplu în foaia de stil sau în orice alt program pe care îl utilizați.

18. Proiectare pentru mai multe dispozitive și orientări simultan

Proiectarea pentru web în zilele noastre înseamnă proiectarea pentru o multitudine de dispozitive diferite. În vremurile în care dispozitivele mobile eclipsează computerele desktop peste tot în lume, implementarea designului mobil este o necesitate.

Sursa: ComScore

Din fericire, Photoshop are planșe de artă și obiecte inteligente care facilitează scalarea designului în diferite formate.

Aș putea să le descriu amândouă în detaliu aici, totuși, Phlearn a făcut un tutorial excelent despre acest lucru, care face o treabă mult mai bună decât aș putea face vreodată:

19. Utilizați Procesarea automată pentru sarcini repetitive

O altă caracteristică minunată Photoshop este procesarea automată. Înseamnă că puteți repeta sarcini înregistrate de nenumărate ori fără a fi nevoie să le efectuați manual. Acest lucru este foarte util, de exemplu dacă trebuie să salvați o mulțime de imagini pentru web.

Iată cum funcționează. Mai întâi, deschideți fișierul. Apoi, deschideți Acțiuni ( Alt + F9 ), găsiți Creare acțiune nouă și faceți clic pe ea. Furnizați un nume și, opțional, atribuiți-i o combinație de taste și o culoare.

Pentru a înregistra acțiunile, apăsați Înregistrați . Apoi efectuați operația pe care doriți să o repetați. În cazul meu, deschid o imagine dintr-un folder și o salvez pentru web într-un alt folder.

După ce ați terminat, opriți înregistrarea. Acum puteți reutiliza această acțiune pentru toate celelalte imagini, economisind o grămadă de timp. Pentru mai multe informații despre ceea ce puteți automatiza în Photoshop, consultați acest articol.

20. Previzualizare pe dispozitiv

În cele din urmă, împreună cu Photoshop, Adobe oferă și o aplicație care vă permite să vă previzualizați munca pe mai multe dispozitive iOS. Cel mai bun lucru: puteți observa modificările pe dispozitiv pe măsură ce le faceți pe computer.

Pentru aceasta, instalați aplicația și utilizați Previzualizare dispozitiv pentru a conecta Photoshop la un dispozitiv extern prin USB sau wifi. Găsiți opțiunea în Window> Device Preview .

Care sunt trucurile tale preferate de Photoshop?

Photoshop este unul dintre cele mai utilizate instrumente de design web. Caracteristicile sale puternice îl fac perfect pentru proiectarea de site-uri web și materiale de înaltă calitate.

Cu toate acestea, cu o mare putere vine și o mare complexitate și mai ales pentru începători, poate dura ceva timp pentru a stăpâni software-ul.

Pentru a scurta curba de învățare, mai sus am oferit o serie de trucuri utile Photoshop pentru designerii de web. Fac mai multe lucruri mai ușor, de la fluxul de lucru general la procesarea automată a fișierelor.

Cunoașterea Photoshop din interior și din exterior este o investiție excelentă în linia de jos. Când puteți face lucrurile mai repede, puteți prelua mai multă muncă, generând astfel mai multe venituri. Și asta nu poate fi niciodată un lucru rău.

Care sunt câteva dintre trucurile tale preferate de Photoshop? Vă rugăm să ne informați în secțiunea de comentarii de mai jos, astfel încât să ne putem ajuta reciproc.

Imagine în miniatură a articolului Creative Stall / shutterstock.com