Windows Live stílusú menü

Írta: Tupacko | 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.

Kezdésnek hozzunk létre egy új, fehér hátterű dokumentumot, lehetőleg téglalap alakút (500×60px). 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. 480×40px, 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.

Értékeld a bejegyzést!

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 :)

Neved: kötelező

Emailed: kötelező, titok marad

Weboldalad: ha nincs, maradjon üres

Milyen nap van most?

Hozzaszólás:

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

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

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!

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.

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

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! –

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!

Tupacko
2010. január 8.
13:00