okt
18
Írta: Tupacko, 2007-10-18, (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 (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.

Inner shadow

Gradient overlay

Outer glow

Stroke

Ezek az ikonok ún. közösségi könyvjelző oldalakra mutatnak, ahol meg lehet osztani másokkal is amit fontosnak találsz.
  • description
  • blogtercimlap
  • Linkter
  • bodytext
  • del.icio.us
  • NewsVine
  • Furl
  • Reddit
  • Spurl
  • Technorati
  • YahooMyWeb
  • co.mments
  • Google
  • Live
  • Ma.gnolia
  • TwitThis
(2 szavazat)
Loading ... Loading ...



Hozzaszólások:
4 hozzaszólás a "Windows Live stílusú menü" bejegyzéshez.
disturbed, weboldala, 2008. június 21., 20:42

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


Tupacko, weboldala, 2008. június 21., 20:51

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


disturbed, weboldala, 2008. június 21., 20:55

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


Tupacko, weboldala, 2008. június 21., 20:59

Nagyon szívesen :)


Szólj hozza!

Név: 
Email: 
Weboldal *
Hozzaszólás: 
*Nem kötelező megadni, ha nincs weboldalad, akkor hagyd üresen!