Az elméleti rész után jöhet a gyakorlati megvalósítás. A grafika nem lesz túl bonyolult, hogy egyszerűen reprodukálható legyen bárki számára. A megvalósítási szakasz inkább csak érzékeltetés, hogy mire kell figyelni ebben a folyamatban.
1, Egy böngésző képet és hátteret fogunk létrehozni. Erre a lépésre azért van szükség, hogy legyen egy kis vizuális élményük és támpontunk a továbbiakban. Egy üres böngészőablakra lesz szükségünk, jelen esetben Firefox-ot használunk és ezt beillesztjük egy rétegre. Kivágjuk a felesleges infókat és kitöltjük a hátteret valamilyen színre.
A letölthető állományban XCF mappában ez az ures-sablon.xcf lesz.
2, Beállítjuk a segédvonalak segítéségével a határoló keretet (fent, oldalakon, alul). Segédvonalat úgy tudnunk létrehozni, hogy a vonalzó (ahol a méreteket látjuk) eszközön nyomunk egy bal egérgombot, és addig nem eresztjük amíg el nem húztuk a kívánt helyre a segédvonalat. Később a helyüket az áthelyezés eszközzel módosíthatjuk.
Segédvonal eltüntetéséhez húzzuk vissza a vonalzó eszközünkre és engedjük el a bal egér gombot.
A második lépésben meghatározzuk a weblapunk méretét főleg X irányba gondolkodjunk, mert lefelé a tartalom függvényében kell majd ismétlődő területet hagynunk. Jelen esetben egy 960 pixel szélles grafikát fogunk készíteni.
Fix 960 pixeles kijelölés:
A kijelölésnél rögzített méretet adunk meg, mint a képen. Ezután már kisebb területet nem tudunk kijelölni mint az előzményekben meghatározottat. A kijelölési területe bal oldalát húzzuk a bal oldali segédvonalunkhoz, majd a jobb oldalára helyezzünk el egy újabb segédvonalat. Így létrejött a 960 pixeles terület amiben dolgozni fogunk, ezzel a területtel jelen esetben (1024 pixel-ben gondolkodunk) 1010 pixel szélleségig nyújtózkodhatunk. Ha árnyékot szeretnénk elhelyezni köré, ez nagyjából 10 pixelt vesz igénybe pluszban, ha 5 pixel-re fog kinyúlni és 5 pixeles elmosást adunk neki.
A letölthető állományban XCF mappában ez az meretek-beallitasa-sablon.xcf lesz.
A további méretek sablon már tartalmazni fogja a fejléc, lábléc, oldalsávok méretét is, és ezeket segédvonalakkal jelölöm. (tovabbi-meretek-sablon.xcf)
Az oldalsávok és tartalmi részek méretének a kiszámításához jól jöhet ez a link:
http://hu.wikipedia.org/wiki/Aranymetsz%C3%A9s
A oldalsávok és tartalmi részeket, a Fix 960.. címnél leírtak alkalmazásával jelölöm ki, csak más méretekben.
Menet közben a 960 pixel-hez 10 pixelt hozzácsaptam az árnyék miatt, így most a grafikánk 970 pixel szélles. Közben körbe is kapott egy 10 pixeles keret, szintén az árnyék miatt. A hasznos területünk 950 pixelre csökkent, ebből viszont még lejönnek az oldal irányú eltartások (~20-50 pixel).
3, Az elemek felhelyezése következik, weblap-sablon.xcf néven fut a dolog.
- Tartalmi részek kijelölése: tartalom_hatter reteg
- Oldal hátterének az elkészítés: egyszerű színátmenet (oldal_hatter réteg)
- Oldal árnyékok elkészítése, néhány módozata
- layer_effect script-fu segítségével – a kijelölt réteg köré a drop shadow effekt eresztése
- Fények és árnyék / Shadow and Highlights menüpont segítéségével
- Fények és árnyék / Vetített árnyék menüpont segítéségével
- Egy másik módszer leírása:
- 3 pixellel növelt tartalmi rész (jobb egérgomb tartalom_hatter rétegen alfa csatorna kijelölése és átalakítása, majd ) kijelölés,
- majd kijelölés / növelés (3px),
- kijelöléssel kitöltünk egy új réteget feketére
- szűrök / elmosás / gauss elmosás 5 pixel.
- A réteg áttetszőségének beállítása
- tartalom háttér újra kijelöl és a fekete rétegből kivágjuk a kijelölést (delgomb a feketére kitöltött rétegen)
Fejléc és lábléc kijelölése:
Jobb egérgomb a tartalom_hatter rétegen majd a kijelölés eszköz és a és CTRL billentyűt lenyomva kivonjuk azt a területet ami nem kell. A lábléccel is ez fog történni. Majd a kijelöléseket új rétegen fejlec_hatter, lablec_hatter rétegeken kitöltjük.
A keret plasztikussá tétele, ettől egy kicsit elválik a felület a háttértől:
- Jelöljük ki a tartalom_hatter reteg alfa csatornáját (jobb egérgomb a rétegen alfa csatorna kijelölés)
- Menüben: Kijelölés / szűkítés (1 pixel értékkel)
- Egy új réteget ami az összes felett van, töltsünk feketére
- Menüben: Kijelölés / szűkítés (3 pixel értékkel)
- Menüben: Kijelölés / lágy szél (értéknek 20 írjunk)
- Majd állítsuk be a réteg tulajdonságát alig láthatóvá 15-20-as értékre
Oldalsáv:
A képen látható módon egy lekerekített területet kijelölünk, majd kitöltjük színnel egy új rétegen.
Kontúr elhelyezése az oldalsáv köré:
- nyissunk egy új réteget a kontúroknak, a későbbiekben így az átlátszósága is szerkeszthető marad
- Jelöljük ki az adott rétegek alfa csatornáját
- állítsuk be a kívánt színt a előtér / háttér eszköztáron
- Menüben: szerkesztés / kijelölés körberajzolása
Cicoma szakaszba értünk, a letöltések között a vegleges-weblap-sablon.xcf fájlon folytatom az akciót. Ebben a részeben a sablonunkat kicsit plasztikailag pofozgatjuk.
Csinosítás:
Útvonal kijelölésre szolgáló eszközzel történt kijelöléseket fogok módosítani.
Majd jöhet az egyéni ízlésficam, dekoráljuk a felületet.
- Színátmenetek
- Ecsetek
- Hátterek
- Kijelölések
- Kontúrok
- Szövegek
hasonló bejegyzés:
0