Photoshop tutoriali, html i css savjeti

 

U sljedecem efektu prikazat cemo vam kako mozete ostariti osobu na slici.

Prvo cemo izdvojiti osobu od pozadine, jer cemo pomicati rubove, pa kako nebi doslo do razvlacenja, radit cemo na ofvojenim Layerima.  To mozemo napraviti na vise nacina, ja preporucam da dupliciramo kompletan Layer te samo izbrišemo pozadinu sa gornjeg.

Duplicirati layer mozemo na nacin da ikonu Layera (odnosno Backgrounda) jednostavno povucemo misem na ikonu novog layera. Takoder mozete odvojiti samo facu od ostatka tijela i sl.

Kada smo izbrisali pozadinu, odnosno odvojili samog covjeka, mozemo poceti sa starenjem!

Prvo cemo mu malo posvjetliti kozu. To cemo napraviti sa Dodge Tool-om.

Mozete se igrat s Dodge Toolom, ovisno koliko zelite da bude blijed. Mi cemo u pirmjeru malo vise poblijediti, da bude malo extreminje! Nije lose sa Burn Toolom malo i potamniti npr. podocnjake, al covjek u nasem primjeru ima naocale, pa nista od toga ovaj put!

Sada sljedi najvazniji dio za detalje starenja - Liquify efekt! (Filter >> Liquify)

Malo cemo mu “popraviti” detalje lica kao sto su usta, bore i ostali djelovi koji se prilikom starenja promjene.

Sljedit cemo nekakve prirodne promjene (usta cemo na rubovima spustit, opustit lice i sl.)

FowardWarp Tool-om cemo pomicat djelove lica.

Malo smo mu objesili lice, malo je i mrsaviji, tako da se vidi dio pozadine, ali lako cemo to izbrisati, posto nam je u primjeru jednostavna pozadina.

Covjek iz primjera je recimo u 30-im, mozda i malo vise, i vec je pomalo celav. Znaci, za kojih 30 godina, bit ce potpuno celav!

Za takvo nesto mozemo koristiti Clone Stamp Tool . No mi cemo ici malo u ekstremitete, pa cemo prvo malo deformirat sa Liquify-em. Zbog boljeg efkta cemo mu izduziti glavu, prosirit je malo sa strane da bismo makli i kosu sa strane.

Dobili smo ovako nesto:

Sada cemo uciniti celu covjeka gladom i normalnom!

Takav efekt cemo postici Patch Tool-om.

Radimo na sljedeci nacin: Oznacimo jedan dio (ne prevelik) cele, te ga samo povucemo na drugi dio cele, na taj nacin cemo zamutiti posljedice Liqify-ja i dobit realniju sliku.

Za rubove nemoramo brinuti, lako cemo ih izbrisati.

Ako je slika ektremnije unistena, mozemo koristiti i Blur prije Patch Toola, ili Patch-ati djelove lica na celo. Pocmemo Patch-ati male djelove, pa vece, sve dok ne dobijemo realno celo.

Sada cemo izbrisati gornji dio cele i oblikovati mu glavu. To cemo napraviti obicnom gumicom jaceg ruba. Ukoliko nam se vidi pozadina tada, i nju cemo jednostavno obrisati.

Sredinu mozemo jos malo posvjetliti Dodge Tool-om, malo da se sjaji na suncu!

Sada cemo mu posjediti kosu. Efekt cemo u ovom primejru dobiti tako da oznacimo kosu, te je obojamo u sivu sa Obicnim Brushem.

Malo cemo kose dodat te je malo rascupati Smudge Tool-om.

Namjestimo velicinu smudge-a  na par pixela i malo mu razvucemo kosu.

U kombinaciji sa smudge-om mozemo ponovno koristiti i Burn i Dodge tool za malo kontrasta.

Mozemo mu dodati i malo bora, sa bruhem manjeg opacity-ja, ili patch toolom ukoliko imamo na licu neke bore koje mozemo koristiti.

Burn tool manjeg promjera cemo upotrijebiti jos da mu popravimo nabore, malo ih potamnimo da se vise isticu i to je to!

Iako Photoshop nije idealan program za crtanje u vektorima, za sljedeci efekt koristit cemo upravo njih. Vektore vise koristimo u programima kao sto su Corel i Freehand, ali ih Photoshop podrzava, iako se dosta rijetko koriste.

Alati za crtanje pomocu vektora su sljedeci:

Kod sljedeceg efekta najvise cemo koristiti Pen Tool te Add Anchor Point Tool.

Izaberite neku sliku koju hocete “nacrtati”, pozeljno bi bilo da je slika sto vece rezolucije i dobrih i kvalitetnih kontrasta. No posluzit ce i ostale.

Nakon sto smo izabrali sliku, mozemo poceti s crtanjem. Za pocetak dodajmo novi layer tako da ne crtamo po orginalu.

Sada pocimamo koristiti alat za vektorsko crtanje.

Pen Toolom dodajemo tocke koje ce biti glavne pri crtanju linija. Odredimo nekakvu osnovu kod crta lica, najbolje poceti sa vanjskim rubom. Nemoramo proci cijelo lice odjednom, nego odredimo neku crtu. U primjeru je to lijeva crta brade. Klikovima stvaramo sljedece tocke. Takoder idite u smjeru kojem cemo poslije odrediti debljinu linije. Idite od debljeg prema tanjem. u ovom slucaju od vrha, pa do dna brade.

Pripazite da vam je ukljuceno kao na sljedecoj slici:

Sljedeci alat koji koristimo je Add Anchor Point Tool.

S njim cemo sada uglastu crtu namjestiti tako da vjerno prati crte lica. To radimo na nacin da kliknemo negdje po sredini crte koju smo napravili sa Pen Toolom, te povlacimo. To izgleda ovako:

Znaci, kliknemo negdje po sredini crte i povlacimo, tako da vjerno pogodimo crte lica. Add Anchor Point Tool nam takoder dopusta da povlacimo vec postojece tocke, te da sa denim klikom misa dodajemo i brisemo tocke. Takoder ce vam pomoci dvije pomocne smjernice tocaka koje ce vam se stvoriti uz svaku tocku, te uz svaku privremenu dobivenu klikom.

To je ujedno najtezi dio ovog efekta, Malo vjezbajte crtanje vektorima, cijela je mudrost u tome da prvo napravite neku “skicu” tocaka, pa ih zatim pomicete, te krivite crte koje ste dobili.

Sada cemo tu liniju i nacrtati Brush toolom. Brush tool ili “olovka” je alat koji se vrlo cesto koristi za svakakva crtanja. Prvo je potrebno odrediti velicinu brusha. Za vanjske linije lica koristite deblji brush, a za unutarnje tanji, kako biste istaknuli detalje.

Za crtanje koristite brusheve koji imaju jaci rub, da nemaju mekan prijelaz.

Za bolji efekt crta, koristit cemo Fade brusha.

S ovim efektom postic cemo realnije crte, tako da nece sve bit iste debljine. Pripazite na smjer stavljanja tocaka. Idete od debljih djelova prema tanjima. Poigrajte se sa velicinom Fade-a, ovisno o slici, nemojte da bude jasan i jak fade, vec ga namjestite ravnomjerno, kao na gornjoj slici.

Sada sljedi i primjenjivanje Brusha na liniju vektora. To radimo na sljedeci nacin: Budite sigurni da se oznacili prazan layer, odnosno onaj na kojem nije orginalna slika, zatim kliknite na Paths.

Work Path je linija koju ste nacrtali u vektoru.

Crtanje cemo napraviti tako da kliknemo desnim klikom na Work Path, te kliknemo na Stroke Path!

Otnacite Brush te kliknite OK, i vasa prva crta je tu! Dok vam je jos oznacena vektorska linija, samo pritisnite tipku Delete, i izbrisite je, ona vam vise ne treba.

Ukoliko vam je orginalna slika dosta tamna, i nemozete jasno vidjeti novu nacrtanu crtu, orginal mozete posvjetliti.

Sada taj postupak primjenite i za ostale linije.

Prilikom crtanja, ne morate bit 100% precizni kod rubova, svaki nedostatak lako se moze kasnije popraviti Earser Tool-om i sl.

Oko detalja tipa obrva, obrisa i sl. nemorate se previse truditi, jer cemo ih lakse i efektivnije dobiti kasnije, na drugi nacin.

Nakon sto smo dobili sve vaznije linije, slika nam izgleda otprilike ovako:

Glavni dio posla je gotov! Sljedi bojanje. Bojati cemo tako da cemo napraviti jos jedan Layer, kojega cemo smjestiti izmedu dva postojeca.

