Praneškite apie mus:



0

Web dizaino pamoka "Jūros gerybės". Šis dizainas atitinka firminio stiliaus dizainą, kuriuo galite prezentuoti save ar firmą. Dizainas gan švarus ir praktiškas. Nepamiršta ir Web 2.0 detalių, be kurių šiuolaikiniame dizaino kūrime neapsieinama.

 

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.

 

 

Pavyzdys (paspauskite ant nuotraukos)

 



1. Susikuriame naują darbo lapą (File - New)

.

Naujo lapo nustatymai:

Width - 900 px

Height - 750px


2. Susikuriame naują sluoksnį ir su Fill Tool nudažome bet kokia spalva foną.

3. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Gradient Overlay.

 

Gradient Overlay nustatymai:

Spalva 1 - #001c35

Spalva 2 - #00598a



4. Susikuriame naują sluoksnį. Su Rectangular Marquee Tool pasižymime stačiakampį ir nudažome balta spalva.



5. Laikydami nuspaudę CTRL klavišą paspauskime ant mūsų stačiakampio sluoksnio, jis turėjo pasižymėti.

6. Sluoksnio Opacity padarome 50%.

7. Einame 5 Filter - Blur - Gaussian Blur

 

Gaussian Blur nustatymai:

Radius - 30,0



8. Kol mūsų stačiakampio sluoksnis yra pažymėtas, pasidarome naują sluoksnį.

9. Einame į Edit - Stroke.

 

Stroke nustatymai:

Width - 1px

Spalva - balta (#FFFFFF)

Location - inside


10. Kol mūsų stačiakampio sluoksnis yra pažymėtas, pasidarome dar vieną naują sluoksnį.

11. Einame į Edit - Stroke.

 

Stroke nustatymai:

Width - 1px

Spalva - #002b47

Location - outside


12. Balto rėmelio Blend Mode pakeičiame į Soft Light.



13 . Sukurtoje lentelėje užrašome norimą tekstą.

 

Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Arial

Dydis - 12 pt.

aa - none



14. Susikuriam naują sluoksnį ir su Rectangular Marquee Tool pasižymime dar vieną stačiakampį. Jis turėtų būti didesnis už pirmąjį. Nudažome stačiakampį balta spalva.



14. Atliekame šiuos veiksmus 5-6-7.



15. Atliekame šiuos veiksmus 8-9-10-11-12.



16. Ant lentelės užrašome norimą tekstą.

 

Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Verdana

Dydis - 12 pt.

aa - none



17. Susikuriame naują sluoksnį ir jame nusipaišome stačiakampį.



18. Atliekame šiuos veiksmus, 5-6-7.



19. Atliekame šiuos veiksmus, 8-9-10-11-12.



20. Laikydami nuspaudę CTRL klavišą, paspauskime ant balto rėmelio sluoksnio ir jį ištrinkime.



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

 

Gradient Fill nustatymai:

Spalva 1 - balta (#FFFFFF)

Spalva 2 - balta (#FFFFFF)

Antros spalvos juodo tono Opacity - 0%

Angle - (-90)




22. Laikydami nuspaudę CTRL klavišą paspauskite ant serijos sluoksnių, kurie sudarė šį maža stačiakampį (Stačiakampis, du rėmeliai) ir padarykite jų kopijas (Layer - Duplicate Layer).

23. Pastumkite stačiakampį į dešinę pusę.



24. Susikuriame naują sluoksnį. Su Pencil Tool nusipaišome štai šią pikselinę figūrą.

 

Pencil Tool nustatymai:

Dydis - 1 px

Teptuko spalva - balta (#FFFFFF)



25. Dublikuojame mūsų pikselinės figūros sluoksnį (Layer - Duplicate Layer).

26. Sustatome figūras į mano nurodytas vietas.



27. Įrašome norimą tekstą į prisijungimo laukelius.

 

Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Verdana

Dydis - 11 pt.

aa - none



28. Susikuriame naują sluoksnį ir nusipaišome patvirtinimo mygtuką. Nudažome jį balta spalva.



29. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Gradient Overlay.

 

Gradient Overlay nustatymai:

Spalva 1- balta (#FFFFFF)

Spalva 2 - #c1c1c1

Angle - (-90)


30. Atliekame šiuos veiksmus, 8-9-10-11-12.



31. Laikydami nuspaudę CTRL klavišą paspauskite ant balto rėmelio sluoksnio, kad jisai pasižymėtų. Ištrinkite sluoksnį.

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

 

Gradient Fill nustatymai:

Spalva 1- balta (#FFFFFF)

Spalva 2 - #c1c1c1

Angle - (-90)




33. Susikurkite naują sluoksnį. Su Pencil Tool nusipieškite štai šią pikselinę figūrą.

 

Pencil Tool nustatymai:

Spalva - juoda (#000000)

Teptuko dydis - 1 px



34. Nusipieštą figūra uždėkite ant patvirtinimo mygtuko ir figūros sluoksnio Opacity pakeiskite į 50%.



35. Įsikelkite savo norimą nuotrauką. Ja naudosime, kaip baneri.



36. Laikydami nuspaudę CTRL klavišą paspauskite ant trijų mano pažymėtos lentelės dalių, t.y lenteles ir dviejų rėmelių.

37. Pasidarykite lenteles kopiją (Layer - Duplicate Layer) ir nuleiskite ją žemiau banerio.



38. Susikuriame naują sluoksnį. Nusipaišome mano pažymėtoje vietoje ploną juostelę baltos spalvos ir pakeičiame jos Opacity į 50%.



39. Lentelė bus naudojama, kaip horizontalus meniu. Joje užrašome meniu nuorodų pavadinimus.

 

Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Arial

Dydis - 12 pt.

aa - none



40. Susikuriame naują sluoksnį. Su Pencil Tool nusipaišome 1 px storio 7 taškus. Taškų spalva - #002b47.



41. Pasidarome keturias sluoksnio kopijas (Layer - Duplicate Layer), ir išdeliojame taip, kaip parodyta mano pavyzdyje.



42. Susikuriame naują sluoksnį. Su Brush Tool nusipaišome Vieną baltos spalvos rutuliuką. Teptukas turi būti Soft, švelniais kraštais.

43. Padarome 5-ias sluoksnio kopijas (Layer - Duplicate Layer) ir išdėliojame rutuliukus taip, kaip parodyta mano pavyzdyje.



44. Laikydami nuspaudę CTRL klavišą paspauskime ant kiekvieno rutuliuko sluoksnio ir juos sujunkime (Layer - Merge Layers).

45. Su Rectangular Marquee Tool pažymėkime vietą ant kurios yra išlinde rutuliukai ir paspauskite Delete mygtuką. Rutuliukai turi likti tik ant meniu juostos.



46. Rutuliukų sluoksnio Blend Mode nustatome Overlay ir Opacity pakeičiame į 60%.



47. Įsikelkime norimas nuotraukas vienodo dydžio.



48. Laikydami nuspaudę CTRL klavišą paspauskime ant kiekvienos nuotraukos sluoksnio ir sujunkime juos (Layer - Marge Layer).

49. Susikuriame naują sluoksnį ir einame į Edit - Stroke.


Stroke nustatymai:

Width - 2 px

Spalva - balta (#FFFFFF)

Location - outside


50. Rėmelio sluoksnio Blend Mode pakeičiame į Soft Light.



51. Užrašome norimą tekstą po nuotraukomis.


Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Arial

Dydis - 12 pt.

aa - none



52. Su Rectangular Marquee Tool pasižymime nuotraukų sritį

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

 

Gradient Fill nustatymai:

Spalva 1 - balta (#FFFFFF)

Spalva 2 - balta (#FFFFFF)

Antros spalvos juodo tono Opacity - 0%

Angle -121,61




54. Sluoksnio Opacity pakeičiame į 8%



55. Susikuriame naują sluoksnį. Su Pencil Tool nusipaišome kelias linijas, kaip pavyzdyje.


Pencil Tool nustatymai:

Dydis - 1 px

Spalva - balta



56. Linijų sluoksnio Opacity nustatome į 8%.



57. Dublikuojame sukurtus veiksmus 52-56 žingsnyje ir išdėliojame taip, kaip parodyta pavyzdyje.



58. Įsikeliame norimą nuotrauką ir prie jos parašome norimą tekstą.


Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Verdana

Dydis - 13 pt.

aa - none



59. Prirašome Pavadinimą.


Teksto nustatymai:

Spalva - balta (#FFFFFF)

Shriftas - Verdana

Šriftas - bold

Dydis - 13 pt.

aa - none


60. Prirašome datą. Datos sluoksnio Opacity nustatome į 50%.


Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Verdana

Dydis - 10 pt.

aa - none


61. Prirašome nuorodą skaityti daugiau.


Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Verdana

Dydis - 11 pt.

aa - none



62. Tą ką sukūrėme kairėje pusėje, dublikuojame (Layer - Duplicate Layer) ir patalpiname dešinėje pusėje.


Teksto nustatymai:

Spalva - balta (#FFFFFF)

Šriftas - Arial

Stilius - bold

Dydis - 11 pt.

aa - none



63. Užrašome kategorijų pavadinimus.



64. Pasidarome nuotraukų skirtukus iš 24-tame veiksme kurtos pikselinės figūros. Dublikuoajme viena figūrą tris kartus ir išdėstome horizontaliai, taip gaudami vieną skirtuką. Likusius dublikuojame (Layer - Duplikate Layer) ir išdėstom tarp kitų nuotraukų.


 

 

Rezultatas (paspauskite ant nuotraukos)

 


Perskaityta: 13320 kartų
Priedai
Simas
Autorius: Simas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt administratorius, web dizaineris.
Susiję straipsniai
Autoriaus atsitiktiniai
Raktažodžiai
stroke    Gradient Map    atspindys    Blur    web    dizainas   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
Photoshop meniu
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: