Prezentarea imaginilor pe web

Pe masura ce am capatat mai multa experienta in fotografie mi-am dat seama de un lucru: 99% din persoanele care imi vad fotografiile fac asta prin intermediul Internetului. Asta inseamna ca vanzarile de printuri nu merg prea bine. 🙂

Dar mai inseamna ca felul in care prezint imaginile in mediul online este foarte important. Numai uitandu-te la un print poti cu adevarat sa admiri detaliile dintr-o fotografie, sa te bucuri de bogatia culorilor si de un contrast pe masura. Numai asa poti sa te conectezi cu adevarat la atmosfera prezentata si imaginea sa iti trezeasca in suflet sentimente mai bune. Tocmai de aceea am cautat metode de a ma apropia cat mai mult de imaginea tiparita atunci cand prezint imaginile pe web.

Totul a plecat de la o metoda aplicata de Marc Adamus, un fotograf pe care il apreciez foarte mult. Va recomand cu caldura sa ii studiati stilul, care chiar daca nu este acceptat de multi, fiindca libertatea sa artistica depaseste conventionalul (ce-o mai fi insemnand si asta), e unul ce reflecta mult devotament acestei arte. Din pacate articolul original publicat in Nature Photographers Online Magazine nu mai exista, dar cu siguranta, la o cautare rapida, veti gasi posturi de-ale lui pe forumuri sau tot felul de variante care deriva din metoda lui.

Era sa uit. Aveti nevoie de PS pentru asta si totul se intampla, bineinteles, dupa ce ati finalizat de editat imaginea. Daca lucrati cu layere, dati Flatten si creati o copie a layerului de baza pe care sa lucrati (cu Ctrl+J). Daca aveti un layer separat pe care faceti sharpening la rezolutie nativa, atunci lucrati pe acesta. Iata in continuare pasii pe care ii urmez:

1. Deschideti fereastra Image Size (cu Ctrl+Alt+I) si reduceti dimensiunea imaginii la 1300px pe latura lunga.
2. Aplicati Sharpen (din meniul Filter>Sharpen) de 2 ori, uneori chiar de 3 ori. Imaginea o sa arate destul de rau.
3. Reduceti din nou la 700px. Deja imaginea arata bine, dar o s-o facem sa arate si mai bine.
4. Aplicati Smart Sharpen cu un Amount de 100% si Radius de 0,3px.
5. (Optional) Veti observa uneori ca „marginile” (zonele de contrast dintre pixelii deschisi si pixelii intunecati – un exemplu bun sunt crestele muntilor avand in spate nori sau cerul) vor avea o claritate aparenta prea mare. Pentru a elimina acest efect nedorit, creati o masca pentru layerul pe care lucrati si acoperiti zonele respective cu instrumentul Brush la o opacitate intre 30% si 60%. Pentru a-l selecta, apasati tasta B si reglati-i diametrul cu tastele [ si ] (scurtaturile va fac viata mai usoara :)). Incercati sa aveti un diametru cat mai mic. Apasand tasta X, asigurati-va ca aveti selectata culoarea implicita, adica negru, de prim plan. Uitati-va in stanga jos, la bara de instrumente ca sa vedeti ce culoare a fost selectata (de prim plan sau de fundal).
6. (Optional) Alteori, in urma aplicarii acestui sharpen, saturatia si contrastul se pot diminua si trebuie reintroduse. O metoda foarte eficienta de sporire a contrastului local este functia Unsharp Mask (tot din meniul Filter>Sharpen). Folositi un Amount de 10% si un Radius de 20px si veti vedea diferenta.
7. Convertiti imaginea in spatiul de culoare sRGB (Edit>Convert to Profile), cel mai des folosit in mediul online, pentru a va asigura ca imaginea se va vedea la fel pe aproape orice monitor.
8. Salvati imaginea cu optiunea Save for Web and Devices si sunteti gata. Simplu, nu?

Va recomand sa experimentati cu fiecare pas de mai sus pentru a gasi combinatia care vi se potriveste. In loc de 1300px puteti sa reduceti la 1100px sau la 1500px. Puteti incerca sa aplicati Sharpen chiar de 4 ori sau o singura data. Daca vreti sa aveti o dimensiune finala mai mare sau mai mica aveti in vedere pastrarea unui raport intre 1,5 si 2 intre dimensionarea intermediara si cea finala.

Cu siguranta veti gasi sau chiar veti descoperi metode mult mai bune si mai eficiente decat asta. Aici doar am prezentat o etapa din workflow-ul meu, care functioneaza si despre care am fost intrebat de multe ori. Sper sa va foloseasca.

Daca aveti orice fel de nelamurire in legatura cu informatiile prezentate mai sus va invit sa lasati un mesaj aici sau sa imi scrieti. Si inca ceva: procesarea imaginilor nu va face fotografi mai buni, dar este un aspect critic in prezentarea lucrarilor voastre.

Veratrum #2

Veratrum #2
Atentia la detalii conteaza. Click pe imagine pentru o versiune mai mare.

Uite ca am gasit si metoda lui Marc Adamus publicata pe un forum chiar de el. Si puteti sa aruncati o privire si peste acest articol. Asta ca sa imi desfiintez singur postul. 🙂

Aveti grija si lumina buna!

Anunțuri
Acest articol a fost publicat în Tips & Tricks. Pune un semn de carte cu legătura permanentă.

10 răspunsuri la Prezentarea imaginilor pe web

  1. Andrei zice:

    Interesant!

    Cred că ai putea face toate astea și cu GIMP, caz în care … n-ai mai avea nevoie de licență de Photoshop (care e scumpă).

  2. Ar trebui mentionat si dimensiunea fisierelor jpeg la capitolul prezentarea fotografiilor pe web, fiindca este un aspect la fel de important cat de repede se incarca fotografia. Nimeni nu vrea sa astepte secunde sa vada o singura fotografie, iar cand sunt 10-15 fotografii intro galerie, apar probleme.

    Trebuie gasit balansul intre calitatea acceptata si marimea fisierului si marimea fotografiei. Cred ca pe internet este recomandat ca latura cea mare a fotografiei sa fie intre 600-800 pixeli.

    In cazul landscape nu prea sunt probleme, dar la portret apar, deoarece monitoarele au o rezolutie de 800-1080 pixeli, din care trebuie scazut taskbarul, chenarul, meniul si in unele cazuri toolbarurile instalate in browser, deci in final ajungem la o inaltime utila de 600-800 pixeli.

    Uita-te la galeria mea, am incercat sa fie cat mai optimizat pt vizualizare pe web.

  3. ubern00b zice:

    in sfarsit m(ne)-ai lamurit! Doamne de cand voiam sa stiu secretul. sincer, iti multumesc.

  4. Dorin Bofan zice:

    Multumesc mult de comentarii.

    Andrei, nu am incercat GIMP pana acum, dar s-ar putea sa functioneze. Algoritmul nu ar trebui sa fie foarte diferit. Am inteles ca pentru aplicatia Capture NX functioneaza.

    Fabian, ai dreptate, ar fi trebuit sa mentionez si acest aspect. Romania are totusi o viteza de download destul de buna, deci la dimensiuni asa mici ale imaginilor nu ar trebui sa fie probleme. M-am uitat peste galerie si imaginile sunt destul de sharp, dar cred ca se poate scoate mai mult, fara a exagera. Ai un portofoliu foarte bun. Felicitari!

    ubern00b, ma bucur ca iti foloseste.

  5. Sunt multe aplicatii online de optimizarea imaginilor, dar recent am descoperit PunyPNG care functioneaza foarte bine cu imagini JPEG si PNG.

    Dorin, ai dreptate, in Romania viteza de internet este destul de mare, dar hosturile romane nu prea sunt de rapide, si sunt convins ca multi bloggeri si fotografi folosesc hosturi din strainatate, cum este in cazul tau WordPress, si atunci nu mai avem latime de banda de multi megabiti ci 1-2 Mbps, deci 128-256 kb/s.

    Cand sunt mai multe imagini pe o pagina, browserul face conexiuni diferite, si de fiecare data trebuie calculat pingul, timpul de a face conexiunea si dupa aceea incepe descarcarea. In cazul in care ai 5-10 imagini de 150-200 kb, ajungi lejer la 1-2 megabyte, care deja ia 10 secunde pt incarcare, care e mult.

    Google a inceput sa ia in calcul si viteza de incarcare a paginilor, si timpul recomandat de ei este de cel mult 2 secunde! Nu este factorul cel mai imporant, dar conteaza daca vrei sa ajungi in fata la cautari, si este foarte important din cauza vizitatorilor nerabdatori.

  6. Dorin Bofan zice:

    Foarte interesante informatiile tale. Am mai invatat ceva astazi.
    Da, aici depinde cu siguranta si de felul in care e conceput situl, daca imaginile se incarca toate o data sau se incarca pe rand. Ideea pana la urma e ca trebuie gasit un compromis intre o dimensiune acceptabila a fotografiilor (eu imi salvez imaginile la maximum 200kb) si o calitate cat mai buna a prezentarii web. Eu inclin mai tot timpul spre calitate, cu riscul ca pagina/ imaginea sa se incarce mai greu. Pana acum insa nu am avut probleme de incarcare si nici nu mi-au fost semnalate, dar asta poate fiindca hostingul (smugmug) e de incredere.
    E o chestiune destul de complicata daca stai sa te gandesti bine si imi face placere sa stiu ca sunt oameni, ca tine, care se gandesc la fiecare detaliu si trateaza problema cu o atentie deosebita.

  7. Intradevar fotografie sunt mult mai vizualizate pe internet dar vanzarile nu merg pt ca este criza.

  8. Gelu Toaipa zice:

    Chiar ma gandeam sa-ti scriu sa te intreb cum obtii asa o claritate cand prelucrezi imaginile tale pentru web, imagini care imi plac foarte mult de altfel. Si am gasit postul asta 🙂 Si pentru ca intr-adevar m-a luminat, iti multumesc sincer.

    Acum pentru ca ai mentionat ca ai inteles ca algoritmul functioneaza si pt Capture NX, m-ar interesa sa stiu mai multe detalii (Capture nu are Sharpen ci doar USM si Highpass)

  9. Dorin Bofan zice:

    Salutare Gelu,
    Multumesc mult de comentariu. Din pacate nu am folosit pana acum Capture NX, dar mi-au spus prieteni care lucreaza cu el ca ar functiona. Nu mi-au dat detalii insa. Ma gandesc ca daca faci redimensionarea cu Highpass sau chiar cu USM s-ar putea sa mearga.

  10. fotogogu zice:

    „…trebuie gasit un compromis intre o dimensiune acceptabila a fotografiilor… si o calitate cat mai buna a prezentarii web. Eu inclin mai tot timpul spre calitate…”

    Cred ca asa este cel mai corect. Cu specificatia ca o imagine mai mare, sa zicem intre 1000 si 1200px la 150-200k (vorbim aici exclusiv de prezentarea pe web) are si o calitate mai buna – tonuri, detalii – dar si mai mult impact asupra privitorului. Din pacate unele galerii de profil limiteaza drastic dimensiunea imaginilor expuse. Faceti un experiment: priviti aceeasi imagine la 800px si la 1200px; diferenta este, de departe, notabila.
    In ceeace priveste claritatea, un amic procedeaza cam asa: desi trage numai in format raw, in convertor nu se atinge de sharp. Odata transferata imaginea in PS, o dubleaza ca dimensiuni si, dupa ce o proceseaza asa cum ii convine, ii aplica high-pass destul de puternic, cu radius intre 4 si 6 si, pe acelasi layer, USM 100-150/250 plus filtrul de noise din PS la setarile implicite. Micsoreaza imaginea la dimensiunile dorite (900-1200px latura mare) si se joaca la sistemul de amestec si la transparenta pana ii convine rezultatul. Revine la dimensiunea initiala, contopeste layerele si aplica un filtru de zgomot (utilizarea filtrelor high-pass si USM are ca urmare si cresterea suparatoare a zgomotului) . Daca este cazul, sterge gradual portiuni din layerul de h-p, acolo unde nu este nevoie de contrast mare sau daca detaliile ar fi exgerate. Ultima operatie: Surface blur 2/3. Prin aceasta metoda asigura o claritate excelenta si cu detalii bogate imaginilor pentru web dar si culori putin mai viguroase. Bineinteles, grosismentrul filtrului h-p cat si sistemul de amestec il face individual la fiece imagine, in functie de cerinte, personalizat. Atentie! In imaginea initiala (marita) detaliile si claritatea sunt exagerate si aceasta nu poate fi prinata. Sistemul este valabil numai pentru micsorare si expunere pe web. Aici aveti cateva imagini din galeria lui, procesate in felul acesta. Mai trebuie specificat ca foloseste una dintre cele mai slabe sticle – Tamron 70-300, ala cu macro 1/2, de trei dolari bucata.

    http://www.galeriafoto.com/photos/showphoto.php/photo/118327/size/big/cat/500/ppuser/2881

    http://www.galeriafoto.com/photos/showphoto.php/photo/118179/size/big/cat/500/ppuser/2881

    http://www.galeriafoto.com/photos/showphoto.php/photo/117920/size/big/cat/500/ppuser/2881

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s