Introducere

Adesea, atunci când lucrăm ca dezvoltator web, trebuie să integrăm șabloane. Pot fi de la Photoshop sau de la alte programe software. În acest articol, vom arunca o privire asupra elementelor de bază ale Photoshop pentru dezvoltatorii web.

Acest conținut a fost inițial scris pentru un atelier pentru DAMDigital Londra.

Adobe Photoshop este un software de editare grafică raster, adică este un program care permite utilizatorilor să creeze și să editeze imagini.

Photoshop 101 o introducere pentru dezvoltatorii web
Imagine sursă

A fost lansat în 1988 și a devenit standardul industrial pentru software-ul grafic.

Puteți descărca o versiune de încercare gratuită a Photoshop de pe Site-ul Adobe.

Spațiu de lucru

Spațiul de lucru Photoshop este modular, deci îl puteți adapta în funcție de munca pe care o faceți. Unele spații de lucru implicite sunt deja configurate în Photoshop. În acest articol, folosesc Graphic and Web unu. Pentru a trece la acest spațiu de lucru, accesați Window/workspace/Graphic and Web.

Să aruncăm o privire asupra spațiului nostru de lucru:

1612048390 540 Photoshop 101 o introducere pentru dezvoltatorii web
Photoshop
  • A – Bara de meniu: Aici veți găsi cele mai multe opțiuni Photoshop.
  • B – Bara de opțiuni: Această bară vă va oferi toate opțiunile pentru instrumentul selectat în prezent.
  • C – Cutie de instrumente: Acest panou conține toate instrumentele disponibile de la Photoshop. Instrumentele conexe sunt grupate împreună și puteți face clic lung pe unul dintre ele pentru a vedea toate instrumentele.
  • D – Panouri: Este zona în care aveți panourile de bază deschise, cum ar fi Layers, History, și așa mai departe. Pentru a deschide un panou, accesați Window/(Panel that you want to open)

Creați un fișier nou

Când creați un fișier nou în Photoshop, trebuie mai întâi să știți pentru ce mediu va fi utilizat designul – adică, va fi folosit pentru un ecran (web, film sau video) sau pentru tipărire?

În funcție de răspunsul la această întrebare, va trebui să modificați valoarea PPI (pixeli pe inch).

Pixeli per inch (PPI) este o măsurătoare utilizată pentru a defini rezoluția unui ecran de computer. Această valoare evaluează calitatea imaginii / imaginii pe care un anumit dispozitiv de calcul sau afișaj de ieșire este capabil să o afișeze. Pixeli pe inch este, de asemenea, cunoscut sub numele de densitatea pixelilor. Techopedia

Pentru imprimare, în mod normal aveți nevoie de 300PPI, dar depinde de fapt de imprimantă și de dimensiunea documentului tipărit. Ar trebui să vă schimbați culoarea și în CMYK, dar din nou asta depinde de modul în care imprimați documentul. Dacă doriți să aflați mai multe despre culorile RGB și CMYK, consultați acest lucru articol.

Pentru ecrane și web?, Aveți nevoie de culoare 72PPI și RGB. Apoi, trebuie să specificați dimensiunea ecranului. Aș recomanda proiectarea mai întâi pentru mobil, apoi pentru tabletă și desktop.

Ca dezvoltator web, este posibil să nu fie nevoie să creați un fișier nou. Șansele sunt că va trebui să lucrați cu un design furnizat de web designeri.

Acum ne vom uita la un existent .psdșablon și lucrați cu acesta pentru a arunca o privire în jurul Photoshop-ului.

Puteți descărca și deschide acest lucru Șablon PSD din Luis Costa.

Straturi

Una dintre caracteristicile de bază ale Photoshop este straturi. Straturile sunt ca un teanc de foi și puteți vedea prin zone transparente sau zone cu opacitate redusă (parțial transparentă).

Puteți deschide panoul de straturi în Window/Layers.

1612048390 630 Photoshop 101 o introducere pentru dezvoltatorii web

Stratul superior din acest panou va fi plasat peste toate celelalte straturi de dedesubt. Straturile pot fi organizate și în dosare. Este important să denumiți corect straturile și folderele. Acest lucru va ajuta în timpul integrării.

Lângă fiecare folder și strat, aveți o pictogramă ochi. Acest lucru vă permite să comutați vizibilitatea acestora.

PSD-ul dvs. ar putea avea o mulțime de straturi și documente. O modalitate de a găsi rapid un strat este să selectați move tool (v). Faceți clic dreapta pe pânza unde doriți să găsiți stratul. Veți obține toate straturile din zona în care ați făcut clic dreapta. Făcând clic pe unul, acesta va selecta acest strat în panoul dvs. de straturi.

