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ć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

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 Silvie. Silvia 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. Silvia 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  da nam se otvori “dialog box”. Fotografiju možemo smanjiti tako da smanjimo širinu u pixelima ( odredimo width ili height pazeći da je označen “constrain proportions” kako bi bila smanjena proporcionalno) zatim odaberemo “bicubic sharpen – best for reduction” i potvrdimo

Sada možemo još urediti kontrast, boju itd…  ili je odmah spremiti na način opisan na kraju članka.

smanjivanje rezolucije sa 300 na 72px

smanjivanje veličine fotografije

KADRIRANJE I ZLATNI REZ

Kadriranje umjesto smanjivanja

Ž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” .  “Save for web” opcija automatski će smanjiti rezoluciju naše fotografije na 72 px/inch ali će zadržati širinu i visinu u pixelima.

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, 20×30 cm… itd). 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 :)

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

31 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.

  • stella kaže:

    ja iskreno nzn.. uc u foto…pa je nak malo komplicirano!!jel neko zna kak to radi…??????

  • goran kaže:

    Hm. Cemu ovo:

    “Zatim, odaberemo image / image size / smanjimo rezoluciju na 72…”, i onda opet pri kraju:

    “Rezolucija fotografije za korištenje na netu ( slanje mailom ili na web stranici) je 72px/inch”.

    Ovo je opasna neistina. :)

    Rezolucija u pixelima po inchu za sliku koja ce se prikazivati na webu nije *uopce* bitna.
    Na ekranu postoje pikseli. To je ono sto je bitno za prikaz na webu.
    Dakle broj piksela, koliko ih ima – 400×300, 800×600, 1024×768 itd.
    I tu sve zavrsava kad se radi o *rezoluciji* slika za web.

  • weberica kaže:

    kada sliku od 300 px/inch spremimo za web (save for web) automatski će reza biti smanjena na 72 px a težina slike biti će manja ovisno koji postotak kvalitete odaberemo a to nam je za web bitno.

    Za printanje vrijedi pravilo što veća reza = oštrija slika

    2 slike istih dimenzija u pixelima ali različite rezolucije imati će različite dimenzije u cm.

    • goran kaže:

      :) Ja sam htio reci da kod snimanja slika za web treba voditi racuna o *pixelima*, a ne o DPI/PPI. Jer to, da bi rezoluciju trebalo staviti na 72 tocke po incu radi “optimiziranog prikaza na webu”, to se toliko cesto ponavljalo tokom zadnjih 10-15 godina da je to prestrasno.

      Ti to nisi tako rekla, ali si spomenula 72 pixela po inchu kao jednu od faza pripreme slika za web. Zasto?
      Taj podatak se kod prikaza na webu nigdje ne koristi. Ne utjece na kvalitetu, a ni na velicinu fajla uz konstantne dimenzije u px.

      Moze se smanjiti i na 1 ppi, i opet ce se jednako prikazati na ekranu – ovisno
      o tome koliko ima *pixela*.

      Velicina jpeg fajla ce biti manja uz visu kompresiju i nizi kvalitet, to da. I takva optimizacija je bitna za web, slazem se.

      Ali pixeli *po inchu* i velicina/kvaliteta
      zapisanog fajla koj ce se prikazati na webu nemaju nikakve veze.

  • goran kaže:

    Uglavnom, poanta svega je da bi trebalo izbaciti ovaj dio koji spominje 72px po inchu.
    Pixeli po inchu su nebitni za prikaz na webu.

    Razmislite malo koja je ovo zbrka za pocetnika, ako prati tutorial.
    Jer, prvo mu se kaze da treba smanjiti rezoluciju slike na 72px/inch, i Photoshop je vec u tom koraku odmah promijenio dimenzije, jer je ukljucen Resample image.
    Dobio je nove dimenzije slike, u ovom slucaju 929×622.
    Ako je prije toga napravio i crop (kadriranje), imat ce i manje od toga.
    Dakle, u *najboljem* slucaju ce sad imati 929 px po horizontali,
    i onda ce mozda reci da mu zapravo trebaju dimenzije 1024×768. I sto sad? :)

    Vasom metodom ce svatko tko ovo cita raditi 2 promjene dimenzija fotografije
    (osim ako bas 929×622 nije ono sto mu treba:), prvi put kod promjene na 72px/inch, drugi put kod promjene na tocne pixel dimenzije koje mu stvarno trebaju, umjesto da obavi samo taj drugi korak.

  • Weberica kaže:

    Evo pojednostavnili smo pa će početnicima biti lakše razumjeti.

  • goran kaže:

    Ajde probat ću još jednom. Nadam se samo da će biti neke koristi od ovoga.

    Cijeli problem je u tome što se pojam “toliko i toliko točaka po inču” uopće spominje kad se priča o optimizaciji slika za web.

    Imaš piksele na ekranu.
    Kod snimanja fajla, imaš te piksele zapisane kao niz nekakvih brojčanih vrijednost u file-u. (Ok, ovo je jako pojednostavljeno – u stvarnosti svi relevantni formati koriste kompresiju. Ali poslužit će dobro kao model).

    Kad se slika prikazuje na ekranu, pročita se ta brojčana vrijednost koja definira odredjeni pixel. I to je ključna stvar za razumijevanje toga da dpi/ppi nema veze s prikazom na ekranu. Jer – gdje su tu inči?

    Jednostavno – nema ih. Ti kažeš da Photoshop kod Save for Web “automatski smanji rezoluciju na 72 px/inch”. To nije točno. S koje vrijednosti ju smanji? Sve i da je u exif headeru zapisana neka vrijednost, ona ne igra nikakvu ulogu u prikazu.

    Photoshop jednostavno u tom dialogu *napiše* 72, i to je jednostavno broj koji pokazuje odnos broja piksela i veličine isprintanog dokumenta. Ali taj podatak nema nikakve veze s kvalitetom prikaza na ekranu ili optimizacijom. Problem nastaje onog časa kad imaš uključen Resample Image, a mijenjas px/inch broj. Što Photoshop onda radi?

    Jednostavno, mijenja broj *piksela* (Image Size) tako da mu je zadovoljena jednadžba Image size = Document Size(u inčima) x broj_piksela_po_inču.

    A ako isključiš checkbox pored resample image, možeš mijenjati broj točaka po inču kako god hoćeš, i nikom ništa. 72 ili 300 – tako svejedno.

    Dakle, slika se na ekranu prikazuje s brojem piksela koliko ih ima i gotovo. Image size u pikselima i stupanj jpg kompresije, to je važno. Inči i pikseli po inču nisu.

    Vjeruj mi da gomila ljudi ovo već 2 godine čita i misli kako 72 px/inch samo po sebi znači da je tu nešto optimizirano za web upravo zbog tog broja i da se to “tako radi”.
    U tome je problem. A kad ih pitaš zašto, to onda ne znaju objasniti.

    • weberica kaže:

      hvala što si se potrudio da to tako detaljno objasniš, zanimljivo…
      Znam da je za tisak potrebno 300 dpi jer sve manje od toga daje mutež. Što se tiče 72ppi za web to je defaultna postavka u ps za save-for-web i za grid_960 ps template , tako su nas učili na grafičkom i web dizajnu pred x godina i to je toliko sveprisutno da to nikad nisam provjeravala niti o tome razmišljala. Eto.. čovjek uči dok je živ…

  • mario kaže:

    U biti to je jedan od problema po pitanju obrazovanja kod nas – zastarenja… tehnologija se rapidno razvija, a teorija u skolama ostaje ista. Gotovo 15-ak godina je proslo otkad se je 72ppi standard uvazavao pod “must” ..

    Sada kriviti Adobe sto jos uvijek 72 drzi kao defaultnu postavku i nema bas smisla. Al da je pomalo zbunjujuce, je; za podosta ljudi, kako vani tako i kod nas. Nadam se da ce u buducnosti i oni malo poraditi na tome sa obzirom da su upravo njihovi alati ti koji su vodeci u creative industriji (uz ajde Autodesk al to je vec jedno sasvim drugo polje)..

  • Goran kaže:

    Što se Adobe-a tiče, ne znam što bi ih koštalo da iz “Save for web” izbace pojam ppi. Pitanje je kako je uopće završio tu.

    A dalo bi im se prigovoriti još puno toga. Žalosno je da web dizajneri u komunikaciji, bilo međusobno bilo s developerima koriste jedan alat čiji je format zatvoren i vlasništvo jedne firme.
    Standardi i formati dokumenata bi morali biti neovisni o jednom proizvođaču, bez obzira da li je taj proizvođač Microsoft, Adobe ili netko treći.
    Adobe sigurno ne bi uništilo da porade na interoperabilnosti i otvorenosti formata, a ne ovo što rade s PSD-om.

  • Rango kaže:

    Gorane dpi -ppi, kaj je to tebi isto ?

    • Goran kaže:

      Nigdje nisam rekao da je to isto. Poanta je u ovome dijelu “per inch”. Za ono o čemu se ovdje priča je potpuno nebitno koji se pojam koristi, jer nijedan ni drugi nemaju smisla kod *snimanja* grafike za web.

  • ajla kaže:

    kako instalirati?

  • Marko kaže:

    Pozdrav, našao sam zanimljivih i dobroh članaka kod vas i to me veseli, navratim i nadalje po koje zrnce znanja. Jedna mala napomena, podjela fotografije trećinama nije zlatni rez, zlatni rez ima drugačiju podjelu od trećina, no trećina je zlatno pravilo u fotografiji koje se lako uči i pamti.

  • Slatka Mala kaže:

    Milena photoshop nema tu da se posalje link tu moras instaliratii

  • prog. kaže:

    Svaka cast za ovaj tut.
    Pravim plaka za takmicenje iz programiranja i pronasao sam sliku vece velicine nego sto mi treba (treba da bude dimenzije A3) http://4.bp.blogspot.com/-gaydwZJZiY8/T7kSBwK5vEI/AAAAAAAAAKE/KzO_ahYe5Vg/s1600/C++.jpg to je ta slika ali nikako ne mogu da napravim ovu sliku u pozadinu, da mi poklopi cijelu A3 stranicu. Kasnije bih stavio jos 1-2 slike preko nje i tekst neki i to bi bilo to…ako moze mala pomoc :)

  • Mario kaže:

    kako 300 dpi kad mi je onda na printu 2 puta veca nego sto bi trebala biti stvarna velicina

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="">