Mérei Tamás webdesigner

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

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

2 hozzászólás

  1. Erik
    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. Balázs
    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

Legújabb hozzászólások