Photoshop tutoriali, html i css savjeti

Kako se u dosadasnjim postovima pisalo za ljude za koje pretpostavljamo da imaju neku razinu znanja o Photoshopu, sada cemo objasniti i neke stvari za one koji su totalni pocetnici, tako da nakon toga mozete lakse povezati neke izraze i funkcije koje opisujemo u ostalim tutorijalima.

Kreiranje novog dokumenta

File > New.

Tu odredite naslov slike, velicinu, rezoluciju, defaultna je 72. To je i rezolucija koja je se koristi za slike koje ce sluziti za web, odnosno za kompjuter. Ona je tolika koliku je i vidite na vasem zaslonu. Vece rezolucije se koriste za tiskanje, odnosno za printane formate, tako da one nisu realne vecinine na zaslonu. Ukoliko koristite Photoshop samo za slike koje cete pregledavati odnosno koristiti na kompjuteru, slobodno koristite samo rezoluciju 72. Mozete koristiti i vece rezolucije ako su vam potrebne. Ukoliko ste pocetkin, nemojte. Samo namjestite velicinu slike.

Promjena velicine slike

Kad uredujete vec gotovu sliku, mozete je uvijek resizeati, a to cinite na sljedeci nacin:

Image > Image size

Mozete promjeniti velicinu po pixelima, centimertima. Naravno, centimetri se odnose na tiskanu verziju,  a vi pocetnici dragi, nemojte se oslanjat na to, nego koristite samo pixele! Rezoluciju ostavite opet 72.

Slaganje alata

Ako ne znate za ovu opciju, ona ce vam sigurno dobro doc! Kada koristite dosta alata, namjestate, palete sa alatima, layerima, history… ce vam se pomjesati. Ako ste pocetnik, a jeste, inace nebi ovo ni citali, desit ce vam se i da ih isljucite. Sve ih lako mozete vratit na orginalno mjesto, na sljedeci nacin:

Window > Workspace > Default Workspace

Sve je nazad na mjestu, drugi put ne gasite

Opisat cemo izradu slikovnog menu-a pomocu css-a.

Prvo cemo nacrtati menu, kompletan, ili sliku po sliku, svejedno. Lakse nam je cijeli skupa.

Poduplajte .psd file u kojem radite. (Desni klik na naslov u okviru slike > Duplicate)
Koristit cemo hover stanje, sa drugom bojom teksta na dupliciranoj slici.

Prije rezanja slika, obojat cemo sva polja u hover stanje.

Sada sljedi najveca “mudrost” u izradi menu-a. Racimo da imamo ove slike u .psd formatu; sada cemo ih pretvoriti u -jpg, ili .gif ili jednostavno koristiti Flatern image opciju. Za to se mozete prisjetiti tutoriala Optimiziranje slika. Sada cemo te slike spojiti u jednu. Jedna neka bude povise druge.

To cemo napraviti tako da jednu povecamo za njenu visinu, te samo prebacimo ovu drugu unutar nje same.

(Image > Canvas size)

Zasto ovo radimo ovako? Zato jer ako radimo odvojene slike za normalno stanje linka i hover verziju, prelaskom misa preko linka imat cemo djelic sekunde koji ce ocitavati drugu sliku. Na ovaj nacin izbjegavamo taj ruzni efekt. Ovako browser ucita odmah link stanje, i hover stanje, te prelaskom misa preko linka ne gubi nista.

Sada cemo izrezati sliku na slideove, svaki link posebno, iako cak ni to ne moramo, postoji mogucnost da on ostane ovakav, te da ga samo rasporedimo unutar linkova, ali to necemo koristiti, vec svaki za sebe.

Sada slijedi css, preko kojeg cemo odrediti koji dio gdje da dode.

a.home:link, a.home:visited {
display: block;
height: 30px;
width: 104px;
background: url(slike/home.gif) bottom left no-repeat;
text-indent: -9999px;
float:left;
}

a.home:hover {
display: block;
background: url(slike/home.gif) top left no-repeat;
height: 30px;
width: 104px;
}

Tako bi izgledao kod za tipku home. Za svaki drugi link cemo dodati njegov class.
Znaci, odredili smo velicinu svakog linka, te smo jedan postavili u gonji dio, drugi u donji.
text-indent: -9999px; ovaj kod koristimo za to da maknemo tekst linka. On i dalje tu postoji, ali smo ga makli 9999 pixela ulijevo, pa ne postoji teoretska sansa da ce nam smetat.

I to je to, dobili smo slikovni meni, koji nema tog ruznog djelica sekunde ocitavanje hover slike.

Ovaj tutorial je donekle slican kao i Crtanje po fotografiji tako da prvo njega mozete ponovno prouciti, zatim idemo na ovaj tutorial! Jeste? idemo onda!

Ovakav stil sam najvise vidao na flyerima i nekakvim slicnim materijalima, pa cemostoga ostat u slicnom tonu. Obradit cemo sliku djevojke koja plese, prikladno za flyer

Sada cemo sliku posterizirati, posto nam za ovakav ekeft ne trebaju detalji, ovako ce Photoshop napraviti dio posla umjesto nas.

( Image > Adjustments > Posterize )

Namjestimo intezitet posterizea toliko da nam odvoji boje dovoljno da se vise linije prijelaza. U primjeru je to 10.

Sada mozemo izbrisati pozadinu ukoliko nam smeta, u ovom slucaju to nebi bilo lose.

Znaci, od backgrounda napravimo layer ako vec nismo, i brisemo, cime god vam je lakse, ja koristim kombinaciju Magic Wand Toola i obicne gumice za detalje. Brisanje pozadine ne mora biti precizno toliko, pa nemojte gubiti tu previse vremena.

Sad prelazimo na crtanje vektora.

Prvo cemo koristiti Pen Tool.

Pazite da vam je ukljucena opvija Paths.

Sada cemo crtati vektore po linijama djevojke. Bolje je poceti od manjih detalja, tako da imamo bolji uvid u sliku. Vece povrsine cemo na kraju ubaciti.

Najbolje je otvoriti novi layer za svaki detalj, tako da kasnije mozemo uredivati ukoliko bude potrebno.

Pocet cemo od ogrlice, pen toolom oznacite rubne tocke.

Sada cemo Add Anchor Point Toolom dodavati, tocke, kriviti linije i prilagoditi Path realnim crtama.

Takoder se mozete opet prisjetiti tutoriala Crtanje po fotografiji.

Oznacavajte vanjske rubove, jednostavnije je ponoviti isto sa unutarnjim nego oduzimati Path.

Pazite da radite na novom layeru, jer sada idemo na ispunjavanje bojom oznacenog polja.

Kliknite ikonu za popunjavanje patha bojom (ili deni klik na path, i fill path)

Nije orginalno ove boje i oblika, al nema veze, djevojka iz naseg primjera ce bit ljepsa od orginalne

Sada tako treba popuniti i ostale detalje na slici. Sve sto trebamo raditi je vjerno pratiti linije nastale posteriziranjem.

Sada cemo poceti crtati obrise koze. Napravit cemo to tako da cemo boje podjeliti na slojeve. Jednostavno, prema posteriziranju oznacite djelove koji se isticu, te ih obojate, kasnije cemo lako mijenjati boju, te dodavati jod detalja.

Sada vec mozemo obojati i najveci dio koze, pa nam jos ostaju detalji.

Za bolji izgled kose, mozemo se jos jednom prisjetiti Crtanje po fotografiji.

Sve sto nam ostaje je maknuti ogrinalnu sliku, i ubacit neku atraktivniju pozadinu i to je to!

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!