Amire szükségünk lesz:
- Türelem
- Adobe cég Photoshop programja
- Valamilyen html/css szerkesztő program (nem hátrány ha van highlight mód benne)
- Idő
Ha nyitva a photoshop akkor nyissunk új dokumentumot (CTRL + N), a szélesség(width) 1000px, a magasság (height) 1200px, a háttér legyen fehér.
Keressünk megfelelő háttérszínt... Mostanában nekem a krémes - barnás színel bejönnek, 
ezért itt is az képezi majd a háttér színét, használjuk a festékesvödrünket(G), és töltsük ki a hátteret a #f7ebc3 színnel, készítsünk új réteget (Ctrl + Shift + N), a neve legyen Header.
Vegyük a Rectangle Tool-t(U) és rajzoljunk egy téglalapot, úgy, hogy az oldal két szélétől maradjon el ~20 -20 px hely, a magassága se legyen túl nagy, nálam 168px.Most díszítsük a headert.
Ehhez válasszuk a layer -> layer style -> blending options menüt itt fogjuk dísziteni a header nevü téglalapunkat.
A lépéseket képekkel demonstrálom.
A fejlécünk ezzel készen is van, nem szeretném túl bonyolítani, mert elég hosszú tutorial lesz.
Nekem ilyen lett:
Nekem ilyen lett:
Keressünk logót, és adjunk nevet a lapnak; én ehhez EZT a képet választottam, amit mindjárt megmutatok, hova és hogyan helyezzünk el. A felirat lehet tetszőleges, én HápiWeb-et írtam, Tahoma betütípusal és #fcf1e4 színnel, 37pt-s méretben.
Nálam most ilyesmi látszik:
A kacsának a nyakától levágtam a fehér érdes árnyékos részt, és a header -alsó- sarkához illesztettem.
Most a header jobboldalát fogjuk kicsit fejleszteni.
elhelyezünk rajta egy keresőmezőt és egy rss ikont.
Most megint a recatngle tool-ra lesz szükségünk. Készítsünk egy téglalapot #ececec háttérszínnel, azt hogy mekkora legyen rátok bízom, nézzetek meg egy pár keresőmezőt weblapokon, és ahhoz viszonyítva méretezzétek, mutatom nekem milyen, és hogy hova helyeztem el.
Nálam most ilyesmi látszik:
A kacsának a nyakától levágtam a fehér érdes árnyékos részt, és a header -alsó- sarkához illesztettem.Most a header jobboldalát fogjuk kicsit fejleszteni.
elhelyezünk rajta egy keresőmezőt és egy rss ikont.
Most megint a recatngle tool-ra lesz szükségünk. Készítsünk egy téglalapot #ececec háttérszínnel, azt hogy mekkora legyen rátok bízom, nézzetek meg egy pár keresőmezőt weblapokon, és ahhoz viszonyítva méretezzétek, mutatom nekem milyen, és hogy hova helyeztem el.Mint a képen látjátok, kapott egy 1px vastag keretet.
Most jöhet az RSS ikon, innen szerzhettek be nem csak RSS de bármilyen más ikont is, jelen esetben én ezt az ikont választottam: http://www.iconspedia.com/uploads/1764528066.png a méretét ne változtassuk szerintem, de ha valakinek ez túl nagy akkor lehet kicsinyíteni tetszés szerint, mutatom, hogy hol és hogyan helyezzük ezt el.
Én még kis extraként odaírtam, hogy értesűlj elsők között az új hírekről, csak hogy ne legyen annyira ür
es a header.
Következő lépésben megcsináljuk a navigációt.
Ehhez megint a rectangle tool lesz segítségünkre, csináljunk egy ilyen téglalapot:
Természetesen nem marad fekete.
Képekben fogom demonstrálni a díszités beállításait.
A végeredmény pedig nálam ez lett:
Mint látható már kezd formálódni a lapunk, korántsem szép, de aminek kell az látszik :)
folytatás hamarosan :)
Most jöhet az RSS ikon, innen szerzhettek be nem csak RSS de bármilyen más ikont is, jelen esetben én ezt az ikont választottam: http://www.iconspedia.com/uploads/1764528066.png a méretét ne változtassuk szerintem, de ha valakinek ez túl nagy akkor lehet kicsinyíteni tetszés szerint, mutatom, hogy hol és hogyan helyezzük ezt el.
Én még kis extraként odaírtam, hogy értesűlj elsők között az új hírekről, csak hogy ne legyen annyira ür
es a header.Következő lépésben megcsináljuk a navigációt.
Ehhez megint a rectangle tool lesz segítségünkre, csináljunk egy ilyen téglalapot:
Természetesen nem marad fekete.Képekben fogom demonstrálni a díszités beállításait.
A végeredmény pedig nálam ez lett:
Mint látható már kezd formálódni a lapunk, korántsem szép, de aminek kell az látszik :)
folytatás hamarosan :)
0 megjegyzés