Praneškite apie mus:



0

Web dizaino kūrimo pamoka, kurioje parodysiu penkis horizontalaus meniu pavyzdžius, kuriuos galėsite susikurti patys.

 

5 horizontalaus meniu pavyzdžiai

 


 

 

 

 

 

 

Pirmas meniu

 


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

2. Susikuriame naują sluoksnį ir nudažome bet kokia spalva.

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

 

Gradient Overlay nustatymai:

Spalva 1 - #013549

Spalva 2 - #026085

 

 

4. Užrašome nuorodas.

 

Teksto nustatymai:

Šriftas - Verdana

Dydis - 11 pt.

aa - None

Spalva - Balta (#FFFFFF)

 

 

5. Susikuriame naują sluoksnį ir nukeliame po tekstiniu sluoksniu.

6. Su Rectangular Marquee Tool įrankiu, nusibraižome stačiakampį ir užpildome bet kokia spalva.

 

 

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

 

Gradient Overlay nustatymai:

Spalva 1 - #038cc0

Spalva 2 - #00bdfb

Angle - (-90)

 

 

8. Susikuriame naują sluoksnį.

9. Pasirenkame Pencil Tool įrankį ir nusibraižome kelias linijas, kurių spalva yra #00bdfb.

 

 

10. Su Pencil Tool įrankiu nusipiešiame šią rodiklytę.

 

 

11. Dublikuojame ją tris kartus (Layer - Duplicate layer) ir išdėstome tarp nuorodų tarpų.

 

 


Antras meniu

 


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

2. Susikuriame naują sluoksnį ir nudažome #4e4332 spalva.

 

 

3. Susikuriame naują sluoksnį.

4. Su Rectangular Marquee Tool nusibraižome stačiakampį ir nudažome bet kokia spalva.

 

 

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

 

Gradient Overlay nustatymai:

Spalva 1 - #e14c17

Spalva 2 - #fb8027

 

 

7. Susikuriame naują sluoksnį.

8. Su Pencil Tool įrankiu, nusibraižome meniu viršuje baltą liniją.

 

 

9. Sluoksnio Blending Mode parenkame "Overlay" ir nustatome 28% Opacity.

 

 

10. Užrašome nuorodas.

 

Teksto nustatymai:

Šriftas - Verdana

Stilius - Bold

Dydis - 12 pt.

aa - None

Spalva - Balta (#FFFFFF)

 

 

11. Užrašome nuorodoms aprašymus.

 

Teksto nustatymai:

Šriftas - Verdana

Dydis - 11 pt.

aa - None

Spalva - Balta (#FFFFFF)

 

 

12. Susikuriame naują sluoksnį.

13. Su Pencil Tool įrankiu, nupaišome skirtukus.

 

Pirmo skirtuko spalva - #892804

Antro skirtuko spalva - #fcb786

 

 

14. Skirtuko sluoksnio Opacity nustatome į 30 % ir išdėliojame skirtukus, tarp nuorodų tarpų.

 

 

15. Susikuriame naują sluoksnį ir nukeliame po tekstiniu sluoksniu.

16. Su Rectangular Marquee Tool nusibraižome stačiakampį ir užpildom bet kokia spalva.

 

 

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

 

Gradient Overlay nustatymai:

Spalva 1 - #e14c17

Spalva 2 - #fb8027

Angle - (-90)

 

18. Sluoksnio Opacity nustatome į 70%.

 

 

 

Trečias meniu

 


1. Norint pasidaryti foną, jums prireiks šių dviejų fotografijų.

 

 

 

2. Įsikeliame fotografiją į savo darbo lapą.

 

 

3. Susikuriame naują sluoksnį ir nukeliame po fotografija. Sluoksnį nudažome juoda spalva.

4. Pasirenkame savo fotografijos sluoksnį, einame į Filter - Blur - Gaussian Blur.

 

Gaussian Blur nustatymai:

Radius - 80

 

 

5. Įsikeliame antrą fotografiją į savo darbo lapą.

 

 

6. Einame į Filter - Blur - Gaussian Blur.

 

Gaussian Blur nustatymai:

Radius - 80

 

 

7. Dublikuojame antros fotografijos sluoksnį (Layer - Duplicate Layer) ir pastumiame į dešinę pusę.

8. Sluoksnio Opacity sumažiname iki 50 % ir su trintuku aptriname kraštus.

 

 

9. 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 - #0483a7

Spalva 2 - #013821

 

 

10. Koregavimo sluoksniui Gradient Map, uždedame Blend Mode "Soft Light" ir Opacity pakeičiame į 50%.

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

 

Levels nustatymai:

Juodas punktas - 14

Vidurinysis punktas - 0,92

Baltas punktas - 172

 

 

 

12. Pasidarome naują sluoksnį.

13. Einame į Image - Apply Image ir spaudžiame Ok.

14. Einame į Filter - Blur - Gaussian Blur.

 

Gaussian Blur nustatymai:

Radius - 50

 

 

15. Dublikuojame sluoksnį (Layer - Duplicate Layer) ir sluoksnio Blend mode pakeičiame į "Soft Light".

 

 

16. Užrašome nuorodas.

 

Teksto nustatymai:

Šriftas - Verdana

Dydis - 11 pt.

aa - Sharp

Spalva - Balta (#FFFFFF)

 

 

17. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Drop Shadow.

 

Drop Shadow nustatymai:

Opacity - 30%

Distance - 1 px

Spread - 0 %

Size - 1 px

 

 

18. Susikuriame naują sluoksnį ir nukeliame po tekstiniu sluoksniu.

19. Pasirenkame Rounded Rectangle Tool įrankį ir nusibraižome meniu juostą.

20. Spaudžiame kitą pelės mygtuką ant darbo lapo ir pasirenkame Make selection, Ok.

21. Nudažome mūsų pažymėtą vietą balta spalva.

 

Rounded Rectangle Tool nustatymai:

Pasirenkame - Paths rėžimą

Radius - 20 px

 

 

22. Pasirenkame meniu sluoksnį ir pakeičiame jo Blend Mode į "Overlay", o Opacity į 30 %.

 

 

23. Susikuriame naują sluoksnį.

24. Pasirenkame Rounded Rectangle Tool įrankį ir nusibraižome per puse mažesnę meniu juosta iš aukščio, ant jau esamos meniu juostos.

25. Spaudžiame kitą pelės mygtuką ant darbo lapo ir pasirenkame Make selection, Ok.

26. 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)


 

27. Sluoksnio Opacity sumažiname iki 30%.

 

 

28. Pasirenkame savo pagrindinio meniu sluoksnį. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Stroke.

 

Stroke nustatymai:

Size - 1 px

Position - Outside

Opacity - 65 %

Fill Type - Gradient

 

 

Gradient nustatymai:

Spalva 1 - balta (#FFFFFF)

Spalva 2 - balta (#FFFFFF)

Antros spalvos juodo tono Opacity - 0%

Angle - (-90)


 

 

 

Ketvirtas meniu

 


1. Susikuriame naują darbo lapą.

2. Susikuriame naują sluoksnį ir nudažome #253236 spalva.

 

 

3. Parašome nuorodas.

 

Teksto nustatymai:

Šriftas - Verdana

Dydis - 11 pt.

aa - Sharp

Spalva - #7a7a79

Siuntiniai spalva - Balta (#FFFFFF)

 

 

4. Susikuriame naują sluoksnį ir nukeliame po tekstiniu sluoksniu.

5. Pasirenkame Rounded Rectangle Tool įrankį ir nusibraižome meniu juostą.

6. Spaudžiame kitą pelės mygtuką ant darbo lapo ir pasirenkame Make selection, Ok.

7. Nudažome mūsų pažymėtą bet kokia spalva.

 

Rounded Rectangle Tool nustatymai:

Pasirenkame - Paths rėžimą

Radius - 7 px

 

 

8. Dublikuojame meniu sluoksnį (Layer - Duplicate Layer) ir nukeliame po pagrindiniu meniu. Išjunkime šį sluoksnį, mums prireiks jo vėliau.

9. Susikuriame naują sluoksnį ir nukeliame ant meniu sluoksnio.

10. Pasirenkame Rounded Rectangle Tool įrankį ir nusibraižome mygtuko formos detalę.

11. Spaudžiame kitą pelės mygtuką ant darbo lapo ir pasirenkame Make selection, Ok.

12. Nudažome mūsų pažymėtą bet kokia spalva.

 

Rounded Rectangle Tool nustatymai:

Pasirenkame - Paths rėžimą

Radius - 7 px

 


13. Laikydami nuspaudę CTRL klavišą paspauskime ant mūsų mygtuko formos detalės sluoksnio, ji turėjo pasižymėti.

 

 

14. Pasirenkame meniu sluoksnį ir klaviatūroje spaudžiame Delete mygtuką. Išjungiame Mygtuko formos detalės sluoksnį.

 

 

15. Įjungiame mygtuko formos detalės sluoksnį ir pakartojame 11-tą veiksmą. Nustumkime detalę į kairę pusę prie kairiojo meniu kampo.

 

 

16. Pasirenkame Rectangular Marquee Tool įrankį. Spaudžiame ant darbo lapo kitą pelės mygtuką ir pasirenkame Select Inverse,

17. Paspaudžiame ant meniu sluoksnio ir su trintuku nutriname kairįjį kampą. Analogiškai tai padarome ir su dešiniuoju.

 

 

 

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

 

Gradient Overlay nustatymai:

Spalva 1 - #e2e4e0

Spalva 2 - #fefefe (Location - 70%)

 

19. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Stroke.

 

Stroke nustatymai:

Size - 1 px

Position - Inside

Spalva - Balta (#FFFFFF)

 

 

12. Įjungiame 8-tame veiksme dublikuotą meniu sluoksnį ir pakeliame į viršų.

 

 

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

 

Gradient Overlay nustatymai:

Spalva 1 - #015b7d

Spalva 2 - #009ebe

 

 

22. Susikuriame naują sluoksnį.

23. Pasirenkame Pencil Tool įrankį ir nusipaišome štai šią ikoną.

 

Spalva - #0091b1

 

 

24. Dublikuojame ikona du kartus (Layer - Duplicate Layer) ir įterpiame tarp nuorodų tarpų.

 

 

25. Pasižymime visus meniu sluoksnius laikydami nuspaudę CTRL klavišą.

26. Dublikuojame visus sluoksnius ir sujungiame (Layer - Merge Layers).

27. Einame į Edit - Transform - Flip Vertical.

 

 

28. Pasirenkame Rectangular Marquee Tool įranki ir pažymime puse mūsų dublikuoto apatinio meniu

 

Rectangular Marquee Tool nustatymai:

Feather - 10 px

 

 

29. Paspaudžiame du kartus Delete mygtuką klaviatūroje ir sumažiname sluoksnio Opacity iki 10%

 

 


Penktas meniu

 


1. Susikuriame naują darbo lapą

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

 

Gradient Overlay nustatymai:

Spalva 1 - #c5e2ea

Spalva 2 - #ffffff

Style - Reflected

Varnelė ant Reverse

 

 

3. Susikuriame naują sluoksnį.

4. Su Rectangular Marquee Tool nusibraižome stačiakampį ir uždažome #0053a3 spalva.

 

 

5. Parašome nuorodas.

 

Teksto nustatymai:

Šriftas - Verdana

Dydis - 10 pt.

aa - Sharp

Spalva - Balta (#FFFFFF)

 

6. Einame į tekstinio sluoksnio Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Drop Shadow.

 

Drop Shadow nustatymai:

Blend Mode - Normal

Distance - 1 px

Spread - 0 %

Size - 0 px

 

 

7. Susikuriame naują sluoksnį

8. Su Rectangular Marquee Tool nusibraižome stačiakampį ir nudažome bet kokia spalva.

 

 

9. Einame į stačiakampio Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Gradient Overlay.

 

Gradient Overlay nustatymai:

Spalva 1 - #b4d059

Spalva 2 - #93ac44

 

 

10. Dublikuojame stačiakampio sluoksnį (Layer - Duplicate Layer).

11. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Color Overlay.


Color Overlay nustatymai:

Spalva - Juoda (#000000)

 

 

12. Einame į Filter - Blur - Gaussian Blur.

 

Gaussian Blur nustatymai:

Radius - 5

 

 

13. Nukelkime juodo stačiakampio sluoksnį, po žaliuoju.

14. Matome išlindo iš viršaus juodos spalvos, mums jos nereikia, todėl ją ištrinkime, taip, kaip aš pažymėjau. Tam galite naudoti žymėjimo įrankį Rectangular Marquee Tool. Pažymite norimą vietą ir paspaudžiate Delete klavišą klaviatūroje.

 

 

15. Sumažiname juodo stačiakampio sluoksnio Opacity iki 40%

 

 

16. Susikuriame naują sluoksnį.

17. Su Pencil Tool įrankiu, nusipaišome #bccd81 spalvos rėmelį aplink žalią stačiakampį.

 

 

18. Su Rectangular Marquee Tool pasižymime puse mūsų meniu.

 

 

19. 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


 

 

20. Sumažiname Gradient Fill sluoksnio Opacity iki 10 %.

 

 

21. Dublikuojame pagrindinio meniu sluoksnį ir nukeliame jį po mėlynuoju.

22. Einame į Layer - Layer Style - Blending Options. Pasirenkame koregavimo režimą Color Overlay.

 

Color Overlay nustatymai:

Spalva - #b4d059

 

23. Nuleiskime dublikuoto meniu sluoksnio kopija 4 px žemyn.

 

 

24. Susikuriame naują sluoksnį.

25. Po žalia liniją nubrėžiame 1 px storio liniją, naudodami Pencil Tool įrankį.

 

Linijos spalva - #93ac45

 

Pigūs lėktuvų bilietai

Perskaityta: 17175 kartų
Priedai
1 meniu (1279), 2 meniu (1186), 3 meniu (1210), 4 meniu (1278), 5 meniu (1234),
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
atspindys    web    web 2.0    meniu    horizontalūs   
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: