Legfrissebb cikkeink
2004-09-22
Hogyan készítsünk szabványos weboldalt? – Második rész
A második résszel folytatjuk mini tanfolyamunkat. Ebben a részben megtanítjuk, hogyan válasszuk ki oldalunkhoz a megfelelő színsémát, illetve hogyan készítsünk oldalunkhoz hátteret. Egyenlőre a design elemek megtervezésével foglalkozunk, majd ha készen áll a grafikai terv, akkor bemutatjuk az oldal leprogramozását XHTML és CSS technológia segítségével.
Akik elmulasztották az első részt, itt megtudhatják, hogyan készítsenek egyedi weboldal gombokat.
A színsémák elkészítése rendszerint az első lépés, de mivel ezt a tanfolyamot eredetileg arra terveztük, hogy megmutassuk, hogyan lehet üveges hatású gombot készíteni, ezért most pótoljuk a hiányosságot. Vezetőnk újra Veerle Pieters lesz.
Válasszuk ki a megfelelő színkombinációt
A megfelelő színkombináció kiválasztása egyéni izlés kérdése, azonban felsorolnánk pár irányelvet:
- használjunk legalább egy kontrasztos színt, és használjuk oldalunkon hangsúlyozásra. Ha ezt a színt használjuk a linkek színének megjelenítésére, akkor könnyen észrevehetőek lesznek az oldalon.
- Ne használjunk túl sok különböző színt, ellenkező esetben az oldal kinézete kaotikus jelleget fog ölteni. A legjobb ha 3 fő színt használunk, azokból kettő pasztell szín, a harmadik pedig a kiemelkedő kontrasztos szín.
- A két pasztell színből általában egy világosabb és egy sötétebb színt használok, és a többi színt ezek variációja adja. Ha kevesebb mint három variációt használunk, akkor könnyen unalmas lehet az oldal kinézete, érdemes ennél több variációval próbálkozni.
Pár színkombináció:
Használjuk a Photoshop Hue/Saturation (Színezet/Telítettség) parancsát (Ctrl+ u Windowson, Command +u Macintosh gépeken), és játsszunk el a színekkel. A fenti példák is ezzel a technikával készültek. Ha szeretne többet tudni a színek használatáról, akkor érdemes megnézni a következő mozit a színek világáról.
Itt az ideje, hogy rajzoljunk pár háttérmintát
Kezdjük egy 30×30 pixeles új dokumentummal Photoshopban. Rajzoljunk pár pixelpontot a Ceruza eszköz (Pencil) segítségével. Pár példa:
Ezek elkészítésére nincs jó recept, általában kiválasztunk egy háttérszínt, majd egy ahhoz közel álló világosabb színnel pixelpontokat rajzolunk. Majd a réteget lemásoljuk, jobbra vagy balra mozgatjuk, az átláthatóságot változtatjuk (opacity).
Ezek a nagyított minták már a tényleges háttérminták, melyek már csak azt a részt tartalmazzák, mely szükséges a háttér folyamatos ismétléséhez. Ennek a résznek a kivágásához általában a Négyzet alakú kiválasztó eszközt használom, a shift gombot nyomva tartva egy négyzetet választok ki a minta bal felső sarkából a jobb alsó felé kiindulva. Ennek a két pontnak a meghatározásához a mintát úgy kell megvizsgálni, hogy mikor érjük el azt a pontot, ami a kiválasztásunkban a legelső.
Amikor a kiválasztásunkat megfelelőnek gondoljuk, akkor az Image menüből válasszuk a Crop parancsot. Aztán válasszuk ki a mintát, majd a Define Pattern menüt válasszuk az Edit menüből, és adjunk nevet a mintánknak. Itt az ideje tesztelni az elkészített mintát. Csináljunk egy új mintát, mondjuk 300×300 pixeleset, majd válasszuk ki az egészet (Ctrl+a Windowson, Command+a Mac gépeken), és az Edit menüből válasszuk a Fill parancsot. Ott a legördülő menüből válasszuk a Pattern kitöltést, majd az alatta lévő legördülő menüből az általunk készített mintát.
A tanfolyam következő részében még mindig a folyamat design részét tekintjük át, egy szép fejléc megalkotásával.
A Photoshop mintafile letölthető innen.
A fenti cikket Veerle Pieters írta, másolása, terjesztése részben vagy egészben csak a szerző engedélyével történhet.
Hozzászólások
Cikk kategóriák
Oldalunkon érdekes cikkeket olvashat az
online világgal kapcsolatos témákról. A bal
oldalon találhatja a legfrissebb írásokat, de
a jobb oldalon összegyűjtöttük Önnek a
cikkeket kategóriák szerint is.
Szeretnénk az Ön visszajelzését is hallani,
ezért kérjük írja meg véleményét az írásokkal
kapcsolatban. Ezt könnyen megteheti a
cikkek alatt található üzenetküldő doboz
segítségével.
Kellemes olvasgatást kívánunk, és ne
feledkezzen meg arról, hogy cikkeinket
e-mail címe megadása nélkül is olvashatja
egy RSS olvasó segítségével.(Hogyan?)
végh andrea · 2007-08-02 16:13 · #
lehet badarság a kérdés de a gombokra hogy dobom fe a betűket?azaz hogy érem el hogy a betűk méretben összhangban legyenek a gombokkal? köszönöm!
Gazdag Gabriella - La Manana · 2007-08-06 16:14 · #
Kedves Andrea,
A gombokra a menünevek CSS segítségével kerülnek fel, mely a tanfolyam negyedik részétől kerül bemutatásra.