Photoshop 101 o introducere pentru dezvoltatorii web

Trusa de scule

Photoshop vine cu o mulțime de instrumente. Vă voi arăta câteva utile care vă vor ajuta?

În primul rând, dacă pur și simplu instalați Photoshop CC 2018, va trebui să restaurați toate instrumentele. Deci du-te la Edit > Toolbara și faceți clic pe butonul Restore Defaults.

1612048391 393 Photoshop 101 o introducere pentru dezvoltatorii web
Imagine de la Adobe

Vom vedea câteva dintre cele mai utile instrumente pe care le-ați folosi pentru a integra un șablon:

A – Instrumente de selecție

  • Mișcare: Permite utilizatorului să deplaseze un strat în jurul pânzei. După cum am văzut mai devreme, poate fi folosit și pentru a găsi un strat dacă faceți clic dreapta pe pânză.
  • Carpă dreptunghiulară: Acest instrument este utilizat pentru a selecta o zonă a pânzei de copiat și lipit, completați-o și așa mai departe. Poate fi folosit și pentru măsurare. Când selectarea este finalizată, puteți găsi dimensiunea zonei selectate în Window/Info. S-ar putea să fie nevoie să schimbați unitatea implicită în Photoshop Edit/preferences/general/Unit & Rulers apoi setați unitățile la pixeli.
1612048391 935 Photoshop 101 o introducere pentru dezvoltatorii web

B – Instrumente de tăiere și tăiere

  • A decupa: Acest instrument poate … decupa o imagine?. În setările instrumentului (Bara de opțiuni), puteți seta un raport de aspect pe care doriți să îl păstrați.

C – Instrumente de măsurare

  • Picurator: Pipeta vă permite să obțineți rapid o referință de culoare în design. Doar faceți clic unde doriți culoarea. Apoi, în partea de jos a casetei de instrumente, culoarea din prim-plan se va schimba la culoarea selectată. Dacă faceți clic pe culoarea din prim-plan, va deschide fișierul color picker window. De acolo puteți obține valoarea culorii dvs.
  • Color Sampler: Când vă integrați designul, poate fi necesar să selectați mai multe culori. Vom folosi din nou fereastra de informații Window/Info. Acest instrument ne permite să creăm un eșantionator de culori. Doar faceți clic pe zona imaginii din care doriți să obțineți culorile. Veți obține fiecare culoare în panoul de informații. Puteți schimba tipul de culoare în web făcând clic pe pictograma Pipetă de sub număr.
1612048392 556 Photoshop 101 o introducere pentru dezvoltatorii web
  • Rigla: vă ajută să vă măsurați șablonul. Toate informațiile vor apărea în fereastra dvs. de informații. Menţine Shiftatunci când măsurați, astfel încât rigla dvs. rămâne dreaptă. De asemenea, puteți obține unghiuri.

G – Instrument de navigare

  • Mână: Acest instrument vă ajută să vă deplasați pe pânză. Puteți accesa acest instrument oricând ținând bara de spațiu și trăgându-l cu mouse-ul.
  • Zoom: Vă permite să măriți și să micșorați (puteți Ctrl + +, sau Ctrl + - de asemenea).

Ghiduri

După cum ați fi observat la deschiderea fișierului nostru PSD, avem câteva linii verzi pe șablonul nostru. Sunt ghizi. Acestea sunt practic ajutoare care vă vor ajuta să construiți sau să măsurați lucruri în jurul pânzei.

Puteți muta ghidurile existente folosind move tool(v).

Pentru a crea noi ghiduri, va trebui să vă deschideți rigla: View/Ruler sau Ctrl + R. Rigla va apărea în spațiul dvs. de lucru. Apoi, de pe riglă, puteți trage un nou ghid în pânza dvs.

Pentru a elimina un ghid, utilizați move tool(v) și puneți ghidul înapoi în riglă.

Pentru a ascunde și a afișa toate ghidurile tale, poți doar să le folosești Ctrl + H, sau du-te la View/Extras.

Obiecte inteligente

Ce sunt obiectele inteligente?

Obiectele inteligente sunt straturi care conțin date de imagine din imagini raster sau vectoriale, cum ar fi fișiere Photoshop sau Illustrator. Obiectele inteligente păstrează conținutul sursă al unei imagini cu toate caracteristicile sale originale, permițându-vă să efectuați o editare nedistructivă a stratului. Chirpici

Obiectele inteligente pot fi recunoscute în straturile dvs. atunci când au următoarea pictogramă în miniaturi:

1612048392 88 Photoshop 101 o introducere pentru dezvoltatorii web

Obiectele inteligente sunt cu adevărat la îndemână dacă lucrați cu imagini de tip vector (SVG, EPS, AI), dar sunt utile și cu alte fișiere raster complexe.

