Egyszerű, szép menü készítése

Ebben a tutorialban azt fogom megmutatni,hogy lehet csinálni egy pofás menüt honlapokhoz.

1.) Nyissunk egy 700*60-as, átlátszó, új dokumentumot.

2.) Csináljunk egy új layert(CTRL+SHIFT+N), majd válasszuk ki a Rounded Rectangle Tool-t.

3.) Rajzoljunk egy ehhez hasonlót: (vigyázzunk ne legyen túl magas/széles, mert nem jut hely az árnyéknak)

4.) Most kattintsunk kétszer a layerre, a layer palettán, a blending opciókhoz. Menjünk a Drop Shadow-ra és állítsuk be igy:

Inner Shadow:

Gradient Overlay:

Stroke:

Most valahogy igy kell kinéznie, persze csinálhatod más színekkel is:

5.) Most csináljuk meg az elválasztó vonalakat.

Készíts annyi új layert(CTRL+SHIFT+N),ahány elválasztó vonalat akarsz. Menj az első ilyen layerre, nagyítsd fel a képet és húzz egy 1px vastagságú fekete vonalat, majd mellé egy fehéret.

Ha ezek megvannak, akkor jelöld ki az összes ilyen layert) a layer palettán shift folyamatos nyomásával) és kattints erre a gombra, hogy ugyanolyan távolságra legyenek egymástól.

Most vond össze ezeket a layereket(CTRL+E) és állítsd a blending mode-t soft light-ra.

Készen is vagyunk, már csak a szöveget kell beleírni.

16 HOZZÁSZÓLÁS

  1. „Ha ezek megvannak, akkor jelöld ki az összes ilyen layert) a layer palettán shift folyamatos nyomásával) és kattints erre a gombra, hogy ugyanolyan távolságra legyenek egymástól.”

    Hol találom azokat az ikonokat? Előre is köszi

  2. a Mozgató eszköznél, én is nehezen találtam amúgy meg. Az 5. lépésnél: minden layerre külön meg kell csinálni a vonalakat?

  3. Nekem sikerült megcsinálnom a menüt kicsit változtattam rajta így jobb lett csak azzal vann bajom,
    hogy ha ráírom a szöveget akkor azt nem tudom megcsinálni hogy link legyen mert a kép része.
    Ha meg földrabolom az egyes részeket akkor meg tök ronda mert egy kék keret megy köréjük és nem érnek össze!!
    nincs valami ötletetek????????????,,

  4. Hát css-el meg tudod oldani, vagy a html-be az img után írd be: border=”0″
    Ahhoz, hogy ne kelljen ráírnod a szöveget, illetve utólag is módosíthasd, nézd meg ezt:
    http://www.tutorial.hu/menuk-css-el-szabvanyosan-es-gyorsan/

    Itt keresel egy elrendezésében neked megfelelőt, elmented, majd legyártod hozzá az alkatrészeket, kicseréled a képeket, kész. Ez ad egy jó kis kódot is mellé, nem is kell css-hez érteni… szerintem így a legkönnyebb.

  5. tomi :

    Dreamweaver-ben van egy olyan lehetőség, hogy a képet felosztod mezőkre.
    Ha beszűrsz egy képet akkor a bal alsó sarokban megjelenik a map rész. Ott feltudod osztani, ill. a felosztott részekhez hozzátudsz rendelni linkeket.

  6. Van ilyen lehetőség, de ez kb 10 éve volt divat, ma már nem ajánlanám senkinek, főleg nem menühöz.

  7. sikerült megcsinálnom photoshoppal feldaraboltam és a képeket meglinkeltem!

  8. Tmi: ViZion által linkelt megoldást csináld meg inkább. Elegánsabb és hasznosabb is.

  9. Udv, ez a tutorial milyen progira is való? mert ha dreamweaver akkor én nem találtam meg még a kerekített dobozt sem.

  10. Bocsi. Tehát akkor:

    Ha fel van darabolva akkor ezt írd:

    1
    
     

    Annyiszor írod ahány menüt akarsz és amennyi képed van hozzá.
    Természetesen a menu1.html lehet más is (pl. főoldal.html) és értelemszerűen a kép nevének azt adod meg ahogy elmentetted.
    Üdv.

  11. Sziasztok!

    Feldaraboltam az elkészített menüt… elmentettem a gombokat de mikor a honlapra rakom fel akkor nem jelenik meg egybe hanem kis fehér elválasztó vonalakkal… levettem már a kép border-jét is és mégse jelenik meg olyan szépen még

    is oda raktam. Tudnátok segíteni! Előre is köszi!

  12. Nekem nem jön össze a feldarabolás biztos félreértek valamit az 5 ponttól hibázik

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét