Jūs esate sename manualai.lt puslapyje.
Naujasis puslapis yra v2.manualai.lt

forumas.manualai.lt

kodai.manualai.lt

dizainas.manualai.lt

idomu.manualai.lt

top

Sekite mus Facebook'e

Sekite mus Facebook'e

Vartotojo meniu

Forumo naujausi


5 horizontalūs meniu PDF Spausdinti
Autorius: Neshas   

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

Atsisiųskite darbinį PSD failą


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

Atsisiųskite darbinį PSD failą


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)

Atsisiųskite darbinį PSD failą


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%

Atsisiųskite darbinį PSD failą


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

Atsisiųskite darbinį PSD failą


Komentarai
Paieška
neshas   |2009-04-08 17:15:27
avatar Aš visuomet iš pločio darausi 900 px o iš ilgio, kaip jau telpi, bet būtu
gerai, kad titulinis pirmas lapas tilptų iš aukščio į langą, tai vertėtų
aukštį daryti kokius 700 px .Šiaip čia navigacijoms naudojau gan mažus
dydžius, bet paišant tinklapį normalaus dydžio, visada width renkuosi 900
px, o aukštį, taip, kaip jau telpu, jeigu tai bus portalinis dizainas, tai
žinoma titulinis gali ir netilpti į langą .
1nno   |2009-04-08 14:20:24
avatar Kokio dyzdio lapa reiktu atsidaryti darant navigacija?
neshas   |2009-04-03 22:44:39
avatar Nu va, taip ir galvojau
vilius   |2009-04-03 19:06:06
avatar tiesiai i desimtuka taip as D8/V2 taip Vilius Zaleckas
neshas   |2009-04-03 17:50:47
avatar KTU ? Aš irgi į KTU einu, ką tu pasiemes ? Dizaino technologijas ? D-8V2
grupė Zeleckas Vilius ? Aš jei ką pirmoj grupėi rytinėj, Simas
vilius   |2009-04-03 17:08:05
nerelus ! wiena manau panaudosiu savo baigemajam darbui ktu , nes mano tai
nekokia navigacija :/
Tik registruoti vartotojai gali rašyti komentarus!

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

bottom
top

Reklamos

joomla, css, html, web dizaino, photoshop, pascal forumai
  • Topai.eu - Svetainių katalogas
  • Top.Biciuliai.Net
  • Top.Ob.Lt
  • Hey.lt - Nemokamas lankytojų skaitliukas

Naujausi

Skaitomiausi


bottom

Dizainą sukūrė: Neshas ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Privertė veikti: Primatas
parašyti administracijai
Manualai.lt 2008-2009

t http://www.manualai.lt/