Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć Haitiju

http://www.hck.hr

Pozivom na donatorski broj:

060 90 11 (6,15 kn, PDV uključen)

Uređivanje fotografija u photoshopu za početnike

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas

Početnici u fotografiji uvijek postavljaju ista pitanja: što je rezolucija, na koliko da je namjestim za web ili slanje mailom, koliko da smanjim fotografiju, kako da je malo uredim u photoshopu …? U današnjem tutorialu pokušati ćemo odgovoriti na ova osnovna pitanja.

Za primjer smo ponovo odabrali fotografiju najmlađeg člana Kroativa – naše Silwie. Silwia ima svoj portfolio sa galerijom svojih fotografija i ovo što ćemo danas naučiti, morala je savladati i ona, na samom početku svoje fotografske karijere. Silwia je nekidan napunila 14 godina i ako je mogla ona, moći ćete i vi ;)

originalna fotografija

originalna fotografija (smanjena)

željena kvaliteta

nakon korekcije svjetline, kontrasta i malo kadriranja

SMANJIVANJE VELIČINE I  REZOLUCIJE ZA WEB

Prvo ćemo pogledati kako ispravno smanjujemo fotografiju i koja je veličina i rezolucija najbolja za korištenje na netu.

Dobar običaj je, sve uspješne i lijepe fotografije zadržati posebno i u originalnoj veličini. To je zbog toga što ćemo ih jednom možda poželjeti isprintati, a za print je potrebna što veća rezolucija. (najbolje 300px / inch tj. 300 “točkica” po inču). Jednom smanjena rezolucija kasnije se više ne može kvalitetno povećati. Dakle, fotografiju otvorimo u photoshopu i odmah je spremimo pod drugim imenom u posebnu mapu.

Zatim, odaberemo image / image size / smanjimo rezoluciju na 72 i odaberemo “bicubic sharpen – best for reduction” i potvrdimo . Primjetiti ćemo da se veličina fotografije automatski smanjila na 929 px x 622 odnosno otprilike 3x. Nemojte se prestrašiti ako vaša fotka odjednom bude majušna. Kliknite na view / actual pixels i tek tada će vam se prikazati u punoj veličini.

Sada možemo još urediti kontrast, boju itd… još je smanjiti po želji (odredimo width ili height pazeći da je označen “constrain proportions”) ili je odmah spremiti na način opisan na kraju članka.

smanjivanje rezolucije sa 300 na 72px

smanjivanje rezolucije sa 300 na 72px

KADRIRANJE I ZLATNI REZ

Kadriranje se radi prije smanjivanja rezolucije za web!

Želimo li fotografiju bolje kadrirati to možemo učiniti pomoću croop toola crop-tool koji ćemo namjestiti na veličinu 500 x 333 px (idealno za blog, ovu veličinu i mi koristimo na Kroativu)  ili 750 x 500px što je najbolja veličina za slanje mailom ili web foto galerije ( demo ).

Prilikom označavanja kadra pomoću crop toola, pazimo da nam označeni dio bude nešto veći od veličine koju smo namjestili u gornjoj traci. U suprotnom ćemo označeni kadar uvećati i to će rezultirati mutnom slikom.

Pritom naravno, pazimo na kadriranje. Pri kadriranju zahvatiti ćemo po mogućnosti cijele golubove,  a stup ćemo smjestiti na trećinu širine slike. Uvijek je dobro pri kadriranju koristiti “zlatni rez” tj. podjelu na trećine – okomito ili vodoravno.

kadriranje

kadriranje

KONTRAST I BOJA

Postoji jedno zlatno pravilo pri uređivanju slika i fotografija u photoshopu, a to je da uvijek napravimo duplikat fotografije na posebnom layeru i onda se na njemu igramo. Na taj način, ako pogriješimo uvijek možemo taj layer izbrisati a originalna, početna fotografija nam je ostala nedirnuta. No, to nije jedini razlog, na dupliciranom layeru možemo primjeniti različite “blending opcije”, što ćemo vidjeti kasnije u ovom tutorialu.

Dakle, sada ćemo duplicirati layer.

dupliciranje layera

dupliciranje layera

Silwiina fotografija je oštra, dobro iskadrirana, dinamična i zanimljiva. Međutim, pretamna je, snimljena je u hladovini bez sunca i to ćemo sada jednostavno ispraviti. Odaberemo image / adjustment / i jedno po jedno kliknemo na auto level, auto contrast i auto color.

fotografiji popravimo boju i kontrast u photoshopu

fotografiji popravimo boju i kontrast u photoshopu

Kontrast i boje možemo podesiti i manualno u opcijama image / adjustment / brightness and contrast ili color balance ili curves.

Važno je zadržati prirodne boje kao i detalje u najsvjetlijim i najtamnijim područjima, a da pritom bijelo ostane bijelo, a crno – crno.

rezultat nakon korekcije boje, kontrasta i svjetline

rezultat nakon korekcije boje, kontrasta i svjetline

SPREMANJE ZA WEB

Fotografija je sada dovoljno dobra za naš album ili portfolio.

Da bi fotografija bila što lakša, spremiti ćemo je na slijedeći način: file / save for web. U prozoru koji će nam se otvoriti odabrati ćemo format .jpg i namjestiti na quality 70 – 80. Time nećemo puno izgubiti na kvaliteti slike ali ćemo joj smanjiti “težinu” a to je važno.  Zatim kliknemo na “save” .

SPREMANJE ZA PRINT

Želimo li fotografiju isprintati, ostavimo što veću rezoluciju (najbolje 300 px/inch) a kadriramo je na uobičajeni format 10 cm x 15 cm (ostali formati: 9 x 12, 13 x 18, 18 x 24 cm). Uređenu fotografiju spremamo na način: File / save as / quality 12 / format option-baseline standard.

No, svi se volimo igrati sa filterima i raznim efektima, zar ne? :) Pa isprobajmo i to.

FUN PART – FILTERI I EFEKTI

Filteri su nešto što svi početnici odmah otkriju. No, sa njima ne treba pretjerivati i valja ih koristiti suptilno. U protivnom će dobiveni efekt izgledati “jeftino” i neće nikoga impresionirati.

Gornjem layeru, na kojem smo radili, dati ćemo blending option – soft light.  (Važno je znati da će se efekt mjenjati kako smanjujemo ili povećavamo transparenciju gornjeg layera.)

blendin option - soft light

blendin option - soft light

Zatim ćemo gornjem layeru oduzeti boju: image/adjustment/desaurate

dodati zrno: filter /artistic / grain

i dodati sepia ton: image /adjustment/ photofilter / sepia. Dobiveni efekt podsjeća na stare color fotografije iz šezedesetih.

soft light

soft light, filter i sepia

možemo umjesto blending option soft light odabrati – lighten, čime ćemo dobiti efekt starih crno bijelih fotografija iz doba naših djedova i baki.

desaurate, sepia, lighten

desaurate, sepia, lighten

.. ili umjesto lighten možemo dati blending option overlay….

blending option - overlay

blending option - overlay

… ili hue

blending option - hue

blending option - hue

OSNOVE DOBRE FOTOGRAFIJE

Mogućnosti su, kao što znamo nebrojene. Svatko tko voli fotografiju i fotošop shvatiti će ovo kao igru i igrajući se, otkriti će još mnoge zanimljive efekte. No, prije svega, važno je znati osnove osnova dobre fotografije a to su, osim oštrine:

1. dobro kadriranje, po mogućnosti u “zlatnom rezu” tj na trećine

2. kontrast – bijelo mora biti bijelo, crno mora biti crno i moraju se vidjeti detalji i u najsvjetlijem i u najtamnijem području. Da li će prevladavati svjetli tonovi (high key) ili tamni (low key) ovisi o objektu i željenom efektu.

3. Rezolucija fotografije za korištenje na netu ( slanje mailom ili na web stranici) je 72px/inch. ( Za print i tisak je 300px/inch.) Najpraktičnije veličine fotografija za web su 750 x 500px ili 500 x 333px.

4. Pri smanjivanju fotografije koristimo crop tool ili image size (best for reduction) kako nam se pri smanjivanju fotografija nebi zamutila.

SAVJET ZA KRAJ

Također, jedan savjet svima koji se bave fotografijom i imaju svoje foto galerije a to je -
NE PRETJERUJTE SA PHOTOSHOPOM!
Prije desetak godina photoshop nije postojao i ono što smo snimili bilo je dobro ili je bilo loše. Nije bilo puno mogućnosti za naknadne ispravke, pogotovo u kolor fotografiji. Po tome su se razlikovali dobri fotografi od loših.

Znači, želite li pokazati svoje fotografsko umijeće , tada photoshop koristite što manje. Umjesto toga potrudite se odrediti dobru ekspoziciju, odabrati ispravno osvjetljenje i kadar već pri samom snimanju. U suprotnom, vaša galerija pokazivati će vaše umjeće u photoshopu, a ne ono najvažnije – koliko ste dobar fotograf.

