Ozadje spletne strani je lahko pomemben grafični dodatek pri celotnem dizajnu spletne strani. V tem vodiču vam bom opisal postopek, kako narediti kvadratke za zgornji del ozadja, na koncu pa boste deležni tudi kode, ki je potrebna za vstavitev ozadja v HTML dokument.

1. Ustvarite nov Photoshop dokument. Moj bo velikosti 100x230 pikslov. Ozadje mora biti prozorno.

2. Na tipkovnici pritisnite tipko D. Pojdite v meni in izberite Filter > Render > Clouds.

3. Na seznamu Layerjev skrijte oblake (oko).

Ustvarite nov Layer (Layer > New > Layer).

4. V orodjarni izberite Marquee Tool in označite kvadrat velikosti 19x19 pikslov. Velikost označenega prostora lahko vidite desno zgoraj v Info paleti. Če je nimate pojdite v meni in izberite Window > Info.

Kvadrat 19x19 pikslov.

V orodjarni izberite Paint Bucket Tool oz. kangljico in pobarvajte kvadrat.

Pritisnite Ctrl+D.

5. V orodjarni znova izberite Marquee Tool in označite kvadrat velikosti 20x20 pikslov. Desno in spodaj mora biti 1px prozoren.

6. Pojdite v meni in kliknite Edit > Define Pattern. Poimenujte ga in kliknite OK.

Znova pritisnite Ctrl+D.

7. Sedaj pojdite v meni in izberite Edit > Fill. Izberite vzorec, ki ste ga prej ustvarili in kliknite OK.

8. Prikažite spodnji Layer z oblaki.

Pojdite v meni: Select > Color Range. Nato kliknite na en črn kvadratek.

9. Znova pojdite v meni in izberite Select > Inverse.

10. Na seznamu Layerjev izberite Layer z oblaki.

Pritisnite tipko Delete. Skrijte Layer s kvadratki.

11. Pojdite v meni in izberite Image > Adjustments > Hue/Saturation. Obkljukajte kvadratek za Colorize in določite barvo.

12. Zdaj boste le še pobrisali nekatere kvadratke.

V orodjarni izberite Marquee Tool označite kvadratek oz. več kvadratkov in pritisnite tipko Delete.

Po občutku nato izbrišite kvadratke. Tam kje kvadratkov ne bo se bo videla barva spletne strani.

Moji kvadratki.

Kvadratke vstavite v spletno stran s pomočjo kode: