Stadiul actual al aspectului ar trebui să arate cam așa:
Până acum, a fost inserat un logo și meniul superior. În continuare, urmează să fie adăugată o imagine mai mare, care va trebui să fie vizibilă imediat sub navigare.
Principiul adăugării de noi straturi a fost deja descris în tutorialul anterior. Prin urmare, vreau să vă arăt ceva diferit acum. Direct sub meniul superior, trebuie să fie afișată o imagine mai mare. Rezultatul va arăta astfel:
Imaginea ar trebui să aibă dimensiunile corecte atunci când o inserați. Deci, eventual, editați-o în prealabil. Apoi, accesați Fișier>Deschide și selectați imaginea. Imaginea selectată va fi afișată apoi într-o fereastră nouă. Apăsați Ctrl+C, pentru a copia imaginea în clipboard. Astfel, puteți insera imediat imaginea ca strat, care are și dimensiunile corecte, apelând Editare>Lipire ca>Strat nou. Noul strat va avea automat dimensiunile imaginii și puteți muta stratul ușor la locul potrivit. În acest fel, puteți transfera în layout toate imaginile pe care doriți să le inserați și să le plasați acolo.
Ulterior, inserați textele în locurile în care vor fi vizibile într-adevăr mai târziu. În faza de proiectare, de obicei se folosește așa-numitul text nonsense.
Înainte să vă așezați și scrieți haotic "test, test, test", vă recomand să accesați pagina http://www.blindtextgenerator.de/.
Acolo puteți genera automat texte nonsense - de altfel, de diferite tipuri. Aceste texte pot fi apoi preluate cu ușurință în designul proiectului prin Copiere & Lipire. În acest context, vă recomand și pagina http://dummyimage.com/. Pe această pagină puteți genera imagini dummy de orice dimensiune. Aceste imagini dummy pot fi folosite, de exemplu, ca suport pentru graficele originale încă ne-create în layouturile dvs.
Problema cu straturile transparente
Când inserați texte, acestea vor consta din mai multe elemente, cum ar fi titluri, paragrafe etc. Prin urmare, ar trebui să grupați textele corespunzătoare în straturi separate. Astfel, le puteți muta întotdeauna împreună. Pentru asta, accesați Straturi>Strat nou. Apoi, atribuiți stratului dimensiunea dorită și eventual culoarea de fundal. De obicei, veți dori însă să setați/o puteți avea nevoie de un fundal transparent. Problema este însă că straturile transparente sunt greu de mișcat. Adesea, veți selecta un strat secundar în acest proces. Această problemă poate fi evitată foarte simplu. Pentru aceasta sunt importante setările ferestrei Set de instrumente. Activăți Instrumentul de mutare în fereastră. În partea inferioară a ferestrei, acționați opțiunea Mutați stratul activ.
Astfel, puteți muta și straturile transparente la orice poziție dorită.
Decuparea elementelor
Când sunteți mulțumit de layout, urmează să treceți la implementarea practică ca pagină web HTML. Aici intervine Decuparea, deci tăierea. Această decupare nu este altceva decât tăierea layoutului în piese individuale, care ulterior vor fi refăcute împreună cu HTML și CSS. Trebuie să tăiați toate elementele care vor trebui să fie afișate separat mai târziu. Excepție fac elementele de imagine care oricum sunt în mod individual. În primul rând, vreau să vă arăt cum puteți tăia elemente. Trageți linii de ghidaj în jurul elementului respectiv. Aceste linii de ghidaj formează, în cele din urmă, marginile de tăiere. Aveți grijă să le setați corect.
Alegeți acum zona dorită și apăsați combinația de taste Ctrl+Maj+C. (Acest lucru este valabil atât pentru GIMP, cât și pentru Photoshop). Apoi, creați un fișier nou. În Photoshop, acesta va avea imediat dimensiunile corecte. În GIMP, din păcate, lucrurile nu sunt atât de simple. Aici trebuie să creați doar un fișier cu dimensiuni suficiente. Prin Ctrl+V, conținutul din clipboard este lipit.
Acum intervine Instrumentul de decupare. Stabiliți zona de decupare și apoi apăsați tasta Întoarcere. Imaginea va fi tăiată ulterior la zona dorită. Prin Fișier>Salvare sub puteți salva imaginea.
Un element stilistic important pentru multe site-uri web este un Degradare de culoare. Chiar și pe layoutul de exemplu arătat aici, există o astfel de degradare de culoare. Pentru a decupa o degradare de culoare, selectați o zonă îngustă a gradientului corespunzător. De fapt, ajunge să setați o zonă cu lățimea de un pixel. Înălțimea trebuie să corespundă însă înălțimii reale a elementului. Prin CSS puteți face ca această imagine să fie repetată orizontal până când elementul este complet umplut. Desigur, ați putea folosi și o porțiune de imagine mai lată. Cu toate acestea, acest lucru ar afecta performanța paginii. Prin urmare, pentru gradientele de culoare, alegeți o lățime de un pixel.
Cu Ctrl+Maj+C copiați imaginea cu lățimea de un pixel în clipboard și o refaceți ca imagine nouă. Apoi, salvați imaginea nouă după ce ați adus-o pe secțiunea relevantă.
Cu asta ar trebui să fi devenit clar principiul de bază al decupării. Deci, tăiați toate lucrurile din layout care ar trebui să facă parte din site-ul web ulterior. Dacă deja aveți elemente de pagină individuale care nu trebuie tăiate în prealabil, le luați direct, fără a mai trece prin decupare.