I to bi bilo sve za danas. Pratite nas i dalje :)

izrada web foto galerija - foto portfolia

izrada web foto galerija

Označeno s: ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

14 komentara

  • Zlatko kaže:

    Ovo je stvarno za 5.ali volio bih da napravite istu stvar (uputu)sa recimo sljedecim problemom.Dakle fotku 0d 3072 x 2304 pix smanjiti na 970 x 370 a da se pritom slike ne izobliči.Volio bih to nauciti jer razni alati sliku izoblice.

  • Weberica kaže:

    Zlatko, neznam što misliš pod “izobliči” jer je smanjivanje fotografija u photoshopu jako jednostavno:
    image /image size u prozorčiću koji ti se otvori učiniš slijedeće:
    dolje označiš prozorčić “Constrain proportions” i “resample image” i odabereš iz padajuće liste “bicubic sharper(best for reduction)”,
    zatim paziš da su ti označeni px (a ne cm ili slično),
    odrediš željenu širinu i klikneš “ok”.
    Zatim file /save for web, odrediš quality negdje između 70-80, jpg (ili po želji) i lupiš “save”.
    Ako spremaš za printanje a ne za web tada možeš odrediti veličinu u cm (recimo 15 x 10 cm) ali svakako pazi da ti dpi bude 300 px/inch i ne spremaš za web nego samo “save as”.

  • Zlatko kaže:

    postupajuci po tvojoj uputi naisao sa na jos jedan problemdakle sve napravim po uputi:mage /image size u prozorčiću koji ti se otvori učiniš slijedeće:
    dolje označiš prozorčić “Constrain proportions” i “resample image” i odabereš iz padajuće liste “bicubic sharper(best for reduction)”,TO je ok ali ja bas hocu dimenziju W 970x h 370ali cim stavim taj podatak i oznacim “Constrain proportions”W 970 ostaje ali H se poveca na 780 to je problem.Dakle tobih volio da mi objasnis kak da rijesim da dobijem zeljenu dimenziju a da pritom slika ostane ista,znaci identicna kao orginal.Znam da moda davim ali to mi je ovoga trena vrlo bitno.Hvala na razumjevanju.

  • weberica kaže:

    Constrain proportions u prijevodu znači “zadrži proporcije” tj, ako povećaš širinu tada će se proporcionalno povećati i visina fotografije. Ukoliko želiš drugačije dimenzije (neproporcionalne originalu) tada sliku trebaš kadrirati pomoću “crop tool-a” što je objašnjeno u ovom članku u podnaslovu “kadriranje i zlatni rez”.

  • lowe kaže:

    kako ga instalirat :) ;)

  • Izidora Hodzic kaže:

    kako urediti slike profila na facebook???????

    • silvia kaže:

      e izidora.

      slike profila na facebooku se nemogu jos urediti ako si ih vec stavila na facebook.

      ali ju mozes crop-at. tj. izrezati.
      evo ako to neznaš :D

      stisnes ispod slike stavi kao sliku profila.
      i direktno ti se cijela slika zatamni a jedan dio (četverokut) ostane svjetliji da lakše vidiš što vidiš.
      naci taj četverokut mozes povecati. tako da stisnes na jedan od tih 4 kuta. i držeči ljevu tipku miša povučeš prema strani koju zelis.

      nadam se da ces ovo skuziti.
      ako nisi jos uvjek skuzila.
      dodaj me na facebook-u.
      zovem se teta silviaa ;D čaoo.

  • mirzeta kaže:

    kako cu ja skinuti photo scape na svoj kompjuter pa da onda ja mogu sebi uredivati slike…kako pomozite mi

  • sweeT kaže:

    Kako cu ja skinut neki photo editor u kome mogu promjeniti boju ociju i slicno ..

  • weberica kaže:

    @milena, @sweet – photoshop je Adobeov program koji nije besplatan. Iako na netu sigurno postoje stranice gdje se mogu skinuti krekane verzije Adobe paketa to je zapravo ilegalno i nitko ti ne smije ovdje ostaviti link na takvu stranicu.
    Predlažem ti da skineš sa neta neke od alternativnih besplatnih photo editora poput “picnik-a” ili “photoscape-a”, uostalom možeš i sama ugooglati ” free photo editor” i pogledati što se nudi. Takvi besplatni programi su i puno jednostavniji za početnike i amatere te ti neće biti problem snaći se u njima.

  • Ljamci kaže:

    http://www.gimp.org/ GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">