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.