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 carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...