Legfrissebb cikkeink

2004-09-22

Hogyan készítsünk szabványos weboldalt? – Második rész

Hogyan készítsünk szabványos weboldalt?

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

Különböző színkombinációk

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ó:

Színkombinációk

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:

Háttérminták

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

Nagyított háttérminták

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

Hogyan vágjuk helyesen a mintát

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

  1. 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!

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


Írja meg véleményét Ön is a cikkről!

Minden hozzászólást szívesen várunk, de fenntartjuk a jogot, hogy a durva, témától teljesen eltérő üzeneteket töröljük. A kötelező mezőket csillaggal(*) jelöltük.





A spamek elkerülése miatt kérjük először nézze át hozzászólását.

Vissza az oldal tetejére ˆ

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?)