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!

Brushes - (kistovi) su vjerojatno najcesce koristeni alati u Photoshopu. Iskusniji Photoshoperi su svjesni svih njihovijh mogucnosti, no pocetnicima ce vjerojatno ovaj tekst bit od pomoci!

Sa Photoshopom dobivamo dosta razlicitiv brusheva, raznih oblika. Njih mozemo koristiti za crtanje, brisanje, selektiranje…

Za biranje brusha koristimo ikonicu u gornjem desnom kutu. Tu nam se otvori popis svih instaliranih brusheva. Imamo raznih ponudenih opcija, imamo okrugle, kockaste, plosnate, razbijene, prljave… No mozemo ih dodati jos!

Na internetu vrlo lako mozete pronaci gotove brush pakete. U trazilicu upisite Free photoshop brushes, ili nesto slicno, i nac ce te ih gomilu.

Instalirati ih mozete i u Photoshop izborniku, no brzi i jednostavniji nacin je sljedeci:

• otvorite Photosop folder (npr. C:\Program Files\Adobe\Adobe Photoshop)
• zatim idite na - \Presets\Brushes
• te uz postojece brusheve u tom folderu dodate svoje
• kod sljedeceg pokretanja Photoshpa, brushevi ce biti u izborniku!

Na internetu mozete pronaci najrazlicitije brusheve, koji vam mogu dobro doci u bezbroj situacija. Imate svakakvih, od sitnih detalja, do kompletnih slika.

Brusheve mozete napraviti i sami!

Izaberete bilo koju sliku, bilo kojeg formata. Sve sto trebate napraviti je kliknuti na:

Edit >> Define Brush Preset

I to je sve, nastali brush mozete koristiti sa bilo kojim alatom, kao i svaki drugi brush.

Druga instalacija koju cemo vam ukratko opisati je instalacija fontova.

Bezbroj besplatnih fontova mozete pronaci na netu, ima i naravno onih koji se placaju. Svejedno kako ih nabavite, morate ih instalirat.

Dosta puta sam naisao na pitanje “Kako mogu instalirat fontove u Photoshop?” Ne, instalirate ih u Windowse! (vjerojatno je isto i za druge operativne sustave)

Idete na Control Panel >> Fonts, File >> Install new fonts.

To je cijela filozofija Kod sljedeceg pokretanja Photoshopa, fontovi ce vam biti na raspolaganju.

Postoje i razni preglednici i instalatori fontova, koji vam mogu pomoci, ali za osnove se ne morate zamarat slicnim.

Sljedeci tutorial je vrlo jednostavan, no koristi se dosta cesto, tako da, ukoliko ste pocetnik, zasigurno ce vam dobro doci.

Postoji vise nacina za izradu ovakvih slika, a mi cemo vam pokazati najjednostavniji.

Kada smo izabrali sliku, sljedeci je korak taj da je pretvorimo u crno-bijelu. (Image >> Adjustments >> Desaturate)

Alat koji koristimo za vracanje pojedinih djelova u orginal je History Brush Tool.

Sljedece sto je potrebno da odredimo velicinu brusha koja nam odgovara i da “obojamo” detalje koje zelimo vratiti na orginalno stanje.

I to je to, samo je jedna patka u boji!

Ovo je vrlo jednostavan tutorial, no vjerojatno ce te ga sustretati dosta cesto.

Jedino na sto morate paziti prilikom izrade ovakvih slika je to da ne smijete resize-ati sliku prije history brusha. Ukoliko joj mijenjate velicinu, onda je sacuvajte, te opet otvorite u toj velicini.

Svi znamo Britney Spears, posto je ona ikona naseg doba, odlucili smo joj napraviti spomenik! I to nije sve, cak cemo i opisati rad na njemu!

Prvo sto cemo napraviti je postaviti sliku u crno-bijelu. (Image >> Adjustments >> Desaturate)

Sljece od backgrounda slike napravimo layer, a to radimo tako da dva puta kliknemo na ikonu layera, odnosno backgrounda.

Sljedece sto cemo napraviti, je izbrisati pozadinu slike, u ovom primjeru je jednobojna, pa nije tesko. Pozadinu mozemo izbrisati na vise nacina, gumicom, selektiranjem boje ako je jednobojna kao u ovom primjeru, vektorima… Svejedno kako, ali ostavimo samo Britney na slici.

Sada cemo na internetu pronaci neku sliku kamena, nju cemo uportijebiti kod ovog efekta.

Kamen cemo pozicionirati ispod layera na kojem imamo Britney Spears.

Kada nam je oznacen layer na koem imamo kamen, kliknimo ikonu layera sa Britney, te idemo na Select >> Inverse, te izbrisemo sve selektirano.

Sada imamo kamen u obliku Britney.

Sada opet oznacimo layer sa Britney, preklapanje namjestimo na Multiply te ukoliko rezultat nije dobar, smanjimo Opacity layera.

Sada cemo namjestiti oci, da budu realne, posto na kipovima nemamo zjenice.

Clone Stamp Tool-om cemo joj izbrisati oci, odnosno kopirati dio lica umjesto njih.

Rubove ociju mozemo mekanim brushom zacrniti kako bi se dobio efekt trodimenzionalnosti.

Posvjetlit cemo layer na kojem imamo Britney, te cemo dodat u pozadinu kamen, isti onaj koji smo koristili vec te dodati malo sjene (Blending Options >> Drop shadow).

I tako ce kip izgledati kad nasi potomci budu istrazivali nase doba!