Background pentru web

Daca dorim sa putem un background pentru site-ul nostru si observam ca aceasta imagine de tip pattern este foarte mare ca si dimensiuni, va fi necesar sa ne folosim de un artificiu pentru a nu ingreuna banda de trafic.

La o imagine de 2Mb, daca site-ul nostru va fi vizitat de 50 de persoane zilnic, asta va insemna un trafic de 100Mb/zi numai din imaginea de background.

Pentru un background cu iarba se da imaginea bruta:

Daca vom incerca sa facem un background cu ea (sa o repetam pe verticala si orizontala) pentru site vom observa ca imbinarile vor fi vizibile.Pentru a rectifica acest lucru mergem in meniul de photoshop la Filter>Other>Offset si cu Wrap Around bifat tragem de sliderul pentru verticala la jumate si de sliderul pentru orizontala la jumate.

Exemplu: daca imaginea are 500px*600px vom trage 250px de sliderul pentru latime si 300px de sliderul pentru inaltime. Vom observa liniile de unire imperfecta a imaginii de care va trebui sa scapam cu ajutorul uneltelor de tip healing brush.

Practic marginile fotografiei initiale a fost trase spre interior. In interior noi vom putea netezi imaginea iar de exterior s-a ocupat deja photoshopul pentru ca noi sa nu sesizam imbinarea.

Nu este neaparat sa tragem de slidere perfect la jumatate. Putem sa trecem si 150px cu 100px. Practic marginile fotografiei sunt aduse din exterior spre interior, la interior urmand sa le netezim noi, mai putin contand ca aceste margini interioare nu sunt perfect la jumatatea fotografiei.

Imaginea finala dupa imbricare:

A doua varianta dupa imbricare:

Acum incercati sa le folositi intr-o pagina web sa vedeti diferenta.
Codul css pentru fixarea unei imagini ca background este:


body{
background-image:url(grass.jpg);
}


Atasez o textura facuta de mine din alte doua texturi default ale photoshopului.

Explic pe scurt cum am obtinut-o.
Deschidem o foaie de lucru. Dam dublu click pe layerul cu lacatelul(de altfel si singurul) si acesta va deveni layer0 si va fi editabil.
Intram in layer style(semnul fx de jos) si alegem patern overlay. La pattern overlay selectam satin. Marim sau miscoram paternul tragand de slide, dupa cum dorim.
Mergem si la color overlay si alegem albastru si la mod dam multiply 100%.
Iesim din layer style dam click dreapta pe imagine si alegem flatten image.
Acum efectuam operatiunea cu offset dupa care folosim uneltele de healing pentru a netezi interiorul imaginii.
Aplicam al doilea patern Metal Landscape cu overlay 30%. tot din layer style.
Salvam imaginea si o putem folosi ca background pentru pagina noastra de web.

Deja lucrez la un site pentru care folosesc textura de satin.

Ce este Droplet si Batch?

Ce putem face cu acest instrument?

Sa vedem cum arata si de unde il creem.
Iconita dropletului arata asa

Folosind tehnica drag&drop tragem peste iconita dropletului o fotografie care va fi automat prelucrata dupa cum am setat dropletul sa actioneze. Cu ajutorul lui putem redimensiona fotografii, desatura, aplica automat mai multe filtre, etc etc. Toate aceste operatiuni le inregistram in actions iar apoi atasam dropletului un set de actiuni.



Mergem in meniul de photoshop la File>Automate>Create Droplet... Se deschide o fereastra unde avem in partea de sus Save Droplet In..- Choose. Aici alegem calea unde vrem sa se salveze dropletul. De regula pe desktop.
Mai jos, in aceeasi fereastra avem actiunile (Actions)care dorim sa le atasam dropletului. Se va alege setul, apoi actiunea care se doreste a fi aplicata.
Si mai jos in fereastra mai gasim optiuni de salvare a imaginilor prelucrate cu dropletul.
Dupa ce efectuam setarile dam ok pentru a salva dropletul.

Nu ne mai ramane decat sa tragem o imagine peste iconita dropletului si intreaga pleiada de operatiuni se vor aplica peste fotografie.

Asemanator dropletului gasim si optiunea Batch care se afla tot in File>Automate. Practic face aceleasi lucruri ca si dropletul. Daca vrem sa ne semnam fotografiile dintr-un folder si se le salvam gata semnate intr-un alt folder, alegem sursa (folderul cu imaginile nesemnate) si destinatia (folderul unde vom pune pozele dupa ce le vom semna). Dupa ce creem o actiune in prealabil, alegem actiunea in fereastra Batch-ului, sursa si destinatia si dam OK: Pozele vor fi prelucrate una cate una si salvate in locatia indicata.