Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von wildpigs

    wildpigs

    30.12.2011 - 10:20

    sehr verständlich erklärt, auch für Anfänger wie mich

  • Alternative Portrait von Uchiha_Sasuke

    Uchiha_Sasuke

    10.11.2011 - 10:06

    selbst für mich als Anfänger sehr einfach beschrieben. Vielen Dank!

  • Alternative Portrait von Kloppy

    Kloppy

    22.01.2011 - 05:43

    Super Tutorial, danke!

  • Alternative Portrait von Kloppy

    Kloppy

    22.01.2011 - 05:39

    Super Tutorial, danke!

  • Alternative Portrait von quirinp

    quirinp

    11.08.2010 - 00:25

    Ich hätte nie gedacht, dass es möglich wäre die Buttonfrage auf diese Art zu lösen.
    Cool, Gut durchstrukturiert, und Ladezeitsparend.
    Danke!

  • Alternative Portrait von Dieguito

    Dieguito

    23.06.2010 - 15:18

    Danke für das gute Tutorial.

  • Alternative Portrait von UltimateX

    UltimateX

    20.06.2010 - 14:03

    Gute Erklärung, kurzes Tut. Danke.

  • Alternative Portrait von fritz222

    fritz222

    19.05.2010 - 20:16

    Wirklich gutes Tutorial. Thx

  • Alternative Portrait von joomla15

    joomla15

    27.04.2010 - 11:03

    Ein schöner erfrischender Beitrag!
    Bitte noch mehr solcher Kurz-Workshops.

  • Alternative Portrait von Mahoon

    Mahoon

    05.03.2010 - 00:03

    Sehr schöne Erklärung.
    Nur leider hänge ich total fest, da ich gerne eine vertikale Navi hätte. Ich hab auch schon gegoogelt, aber es gibt nur Beispiele für eine horizontale Navi. Vielleicht gibt es ja mal noch ein Tut dazu. Würde mich freuen...

  • Alternative Portrait von stempflea

    stempflea

    05.02.2010 - 10:06

    sehr schön erklärt, vor allem Danke für den Code ;-)

  • Alternative Portrait von absurt

    absurt

    12.01.2010 - 14:15

    Echt super und es funktioniert!!!
    Viele Dank auch für die Beschreibung der "Dummen" ;-)

  • Alternative Portrait von DarkMoonglave

    DarkMoonglave

    08.01.2010 - 10:14

    Gut gemacht, weiter so :)

  • Alternative Portrait von xad

    xad

    07.01.2010 - 09:43

    Echt fein erklärt :)

  • Alternative Portrait von angramanju

    angramanju

    03.01.2010 - 17:32

    Danke, du hast mir jede Menge Kopfzerbrechen erspart...

  • Alternative Portrait von mohnhaupt

    mohnhaupt

    01.01.2010 - 08:57

    Danke für die Super Erklärung

  • Alternative Portrait von alex0508

    alex0508

    14.12.2009 - 10:05

    Sehr gut, kann man immer gebrauchen. Ein kleines Online-Demo würde mir bei solchen Tutorials immer gefallen.

    • Alternative Portrait von qazwsx

      qazwsx

      14.12.2009 - 11:17

      Lad dir einfach die angehängten Dateien. Dort ist eine Demp Datei.

  • Alternative Portrait von silver129

    silver129

    30.10.2009 - 22:21

    Werde ich bestimmt demnächst mal mit einbinden. Einfach beschrieben. Toll, Hut ab!

  • Alternative Portrait von Brooker

    Brooker

    26.09.2009 - 09:08

    super verständlich, einfach beschrieben, leicht nachzuvollziehen und dann noch die Erleichterung für Suchmaschinen
    einfach genial

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Schritt 1:

Ihr öffnet Photoshop (oder Gimp, Paint Shop Pro etc.) und zeichnet euch ein Menü. Wichtig dabei ist, dass jeder Button gleich breit ist.

Bilder

Schritt 2:

Wenn ihr damit fertig seid, dann dupliziert ihr die Ebene und verschiebt diese so, dass die Menüs untereinander zu sehen sind. Nun ist eure Kreativität gefragt. Menü Nr.1 ist das Ausgangsbild, Nr.2 erscheint beim Mouseover, Nr.3 beim Klick. Ich empfehle euch, Nr.2 etwas heller als Nr.1 zu erstellen, Nr.3 mit einer anderen Farbe.

Bilder

Schritt 3:

Nun geht es an das Programmieren. Ich empfehle euch, bevor ihr das Menü in eure Seite einbindet, es vorher in eine leere HTML-Datei einzufügen und zu testen.

Also, erstellt euch eine leere HTML-Datei, der Name ist egal.  Erst rufen wir die CSS-Datei, die wir als Nächstes erstellen,  auf, in diesem Beispiel heißt die Datei css-sprites.css:

<link rel="stylesheet" rev="stylesheet" href="css-sprites.css" type="text/css" media="screen" />
Als Nächstes erstellen wir einen body mit einer ungeordneten Liste (<ul>), die im <div id="navigation"> liegt,  mit den jeweiligen Links als <li> mit jeweils derselben ID, die ihr in der CSS benutzen werdet, also könnt ihr sie euch aussuchen, solange sie mit den IDs der CSS-Datei übereinstimmen:

<body>
 <div id="navigation">
    <ul>
      <li id="nav-news"><a href="http://www.URL.tdk/">Titel1</a></li>
      <li id="nav-reviews"><a href="http://www.URL.tdk/">Titel2</a></li>
      <li id="nav-tips"><a href="http://www.URL.tdk/">Titel3</a></li>
      <li id="nav-contacts"><a href="http://www.URL.tdk/">Titel4</a></li>
    </ul>
  </div>
</body>


Das wäre es eigentlich. Hier die komplette Beispiel-Datei für die Faulen unter uns : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>.net CSS sprites</title>
  <link rel="stylesheet" rev="stylesheet" href="css-sprites.css" type="text/css" media="screen" />
</head>
<body>
  <div id="navigation">
    <ul>
      <li id="nav-news"><a href="#">News</a></li>
      <li id="nav-reviews"><a href="#">Reviews</a></li>
      <li id="nav-tips"><a href="#">Tips</a></li>
      <li id="nav-contacts"><a href="#">Contacts</a></li>
    </ul>
  </div>
</body>
</html>

Schritt 4:
Nun geht es an die CSS-Datei.  Wir erstellen den Style der navigation div, also z.B.

#navigation {
width: 500px;
height: 40px;
overflow: hidden;
}


Width und height passt ihr jeweils an die Größe eines Menüs an. Jetzt kommt eine weitere Zeile hinzu, die wohl wichtigste Zeile für das Menü:

#navigation a {
display: block;
width: 125px;
height: 40px;
background-image: url(nav-bar.png);
text-indent: -5000px;

}


Bei width und height tragt ihr die Größe der jeweiligen Buttons ein; entscheidend ist hier die Breite. Wenn ihr beim Erstellen des Menüs nicht auf die gleichmäßige Breite der Buttons geachtet habt, könnt ihr von vorne anfangen, selber schuld. Bei background-image tragt ihr die URL zum erstellten Bild ein. text-indent verschiebt die Textlinks außerhalb des sichtbaren Bereiches. Warum wir überhaupt den Text bei den Links eintragen? Es ist besser für Suchmaschinen.

Nun seid ihr fast fertig. Ihr erstellt für jeden Link eine neue Zeile. Die Namen dabei sind die IDs der <li>s in der HTML Datei. Also z.B.

#nav-news a {background-position: 0 0;}
#nav-news a:hover {background-position: 0 -50px;}
#nav-news a:active {background-position: 0 -100px;}
 
#nav-reviews a {background-position: -125px 0;}
#nav-reviews a:hover {background-position: -125px -50px;}
#nav-reviews a:active {background-position: -125px -100px;}

#nav-tips a {background-position: -250px 0;}
#nav-tips a:hover {background-position: -250px -50px;}
#nav-tips a:active {background-position: -250px -100px;}

#nav-contacts a {background-position: -375px 0;}
#nav-contacts a:hover {background-position: -375px -50px;}
#nav-contacts a:active {background-position: -375px -100px;}

Jetzt müsst ihr die Längen- und Höhenangaben an euer Menü anpassen.  Hier reicht auch nur das Herumexperementieren. Die erste Zahl ist dabei der horizontale Abstand des Buttons vom Anfang des Bildes. Wenn euer Menü an der Kante des Bildes liegt und jeder Button 156px groß ist , dann ist die erste Zahl für #Button1 a, #Button1 a:hover und #Button1 a:active 0, für #Button2 a, #Button2 a:hover und #Button2 a:active -156px, für #Button3 a, #Button3 a:hover und #Button3 a:active -312px und so weiter und so fort. Die zweite Zahl ist der vertikale Abstand der Menüs von der Kante des Bildes. Für alle Buttons ist es dasselbe. Also entweder den Abstand in Pixeln abmessen oder einfach ausprobieren.

Hier, für die Faulen, die gesamte CSS-Beispiel-Datei: 

* {
padding: 0;
margin: 0;
}

body {
padding: 30px;
}


#navigation {
width: 500px;
height: 40px;
overflow: hidden;
}

#navigation ul {
list-style: none;
}

#navigation li {
display: inline;
float: left;
}

#navigation a {
display: block;
width: 125px;
height: 40px;
background-image: url(nav-bar.png);
text-indent: -5000px;
}

#nav-news a {background-position: 0 0;}
#nav-news a:hover {background-position: 0 -50px;}
#nav-news a:active {background-position: 0 -100px;}
#nav-reviews a {background-position: -125px 0;}
#nav-reviews a:hover {background-position: -125px -50px;}

#nav-reviews a:active {background-position: -125px -100px;}
#nav-tips a {background-position: -250px 0;}
#nav-tips a:hover {background-position: -250px -50px;}
#nav-tips a:active {background-position: -250px -100px;}
#nav-contacts a {background-position: -375px 0;}
#nav-contacts a:hover {background-position: -375px -50px;}
#nav-contacts a:active {background-position: -375px -100px;}

Wenn ihr das Menü sehen wollt, einfach die Arbeitsdateien herunterladen und die HTML-Datei mit einem Internet-Browser eures Vertrauens öffnen. Auch die psd-Datei des Menü-Bildes ist dort vorhanden!

vBulletin 0.052 • ZF-App 0.523 • Total 0.575