Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon"

Dénes Kiss
8 évvel ezelőtt
Látták:

1 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. Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon 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.

Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon 1, Egy böngésző képet és hátteret fogunk létrehozni.

2 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.

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.

3 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-mereteksablon.xcf) Az oldalsávok és tartalmi részek méretének a kiszámításához jól jöhet ez a link: A oldalsávok és tartalmi részeket, a Fix 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:

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.

4 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: Oldalsáv: 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á as értékre

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

5 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: 1. Gimp Felhő effect 2. Web 2.0 logó Gimppel 3. Gimp Kitöltés, Minta felvétele, Alkalmazása 4. Favicon készítés Gimppel Téma: Webalkalmazás fejlesztés Forrás: Szerző: ArtH2O Erdeti URL:

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.

Hasonló dokumentumok

1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni.

1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni. A kész Gimppel rajzolt grafikát összerakjuk CSS és XHTML sablonként. Az előzményekből egy állományra lesz szükség a veglegesweblap-sablon.xcf állományra. A fájlt kapjon egy m_ (m_vegleges-weblap-sablon.xcf)