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.
Uređivanje fotografija u photoshopu za početnike
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 (smanjena)
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 veličine fotografije
KADRIRANJE I ZLATNI REZ
Kadriranje umjesto smanjivanja
Želimo li fotografiju bolje kadrirati to možemo učiniti pomoću croop toola 
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
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
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
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
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
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, 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
.. ili umjesto lighten možemo dati blending option overlay….
blending option - overlay
… ili 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 🙂
Slični sadržaj:
- Photoshop retuch - sharpen (Jako slično)
- "Blend if" masking ili kako ukloniti pozadinu oko nepravilnih objekata (Jako slično)
- Nekoliko načina za pojačavanje kontrasta i boje na fotografijama (Jako slično)
- Uređivanje fotografija - pretvaranje jezera u more (Jako slično)
- Photoshop za početnike - posvjetljivanje sjena i tamnih područja (Jako slično)
31 komentara
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.
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.
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”.
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.
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”.
kako ga instalirat 🙂 😉
kako urediti slike profila na facebook???????
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š 😀
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.
kako cu ja skinuti photo scape na svoj kompjuter pa da onda ja mogu sebi uredivati slike…kako pomozite mi
odeš na http://www.photoscape.org/ps/main/download.php
i klikneš na “download now” 🙂
kako ja moguu da skinem photo shop plss nek mi neko da link 🙁
Kako cu ja skinut neki photo editor u kome mogu promjeniti boju ociju i slicno ..
jaoo i menii treba ako neko ima link da mi da,da skinem photo shop plss 🙁
@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.
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.
ja iskreno nzn.. uc u foto…pa je nak malo komplicirano!!jel neko zna kak to radi…??????
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.
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.
🙂 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.
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.
Evo pojednostavnili smo pa će početnicima biti lakše razumjeti.
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.
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…
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)..
Š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.
Gorane dpi -ppi, kaj je to tebi isto ?
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.
kako instalirati?
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.
Milena photoshop nema tu da se posalje link tu moras instaliratii
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 🙂
kako 300 dpi kad mi je onda na printu 2 puta veca nego sto bi trebala biti stvarna velicina