Share
Web-ul a suferit modificări serioase în ultimii ani, iar modul în care este proiectat webul se schimbă odată cu acesta. Photoshop poate fi în continuare instrumentul "go-to" pentru mulți designeri web, dar pentru unii, Photoshop nu mai este rege. În acest articol, Ian Yates, Editor al Webdesigntuts + va explica modul în care Photoshop a fost folosit în trecut, cum poate fi folosit în viitor și de ce.
Din punct de vedere tehnic, Photoshop este o aplicație de manipulare a imaginilor (iartă-mă pentru că este evidentă acolo), dar este, de asemenea, ambalată cu instrumente pentru construirea graficii de la zero. Forma, vectorul, tipul, umpluturile și efectele, toate acestea (și mai mult) se dau foarte bine la construirea de machete grafice.
Nu cu mult timp în urmă, browserele web au fost incapabile să genereze în mod direct aceste tipuri de efecte, însă ar putea afișa perfect imaginile bitmap. Pentru a explora designul grafic într-un browser, a fost doar logic să ajungi la Photoshop, să-ți creezi imaginile, să le salvezi ca imagini și să le folosești într-o pagină Web.
Gradienți, umbre, modele, unghiuri; toate ușor de a crea cu instrumente Photoshop - nu prea ușor de a crea cu orice altceva.
Clădirea pentru web a fost, de asemenea, relativ complexă (mult mai puțin raționalizată decât în zilele noastre), astfel încât batjocurarea unui aspect în Photoshop a fost întotdeauna mai ușoară și mai rapidă decât lupta cu Dreamweaver. De ce nu ați proiecta într-o aplicație grafică, obțineți aprobarea de la client, atunci de fapt, construi pentru web? Designerii de astăzi au crescut folosind Photoshop pentru că au oferit cel mai rapid mod de a vizualiza un concept de design de înaltă fidelitate.
kuhboom.com: Desenele web cu o textură densă vă vor ajuta să ajungeți la instrumentul de slice. Înapoi atunci când web-ul a fost un mediu în curs de dezvoltare nu au existat "agenții web", astfel încât sarcina de a realiza aceasta a căzut pentru a imprima designeri. Acești tipi au făcut ceea ce era logic; ei și-au luat experiența, valorile, tehnicile, procesele și instrumentele de imprimare digitală, apoi le-au aplicat în această lume nouă curajoasă. Acestea au transferat efectiv designul de imprimare pe ecran, astfel încât fluxul de lucru a existat deja:
Tot ce avea nevoie să modifice era rezultatul final. Ca atare, Photoshop a fost martor la schimbari si a mers la drum, intorcandu-se in continuare ca cel mai bun prieten al designer-ului grafic.
Times sunt o schimbare (așa cum a spus Bob Dylan). Web-ul este un loc diferit în aceste zile, iar rolul Photoshop în procesul de proiectare pentru acea rețea se schimbă. De ce?
O mare parte a problemei constă în progresele tehnologice care au condus la schimbări uriașe în designul web în ultimii ani. Am văzut internetul crescând de la o bibliotecă de documente statice la un grup interactiv de servicii și aplicații. Furnizorii de rețele și-au extins degetele în aproape fiecare colț al globului, lățimea de bandă și viteza au crescut la nivele asemănătoare științei. Dispozitivele cu acces la Internet, cum ar fi telefoanele inteligente, tabletele, chiar și ceasurile, sunt fabricate în mod accesibil și rapid. Toate acestea au revoluționat modul în care folosim internetul - și ne-a modificat drastic percepția asupra modului în care ar trebui să proiectăm pentru el.
Designerii de imprimare încep cu constrângeri (dimensiunile fixe ale unei pagini), apoi proiectând în ele. Când a fost proiectat prima dată pentru web, acesta a fost, de asemenea, un punct de plecare logic; stabili o pânză fixă și lucrați spre interior. Pentru a afla care ar trebui să fie dimensiunile fixe, designerii au trebuit să facă presupuneri despre dimensiunile ecranului utilizatorilor finali. Foarte devreme la 800x600px a fost cea mai comună. Mai târziu, 1024x800px a fost norma. Lucrul la o rețea de 960 pixeli a avut sens deoarece se potrivea majorității ecranelor (ecranele mai mari erau rare, proprietarii de ecrane mai mici ar fi trebuit să facă upgrade ulterior) și a fost divizibil cu o gamă de lățimi de coloane.
Aceste ipoteze au fost greșite atunci (forțând un utilizator să se adapteze al lor navigând la ta design ?!) și sunt chiar mai mult în aceste zile. Cât de mare este astăzi o pagină web?
De la Brad Frost's Acesta este Web În mai 2010, un chap numit Ethan Marcotte a scris despre o idee strălucită pe care o concepuse. Folosind tehnologiile și metodele existente, el a propus o abordare "Responsive Web Design" care folosește layouts fluide (nu sunt fixe), imagini flexibile (care cresc și se micșorează cu aspectul) și CSS Media Queries (care permit modificarea aspectului în funcție de dimensiunea ecranului și alti factori).
Cu aceste idei, web-ul sa schimbat, ireversibil.
Datorită conceptelor lui Ethan, designerii web au ajuns să-și dea seama că ar trebui să se gândească din partea lui conținut exterior, Nu margini ale paginii spre interior (deși trebuie remarcat faptul că această abordare nu este obligatorie). Nu știm cât de mare este o pagină web, așa că trebuie să proiectăm conținutul nostru pentru a se încadra în limitele cu care se confruntă. Gândiți-vă că conținutul web este ca și cum ar fi lichid; capabile să fie turnate în toate vasele.
Aici există o problemă pentru Photoshop. Photoshop în mod inerent funcționează la limitele fixe. Formele, tipul și obiectele din cadrul planurilor sale sunt fixe, în timp ce paginile web nu sunt tot mai multe. Producerea unui comp pentru prezentarea unui client a fost realizată rapid în Photoshop, dar cum puteți prezenta în mod eficient un aspect fluid ca o imagine statică?
Următorul Web prezentat de mediaqueri.es Tipografia este un alt exemplu excelent de designeri de imprimare care încearcă să forțeze constrângerile asupra utilizatorilor finali. Browserul fiecărui utilizator îi oferă posibilitatea de a seta dimensiunea standard a tipului; la urma urmei, unii oameni preferă litere mai mici, în timp ce alții ar putea prefera o experiență mai ușoară de citire cu un tip mai mare. În mod prestabilit, browserele stabilesc de obicei tip la 16 pixeli, deci dacă un designer nu afirmă altfel sau un utilizator modifică implicit, este vorba despre copia mare a corpului.
Designerii de imprimare au totuși dificultăți reale în renunțarea la acest control. "Cum poți lăsa utilizatorul să definească dimensiunea tipului ?! Ai idee ce va face asta cu restul aspectului ?!"
Blocarea dimensiunii fontului într-un design web (prin CSS) va face mult drum în prevenirea oricăror lucruri imprevizibile, dar nu este ușor de utilizat. Aceste zile, este considerată cea mai bună practică de a mări elemente de pagină și de tipografie folosind ems in loc de pixeli; relative de măsurare care se bazează pe dimensiunea implicită a fontului. Prin urmare, dacă se întâmplă ca un browser să aibă o altă dimensiune implicită a fontului, întregul design se poate flexa ca răspuns la acesta.
Această flexibilitate subliniază, din nou, limitările de proiectare a componentelor statice în Photoshop.
Navigatorii se dezvoltă foarte repede în aceste zile, iar imaginile nu mai sunt necesare pentru multe efecte pe web. CSS este capabil să producă gradienți exacți, curbe, obiecte înclinate, umbre, transparență alfa (lista continuă) și acest lucru este la fel de bine dat fiind zorii ecranelor Retina. Retina afișează (sau mai precis: ecrane cu densitate mare de pixeli) au aruncat într-adevăr un chei în lucrările pentru designerii web. Ecranele retinei au de două ori mai mulți pixeli decât ecranele normale, permițându-le luxul de a face totul extrem de ascuțit. Orice pixel-based, cu toate acestea, este pur și simplu suflat de două ori mai larg, de două ori mai mare, rezultând o calitate relativ mai scăzută.
Pentru ca site-urile să-și păstreze claritatea, designerii trebuie să se bazeze cât mai mult posibil pe ceea ce browserul se poate face. De fapt, tendința recentă către "designul plat" este (în parte) o reacție la acest design web bazat exclusiv pe CSS.
Toate acestea necesită o parte enormă din ceea ce face Photoshop (care produce bitmapuri) din ecuație.
Designmodo's Flat UI kit După cum am menționat, web-ul a devenit cu adevărat global datorită răspândirii dispozitivelor mobile. Ne-a forțat să înțelegem că nu putem cunoaște circumstanțele în care accesăm conținutul nostru. Nu știm dacă utilizatorul nostru este așezat pe canapea cu un Kindle, parapanta cu un iPhone sau care rulează prin deșertul Gobi cu un MacBook Pro. Nu știm cât de mare este ecranul lor, ce este procesorul lor și, în mod egal, nu putem să presupunem cât de repede este legătura lor.
Începem să realizăm că performanța este o parte fundamentală a proiectării pentru web. Din nou, imaginile joacă un rol în acest sens. Fiecare element individual (fie ea o imagine, un script, un document, orice altceva) care este tras de la un server web este costisitor.
În loc să păstrez fișiere precum imagini și fonturi într-un dosar denumit "active", voi redenumi directorul "pasive".
- Jeremy Keith (@adactio) 18 februarie 2013
Nu numai că ar trebui să fie optimizate pentru a fi cât mai mici posibil, dar ar trebui să fie la fel de puțini pe cat posibil. Navigatorii sunt limitați la valoarea activelor pe care le pot utiliza simultan descărcați, de multe ori la doar două la un moment dat. Dacă pagina dvs. web conține sute de imagini individuale, acestea vor crea o strangulare, generând în final o experiență negativă pentru utilizatorul final.
Acest lucru poate fi ajutat, prin combinarea fișierelor imagine în sprite singur, dar (din nou) ecranele retinei vigoare un fel de plan de backup.
În schimb, efectele sunt mai bine realizate cu CSS, pictogramele pot fi încorporate prin intermediul fonturilor web, iar logoul poate fi implementat ca grafică vectorială scalabilă, toate vrăjind sfârșitul pentru instrumentul de slice.
Înapoi atunci când fluxul de lucru al web designerului a fost efectiv la fel ca imprimarea cu internetul atașat la final, proiectarea de layouts în Photoshop a fost o parte integrantă a procesului:
Aceste zile, cu mai puțin din rezultatul final bazat pe activele construite într-o aplicație grafică, proiectarea unui layout întreg în Photoshop înseamnă în mod eficient dublarea eforturilor. Construiți-o o dată pentru a obține o idee despre cum va arăta, apoi ao construi pentru adevărat. Apoi aruncați PSD departe pentru că nu este deloc util nimănui.
Adobe a rezistat fie schimbării, fie pur și simplu a încercat să se găsească, atunci când a introdus câteva caracteristici de design web în CS6. Panoul de ieșire CSS de tip CSSHat vă permite să preluați codul din elementele de pagină create vizual. De asemenea, au făcut posibilă inserarea unei culori hex (copiate din browser), inclusiv hashtag (de exemplu, #ffffff) în selectorul de culori Photoshop fără a se arunca o eroare.
Stilurile de paragrafe (un pic ca în InDesign) au fost introduse pentru a oferi un control mai global asupra tipografiei. Lorem Ipsum și-a găsit drumul ca o caracteristică standard și acum puteți alege chiar și dimensiunile comune ale dispozitivului ca presetări de documente!
Dar ne negăm aici - în colțul camerei este un elefant albastru mare.
Ceea ce privim de fapt aici nu este o aplicație care nu se potrivește cu designul web, ci cu un flux de lucru care nu mai este potrivit. De fapt, chiar înainte ca site-ul să fie complet fluid și sănătos, au existat defecte fundamentale în procesul de proiectare web al Photoshop-ului așa cum l-am descris. A existat o tendință de a crea imagini cu pixeli perfecte ale paginilor web înainte ca construcția să înceapă chiar. Și apoi, din cauza obsesiei de a obține totul 100% perfect în Photoshop, ar exista un fanatism similar pentru a obține rezultate identice în toate browserele. Ne-a luat mult timp să înțelegem că paginile web nu trebuie să apară identice în toate browserele!
O problemă serioasă cu scopul de a perfecționa în Photoshop apare atunci când clientul se implică. Acest flux de lucru face foarte ușor să se blocheze într-o buclă infinită de clienți, făcând sugestii de împingere a pixelilor, pierzând în mod inevitabil imaginea de ansamblu.
Ceea ce este necesar este o abordare mai modulară a designului web și Photoshop poate juca un rol în acest sens. Luați în considerare mai întâi stadiul de planificare; colectarea de informații și conținut, schițarea relațiilor dintre zonele site-ului ca un întreg - o parte crucială a acestui proces modular, dar cel mai bine realizat departe de Photoshop.
Îmbinarea prin cablu face procesul în continuare; stabilirea elementelor de interfață rudimentară, stabilirea relațiilor vizuale, ierarhia și interacțiunea de bază. Din nou, aceasta nu este o sarcină pe care Photoshop o face foarte bine, făcând loc pentru aplicații precum Omnigraffle și Balsamiq, chiar și Illustrator (și multe altele).
Photoshop se oferă mult mai bine esteticii. Nu poate descrie planurile fluide, dar poate explora culori, texturi, stiluri individuale de elemente, tipografie, atmosferă și dispoziție. Style Tiles este un concept sugerat de Samantha Warren. Acestea sunt, în esență, plăci de animație Photoshop, dar evidențiază o modalitate de izolare și prezentare a fazei estetice clientului.
Următorul modul din acest flux de lucru este prototipul; construirea de planuri de bază, dar funcționale pentru browser. Și nu, nu este nici ceașcă de ceai din Photoshop. De fapt, Adobe lucrează intens la o linie alternativă de aplicații pentru a ajuta aici. Instrumentele lor de margine urmăresc să ofere o interfață familiară de panza, care se transmite cu ușurință pentru browser; ideal pentru prototipuri rapide, dar încă foarte mult o lucrare în desfășurare.
Fiecare dintre aceste etape modulare ia un aspect al procesului de proiectare, o izolează și implică foarte mult clientul, oferindu-le o mulțime de ocazii de a semna pe fiecare etapă fără a afecta ceilalți.
Rețineți că acesta este un flux de lucru sugerat, nimic nu este scris în piatră în cazul în care este vorba de design și este de multe ori mai mult implicat decât aceste etape generale. Ceea ce mă duce la punctul meu de închidere.
Orice proces de proiectare este extrem de personal și ceea ce funcționează pentru altcineva nu va funcționa neapărat pentru dvs. Există o mulțime de oameni care solicită încetarea designului web în Photoshop, campanie pentru un flux de lucru bazat pe browser. De fapt, dacă Photoshop funcționează pentru tine, folosește-l! La sfârșitul zilei, suntem designeri - dacă vrem să petrecem sute de ore de bărbat împingând pixeli și lustrându-ne portofoliul Dribbble, să ne lăsăm singuri!
V-ar interesa să aflați mai multe despre Photoshop și relația sa cu designul web? Uitați-vă la articolele de mai jos.
Accentsconagua