Eticheta Photoshop pentru design web receptiv

Au trecut aproape cinci ani de când s-a lansat Photoshop Etiquette, ceea ce îl face oficial o relicvă pe web. Se pot întâmpla multe pe web în câțiva ani, iar ultimii cinci au ilustrat acest lucru mai bine decât majoritatea.

În 2011, toată lumea își uda picioarele cu designul web responsive. Fluxul de lucru tradițional comp-to-HTML abia începea să fie criticat și, de atunci, am văzut o multitudine de alternative. Dale de stil, prototipuri de stil, inventare vizuale, colaje de elemente, ghiduri de stil și chiar proiectarea în browser au fost toate abordări potrivite pentru proiectarea pe mai multe dispozitive. Cu trecerea de la designul bazat pe pagini la construirea unui sistem de design, este cu adevărat o perioadă interesantă.

Citiți suplimentare despre SmashingMag:

• Proiectare pentru Retina în Photoshop
• Animații avansate în Photoshop
• Flux de lucru Photoshop Retina Asset
• Generator de puncte de întrerupere a imaginii receptive

A existat, de asemenea, o explozie de instrumente care încearcă să facă un flux de lucru receptiv mai eficient. Aplicații precum Webflow și Macaw au făcut ca vizualizarea punctelor de întrerupere să fie digerabilă pentru cei care au aversión la cod. Mulți designeri au trecut de la Photoshop ca cal de bătaie la Sketch, Affinity Designer sau similar. Alții au adoptat aplicații precum Keynote pentru prototipare.

„Eticheta” este încă relevantă?

Cu alternative la Photoshoppingul greu cu care suntem familiarizați, este corect să ne întrebăm dacă mai avem nevoie de etichetă. De dragul acestui articol, vom defini eticheta ca transferul de fișiere într-un mod organizat, clar și vizibil. Designul receptiv vine de obicei cu o mulțime de piese în mișcare, de la imagini @2x, fișiere CSS concatenate și multe altele. Cu aparent mai multe de făcut pentru a publica un site web, a fi eficient este, fără îndoială, o prioritate mare, dacă vrem să fim profitabili.

Adesea mascate ca eficiență, organizarea și comunicarea slabă sunt produse ale grăbirii de a expedia un proiect. Cu Photoshop asumând diferite roluri în fluxurile noastre de lucru, straturile și fișierele exportate sunt ținte ușoare pentru tăierea colțurilor. Adevarul rămâne: orice merită făcut merită făcut bine.

Dacă vrem să economisim timp, trebuie să investim un pic din timp pentru a rămâne organizați și clari. Ineficiența este moștenirea unui fișier de la un coleg și petrecerea timpului prețios încercând să știe de unde să începi, deoarece nu este etichetat clar. Trebuie să repare imaginile care au fost deja exportate. În cel mai rău caz, nu puteți găsi fișierul de care aveți nevoie în primul rând.

Ce este nou în Photoshop Eticheta?

Photoshop Etiquette a primit un strat nou de vopsea de la Adjacent, un studio de design din Syracuse, NY. Pentru cei care nu cunosc acest concept, Photoshop Etiquette este un ghid de bune practici care promovează eficiența prin claritate în designul web. Deși concepute pentru Photoshop, multe dintre aceste principii se aplică Schiței și instrumentelor de proiectare similare, bazate pe straturi.

Ghidul este împărțit în următoarele secțiuni:

• Organizarea fișierelor
• Structura stratului
• Export de active
• Execuție tip
• Aplicație de efect
• Verificarea calitatii

Cei familiarizați cu site-ul vor vedea o mulțime de îndrumări familiare, cum ar fi sfaturi esențiale precum „Numiți straturile” și „Numiți fișierele cu acuratețe”, fiecare o încercare de a scăpa de practici precum „Copia stratului 5” și „client- final-v3.psd', respectiv. Dacă săpați puțin mai adânc, veți găsi o grămadă de resurse receptive atașate diferitelor linii directoare și câteva sfaturi pentru proiectarea pentru mai multe dispozitive.

1. Consolidează-ți PSD-urile

Dacă faceți mai multe compoziții pentru mai multe pagini, Photoshop are acum tablouri de artă care vă pot ajuta să rămâneți la un singur document. Acest lucru ajută la eliminarea confuziei despre care PSD este PSD-ul potrivit .

2. Lucrați în colaborare

Cu adăugarea Bibliotecilor Creative Cloud și a obiectelor inteligente conectate, designerii pot partaja destul de ușor activele. De exemplu, dacă creați un model sau un ghid de componentă în Photoshop, un designer poate lucra la o componentă, în timp ce un alt designer lucrează simultan la o altă componentă. Aceste componente pot fi partajate într-o bibliotecă sau ca obiecte inteligente conectate care sunt trase într-un PSD principal.

3. Nu proiectați pe dispozitiv

Acest lucru poate fi argumentat, dar dacă design-ul responsiv se referă la îmbrățișarea tuturor dispozitivelor, poate că nu ar trebui să folosim presetări populare ale dispozitivelor Apple ca dimensiuni de document în Photoshop. În schimb, permiteți designului dvs. să dicteze puncte de întrerupere din cauza stresului de aspect, oriunde se încadrează. Excepția este dacă proiectați un dispozitiv sau o aplicație specifică unei platforme, unde vizarea unor astfel de setări prestabilite este utilă.

4. Fii non-distructiv

Odată cu implementarea și suportul în creștere pentru SVG, este important pentru designeri să susțină elementele vectoriale în Photoshop și să nu le aplatizeze. Photoshop vă permite acum să salvați SVG-urile, oferindu-ne încă un motiv pentru a fi nedistructivi cu pixelii noștri.

5. Fiți conștienți de rezoluția ecranului

Vorbind despre SVG, a devenit într-adevăr o abordare excelentă pentru a servi un bun care se poate adapta la orice dimensiune și nu își pierde fidelitatea. A avea un flux de lucru pentru active Retina, fie că este SVG sau imagini @2x/@3x, a devenit parte a fluxului de lucru al unui practician receptiv.

6. Comprimați

Performanța este o cauză demnă, nu numai pentru un dezvoltator, ci și pentru un designer. Am raționalizat adesea că, dacă vreau să includ fonturi web grele și caracteristicile lor Open Type în proiectele mele, va trebui să fac diferența comprimându-mi agresiv imaginile pentru a rămâne în limitele unui buget de performanță. Instrumentele de la terți, cum ar fi TinyPNG, au făcut comprimarea imaginii o ușoară.

Pe măsură ce fluxurile noastre de lucru pentru design web și utilizarea Photoshop continuă să se schimbe, la fel se va schimba și site-ul. Deși include un flux de lucru centrat pe Photoshop, există câteva sfaturi pentru cele în care Photoshop este utilizat cu moderație. Ghidul susține doar că dacă și când utilizați Photoshop, comunicați-vă intenția cât mai clar posibil.

Alimentat de comunitate

Unul dintre obiectivele principale pentru Eticheta Photoshop este creșterea, care se manifestă prin mai multe linii directoare, mai multe resurse și mai multe perspective. A fost adăugată o funcție pe site care oferă acces mai ușor pentru a trimite un nou ghid pentru revizuire, ceva ce sute de designeri și dezvoltatori au făcut de-a lungul anilor, urmărindu-mă pe Twitter sau căutând o adresă de e-mail.

În urma inexactităților Google Translate, există și un apel deschis pentru traduceri din partea voluntarilor comunității.

Este incitant să vedem cum a rezonat Eticheta Photoshop cu atât de multe organizații și persoane. Cum te poate ajuta pe tine și pe echipa ta?