Puslapis
Failai
Naudinga
Pamokos - Apple navigacijos juosta | Apple navigation bar
Patalpino: nbanba | 1 Geg 2009 | Skaityta: 1461
1. Sukuriame 500px * 50px failą.
2. Naudojame Rectangular Marquee Tool įrankį. Nustatome Fixed Size 480px ilgio ir 35px pločio ir padarome selekciją (tiesiog spusteldami).
3. Einame Select -> Modify -> Smooth. Ten nustatome 3px. Sukurkite naują sluoksnį (Layer>New >Layer...) ir užpildykite pasirinkta spalva.
4. Nustatykite sluoksnio stilių.
- Gradient: #949494 į #d2d2d2.
- Drop Shadow: #b1b1b1.
5. Parašykite užrašus mygtukams naudodami spalvą: #383838. Patartina naudoti Segoe UI šriftą (14pt dydžio).
6. Pritaikykite Drop Shadow stilių. Atlikite nustatymus:
Kol kas turėjote gauti kažką panašaus į:
8. Kraštinių pritaikymas (Borders).
9. Naudodami Pencil Tool naujame sluoksnyje (angl. layer), nupieškite 2 linijas (jos turi būti atskirtos 1px atstumu).
10. Sluoksnio tipą pakeiskite į Soft Light ir Opacity nustatykite 20%.
11. Sukurkite naują sluoksnį ir nupieškite kitą 1px dydžio liniją (#808080) ir įterpkite tarp ankščiau pieštų linijų.
12. Sluoksniui nustatykite Blend mode (Normal) ir Opacity nustatykite 35%.
13. Duplikuokite sluoksnius įstatydami tarp kitų žodžių.
14. Darome paryškintą mygtuką. Atžymėkime nuo vienos skiriamosios linijos iki kitos.
15. Sukurkite naują sluoksnį ir pažymėta vietą užpildykite bet kokia spalba. Eikite Layer Styles ir pritaikykite parametrus. Gradient: #666666 į #a1a1a1.
16. Pakeiskite šrifto spalvą į baltą ir nustatykite - Drop Shadow: #454545
17. Baigta.
Puslapio pritaikymui CSS:
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }
#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }
#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }
2. Naudojame Rectangular Marquee Tool įrankį. Nustatome Fixed Size 480px ilgio ir 35px pločio ir padarome selekciją (tiesiog spusteldami).
3. Einame Select -> Modify -> Smooth. Ten nustatome 3px. Sukurkite naują sluoksnį (Layer>New >Layer...) ir užpildykite pasirinkta spalva.
4. Nustatykite sluoksnio stilių.
- Gradient: #949494 į #d2d2d2.
- Drop Shadow: #b1b1b1.
5. Parašykite užrašus mygtukams naudodami spalvą: #383838. Patartina naudoti Segoe UI šriftą (14pt dydžio).
6. Pritaikykite Drop Shadow stilių. Atlikite nustatymus:
Kol kas turėjote gauti kažką panašaus į:
8. Kraštinių pritaikymas (Borders).
9. Naudodami Pencil Tool naujame sluoksnyje (angl. layer), nupieškite 2 linijas (jos turi būti atskirtos 1px atstumu).
10. Sluoksnio tipą pakeiskite į Soft Light ir Opacity nustatykite 20%.
11. Sukurkite naują sluoksnį ir nupieškite kitą 1px dydžio liniją (#808080) ir įterpkite tarp ankščiau pieštų linijų.
12. Sluoksniui nustatykite Blend mode (Normal) ir Opacity nustatykite 35%.
13. Duplikuokite sluoksnius įstatydami tarp kitų žodžių.
14. Darome paryškintą mygtuką. Atžymėkime nuo vienos skiriamosios linijos iki kitos.
15. Sukurkite naują sluoksnį ir pažymėta vietą užpildykite bet kokia spalba. Eikite Layer Styles ir pritaikykite parametrus. Gradient: #666666 į #a1a1a1.
16. Pakeiskite šrifto spalvą į baltą ir nustatykite - Drop Shadow: #454545
17. Baigta.
Puslapio pritaikymui CSS:
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }
#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }
#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }
