Hogyan készíts weboldalt? 2. rész

Ebben a részben elkezdünk foglalkozni a weboldal design-ok készítésével, megnézzük milyen eszközöket, programokat lehet felhasználni a weboldal design-ok hatékonyabb készítéséhez,  milyen alapelveket érdemes betartani, mire érdemes odafigyelni.


Mivel?

Az első és legfontosabb gondolat, ami felmerülhet, amikor weboldal design-okat készítünk, az, hogy mivel készítsük, milyen programmal? Számos grafikai program létezik, ami alkalmas lehet erre:

Viszont ha jót akarsz magadnak, akkor a Photoshop-ot használod, persze biztosan van aki másképp látja.

Miért a Photoshop?

A rétegeket nem hozom fel indoknak, hiszen azt minden kicsit is jobb grafikai program tudja, de van valami amit szerintem a Photoshop tud  a legjobban, az pedig a réteg stílusok (Layer Style). A réteg stílusokkal állíthatsz be színátmenetet, árnyékot, körvonalat és még rengeteg más egyebet. Ráadásul mindezt úgy teheted meg, hogy előnézetet is mutat róla a Photoshop, sőt, később ezek módosíthatóak is könnyedén. Nyilván például színátmenetet használhatsz sok más programban is, de mi van akkor, ha később módosítani szeretnéd? Kijelölöd újra, beállítod megint a színátmenetet és módosítasz rajta kicsit? Nem lenne egyszerűbb, ha csak megnyitnád az adott réteghez tartozó stílusokat és pár klikkel átállítanád?

Persze ez csak egy része a “miért Photoshop” felsorolásnak, igazából ha használod egy ideig majd mással próbálkozol, azonnal észreveheted, hogy miért a Photoshop a legjobb weboldal design-ok készítésére.  De GIMP is jó úton halad egyébként, a roadmap szerint a 2.8-as verzióban végre egyetlen ablak lesz, nem 4564563 :), illetve megjelennek a réteg csoportok. Ami viszont ennél fontosabb, hogy a 3.2-es verzióban ígérik a réteg effekteket (“bevel/emboss, draw line at edges, etc”), illetve egy későbbi verzióban a “Smart Objects” is szerepel a tervek szerint (a Phohotshop-ban ez már megtalálható egy ideje).

Szóval egyelőre maradjunk a Photoshop-nál, bár igazából amiről írni szeretnék, az csak kisebb részben kötődik egyetlen grafikai programhoz, inkább általános tanácsok, de kitérek a Photoshop-ra is.

Egyetlen kérdést kellene még tisztázni, azt, hogy angol vagy magyar nyelvű Photoshop-ot érdemes használni? Sokan rögtön a magyar nyelvű mellett döntenek, ám véleményem szerint nem feltétlen teszik jól. Azért gondolom, hogy az angol nyelvű a jobb, mert ha azt megtanulod használni, akkor onnantól kezdve minden angol nyelvű leírást, tutorialt megértesz majd, még ha magát az egész szöveget nem is érted, de követni tudod. Márpedig angol nyelven sokkal több anyag van a Photoshop-hoz, mint magyar nyelven.

Tehát akkor végre van egy programunk, amivel weboldal design-okat tudunk készíteni.

A legjobb magyar nyelvű oktató anyagok egy helyen!

Válaszd ki a téged érdeklő témakört!

Photoshop matematika
weboldal készítés Excel
AutoCAD Word
CorelDRAW Powerpoint
3D grafika Fireworks

Az első lépések

Amikor egy weboldal designt készítesz, akkor fontos eldönteni már az elején, hogy mekkora legyen, milyen széles. Persze utólag is lehet a szélességet módosítani, ám ez gyakran nem kis munka, főleg egy összetett design esetén, így lehetőleg már az elején célszerű eldönteni. Igazából erre szabvány nincs, egy weboldal szélessége tetszőleges lehet. Ám ez így nem teljesen igaz, ugyanis van egy maximális szélesség, aminél nagyobbra nem érdemes méretezni a weboldalakat. Ez jelenleg 990 pixel. Miért ennyi? Nézzük meg kicsit a manapság elterjedt felbontásokat:

Felbontások

