Photoshop tutoriali, html i css savjeti

U sljedecem tutorialu pokazat cemo vam najcesce nacine izrade CSS pozadine site-a.Jedan od uobicajenih nacina izrade je uporaba gradienta. Gradient se koristi na dnu ili vrhu stranice, tako da se na rubu boja pozadine “preljeva” u neku drugu.
U Photoshopu cemo napraviti gradient od recimo 100-200 pixela visine.

Gradient mozemo slobodo povuci preko vece radne povrsine, zatim cemo ga Cropati.

Cropanje slike cemo napraviti tako da u sirinu obuhvatimo sto manji dio slike, a visina neka odgovara gradientu na slici.

Sljedece sto radimo je Resize slike. (Image > Resize) Iskljucit cemo opciju Constrain Proporties, te Width postaviti na 1 px.
Dobivenu sliku mozemo spremiti kao .jpg ili .gif.

Sada, ako nam je taj gradient potreban na dnu stranice, uzmemo gornju boju (Alt + klik dok radimo sa nekim brushem).

Sada prelazimo na CSS. Ja osobno najcesce koristim Dreamweaver za izdradu stranica, pa ce tutoriali biti malo prilagodenji njemu, no svejedno ako radite u bilo cemu drugom.

body {background-image:url(images/background.jpg);
background-position:bottom;
background-repeat:repeat-x;
background-color:#fff;
}

To je kod koji cemo postaviti u CSS. Background color je boja koju smo uzeli kao najgornju u gradientu.

Ukoliko nam se gradient nalazi na vrhu stranice, background-position ce biti top, a boja pozadine najdonja iz gradienta.

Zanimljiv efekt mozemo dobiti na slican nacin kada imamo situaciju kao u sljedecem primjeru:

Efekt koji cemo koristiti ce produziti header lijevo i desno, naravno u nekoj drugoj boji.

Takvo nesto cemo dobiti na nacin da, kao i u primjeru obicnog gradienta, napravimo .jpg ili .gif jednog ili nekoliko pixela sirine, s tim da cemo na udaljenosti od vrha, te visine headera, dodati polje ispunjeno jednom bojom.

Zatim cropamo sliku od vrha, do dna gradienta, ukliko dodajemo polje na vecoj slici. Ukoliko ga dodajemo na slici od pixela, samo je spemimo.

Dodamo tu sliku u isti CSS kod kao kod proslog primjera (naravno, sa slikom na Top stranice) i efekt je postignut!

Header ce vam naravno bit div koji je potpuno odvojen od pozadine, samo ce ga ona vizualno produziti.

Kada ovo radite, pozadinu mozete generirati nakon odredivanja paddinga i margina, zbog tocnosti velicine. Pazite da vam budu isti u pixel. Najjednostavnije je, kada imate dovrsenu konstrukciju site-a, samo sa Print Screenom copy/ paste-ate cijeli izgled stranice u Photoshop i nacrtate gradient i polje koje produzava header, i cropate!

This entry was posted on Tuesday, October 9th, 2007 at 12:49 pm and is filed under HTML i CSS tutoriali. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.