Umbre pierdute


Nu am mai scris de mult timp un material propriu despre efecte pe imagini sau texte (pentru simplul fapt că nu sunt un expert în aşa ceva). Dar cum săptămâna aceasta am scris despre Web 2.0 şi despre umbrele folosite, după cum aţi putut vedea de exemplu în situl despre care am scris acum două zile. Era acolo un fundal gri şi un text cu umbre pierdute. Să încercăm să facem aşa ceva. Eu voi merge pe mâna favoritului meu, Paint Shop Pro, dar paşii nu sunt greu de adaptat pentru Photoshop sau GIMP. Mai întâi am scris un text pe un fundal gri închis.

img6

Am dublat layerul text şi al doilea l-am inversat. A ieşit aşa ceva după ce am tras textul inversat dedesubt:

img7

Suntem aproape de sfârşit. La textul oglindit în jos am schimbat culoarea cu un gradient.

img9

Evident, alegerea gradientului trebuie făcută cu inspiraţie, putând alege ca "reflecţia" să fie mai intensă sau mai pierdută. Unul din capetele gradientului trebuie să fie culoarea fundalului. Cealaltă poate să fie culoarea textului sau una între culoarea textului şi a fundalului. A fost simplu, nu?

Dar să luăm un exemplu mai complicat, în care aplicarea de gradient pe text nu merge. Să spunem că avem un alt text:

img10

Similar dublăm layerul şi îl inversăm. Obţinem:

img11

Acum vine o oareşcare diferenţă. Al doilea layer l-am transformat din vectorial în raster, căruia i-am putut aplica o mască. Am folosit în mască gradient de la alb la negru rezultatul fiind cel dorit (de mine cel puţin). Am lăsat în dreapta şi layerele pentru a fi ceva mai clar ceea ce mai sus am descris în cuvinte.

img13

Similar puteţi pune umbre pierdute şi unei imagini, nu doar unui text. Iată o statuie (fotografiată astăzi la o ieşire în Grădina Botanică) pe care am trecut-o cam prin aceeaşi paşi: am decupat un detaliu din imagine şi i-am adăugat o margine albă; am aşezat-o într-un cadru mai larg, în care să încapă şi "răsturnata" ei; la imaginea inversă am folosit gradient în mască. Cum fundalul este un layer diferit, se poate uşor schimba (vedeţi alternativa pe albastru).

img15

Vă amintesc la final că în articolul despre MiniAjax.com am semnalat un script care aplică o astfel de umbră la orice imagine, adăugând class="reflect" la definirea HTML a unei imagini. Dacă vă interesează efectul doar pentru un titlu sau un element din sit, veţi prefera varianta "manuală". A, să nu uit. Acelaşi efect l-am văzut acum câteva săptămâni pe situl Seminarului din Bacău, găzduit de noi.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *