Trenutni položaj postavitve bi moral izgledati približno takole:
Do zdaj smo vstavili logotip in zgornji meni. Nadaljujemo z nekoliko večjo grafiko, ki naj bo neposredno pod navigacijo.
Princip ustvarjanja novih plasti je bil že opisan v prejšnjem vadnem programu. Zato bi vam rad tokrat pokazal nekaj drugega. Neposredno pod zgornjim menijem bo prikazana večja slika. Rezultat bo zgledal tako:
Ko vstavite sliko, naj bi bila v pravilnih dimenzijah. Po potrebi jo predhodno uredite. Nato pojdite na File>Open in izberite sliko. Izbrana slika bo prikazana v novem oknu. Pritisnite Ctrl+C, da kopirate sliko v odložišče. Tako boste lahko sliko enostavno vstavili kot plast, ki ima pravilne dimenzije, pojdite na Edit>Paste as>New Layer. Nova plast bo samodejno imela dimenzije slike in plast nato preprosto premaknete na pravo mesto. Na ta način lahko zdaj vse slike, ki jih želite vstaviti, prenesete v postavitev in jih tam postavite.
Nato vstavite besedila na mesta, kjer jih boste dejansko želeli videti kasneje. V fazi načrtovanja običajno uporabljamo t. i. slepi tekst. Preden se lotite in divje začnete pisati "test, test, test", vam priporočam, da obiščete spletno stran http://www.blindtextgenerator.de/.
Na tej spletni strani si lahko samodejno izdelate slepe tekste – različnih vrst. Besedila nato preprosto prenesete v načrt oblikovanja prek Copy & Paste. V tem kontekstu vam priporočam tudi spletno stran http://dummyimage.com/. Na tej strani lahko generirate izmišljene slike poljubne velikosti. Te izmišljene slike lahko uporabite kot zamenjavo za še neustvarjene originalne grafike v svojih postavitvah.
Težava s prozornimi plastmi
Ko vstavite besedila, bodo ta sestavljena iz več elementov, kot so naslovi, odstavki itd. Zato bi morali skupna besedila združiti v lastne plasti. Tako jih boste vedno lahko premikali skupaj. Pojdite na Layers>New Layer. Nato plasti dodelite ustrezno velikost in po potrebi ozadje. Običajno boste morda morali nastaviti/prositi prosojno ozadje. Težava je v tem, da prozornih plasti težko premikate. Pogosto boste nehote izbrali podrejeno plast. To težavo lahko preprosto obidete. Ključni so nastavitve v oknu Tools. Tam omogočite Move Tool. V spodnjem delu okna nato omogočite možnost Move active layer.
Tako lahko prozorne plasti premikate na katero koli želeno mesto.
Izrezovanje elementov
Ko ste zadovoljni z postavitvijo, se lotite praktične izvedbe kot HTML-spletno stran. Na tem mestu je pomembno izrezovanje ali slicenje. Slicenje je preprosto razdeljevanje postavitve na posamezne dele, ki jih nato s pomočjo HTML in CSS spet sestavite. Izrezati morate vse elemente, ki jih želite prikazati posamezno. Izjema so seveda vsi slikovni elementi, ki so že sami po sebi posamezni. Najprej vam želim pokazati, kako lahko izrežete elemente. V okolju tega elementa postavite vodila. Ta vodila dejansko tvorijo rezalne robove. Pazite, da jih nastavite pravilno.
Izberite želeno območje in pritisnite kombinacijo tipk Ctrl+Shift+C. (To velja tako za GIMP kot tudi za Photoshop). Nato ustvarite novo datoteko. V Photoshopu bo takoj imela pravilno velikost. Pri GIMP-u to ni tako enostavno. Tu preprosto ustvarite datoteko z zadostnimi dimenzijami. Vsebino iz odložišča boste vstavili s funkcijo Ctrl+V.
Zdaj je na vrsti orodje za izrezovanje. Narišite območje, ki ga želite izrezati, in nato pritisnite tipko Vrnitev. Slika se bo nato izrezala na želeno območje. S funkcijo File>Save As lahko sliko shranite.
Za mnoge spletne strani je pomemben stilski element barvni prehod. Tudi na primeru postavitve tukaj je takšen barvni prehod. Da izrežete barvni prehod, izberite ozek del ustreznega prehoda. Dejansko zadostuje, če nastavite območje z eno vrstico širine. Višina pa mora ustrezati dejanski višini elementa. Z uporabo CSS lahko kasneje poskrbite, da se ta grafika vodoravno ponovi tolikokrat, da je celoten element zapolnjen. Seveda bi lahko uporabili tudi širši odsek slike. Vendar bi to zmanjšalo zmogljivost strani. Zato za prehode barv raje izberite eno piko širine.
Z Ctrl+Shift+C kopirate sliko eno piko širino v odložišče in jo nato znova vstavite kot novo sliko. Novo sliko shranite po obrezovanju na ustrezno območje.
S tem bi moralo biti osnovno načelo izrezovanja jasno. Tako izrežete vse elemente iz postavitve, ki bodo del spletne strani. Če že imate posamezne elemente strani, ki jih ni treba izrezati, jih vzamete neposredno, brez obsežnega rezanja.
Rezultat bi moral zdaj izgledati takole: Imate vse slike, ki jih želite kasneje uporabiti na spletni strani. Sem spadajo na primer logotip, ozadja, prehodi barv itd. Glede prehodov barv: Seveda sem si zelo dobro zaveden, da jih je mogoče ustvariti z CSS3. Težava pa je, da še ne vse brskalnike podpirajo tega. Poleg tega je izrezovanje zelo primerno prikazati s pomočjo prehodov barv, zato sem v tem vadnem programu izbral grafiko za izvedbo prehodov barv.
