Kes veebisaitide arendamisega kursis on, teab, et tavaliselt ei alustata HTML-struktuurist. Selle asemel võetakse graafikaprogramm ja loetakse seal lehe kujundus kokku. (Agentuuris töötav isik saab kujunduse graafikult või kliendilt). Seejärel seisneb ülesanne sellest kujundusest leht ehitada. Nüüd ongi aeg seda teha.
Seoses kujundustega kopeerimisega puutute alati kokku terminitega Slicing ja Dicing. Neid mõisteid käsitletakse tegelikult, et võtta etalon või disain, tükeldada see graafikaprogrammis ja seejärel HTML-i abil uuesti kokku panna.
Õige graafikaprogramm
Igal inimesel on oma eelistused, millist tarkvara ta kõige meelsamini kasutab. Nii ka graafikaprogrammide puhul. Seoses professionaalse veebidisainiga on olukord siiski erinev. Seal töötatakse peaaegu eranditult Photoshopiga. Tegelikult on enamus kujundusettepanekuid esitatud PSD-failina. Ja just seda PSD-vormingut ei saa kõik programmid avada ega muuta.
Kellel pole Photoshopi, ei ole kindlasti kaotatud. Üks võimalik alternatiiv on GIMP. Selle programmi saate tasuta alla laadida lehelt http://www.gimp.org/. Ma näitan teile GIMP-i abil kujunduse loomise põhitoiminguid. See toimib sarnaselt Photoshopiga.
Oma kujunduse loomine
Kõigepealt mõelge läbi kujunduse põhiaspektid:
• Kui lai peaks kujundus olema?
• Kui palju veerge peaks sisalduma?
Seejärel tehke töölaud üle Fail>Uus ja määrake suurus. Ehkki minu loodud kujundus saab olema "ekraani täitev", on tegelik sisu laiuseks vaid 1000 pikslit. Kujunduse kõrguseks määran 887 pikslit. (Kuigi veebilehe kõrgus sõltub lõpuks niikuinii sisust).
Kinnitage andmed OK-ga. Nüüd on töölaud olemas ja seda saab sisuga täita. (Mina isiklikult kasutan musta tausta paremaks ülevaateks kavandis. Hiljem veebilehel seda näha ei ole).
Ühe tüüpilise elemendina, mis veebilehele kuulub, on logo, mis tavaliselt eksisteerib graafikuna. Selle kujundusse lisamiseks avage Fail>Ava ja valige oma logo, mis peaks olema vormingus PNG, GIF või JPEG. Kinnitage valik klõpsuga Ava. Kopiige logo lõikelauale, vajutades seejärel Ctrl+C. Minge seejärel üle tegelikule veebidisainile ja vajutage seal Ctrl+V. Lisatud logo ei asu veel soovitud kohal. Seda saab aga liigutada asjakohasele positsioonile Liigutamise tööriista abil.
Kui pilti ei saa liigutada, aktiveerige kõigepealt kiht. Vajalikud seaded leiate alt Aken> Ankuvate akende>Kihid.
Parema jaotuse jaoks peaksite kuvama Abijoone. Seda tehes klõpsake hiirega ja lohistage see soovitud positsiooni hoides all Vasak hiireklahv.
Nii saate tõmmata palju abijoone, mille järgi saate veebilehe elemendid joondada.
Loo nüüd uus kiht. See kiht peaks sisaldama ülemist menüüd.
Nimeks võiks olla Ülemine menüü. Looge kiht koos OK-ga. Avage Validiklaan ja lohistage pind, kuhu navigatsioon tuleb.
Ma oletan käesolevas näites, et ülemise menüü taust saab värvilise üleminekuga. Selleks klõpsake Värviläige: Vali värviläike (täitmine).
Värviläige peaks jooksma hallist mustani. Asjakohased värvid saate määrata Värviväljade kaudu. Minu seaded on järgmised:
• Verdana bold
• 20 pikslit
• Valge tekstivärv
Saate nüüd lisada iga menüüpunkti selle viisi. Parim on kopeerida kiht, kus esimene menüüpunkt sisaldub, ning lisada see uue kihina. Saate siis kihi teksti kohandada. Loo nii ülemine menüü.
Ülemisele menüüle tuleks lisada hõljumise efekt. Kui hiirekursor liigub üle üksikute menüüpunktide, muutub nende taustavärv. Seda aspekti tuleks loomulikult näidata ka visuaalses kavandis. Valige soovitud hõljumisvärv ja kopeerige üks olemasolevatest menüükihtidest. Seejärel määrake sellele kihile värv. Praeguses näites eeldatakse, et see on sinine värvikiht. Seejärel lisatakse menüüpunkti tekst. Niimoodi saate juba aimu, milline näeb menüü lõplikult välja.
