Jetzt registrieren · Passwort vergessen
RSS-/Atom-Feed Twitter

Tutorial: Horizontales Web-Menü

Verfasst von · Erstellt am 15 Okt 2006, zuletzt bearbeitet vor fast 7 Jahren CC BY-NC-Lizenz

Motivation

Für viele Benutzer ist GIMP als Web-Werkzeug hoch im Kurs. Wir wollen uns heute an eine schöne. moderne Web-Navigation ran machen, die vor allem für - wegen der begrenzten Anzahl an Links) kleinere Seiten oder Blogs gedacht ist. Wir werden eine metallisch angehauchte und coole horizontale Navigation / Web-Menü erstellen.

Tutorial-Details

  1. 1

    Legt ein neues Bild mit schwarzer HG-Farbe an. Wenn eure Website 800 Pixel breit sein soll wählt ihr 800×100px (wie ich), ansonsten könnt ihr natürlich auch andere Breiten wählen – das spielt keine Rolle. Die Höhe soll in jedem Fall 100 px sein.

  2. 2

    Wählt als VG-Farbe #b5b5b5 und als HG-Farbe: #6c6c6c. Nun wählt das Auswahl-Tool und zieht eine rechteckige Auswahl in die Mitte des Bildes, von ganz links nach ganz rechts.

    Erstellt eine neue Ebene.

    Wählt dann das Verlaufs-Werkzeug und zieht den Verlauf von der unteren Auswahl-Kante bis zur oberen.

    Belasst die Auswahl noch aktiv.

  3. 3

    Erstellt eine weitere neue Ebene, stellt die VG-Farbe auf Weiß und wählt den Verlauf “VG nach Transparent” aus dem Drop-Down-Menü. Zieht ihn ebenfalls von unten nach oben (wie vorhin). Danach deaktiviert ihr die Auswahl mit STRG+SHIFT+A.

  4. 4

    Legt mit dem rechteckigen Auswahl-Tool nun über die untere Hälfte des transparenten Verlaufes eine Auswahl und schneidet diese weg.

  5. 5

    Meine Ebenen sehen derzeit so aus:

  6. 6

    Fügt nun die Ebene mit dem transparenten Verlauf mit der darunterliegenden Ebene zusammen (rechts klicken im Ebenenreiter auf die Ebene und “Nach unten vereinen” wählen).

    Dupliziert diese Ebene und nennt sie “Sicherheitskopie”. Macht diese Ebene unsichtbar (Auge-Symbol wegklicken).

    Aktiviert nun wieder die darunterliegende Ebene. Bei mir heißt diese “Grauverlauf”. Jetzt wählt ihr eine neue Rechtecksauswahl und legt diese im rechten Bildteil über die Ebene.

    Wählt dann Auswahl / Abgerundetes Rechteck mit Wert 35.
    Schneidet diesen Teil weg.

  7. 7

    - Legt eine neue Ebene an.
    - Nennt diese “Blauverlauf”.
    - Schiebt diese ganz nach unten (vor die schwarze HG-Ebene).
    - Wechselt zur Sicherheitskopie-Ebene.
    - Wählt dort “Auswahl aus Alphakanal” im Ebenenreiter-Menü. Ihr braucht das Auge-Symbol nicht zu betätigen um die Auswahl zu erhalten.
    - Wechselt zur Blauverlauf-Ebene. Setzt nun die VG und HG-Farben auf #00c6ff und #280392.
    - Wählt das Verlaufswerkzeug, stellt auf “VG nach HG”, und zieht wieder von unten nach oben einen Verlauf. Das ganze sollte nun so aussehen:

  8. 8

    Aktiviert die “Grauverlauf”-Ebene. Dort wählt ihr Filter / Licht und Schatten / Schlagschatten mit diesen Werten:

  9. 9

    Zwischenstand:

  10. 10

    Zur Kontrolle: Meine Ebenen sehen derzeit so aus:

  11. 11

    Klickt die Sichtbarkeit der HG-Ebene weg, ihr werdet den überstehenden Schatten sehen. Darum kümmern wir uns jetzt.

    - Wechselt zur Sicherheitskopie-Ebene.
    - Wählt dort “Auswahl aus Alphakanal” im Ebenenreiter-Menü.
    - Wechselt zur Drop-Shadow-Ebene. Wählt im Menü Ebene / Ebene zuschneiden.
    - Deaktiviert die Auswahl.

  12. 12

    Wählt die Grauverlauf-Ebene und aus dem Kontextmenü des Ebenenreiters “Auswahl aus Alphakanal”.

    Legt eine neue transparente Ebene an. Füllt die Auswahl mit der Farbe #b5b5b5. Verkleinert die Auswahl um 1 Pixel. Schneidet den Rest weg. Ein kleiner grauer Rand bleibt übrig. Nennt diese Ebene “Rand” und macht sie unsichtbar.

    Wechselt zur Grauverlauf-Ebene.
    Meine Ebenen sehen derzeit so aus:

  13. 13

    Geht nun auf Filter / Abbilden / Bumpmap und wählt die Rand-Ebene als Bumpmap. Setzt die Parameter auf diese Werte (Bild):

  14. 14

    Geht auf Farben / Kurven und wählt diese Kurve um das ganze aufzuhellen.

  15. 15

    Das Bild sollte nun so aussehen:

  16. 16

    Als nächstes erstellen wir kleine Einkerbungen am Metall. Vergrößert euch das Bild links auf 300%. Erstellt eine neue Ebene. Nehmt den Stift (nicht Pinsel) und malt mit der kleinsten Spitze 4 symmetrisch angeordnete Punkte wie am Bild zu sehen (links). Nehmt ein Grau als Farbe. zB #888888. Nennt die Ebene “Punkte”. Dupliziert diese Ebene nun und schiebt die 4 Punkte kurz vor die Stelle, an der wir das runte Rechteck hineingeschnitten haben. Dupliziert ein weiteres Mal und schiebt diese Punkte nun ganz nach rechts, wo die Navigation aufhört.

    Achtung: Schaut dass die Punkte alle auf gleicher Höhe sind. Nehmt notfalls eine Hilfslinie zum exakten Positionieren.

    Die 3 Punktebenen vereint ihr nun zu einer einzigen und macht diese unsichtbar.

    Wählt nun erneut den Bumpmap-Filter wie vorhin, belasst alle Einstellungen wie sie waren und wählt nur als Bumpmap die zusammengefügte Punkte-Ebene. Rechts am Bild seht ihr wie es nun aussehen sollte.

  17. 17

    Der nächste Punkt ist einfach: Schreibt einige Texte die eure Links verkörpern. Nehmt Weiß als Schriftfarbe und 11px als Größe. Orientiert euch am Bild.

  18. 18

    Jetzt machen wir noch ein wenig was für die Unterteilung der Link. Nehmt dazu das Stift-Werkzeug, wählt die 1px-Pinselspitze aus. Farbe: Weiß. Malt nun vom oberen Rand eine exakt gerade Linie bis nach unten. Exakt gerade könnt ihr malen, indem ihr den Startpunkt durch einmaliges Klicken festlegt, danach SHIFT und dann STRG gedrückt haltet. Klickt wieder am Endpunkt um eine Linie zu erhalten. Dupliziert diese Ebene und schiebt sie hinter die jeweiligen Links. Das wiederholt ihr bis ihr hinter allen Texten eine weiße Linie habt. Fügt diese Ebenen zusammen und stellt anschließend den Ebenenmodus auf “Überlagern”.

  19. 19

    Jetzt legen wir noch eine Glanz-Ebene über den Text. Wir müssen dazu die Ebenen-Ordnung im Reiter anpassen. Die Grauverlauf und Drop-Shadow-Ebene schiebt ihr ganz nach oben.
    Auf das Bild selbst hat dies keine Auswirkung.

    Legt nun eine neue Ebene an und schiebt diese unter die Schatten-Ebene. Wechselt zur Sicherheitsduplikat-Ebene, macht Auswahl aus Alphakanal, wechselt zurück und füllt die Ebene von unten bis oben mit einem transparenten Weiß-Verlauf. (Farbe Weiß einstellen und beim Verlaufswerkzeug: “VG nach Transparenz” wählen.). Danach schneidet ihr wieder den unteren Teil wie am Bild zu sehen weg.

    Und schon seid ihr fertig!

  20. 20

    Die Ebenen sehen am Ende dann so aus:

Kommentare

Hier kannst du Kommentare, Fragen und Anregungen loswerden. Der Autor und die anderen Benutzer können deinen Beitrag sehen und darauf antworten.

Natürlich kannst du auch im Chat fragen.

Abo-Verwaltung

Diese Funktion steht nur angemeldeten Benutzern zur Verfügung.

Benutzerbewertung

Dieses Thema (Horizontales Web-Menü) wurde insgesamt mit 4,3 von 5 Punkten bewertet.

*

Als registrierter Benutzer kannst du Artikel und Kommentare bewerten, Bilder zu Kommentaren anhängen, dich bei Neuigkeiten benachrichten lassen usw... Außerdem werden keine CAPTCHAs mehr angezeigt.

*…optional

Vaylonn Mitglied seit etwa 9 Jahren Vaylonn 60 Kommentare
vor fast 6 Jahren

Ohne genauere Angaben, wo du hängen bleibst, kann ich nur blind raten.
Vielleicht hast du die Ebene "Grauverlauf" nicht aktiviert? Dann würdest du nämlich auf der unsichtbaren Ebene "Sicherheitskopie" arbeiten. Deshalb siehst du keine Veränderungen.

Lea
vor fast 6 Jahren

Hey, ich wollte das hier mal nachbauen für mein Forum aber ich bleibe immer bei Schritt sechs kleben, kann es sein das vielleicht irgendetwas fehlt?
lg Lea

David
vor mehr als 8 Jahren

Hi...

danke dir für das Klasse Tutorial. Für gab es keine Probleme und mein Grundverständnis von Gimp reichte vollkommen dazu aus dieses Tut zu meistern.

Danke!!!!

Broading
vor mehr als 8 Jahren

Sieht zwar toll aus, ist aber teilweise ein bisschen lückenhaft erklärt.
Nächstes mal alles ein wenig mehr erläutern ;)

nicklezzz Mitglied seit mehr als 8 Jahren nicklezzz 6 Kommentare Bewertung für diesen Artikel: 5/5
vor mehr als 8 Jahren

super tutorial,
hab mich gestern extra wegen den super tutorials hier angemeldet!
klasse erklärt auch für jm wie mich der eigentlich nie mittels pc entwirft sonder nur mit acryl und solchen "analogen" techniken.
Grosses lob an den fleissigen ersteller der tutorials und respekt für die ideen!!

LE7 Mitglied seit fast 9 Jahren LE7 1 Kommentar Bewertung für diesen Artikel: 2/5
vor mehr als 8 Jahren

Hi, ich komme überhaupt nicht klar. Dieses Tutorial treibt mich in den Wahnsinn.

Mein Problem: ich tuhe das was da steht: "Wählt dort "Auswahl aus Alphakanal" im Ebenenreiter-Menü." und das passiert dabei:

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor mehr als 8 Jahren

zieh einfach ein rechteck über die stelle die du als separates bild speichern willst. dann geh auf bearbeiten: "sichtbares kopieren" und bearbeiten: "einfügen als -> neues bild". das kannst du dann als separates file speichern, in die website einbauen und dort dann verlinken!

lg,devvv

Gotscha Bewertung für diesen Artikel: 5/5
vor mehr als 8 Jahren

Erstmal super geiles Tutorial.

Jetzt zu meine Frage :D
Wie kann ich die Links in einzelstücke zuschneiden und dann verlinkungen einbauen. hab gegoogelt aber nix gefunden.

Hoffe ihr könnt mir helfen.

DJ Zebo Bewertung für diesen Artikel: 5/5
vor etwa 9 Jahren

Hallo erstmal das tut ist echt geil!
Hab die grund schritte genommen und draus ein verticales menü gemacht sieht spitze aus.

@sarot eine Homepage kannst du mit Gimp alleine nicht baun. Mit Gimp machst du die Grafiken aber dann brauchst du einen Html Editor und ein bisschen Ahnung davon zum zusammen basteln.

MfG

sarot89
vor etwa 9 Jahren

hey leute ich komme gar nichts draus was ihr da labert und die tutorials schon gar nicht..... kann mir jemand mir helfen wie man ein website macht...??? habe gimp 2.6.8

Guten TagxD
vor etwa 10 Jahren

hallo leute!

also ich hab hier schon viele fragen gelesen wie man denn auf die eine grafik mehrere links einfügen kann.

devv hat es ja eigentlich schon gesagt, man hat mehrere möglichkeiten, unter anderem hat er die imagemap als möglichkeit genannt.

ich hab euch auf einer anderen website ein tutorial für die imagemap rausgesucht, mit dem ihr ganz leicht mehrere links auf einer grafik unterbringt:

http://gimp-werkstatt.de/imagemap.php

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor etwa 10 Jahren

gratuliere tobi! sieht cool aus - sehr schön fortgeführt ;)

Tobi
vor etwa 10 Jahren

Super geiles tut, bin ein neuling in sachen gimp etc. Und bin mit diesem tut unteranderem eingestiegen! Echt super!!

Ich habe auf der idee dieses Tuts meine Homepage gestaltet. www.geratzt.de
Zumindest ein bisschen.

mehr so tuts bitte!! :)

swisscheese
vor etwa 10 Jahren

@NirB: klar kann man dass. auf gimpwerkstatt.de gibt es dazu auch ein tut (http://gimp-werkstatt.de/imagemap.php) ;)

Echt geiles Tutorial das gut erklärt ist. hat echt spaß gemacht, dass nachzumachen :))

mfg
swiss cheese

NirB
vor etwa 10 Jahren

kann man das dann auch wirklich für websiten verwenden??? weil wenn man das speichert, hat man doch nur ein Bild...

Als welchen Dateityp muss man das speichern, damit man es bei Websiten verwenden kan?

Dorial
vor etwa 10 Jahren

Super Geiles Tut. Das eizige was ich absolut nicht hinbekommen habe ist der Glanzeffekt am schluss. segt sich immer über die gesamte ebene.
@A-Astyle: 2 Tips: Wenn du solche Bilder (Menüs) baust solltest Du wärend der Argeit im XCF Format abspeichern. Da GIMP-Format erhält alle Ebenen, Transpa. usw.
Zum Einstellen im Web ist GIF absolut ungeignet und überholt : Der Grund ist, GIF kann nur 256 Farben darstellen.
einziger Ausweg PNG.
Vorteil: PNG kann Transparenz (mit bis zu 256 Abstufungen [GIF nur Tranzparenz Ja/Nein]), komprimiert verlustfrei und kann den vollen RGB-Farbraum darstellen.

Aaron Mitglied seit mehr als 10 Jahren Aaron 8 Kommentare
vor mehr als 10 Jahren

Danke sehr das mit der Ebene klappt nun. Habe es vergessen zuerst zu Makieren. Aber bei Nr.2 sieht es bei mir nur einer Farbe aus der VG-Farbe #b5b5b5. Kann ich dann beim Füllen die VG und HG-Farbe zur gleichen Zeit wählen?

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor mehr als 10 Jahren

Nein, nein. bei nummer 2. sollst du nur die vordergrundfabre und hintergrundfarbe einstellen. das ist wichtig für den verlauf der dann folgt - der verlauf bekommt dann unten die eine farbe und oben die andere - dazwischen kommt eben der verlauf. du musst keine separaten ebenen anlegen.

Aaron Mitglied seit mehr als 10 Jahren Aaron 8 Kommentare
vor mehr als 10 Jahren

Hallo zusammen
Ich versuche gerade diese Horizontales Web-Menü zu erstellen. Bei Nr.5 habe ich gesehen das die Ebene bei Grauverlauf angezeigt wird. Bei mir ist das nicht so. Ich sehe nur die Grafik der Ebene und fertig. Bei Nr.2 heisst es man solle: Wählt als VG-Farbe #b5b5b5 und als HG-Farbe: #6c6c6c. Soll ich dann zuerst die VG-Farbe #b5b5b5 und noch eine Ebene erstellen mit der HG-Farbe: #6c6c6c? Damit es auch so grau-weiss aussieht wie beim Bild 2?

Locke Mitglied seit fast 11 Jahren Locke 6 Kommentare
vor mehr als 10 Jahren

Nicht schlecht das Tut. Hat echt mal wieder Spaß gemacht das nachzubauen. Könnte mehr davon geben ;o)

Gimpomat Mitglied seit mehr als 10 Jahren Gimpomat 5 Kommentare
vor mehr als 10 Jahren

Dieses Tutorial ist dir wirklich super gelungen ich konnte jeden Schritt ganz einfach nachvollziehen.

Schaut euch doch mal meinen Versuch an.

Grüße an alle hier!

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor fast 11 Jahren

Sorry ich nochmal, was heißt oben auf der Seite Creative Commons "werk" Ist das des Tutorial oder ist es das Menü. Wenn ich das Menü quasi "nachgemacht" habe ist dass dann mein
"werk" Kann ich es dann Beliebig nutzen oder liegt es dann immer noch unter dem Copyright von Devvv muss ich dann auf jeder Seite schreiben /(c)Devvv www.gimpusers.de oder so ?

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor fast 11 Jahren

Tut mir leidnoch sone Blöde Frage welches Format ist für das Menüam Besten ? ich hab glaube ich gif genommen welches ist empfehlenswert mit einer verlustfreien kompression guter Qualität undsoweiter?

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor fast 11 Jahren

Ich hab mal ne frage:
Ich hab das menü ja auf meine Seite gestellt aber hat devvV nicht dass copyright für das Menü ?Auch wenn man es ja selber erstellt hat er hat dass Tutorial geschrieben also...
Ich wurde nähmlich gerade gefragt ob ich jemanden dieses menü nochmal erstelle für eine andere seite, nicht kommerziell aber ich wollte trotzdem mal fragen ob dass überhaupt im Intresse des Autors ist

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor fast 11 Jahren

Wie Immer ein Geniales TUT! Ich mach das Menue auf meine Seite

T-Rex
vor etwa 11 Jahren

Hi,
Vielen Dank für das super Tutorial!

o_o
vor etwa 11 Jahren

super tut allest perfekt geklappt :)

King_Evil
vor mehr als 11 Jahren

ich bekomm das mit punkten irgendwie nicht hin, die punkte bleiben bei mir immer grau :(

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor mehr als 11 Jahren

am besten ist du zerlegst das menü in einzelne bilder (mit dem zuschneiden-werkzeug) und verlinkst die bilder dann in html

webpadrone Mitglied seit mehr als 11 Jahren webpadrone 6 Kommentare
vor mehr als 11 Jahren

wie bekomm ich das jetzt hin, das dass zum link auf die jeweilige seite wird

FL4PJ4CK
vor mehr als 11 Jahren

Uff, gescchafft!
War echt 'ne Sauarbeit für nen Anfänger. Aber sieht super aus =)
Danke! :)

psd Mitglied seit mehr als 11 Jahren psd 2 Kommentare
vor mehr als 11 Jahren

Vielen Dank (nicht nur) für dieses Tutorial. Langsam kriege sogar ich den Bogen raus. ;)

Hansi Mitglied seit etwa 12 Jahren Hansi 8 Kommentare
vor fast 12 Jahren

Wunderbar,
funktioniert einwandfrei...und jetz hab ich das Prinzp auch verstanden.
Klasse Tut.
Danke

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor fast 12 Jahren

probiers mal so: mach die punktebene unsichtbar, wechsel zur grauen webmenu-ebene und mach dort den bumpmap-filter mit der kleinen-punkte ebene als bumpmap. das müsste eigentlich auch funktionieren.

