Egyszerű menü készítése Photoshopban

Szerző:   |   2010-04-23

Modern kinézetű, letisztult webes menü, melynek elkészítése nem több néhány kattintásnál.

A forrás PSD fájl innen tölthető le.

1. lépés

Hozzunk létre egy új dokumentumot 700x100-as méretben.

A hátteret színezzük be feketére.

2. lépés

Hozzunk létre egy új réteget menu néven, majd rajzoljunk rá egy 600x35px méretű lekerekített téglalapot.

A lekerekítés értéke 10px legyen és anti-alias legyen bekapcsolva.

Helyezzük középre.

3. lépés

Alkalmazzuk az alábbi stílusokat a menu rétegen.

A Gradient Overlay beállításai részletesen.

Állítsuk be a 4 színt.

Majd a két középső színnél a Location értékét állítsuk 50%-ra, hogy fedjék egymást.

Ezt a megjelenést kell megkapunk.

4. lépés

Írjuk fel a menüpontokat Tahoma betűtípussal, félkövérrel, 11px-es mérettel. A menüpontok között 10 szóköznyi távolság legyen.

Eddig ez a két rétegünk van.

5. lépés

Hozzunk létre egy új réteget sep néven, és rajzoljunk rá két 1px vastagságú vonalat közvetlen egymás mellé a képen látható színnel. Helyezzük el két menüpont között.

6. lépés

Duplikáljuk a sep réteget 4x, és igazítsuk be mindegyiket a helyére.

2 hozzászólás

  1. 2013. május 3. péntek - 10:06

    Szia! Nagyon tetszett ez a tutorial is, meg csináltam Photoshop CS6-os ba is, és nagyon jó lett.

  2. 2011. augusztus 4. csütörtök - 17:53

    Helló! Nagyon király ez is ,és az összes többi tutorial is. Szerintem ezt ki fogom próbálni sprite menünek 🙂

Hozzászólás mégsem

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Nem mert, ez már 3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezet...

  • Az Axure használata

    Ertem, koszonom!...

  • Az Axure használata

    Magyarországon nem szokása a cégeknek kiírni a fizetést az álláshirdetésekben, hanem neked kell fizetési igényt megjelölni az önéletrajzodban. Ha tége...

  • Az Axure használata

    Értem. Köszi a választ megint. És egyébként általában az ilyen munkahelyek mennyit adnak kezdö fizetésnek? Csak mert sehol sem irnak konkrétat, csak a...

  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...