Šioje pamokoje parodysiu kelis tekstūrinius fonus labiausiai naudojamus tinklapių dizaino kūrime.

Pamokoje naudosiu tris pavyzdžius labiausiai naudojamų tekstūrinių fonų, tinklapių dizainų kūrime.

1. Spalvos apdangalo fonas.

1. Pattern fonas.

2. Fotografinis fonas.

3. Organinis fonas (imituoja organą, marmurą, medžio tekstūrą ir kita)

Savo darbų pavyzdžiuose vienam fonui naudojau netgi kelias tekstūras, pvz: plokščios spalvos apdangalo Gradient tekstūra ir Pattern.

Dėmesio ! Originalaus dydžio nuotraukos netelpa į straipsnio lapą, todėl jos yra sumažintos. Paspauskite ant nuotraukų , kad pamatytumėte originalaus dydžio bei kokybiškas nuotraukas.

Spalvos apdangalo fonas

Pavyzdys (paspauskite ant nuotraukos)

Spalvos apdangalo fonas gali būti vienspalvis, ar susidėti iš kelių spalvų. Šiame pavyzdyje naudojau klasikinį variantą, dviejų spalvų foną, naudodamas Layer - Layer style - Blending Options koregavimo nustatymą Gradient Overlay. Tai klasikinio stiliaus spalvų parėjimas "Linear", labai plačiai naudojamas. Žinoma galite naudoti ir kitokį stilių (Radial, Reflected, ar kita).

Skaityti pamoką apie Gradient Map, Gradient Tool.

Pattern fonas

Kurdami foną iš pattern, patariu, jeigu jau naudojate labai smulkias pattern tekstūras, naudokite visa laiką Opacity nustatymą sluoksnių lentelėje. Atėjus į svetainę ir pamačius smulkų pattern, gali pradėti skaudėti akis ir po kurio laiko lankytojas paliks svetainę su mintimi daugiau nebegrįžti čia. Aš neskirdamas ar pattern smulkus ar ne, siūlau visuose variantuose naudoti Opacity nustatymą, mano nuomone pattern neturi ryškiai aiškiai matytis ir rėžti akies.

Pavyzdys (paspauskite ant nuotraukos)

Pamoka

1. Pasidarome naują sluoksnį ir nudažome, bet kokia spalva.

2. Einame į Layer - Layer Style - Blending Options ir pasirenkame koregavimo nustatymą Gradient Overlay.

Gradient Overlay nustatymai:

Spalva 1 - #002a3b

Spalva 2 - #016892

Style - Radial

Scale - 150%

Angle - 90

Varė ant Reverse

3. Sluoksnių lentelės apačioje paspauskite ant juodai balto rutuliuko (Creat new fill or adjustment layer) ir pasirinkite koregavimo režimą Pattern Fill.

4. Pasirenkame tamsiai pilką pattern, kaip parodyta mano pavyzdyje.

5. Pattern sluoksnio Opacity pakeičiame į 20 %.

Rezultatas (paspauskite ant nuotraukos)

Fotografinis fonas

Fotografinis fonas gali būti iš visos fotografijos, arba apimti nepilną fono dalį. Šiame pavyzdyje naudojau nepilną fotografijos fono dalį. Gan populiarius ir daugelio mėgiamas naudojimo būdas. Nepatarčiau naudoti fotografijos, kaip pilno tinklalapio fono, nes gali kilti bėdų užmaunant svetainės dizainą ant naršyklės.

Pavyzdys (paspauskite ant nuotraukos)

Pamoka

1. Pasidarome naują sluoksnį ir nudažome jį juoda spalva.

2. Atsidarome norimą nuotrauką ir ją įsikeliame ant fono. Derinkite taip, kad nuotraukos spalvos būtų kuo panašios į fono.

Rezultatas

Organinės tekstūros fonas

Naudojant šias tekstūras, iš pradžių reikėtų jas apdirbti taip, kad jos derėtų prie mūsų svetainės dizaino.

Pavyzdys (paspauskite ant nuotraukos)

Pamoka

1. Susikuriame naują sluoksnį ir foną nuspalviname bet kokia spalva.

2. Einame į Layer - Layer Style - Blending Options ir pasirenkame koregavimo nustatymą Gradient Overlay.

Gradient Overlay nustatymai:

Spalva 1 - #172800

Spalva 2 - #61ab01

Style - Radial

Scale - 150%

Angle - 90

Varė ant Reverse

3. Uždedame ant fono savo norimą tekstūrą ir Blend Mode pakeičiame į Overlay.

4. Sluoksnių lentelės apačioje paspauskite ant juodai balto rutuliuko (Creat new fill or adjustment layer) ir pasirinkite koregavimo režimą Gradient Map.

Gradient Map nustatymai:

Spalva 1 - #881d01

Spalva 2 - #ffea00

5. Graident Map sluoksnio Blend Mode, pakeičiame į soft light.

6. Pasirinkime Gradient Map sluoksnį koreguoti Layer Mask režime.

7. Naudojant Brush Tool pasirenkame juodą spalvą ir dažome ten, kur mums Gradiento nereikia, o pasirinkę baltą spalvą, dažome ten, kur mums jo trūksta.

Rezultatas