okt
07
Írta: Tupacko, 2007-10-07, (Design, Interface, Speciális effektek)

Aero Vista gomb alapA leírásban Aero Vista stílusú gombokat fogunk elkészíteni. Több okból is érdemes elsajátítani ezt a fajta stílust: aránylag egyszerű az elkészítése és a weben is jól néz ki, afféle web2.0 stílusnak is megfelel. Vágjunk is bele, hozz létre egy új dokumentumot, majd válaszd a Rounded Rectangle eszközt. A radius paramétert állítsd 5 képpontra, majd rajzolj egy ehez hasonló méretű lekerekített sarkú téglalapot.
Ha készen vagy, akkor kezdődhet a nagy átalakítás. Néhány effektet használva, hamarosan befejezed a képet és megtanulod a Photoshop néhány, leggyakrabban használt, effektét is. Kattints duplán a rétegen és válaszd a Stroke egységet, vagy Layer/Layer style/Stroke. Állítsd be a következő értékeket: size 1, position outside, blend mode normal, opacity 100%, fill type color, color fekete.
A következő módosításhoz válaszd a Stroke oszlopából az Inner glow pontot. Az alap értékeket változtasd a következő képpen: a szín fehér, size 1px. Válaszd az Outer glowt, majd itt végezd el ugyanazokat a változtatásokat, majd a méretet állítsd 3pxre és az opacity-t 50%-ra. A kép alá tettem egy sötét réteget, hogy lásd milyen is lett a módosítások után.
Aero Vista gomb effektek
Következnek az utolsó simítások. Most válasszuk ki a Gradient Overlay-t, majd állítsuk be, valahogy így:
Aero Vista gradient szinek
Válaszd a Rectangular Marquee eszközt és készíts egy olyan kijelölést, ami hosszában átéri a gombot, és fentről félig födi a gombot. Kattints a gomb rétegének thumbnailjén (a kis kép a rétegen, bal oldalt), miközben nyomva tartod a Ctrl+Shift+Alt billentyűket. Így készítesz egy megfelelő kijelölést ahoz, hogy fényt adjunk a gombnak. Hozz létre egy új réteget, majd állítsd a foreground color-t fehérre. A réteg láthatóságát állítsd 15-25%-ra, majd a Gradient fill eszközt használva töltsd ki fehér-átlátszó kombinációval, lentről fölfele. Tedd rá a megfelelő szöveget és készen is vagy!
Vegső Aero Vista gombok

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



Szólj hozza!

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