Rheinwerk Design Adobe Photoshop CS4 - Tehnici avansate - 11
11.2 Proceduri și tehnici de asamblare
În domeniul designului web, Photoshop poate exploata amploarea posibilităților sale creative. Aici, în special, domeniile sale individuale de aplicare se interconectează într-o varietate de moduri. Procedurile și metodele utilizate sunt în mare parte transferabile la sarcini similare în proiectarea ecranului, indiferent dacă este o interfață cu utilizatorul pentru un CD-ROM sau un design de meniu pentru un DVD video. Există doar diferențe în formatele de imagine pentru ieșire (vezi secțiunea 11.3).
11.2.1 Pregătirea lucrului: Determinați dimensiunea imaginii
Tabelul 11.1 Distribuția dimensiunilor ecranului și a celor mai importante browsere (starea 04/2009, sursă: marketshare.hitslink.com)
Când vine vorba de tipărire, este relativ ușor: o foaie A4 are 297 x 210 mm și atât. Când proiectați un ecran pentru un CD-ROM, există de obicei dimensiunile imaginii 1.024 x 768 sau 800 x 600 pixeli. Problema este clară și pentru un design de meniu DVD: 720 x 576 pixeli pentru sistemul european PAL sau 720 x 480 pixeli pentru sistemul TV SUA NTSC.
În designul web, acest subiect este departe de a fi clar. Desigur, dimensiunile curente ale monitorului în prezent specifică mai întâi ce este posibil și util. Distribuția acestor dimensiuni este de asemenea importantă (vezi Tabelul 11.1).
Cu toate acestea, este mult mai dificil de estimat „suprafața utilizabilă” reală a unui site web. Practic toate browserele au valori diferite aici, deoarece barele de derulare, barele de stare, meniul și barele de titlu au nevoie de locul lor. Această dimensiune depinde, de asemenea, de configurația utilizatorului, precum și de orice alte bare de instrumente sau „Teme” instalate (șabloane proprii de interfață utilizator, de exemplu, pentru Firefox). Dacă acest lucru ar fi colectat pentru aproape zece browsere actuale pentru Mac și Windows și pentru diferitele dimensiuni de ecran, ar fi necesar un tabel mai mare.
Figura 11.1 Dimensiunile standard ale site-ului web de la Adobe Dreamweaver (mai sus) și dimensiunile fișierelor personalizate în Photoshop pentru fișier • Nou (mai jos)
Adobe a construit cu amabilitate câteva dimensiuni standard ale site-ului web pentru previzualizarea documentului în poalele ferestrei editorului Dream-weaver, experiență care s-a dovedit a fi foarte utilă. Pe baza acestor numere, vă puteți crea propriile dimensiuni implicite în Photoshop pentru dialogul de selecție al comenzii Fișier • Nou.
11.2.2 Lucrul cu o captură de ecran
O captură de ecran a acestei ferestre este utilă pentru a obține o impresie realistă nu numai despre dimensiunea disponibilă, ci și despre cum va arăta site-ul web mai târziu în fereastra browserului celor mai mulți spectatori.
O captură de ecran (cheie) aterizează pe clipboard și este eliberată de conținutul ferestrei din Photoshop, astfel încât să poată oferi cadrul pentru lucrările ulterioare într-un fișier de proiectare a ecranului de la nivelul superior (remediați cu „blocare”!). Deoarece este încă destul de răspândit, Internet Explorer 6.0 poate servi drept ghid pentru lucrări ulterioare, mai ales că este „cel mai rău caz” din aproape toate aspectele când vine vorba de dimensiunile elementelor de suprafață. În prezent, niciun browser nu lasă mai puțin spațiu pentru site-urile web în configurația standard.
Figura 11.2 Captură de ecran a Microsoft Internet Explorer 6.0 pe Windows XP fără conținut de fereastră (1 024 768 pixeli)
Fereastra browserului ca parte a designului ecranului are, de asemenea, avantajul pentru prezentări că clientul își poate imagina mai bine pagina viitoare cu acest cadru, atâta timp cât nu există pagini web reale de văzut. Când vine vorba de producția finală, puteți elimina cadrul browserului cu instrumentul de decupare.
11.2.3 Instrumentele de asamblare din Photoshop
Între timp, cutia de instrumente care este disponibilă pentru proiectanții de ecran în general și pentru designerii de web în special pentru munca lor de asamblare în Photoshop este foarte atractivă. Acest lucru nu ușurează exact prezentarea generală, ci deschide o varietate de posibilități.
Odată cu introducerea nivelurilor de imagine, au existat doar aceste niveluri și modurile lor, dar acum setarea și umplerea nivelurilor pot fi utilizate ca elemente de imagine care rămân editabile. Acestea nu mai sunt semnificative în ceea ce privește dimensiunea fișierului, deoarece nu conțin pixeli de imagine. Utilizarea mascării sub formă de măști strat, vectoriale și de tăiere extinde posibilitățile fără a șterge lucrările originale. În plus, grupurile și, nu în ultimul rând, obiectele inteligente și filtrele inteligente sunt alte mijloace importante.
Obiecte inteligente | Obiectele inteligente introduse în Photoshop CS2 s-au dezvoltat într-un instrument foarte important pentru sarcinile de asamblare, în special pentru proiectarea ecranului. Integrarea nedistructivă a diverselor materiale de imagine are ca rezultat o libertate creativă mult mai mare decât înainte. Există multe subtilități care trebuie luate în considerare atunci când se utilizează acest tip de strat, deoarece acestea nu se comportă întotdeauna așa cum ne-am aștepta de la caracteristici similare în alte programe (inclusiv cele de la Adobe). Aceste ciudățenii și câteva trucuri despre cum să le gestionăm sunt rezumate mai jos:
Cu Photoshop CS4 puteți decide în cele din urmă dacă doriți să legați o mască de strat cu stratul de imagine și să o mutați cu acesta sau nu.
Formele vectoriale, fie cu planuri de formă, măști vectoriale sau trasee, au o precizie de poziționare mai mare decât un pixel. Același lucru este valabil și pentru liniile directoare. Acest lucru poate fi foarte enervant, mai ales când vine vorba de sarcini de proiectare web, deoarece vor fi tăiate ulterior de-a lungul liniilor de ghidare cu precizie de pixeli. În designul web trebuie, prin urmare, să țineți întotdeauna apăsată tasta atunci când poziționați liniile de ghidare, astfel încât acestea să se fixeze doar la pixeli întregi.
Ca un ajutor vizual foarte eficient pentru poziționare, Adobe a introdus așa-numitele „ghiduri inteligente” (ghiduri magnetice) de la versiunea CS2, care apar doar atunci când ceva este mutat și care vă permit să vă concentrați pe câteva elemente statice cu adevărat importante. Poate constrânge liniile auxiliare.
11.2.4 Imagini și HTML
Pentru o lungă perioadă de timp, rezultatul sa bazat pe o structură bazată pe tabel. Cu toate acestea, tabelele sunt destul de fiabile de afișat și nu sunt niciodată cu adevărat stabile, pur și simplu pentru că nu au fost niciodată destinate acestui scop. Între timp, Foi de stil în cascadă (CSS) joacă în sfârșit un rol din ce în ce mai important în designul web. Aici sunt posibile poziționarea precisă a pixelilor a cadrelor și o tipografie mult mai bună, cu un cod mai slab în același timp. Între timp - după bătălii politice și tehnologice dure între diferitele companii de software și în același timp cu W3C - există ceva de genul unei anumite fiabilități în afișare în multitudinea de browsere și sisteme de operare. Photoshop ia în considerare acest lucru oferind atât ieșiri bazate pe tabel, cât și ieșiri bazate pe CSS. Acest lucru este deosebit de interesant pentru utilizatorii Photoshop, deoarece mulți dintre ei sunt utili și pentru următorii pași în proiectarea web, de ex. B. cu editori de site-uri web precum Dreamweaver sunt competenți. Cu un cod mai mic și mai clar, ei și, bineînțeles, și cei care scriu codul (încă sau din nou) manual sunt ușurați semnificativ.
Pentru ieșirea materialului de imagine proiectat pe web, trebuie să părăsim parțial lumea formatelor de imagine pure și să ne ocupăm de tehnologii mixte, cum ar fi încorporarea imaginilor într-un limbaj de descriere a paginii. În timp ce mulți utilizatori Photoshop vor cunoaște elementele de bază ale web-ului și HTML-ului, iată un rezumat rapid.
Artiștii graficieni cu cunoștințe tehnice au fost primii care au „abuzat” de elementele sintactice furnizate de HTML „limbaj web” în scopuri creative. HTML este un limbaj de marcare care ar trebui să mapeze ierarhii de conținut. În plus, oferă resurse minime de proiectare, care ar trebui să garanteze o lizibilitate cât mai redusă posibilă pe multe platforme tehnice. Există șapte niveluri de titlu, unele formate speciale, aldine, italice, text subliniat, tabele simple, opțiunea de a integra imagini și suport media prin referințe și câteva alte caracteristici. Dar asta a fost: HTML nu este un limbaj de descriere a paginii compatibil cu aspectul, precum PostScript, cu orientarea sa către o arhitectură cadru precisă.
Doar tabelele în HTML reprezintă o modalitate utilă la jumătatea drumului de a obține un fel de aspect bazat pe cadre. Primii designeri de web au început cu aceste resurse slabe. De mult timp, nu s-au schimbat prea multe pe această bază a designului web, care reprezintă cea mai mare parte a designului ecranului. În timpul acestei dezvoltări dintr-un instrument de procesare a imaginilor, Photoshop a devenit din ce în ce mai mult un instrument de proiectare pentru această disciplină tânără. De-a lungul timpului, acest lucru s-a reflectat foarte mult în caracteristicile programului.
11.2.5 Fonturi pentru web
Figura 11.3 O selecție de fonturi de pixeli pentru web
Aproape nu există un design de ecran care să nu conțină cel puțin elemente tipografice minime. Aproape nimic nu funcționează fără a scrie. Spre deosebire de tipărire, în cazul în care un tip de caractere poate scoate toate detaliile sale grafice atunci când tipul de caractere ajunge pe placa de imprimare cu de obicei cel puțin 2.400 dpi al unui set de imagini, în proiectarea ecranului avem întotdeauna de-a face cu rezoluția ecranului, adică cu relativ meschin 72 ppi. Este evident că fonturile mai delicate își pierd particularitățile aici.
Când vine vorba de proiectarea ecranului, sunt necesare fonturi clare, fără prostii, mai degrabă cele fără serif, decât cu. Mai ales când vine vorba de dimensiuni mai mici ale fonturilor, nu numai calitatea fonturilor scade rapid, ci și lizibilitatea. Restul se face prin netezirea fontului, antialiasing, care în fonturi mici duce la ceva spălat în loc de o literă. Ca remediu pentru acest lucru există așa-numitele fonturi pixel. Toate aceste circumstanțe sunt discutate mai detaliat în secțiunea 9.7 și ilustrate cu exemple.
11.2.6 Culori pentru web
Pentru aplicațiile de proiectare a ecranului, există, de asemenea, reguli diferite pentru culori decât de ex. B. în tipar. Acest lucru este valabil mai ales pentru web, deoarece conținutul creat este afișat pe un număr uneori uriaș de ecrane diferite, al căror comportament al culorii este de obicei la fel de crud pe cât de imprevizibil. Strategii precum gestionarea culorilor sunt încă la început în sectorul web și nu se vede nicio îmbunătățire reală. Aceste condiții cadru fac necesară lucrul cu scheme de culori clare, bine separate pentru proiectarea ecranului. Nuanțele fine și contrastele sunt mai degrabă deplasate în sectorul țesutului atunci când vine vorba de o recunoaștere clară. Informații despre dezvoltarea schemelor de culori și a instrumentelor conexe, inclusiv în ceea ce privește designul web, pot fi găsite în secțiunea 5.8.
Figura 11.4 Previzualizarea unei scheme de culori ca aspect web în Color Schemer