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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...