Narancs - fehér weboldal

[Guest]

Ebben a tutorialban egy komplett weboldalt fogok elkészí­teni, és bemutatni pár trükköt, technikát amik weblapoknál hasznosak lehetnek.

Én nem igen gondolok az 1024x768-nál kisebb felbontáson böngészőkre, sőt, weblapjaimat mindig rájuk, az 1024x768-as felbontású gépekre optimalizálom. Ez most sincs másképp, úgyhogy nyissunk egy 1000x700-as új dokumentumot.
Töltsük be a hátteret fehér szí­nnel (fehér=elegancia), majd hozzunk létre új layert (Ctrl+Shift+N) és használjuk a négyzetes kijelölőt és az oldal tetején és alján jelöljünk ki egy csí­kot amit töltsünk be szürke szí­nnel:


Most menjünk a Layer -> Layer Style -> Stroke-hoz és egy 1 pixeles feketét állí­tsunk be rajta.

Hozzunk létre egy új réteget (Ctrl+Shift+N). Jelöljük ki a fejlécnek szánt részt a négyzetes kijelölő eszközzel, majd alkalmazzunk egy szí­nátmenetet, narancs szí­nekkel:


Ezen a rétegen alkalmazzuk a következőket (Layer -> Layer Stlye):



Most hozzunk létre egy új réteget és csináljuk meg a menü "dobozát". Jelöljük ki a megfelelő méretet a négyzetes kijelölővel, majd töltsük be fehérrel, és alkalmazzuk rá ugyanazokat a Layer Style beállí­tásokat mint azt tettük az előbb a fejlécnél!
Megint hozzunk létre egy új réteget, és a négyzetes kijelölővel akkora részt jelöljünk ki, ahol majd az oldal valós tartalmát szeretnénk megjelení­teni. Szintén az előbbi Layer Style-okat állí­tsuk be! Eddig kb í­gy néz ki:


új réteg, majd a Shift gomb nyomvatartása mellett, a négyzetes jelölővel húzzunk egy apró négyzetet, amit töltsünk be fehérrel. Ezt a réteget duplikáljuk annyiszor ahányszor szeretnénk, én konkrétan 4-szer duplikáltam (vagyis 5 fehér négyzetem van).


Húzzuk szét őket egymástól, majd a Layer Paletten jelöljük ki mind az 5 négyzetes réteget:


Majd felül az igazí­tó gombok segí­tségével igazí­tsuk őket egyenlő távolságra, és a széleiket is. A két bekeretezett gombra lesz szükségünk:


Ezután egyesí­tsük ezeket a rétegeket (jobb klikk -> Merge layers).
Az egyesí­tett réteget duplikáljuk (jobb klikk -> Duplicate layer) majd húzzuk ki a másik oldalra is. A kettő közé í­rjuk be a szlogent:


Gyakorlatilag meg is vagyunk, töltsük fel a kellő tartalommal í­zlésünk szerint. Sok sikert, és a visszajelzéseket mint mindig most is várom!