Bojamo tako da izaberemo Brush tool. Sada ne trebamo nikakve fade-ove ni ista. Izaberite nekakav obican Brush koji ce vam odgovarati velicinom. Mozete prvo obojati povrsine s nekim koji ima jaci rub, a nakon toga koristite neki mekani za prijelaze.

Da bi vam boje odgovarale, koristite Eyedropper Tool ili kapaljku.Najjednostavniji nacin za koristenje ovog alata j, dok bojate Brzshem, pritisnete tipku Alt te kliknete na boju koju hocete sa slike. Tako npr. bojate lice, prije toga kapaljkom uzmete neku boju lica orginalne slike, i tako za svaku povrsinu posebno. Ukoliko ste posvijetlili sliku, ne morate je ponovno tamniti ukoliko su boje jos uvijek realne.

Ovako ce vam izgledati slika nakon prvog bojanja. Kasnije cemo popravljati rubove, zasad prvo popunimo sve povrsine.

Dobijemo ovako nesto. Sad idemo na ukrasavanje i popravljanje detalja. Prvo napravimo prijelaze izmedu boja. To je najbolje raditi sa Brushem mekanih rubova, pa takoder sa kapaljkom uzimati boje i lagano s njim bojati rubove da se ne vidi. Na isti nacin mozemo sjenciti obrve, obrise i sl. s tim da malo potamnimo brush. Boju koja nam je presla rubove cemo popraviti sa Brushom manjih dimenzija, jaceg ruba.

Kada ste to ucinili, kada je sve obojano kako treba, za malo poboljsanje realnosti slike, mozemo napraviti sljedece.

Lasso Tool-om oznacimo lice, samo do rubova kose vrata, od selekcije napravimo novi Layer (Layer > New > Layer via cut) te mu smanjimo Opacity na nekih 70-80 %, tek toliko da se proziru prve crte lica.

I rezultat je tu:

To je to, slika je gotova. Nadam se uspjesno!

Kod ovog efekta imate dosta mogucnosti, mozete se igrat Custom Brushevima i sl. Osnova je crtanje s vektorima, ostalo vam daje veliku slobodu.

Ukoliko ste pocetnik u Photoshopu, kao i u designiranju stranica, sljedeci tutorial ce vam sigurno dobro doci.

Koliko vam se puta desilo da vas internet browser neku naizgled jednostavnu stranicu ocitava do nekoliko sekunda više nego ostale, usprkos brzini interneta i sl.?

Dosta designera ne ide za tim kolika je zapravo velicina slika na njihovim stranicama, pogotovo pocetnici. Mnogi previse paznje pridaju kodovima, tako da zaborave na slike!

Ukoliko radite na nacin da nacrtate veci dio povrsine, ili cak cijelu stranicu, slike izrezite na Slice-ove.

Slice-ovima odredite podjelu slika, vjerojatno ste podjelili site na header, menu, sadrzaj itd.. Na tim djelovima nece vam biti potreban isti udio boje, kao ni velicina te kvaliteta slike. Pri raspodjeli slika na sliceove, slika ce vam izgledati otprilike ovako:

Slice-ove vrlo lako mozete podesiti kako vam odgovaraju po velicini.

Sljedeci korak je i najbitniji kod optimizacije slika:

Slike nikada nemojte spremati naredbom Save as, vec sa Save for web naredbom!!! (File >> Save for web)

Izbornik prikazan na sljedecoj slici je najvazniji pri ovakvom spremanju.

Opcija Preset vam nudi brz atomatski izbor kvalitete slike.

Ispod nje, u padajucem izborniku možete izabrati u kojem formatu cete spremiti sliku. Najviše se koriste JPEG i GIF format (donekle i PNG). JPEG format je format visoke kvalitete, i njega uvijek koristite za fotografije te slike sa vecim brojem boja. Možete mu namjestiti i Quality i to je ono sto najvise utjece na velicinu slike. 60 je automatska velicina, koju možete smanjiti, ovisno o slici. Isprobajte velicinu, pa vidite koja vam najvise odgovara. Logicno, sto je manja kvaliteta, slika zauzima manje mjesta.

Kod GIF slika, mozete izabrati broj boja. Takoder, manji broj boja vodi do manje velicine slike. GIF-ove koristite za tipke i manje “umjetne” slike koje nemaju toliko boja te in JPEG format nije potreban.

Slike cije su povrsine u jednoj boji ili u jednosmjernom gradientu, možete smanjiti na velicinu jednog pixela, te u css-u namjestiti ponavljanje slike. Vise procitajte u HTML i CSS Tutorialima.