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

Szerző: Mérei Tamás   |   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
  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "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éken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....