Windows Live stílusú menü

Írta: | 2007. október 18. | kategóriák: Design, Interface, Photoshop, Speciális effektek

A web 2.0 világában élünk és sok szép, úgynevezett glossy effektes dolog létezik, minden csillog villog. Valamelyest ebben jelentkezik, grafikai szinten a web 2.0. A következő leírásban egy, a Windows Live navigációs menüjéról mintázott, üveges hatású menü elkészítését fogod elsajátítani.

Windows Live stílusú menü
Kezdésnek hozzunk létre egy új, fehér hátterű dokumentumot, lehetőleg téglalap alakút (500x60px). Hozz létre egy új réteget a menü alapjának elkészítésére. Válaszd a Rectangular Marquee eszközt és készíts egy kijelölést, amekkorára a menüt akarod készíteni, pl. 480x40px, majd színezd ki a következő színnel: #005b95. A kellő effektelés érdekében végezd a következőket: Layer / Layer Style / Gradient Overlay a következő színekkel (balról jobbra, vagyis a világosabb szín legyen felűl): #2473a5, #005b95, #3585b9, #7eb1d2. Egy Stroke effekt is kell, a következő paraméterekkel: 1px széles, outside, opacity (láthatóság) 100%, a szín pedig #003150.

Windows Live stílusú menü

Készíts egy új réteget, majd kattints az előző réteg kis képére a rétegek palettáján (hogy jelöld ki). Válaszd az Edit menü Stroke pontját és állítsd be: 1px, center, #ffffff. A blend modeját váltsd Soft Lightra és 70% legyen az áttetszőség.
Következő lépésként hozz létre még egy réteget, majd az előzőhöz hasonlóan jelöld ki az első réteget. Készíts egy új színátmenetet (Gradient tool) fehérből átlátszóba, a kép aljától fölfele irányulóan. A színátmenetet fejezd be a menüben lévő színtörésig. A réteg blend modeját állítsd Overlayra, és az Opacity-t 50% -ra; így egy szép, fényeffektet kapunk eredményül.

Írd rá a szövegeidet fehér színnel, majd válaszd ismét a Rectangular Marquee eszközt. Hozz létre egy új réteget és egy kijelölést az aktívnak szánt menüpont alá (az új réteg legyen a szöveg rétege alatt), majd töltsd ki a #0086bf színnel.

Windows Live stílusú menü

Végezd el a következő effekteléseket, a megfelelő eredmény érdekében:
Inner Shadow szín: #aadcec, Outer Glow szín: #61a0c9, Gradient Overlay színek: #37b1e4 -tól #0086bf -ig és egy fekete Stroke.

Inner shadow

Gradient overlay

Outer glow

Stroke



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



A gardient overlayhez hogy raksz be 4 színt egymás után? Én úgytudtam, hogy csak két színt lehet megadni…

“A kellő effektelés érdekében végezd a következőket: Layer / Layer Style / Gradient Overlay a következő színekkel (balról jobbra, vagyis a világosabb szín legyen felűl): #2473a5, #005b95, #3585b9, #7eb1d2.”

disturbed 2008. június 21. - 20:42

Szinte korlátlan számú színt és áttetszőséget lehet meghatározni. Új színt úgy adhatsz hozza, hogy a színcsík alá kattintasz. Ekkor megjelenik egy újabb görgő. A szín átetszőségét szabályzó füleket hasonló módon adhatod hozza, csupán a színsáv fölé kell kattints.
A fülecskék eltávolítása egyszerű: megfogod az egérrel és “kihúzod” a helyéből (húzd ki az ablakból).
Sok sikert 🙂

Avatar Tupacko
2008. június 21.
20:51

Húha ez nagyon gyors válasz volt. Köszönöm a segítséget, most már menni fog. 😀

disturbed 2008. június 21. - 20:55

Nagyon szívesen 🙂

Avatar Tupacko
2008. június 21.
20:59

A szineket hogy lehet hozzáadni?Azt a # jelest?

gellert 2008. augusztus 8. - 12:28

A # jel csak azert van, mert igy szokas irni a hexadecimalis szineket (talan standard is, nem tudom). Photoshopban ahol irod be a szint, ott is elotte van alapbol a # jel (nem is szerkesztheto, mivel egy cimke a szovegdoboz elott). Te csak a jelt koveto hat kraktert kell bemasold.
Sok sikert!

Avatar Tupacko
2008. augusztus 8.
13:01

És hova másoljam a 6 karaktert lécci segíts fontos!!!!Vagy hogy vegyem fel a siznt ezt nem értem:S:S:

gellert 2008. augusztus 8. - 13:20

Az eszkozok alatt van ket negyzet, a szinekkel. Ha rakattintasz, akkor ki tudod valasztani a neked tetszo szint.
Szvsz, olvass el nehany Photoshop alapok tutorialt, mert hanem nagyon sok problemad lesz es nem tudsz jol haladni a tanulassal.

Avatar Tupacko
2008. augusztus 8.
13:35

Köszönöm!Köszönöm!Köszönöm!

gellert 2008. augusztus 8. - 13:37

Köszönöm!Köszönöm!Köszönöm!Áhh nem hiszem hogy problémákba ütközök mostmár eddig mindössze csak ez az egy gondom voltKöszi még1szer szép napot!!!:)

gellert 2008. augusztus 8. - 13:37

Szivesen 🙂

Avatar Tupacko
2008. augusztus 8.
13:38

Köszi!!Nagyon vaksi vok ugy láccik ezt az ablakot megtaláltam de nem láttam a # jelet:D:DKöszi még1szer és szép napot!!!Nem hiszem hogy lesz több gond általában elöveszem a google-t és utánnanézek és mindig megoldom csak most nem találtam semmit:S

gellert 2008. augusztus 8. - 13:42

Köccce ezerszeresen nagy segítség voltál:)

gellert 2008. augusztus 8. - 13:44

Szivesen, viszont ezt ajanlom figyelmedbe:

— * Nem kötelező megadni, ha nincs weboldalad, akkor hagyd üresen! —

Avatar Tupacko
2008. augusztus 8.
13:49

Csak egy kérdés aki a ki…ot
színt nem tudja be állítani az miért foglalkozik mélyebben a photoshopal! Elősször meg kellne is merni a felületét a kezelését!
Ha valki jó szándékból fel tesz egy leírás + magyarul 🙂 ami ritka.
aztán szegén egy évig olyan kérdésekre válaszol hogy ha rá kattintok a photoshop ikonra akkor az elindul-e

luigi69 2010. január 8. - 12:37

Mind, hogy ki hanyszor nyissa meg a PSt evente. Ha nem tud valamit az nem gond, de ha ilyen pofatlanul offtopic leszol egy idegent … na ott mar gondok vannak. Megkerlek az elkovetkezokben valassz egy tisztesseges hangnemet es csak akkor irj, ha valos mondandod van.
Koszonom!

Avatar Tupacko
2010. január 8.
13:00