Hansi Mitglied seit etwa 12 Jahren Hansi 8 Kommentare
vor fast 12 Jahren

Hi,
ich häng an Schritt 16. Bumpmap mit der Punktebene funzt nich. habs mehrmals probiert...es bleiben immer langweikig graue Punkte.
Was mach ich falsch?

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor fast 12 Jahren

Also solche Navigationen sind, wie fast alle horizontalen Navis, begrenzt was die Anzahl der Links angeht. In dem Fall würde ich die ganze Seite auf ne bestimmte Breite einstellen (die von der Navi). Drüber packst du ein schmales Bild, und drunter halt die eigentliche Seite mit News, Artikel, usw...

Die Navi-Umsetzung in HTML kannst du auf mehrere Arten machen - entweder du nimmst das ganze als Hintergrundbild (ohne den Text) und setzt die Links als Text darüber, oder du zerschneidest sie einfach horizontal in einzelne Stücke und machst lauter nebeneinander. Oder du machst ne Imagemap, es gibt ein GIMP-Plugin was standardmäßig dabei ist, soweit ich das in Erinnerung habe!

Rahakanariwa Mitglied seit fast 12 Jahren Rahakanariwa 1 Kommentar
vor fast 12 Jahren

^^ toll die navi sieht zwar echt geil aus aber was nützt mir ein einziges bild als navi? das kann ich doch dann nur als gesamtheit anklicken^^ oder kannste mal erklären wie das mit den imagemaps geht?
denn wenn man das einfach alles auseinanderschneidet dann kann es bei so einer kleineren auflösung als die navi arge probleme geben! denn dann is das letzte teil plöztlich auf der nächsten zeile!!!!!!!!!!

Peter2
vor etwa 12 Jahren

nu hab ich aufgegeben! :(
kein schlagschatten, bumpmap geht auch nich richtig und dann wollt ich die metallknöpfe machen und die punkte sind nicht zu sehen! :(

also endweder ich bin wirklich einfach zu dumm dafür oder da stimmt was mit meinem gimp nich!! :((

macht es einen unterschied ob man die windows oder die linux version hat? ich dachte nich.

Peter2
vor etwa 12 Jahren

danke für deine antwort! :)
das mit den verschieben hab ich nu geschnallt und gestern hatte ich es dann auch geschafft das der blaue farbverlauf zu sehen ist doch dann kommt das nächste problem. :(

der schlagschatten ist nicht auf der blauen feld zu sehen sondern immer um den grauen teil und das hab ich bei jeder ebene versucht doch immer das selbe... :(

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor etwa 12 Jahren

Ebenen kann man auch in ihrer Reihenfolge ändern. Im Ebenendialog musst du eine Ebene anklicken, die linke Maustaste gedrückt lassen und dann nach unten ziehen, und in diesem Fall vor der Hintergrund-Ebene wieder auslassen.

Peter2
vor etwa 12 Jahren

also ich VEZWEIFLE TOTAL an schritt 7!! :(
was is denn damit gemeint"...Schiebt diese ganz nach unten (vor die schwarze HG-Ebene)."??
wie "schiebe" ich die ebene? mit dem tool das kommt wenn ich "M" drücke oder?
wenn ich das mache verschiebe ich immer entweder nur den schwarzen hintergrund oder das graue und egal wo ich weitermache der blaue verlauf is nie in den vorher ausgeschnittenem breich. :(((

was mach ich nur falsch??? :((

Körnerbrötchen
vor etwa 12 Jahren

Bei mir ist der Schlagschatten unter Skript-Fu -> Schatten -> Schlagschatten zu finden.

Gruß,
Korny

devvv Mitglied seit mehr als 12 Jahren devvv 1471 Kommentare
vor etwa 12 Jahren

Stimmt ;) Habs ausgebessert! Danke.

Philipp
vor mehr als 12 Jahren

schöne sache. jedoch hast du geschrieben im 6. schritt folgendes geschrieben:
>Bei mir heißt diese "Graustufen".

du meinst wohl grauverlauf ;-)