A layout jelenlegi állapota kb. így néz ki:
Eddig tehát be lett szúrva egy logó és a felső menü. A következő lépés egy valamivel nagyobb grafikával folytatódik, amely közvetlenül a navigáció alatt látható lesz.
Az új rétegek létrehozásának elve már le volt írva az előző útmutatóban. Ezért most valami mást szeretnék nektek megmutatni. A felső menü közvetlen alatt egy nagyobb képet kell megjeleníteni. Az eredmény a következő lesz:
A képnek - ha beilleszted - a megfelelő méretekkel kell rendelkeznie. Szükség esetén tehát előzetesen dolgozd fel. Ezután hívd meg a Fájl>Megnyitás parancsot, és válaszd ki a képet. A kiválasztott kép ezután egy új ablakban jelenik meg. Nyomd meg a Ctrl+C billentyűkombinációt a kép vágólapra másolásához. Ezzel a képet most rögtön egy új rétegként beillesztheted, amelynek megfelelő mérete van, majd pedig egyszerűen el tudod helyezni a képet a megfelelő helyre. Így lehet majd az összes képet, amelyet be akartok szúrni, a elrendezésbe beilleszteni és ott elhelyezni.
Ezután illeszd be a szövegeket oda, ahol valóban meg fognak jelenni. A tervezési fázisban általában a "lorem ipsum" típusú vakszöveget használják. Tehát mielőtt leülnél és vadul "teszt, teszt, teszt" et írnál, javaslom, hogy nézz rá a http://www.blindtextgenerator.de/ weboldalra.
Itt automatikusan generált vakszövegeket készíthettek - egyébként különböző fajtájúakat. Ezeket a szövegeket aztán a Másolás & Beillesztés segítségével egyszerűen beillesztheted a design tervezetbe. Ezzel kapcsolatban felhívom a figyelmeteket a http://dummyimage.com/ oldalra is. Ezen az oldalon dummy képeket különböző méretekben generálhattok. Ezeket a dummy képeket például helyettesítőként használhatjátok a még nem elkészített eredeti grafikákhoz a tervezésetekben.
A probléma a átlátszó rétegekkel
Ha szövegeket illesztesz be, azok több elemből állnak, mint például címek, bekezdések stb. Emiatt az összetartozó szövegeket külön rétegekbe kell összevonni. Így ezeket a szövegeket mindig egyben tudod elmozdítani. Ehhez hívd meg a Rétegek>Új réteg parancsot. Ezután add meg a rétegnek a kívánt méreteket és szükség esetén háttérszínt. Általában azonban átlátszó háttérszínt kell beállítani/szükséged lesz. A probléma az, hogy az átlátszó rétegeket nehéz mozgatni. Gyakran egy alárendelt réteget talál el. Ezt a problémát egyszerűen el lehet kerülni. Ehhez a Eszköztár beállításokra van szükség. Itt aktiváld az Áthelyezés eszközt. A alsó ablakrészben aktiváld az Aktív réteg áthelyezése opciót.
Ezáltal az átlátszó rétegeket bármely pozícióba el lehet helyezni.
Elemek kivágása
Ha elégedettek vagytok a elrendezéssel, jöhet a gyakorlati megvalósítás HTML weboldalként. Ebben a fázisban jön képbe a Slice, azaz a kivágás. Ez a Kivágás gyakorlatilag az elrendezés darabolását jelenti olyan darabokra, amelyeket később HTML és CSS segítségével össze lehet állítani. Minden olyan elemet ki kell vágni, amelyet külön kell majd megjeleníteni. Kivételt képeznek ebből természetesen azok a képelemek, amelyek egyenként is rendelkezésre állnak. Elsőként mutatnék nektek, hogyan lehet dolgokat kivágni. Húzzatok segédvonalakat az adott elem köré. Az segédvonalak végül a vágási szeleteket fogják biztosítani. Tehát ügyeljetek arra, hogy ezeket helyesen állítsátok be.
Majd jelöljétek ki az általatok kívánt területet és nyomjátok le a Ctrl+Shift+C billentyűkombinációt. (Ez egyébként GIMP-nél és Photoshop-nál egyaránt működik). Ezután hozzatok létre egy új fájlt. A Photoshop-ban ezután azonnal meglesz a megfelelő méret. A GIMP esetében sajnos ez nem ilyen egyszerű. Itt egyszerűen egy megfelelő dimenziókkal rendelkező fájlt hozzatok létre. A tartalmat a vágólapról a Ctrl+V segítségével illesszétek be.
Ezután jön a Vágó eszköz, amelynek segítségével beállíthatjátok a kiemelendő területet, majd nyomjátok meg az Enter billentyűt. Ezt követően a kép meg fog jelennek a kívánt területre vágva. A képet ezt követően el tudjátok menteni a Fájl>Mentés másként opcióval.
Sok weboldal esetében fontos stíluseleme a színátmenet. Az itt látható példa-elrendezésen is ilyen színátmenet található. Ha egy színátmenetet akartok kivágni, válasszatok ki egy keskeny sávot a megfelelő átmenet területéről. Ez esetben valójában elegendő, ha egy egy pixel széles területet állítotok be. A magasság viszont a tényleges elem magasságával kell megegyezzen. CSS segítségével később gondoskodhatsz arról, hogy ez a grafika vízszintesen ismétlődjön, míg az egész elemet be nem tölti. Természetesen használhatsz szélesebb képrészletet is. Ez viszont a weboldal teljesítményét ronthatja. Ezért válassz egy pixel szélességű színátmenet esetén.
A Ctrl+Shift+C billentyűkombinációval másoljátok ki az egy pixel széles grafikát a vágólapra, majd illesszétek be új képként. A grafikát a megfelelő területre vágva és módosítva, majd mentéskor nevezzétek el.
Ezzel a vágás alapelve világossá vált. Tehát mindent vagtak ki az elrendezésből, ami a weboldalhoz tartozik. Ha már egyes webeszközök is rendelkezésre állnak, amelyeket nem kell kivágni, használhatjátok azokat közvetlenül, tehát a vágás kerülhető.