Láthatod, hogy 1024 x 768-as felbontást még mindig sokan használnak, 20%-ot nem lehet figyelmen kívül hagyni (a látogatók ötöde). Az 1024 azért érdekes, mert ezen a felbontáson a 990 pixel széles weboldal, plusz a jobb oldali görgetősáv még éppen elfér, anélkül, hogy alul is görgetősáv jelenjen meg. Tehát ha 990 pixelnél szélesebb, akkor a weboldal egy része nem fér ki ezen a felbontáson, ami megengedhetetlen.

De ettől függetlenül sem érdemes túlméretezni a weboldalakat, főleg azokat, amelyek csak egyetlen vagy két oszlopból állnak, különösen, ha sok a szöveges tartalom, mert a nagyon hosszú sorok nehezen olvashatóak. Ezért kell azt is megfontolni, hogy érdemes-e a felbontáshoz alkalmazkodó weboldalt készíteni, tehát olyat, ami ha a felbontás 1024, akkor 1024 széles, ha a felbontás 1920, akkor 1920 széles.

Ha megvan a felbontás, akkor célszerű a segédvonalakat használni, ez a Photoshop-ban “guide” néven található (View > New Guide). Tehát például letehetsz egyet  függőlegesen 100 pixelnél és (990-nél maradva) 1090 pixelnél. Így a közte lévő rész 990 pixel széles lesz, ebben a részben kell maradnod. Fontos, hogy ebben a részben legyen minden, tehát ha van árnyéka a weboldalnak, akkor az is.

990

Ha ez megvan, akkor elkezdődhet a tényleges munka, de egy weboldal design készítése során számos szempontot figyelembe kell venni, ezeket nézzük meg a következő részben.

A tanuláshoz ezeket az oktató anyagokat ajánlom:

Photoshop alapismeretek: http://videotanfolyam.hu/photoshop_titkok_elso_resz_alapismeretek

Photoshop webdesign: http://videotanfolyam.hu/photoshop_titkok_masodik_resz_webdesign

Illetve HTML és CSS: http://videotanfolyam.hu/oktato_video_kategoria/13/weboldal_keszites

Hozzászólások

  1. AnagyZ szerint:

    Üdv!

    Azért vitába szállnék. A ps egy nagyon hasznos program, de lassan kiszorul a webfejlesztésből, ami nem is baj, mert iszonyatos ára van.
    Tehát amire a webfejlesztésben eddig használtuk az 3 alapvető grafikai elem: árnyékolás, lekerekítés, és színátmenet.
    Ezeket szépen css3-ban meglehet valósítani, úgy hogy az oldalunk is jelentősen gyorsabb lesz, hiszen a sok kis képet nem kell letölteni.
    Tehát nálam ez úgy nézne ki hogy margin: auto; -val középre igazítok. adok egy háttérszínt és:
    -webkit-box-shadow: 0px 0px 3px 3px #050505;
    -moz-box-shadow: 0px 0px 3px 3px #050505;
    box-shadow: 0px 0px 3px 3px #050505;

  2. Ebookz szerint:

    Ez rendben van, de hogyan mutatod meg a design tervet a megrendelőnek?

    Illetve azért nem mindenhol csak színátmenet kell (meg árnyék, lekerekítés).

    Egyébként a GIMP is alkalmas lesz majd egyszer webdesignra, a roadmap-ben benne vannak már a “Filter layers and Layer effects”

    plusz az

    Auto-anchoring of floating selection
    Script recording and playback
    “Smart objects”

    is. Tehát idővel webdesignra akár kiválthatja a Photoshop-ot.

  3. AnagyZ szerint:

    Hát én úgy vélem ez a cikk annak lenne hasznos aki saját maga próbál oldalt építeni. Ha ezzel foglalkozom nyilván, nem egyedül csinálom. Olyan ember nem nagyon van aki mind a 3 kategóriában kiemelkedően teljesít: programozás, sitebuild, grafika. Másrészt ha mindent egymaga akarna megcsinálni, igencsak elhúzódna a kivitelezés és annyi pénz nincs egy ilyen munkában, hogy 6-8 hónapja legyen valakinek erre, se megrendelőnek, se készítőnek.

    Az oldalak tervei első körben így is csak párszáz px széles skiccben látja a megrendelő, lévén szellemi termék.

    Egyébként vizsgáld meg a saját oldalad, itt csak némi árnyék meg színátmenet van, ezt pl full meg lehet oldani css3-ban.

Hozzászólás beküldése

| Download Free Ringtones for Verizon Online. | Thanks to Highest CD Rates, Ally Bank Rates and Binaural & Isochronic Beats