Să încercăm să importăm un obiect inteligent în PSD-ul nostru. Descărcați un fișier SVG din flaticon. Pentru a importa SVG-ul nostru în pânza noastră, trebuie doar să trageți fișierul în pânză. Acum putem edita SVG în ilustrator sau în orice alt software vector, făcând dublu clic pe miniatură sau pe obiectul nostru inteligent. Modificările vor apărea în PSD-ul nostru.

Cu toate acestea, obiectele inteligente pot face mult mai mult decât atât. Dacă doriți să aflați mai multe despre ele, verificați 10 lucruri pe care trebuie să le știți despre obiectele inteligente din Photoshop.

Active de export

În primul rând, doar un memento că Photoshop este un raster software, nu un vector software. Aceasta înseamnă că „nu putem” exporta fișiere SVG din Photoshop. Pentru a face acest lucru, va trebui să exportați astfel de fișiere din Illustrator sau Inkscape, de exemplu.

Pe web, dorim să avem fișiere de imagine ușoare. Pentru fotografie, am folosi un comprimat .jpg fişier. Dacă aveți nevoie să utilizați transparența (canalul Alpha), vom folosi .png fişier. Pentru o imagine animată, am folosi un .gif. Dacă aveți nevoie de o imagine vectorială (pictograme, de exemplu), cel mai bun este să exportați fișierul ca .svg. Dacă doriți să aveți mai multe informații despre toate fișierele disponibile în Photoshop, puteți verifica „formate de fișiere” pe site-ul web Adobe.

Exportați pânza noastră

Pentru a exporta pânza, urmați acești pași:

  1. Mergi la File/Export/Save for Web
  2. Alegeți formatul fișierului
  3. Alegeți dimensiunea imaginii
  4. Alege calitatea
  5. salva

Exportați numai un material din pânză

Probabil va trebui să exportați unele active ale șablonului dvs.

Să exportăm săgeata stângă în caruselul produsului:

1612048392 876 Photoshop 101 o introducere pentru dezvoltatorii web

Folosind instrumentul de mutare, vom găsi stratul nostru. Faceți clic dreapta pe săgeată și selectați stratul Arrow Left. Acum, faceți clic dreapta pe acest strat din panoul de straturi. Selectați export as și selectați tipul de fișier de care aveți nevoie.

De asemenea, putem exporta foldere.

Acțiuni

Ce este o acțiune în Photoshop?

O acțiune este o serie de sarcini pe care le redați pe un singur fișier sau un lot de fișiere – comenzi de meniu, opțiuni de panou, acțiuni ale instrumentului și așa mai departe. De exemplu, puteți crea o acțiune care modifică dimensiunea unei imagini, aplică un efect imaginii și apoi salvează fișierul în formatul dorit. Chirpici

Această caracteristică este foarte convenabilă dacă doriți să redimensionați un lot de imagini pentru web!

Să creăm o nouă acțiune pentru a decupa o imagine și să o exportăm:

  1. Descărcați o grămadă de imagini de la https://unsplash.com/
  2. Deschideți una dintre aceste imagini
  3. Deschide Actions panou, Window/Actions,
  4. Creați o nouă acțiune făcând clic pe pictogramă Creați o nouă acțiune (Cel din stânga pictogramei coșului). Să numim această acțiune Export pentru web – numele clientului.
  5. Acum înregistrăm acțiunea noastră. Butonul de înregistrare va fi roșu și puteți opri înregistrarea făcând clic pe pictograma de oprire (pictograma pătrată din stânga) /
  6. Selectați pictograma decupare și setați raportul la 1×1 și decupați imaginea /
  7. Acum vrem să ne exportăm imaginea, File/Export/Save for Web, Selectați JPG, calitate 50% și lățime 500 px.
  8. Faceți clic pe Salvați și alegeți folderul de destinație.
  9. Închideți imaginea fără a o salva.
  10. Pentru a opri înregistrarea, faceți clic pe pictograma stop (pictogramă pătrată din stânga).

Acum avem acțiunea noastră, astfel încât să putem deschide o imagine și să ne „jucăm” acțiunea făcând clic pe butonul de redare.

Dacă dorim să aplicăm acțiunea noastră unui lot de imagini, trebuie doar să urmați acești pași:

  1. Mergi la File/Automate/Batch
  2. Selectează Source pliant.
  3. Selectați acțiunea noastră
  4. Click pe Ok

Și voilà! Toate imaginile dvs. se află în dosarul de export.

Sper că v-a plăcut această mică introducere Photoshop 101 pentru dezvoltatori web? Dacă doriți să aveți o versiune 102, spuneți-mi ce ați dori să știți sau să citiți mai multe?