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.
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 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
- Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
- Abruf von über 1000 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.
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.
- Download: Spiegelungen 2
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
Das Punktesystem
Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.
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
Kommentare
Weitere KommentareTutorial empfehlen
Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
» Schritt 1
Navigation in Bildbearbeitungsprogramm erstellen und für das Web speichern
Zuerst erstellen wir wie gewohnt das Layout in einem Bildbearbeitungsprogramm wie z.B. Photoshop.
Da ich nicht nur einen Zustand meiner Navigation darstellen möchte, habe ich für den hover- & active-Zustand eine zweite Variation erstellt.
Nun können wir die Grafiken speichern. Hierbei slicen wir nicht mit Hilfe von Photoshop und wir schnibbeln auch nicht jeden Button einzeln aus, sondern wir gehen folgender Maßen vor:
Den Normalzustand der Navigation speichern wir im Header ab ("header.jpg"), den wir später über CSS in die Website einbinden. Den Hover- bzw. Activezustand speichern wir hingegen einzeln unter einem eindeutigem Dateinamen wie z.B. "navigation.jpg" ab.
» Schritt 2
HTML-Datei vorbereiten
Nun bereiten wir die HTML-Datei (z.B. "index.html") vor.
Meine Navigation wird sich im Header befinden, weshalb ich im Div "header" auch meine Navigation einsetzen werde. Hierzu verwende ich das HTML-Element "ul" bzw. "li".
Als "ul" wird eine unsortierte Aufzählungsliste bezeichnet (unsorted list). Die ID ist eindeutig gewählt. Hierüber sorgen wir gleich dafür, dass die Navigation auch so aussieht, wie das Layout es vorgibt.
Als "li" wird der Listenpunkt (list item) bezeichnet. Jedes "li" steht demnach für einen Listenpunkt.
Nun haben wir das Grundgerüst der Navigation erstellt, allerdings sieht das bisherige Ergebnis nicht wirklich zufriedenstellend aus.
Also bereiten wir nun die CSS-Datei vor, bzw. statten sie so aus, damit unsere Navigation sich auch später wohlfühlt.
» Schritt 3
CSS-Formatierung vornehmen
Wir benötigen einige Angaben, um unsere Navigation richtig darzustellen.
Hier sprechen wir die gesamte Navigation an. Damit die Navigation überhaupt dargestellt wird, vergeben wir ein "display:block". Die Höhen- und Breitenangaben ("height" und "width") benötigen wir ebenfalls unbedingt. Ich richte mich hierbei nach der Größe der eben erstellten Datei "navigation.jpg".
Da die Navigation etwas versetzt ist, benötige ich den "margin"-Wert, mit dem ich die Navigation genau positionieren kann und mit "position:absolute" erreiche ich, dass dies auch passiert.
Nun geben wir den einzelnen Listenpunkten einige Angaben mit. Hierbei geht es nur um den Listenpunkt an sich - noch nicht um die einzelnen Button.
Da wir keinen Rahmen möchten, sagen wir "border:none". Damit die Button hinterher nebeneinander und nicht wie in der Ansicht vorhin untereinander stehen, setzen wir es "float:left". Um zu erreichen, dass Eigenschaften der Links ausgeschlossen werden, bekommen die Listenpunkte ein "text-decoration:none". Zu guter Letzt machen wir mit "text-indent:-9999px" die Schrift unsichtbar.
Nun könntest Du dir denken: "Warum schreiben wir überhaupt dann was da hin?", aber das ist sehr gut für die Suchmaschinen. Darum geht es jedoch hier jetzt nicht. Es ist in jedem Fall Ratsam dem "a-Tag" auch eine Beschriftung mitzugeben.
Die Eigenschaften für die Links, die sich im "li" befinden, gleichen fast denen für das "li" an sich.
Da ich eine Spiegelung in meiner Navigation habe und nicht möchte, dass man über die Spiegelung dem Link folgen kann, sondern NUR den Button dafür nutzen soll, gebe ich eine Höhe von 30px an. Im Normalfall kann man diese jedoch weglassen.
Die hover-Eigenschaft deckt sich mit der des Normalzustandes, jedoch führe ich ihn der Vollständigkeit halber mit auf.
Nun sieht es schon ganz gut aus, allerdings funktionieren die Links noch nicht.
» Schritt 4
Links spezifisch formatieren
Erinnern wir uns an unseren Codeschnipsel aus der index.html:
Wir haben hier Klassen ("class") vergeben, damit wir jeden Button eine Eigenschaft zuweisen können. Also tun wir das doch einfach.
Schauen wir uns zuerst den Button "Willkommen" an. Wenn ich mit der Maus drüber fahre, soll dieser sich verändern und die Grafik "navigation.jpg" laden.
Der gesamte Button inklusive Spiegelung ist 67px hoch. Da alles dargestellt werden soll, vergebe ich diese Höhenangabe. Die "margin"-Werte sind individuell und daher bei mir entsprechend des Beispiels. Damit der Linkbereich auch exakt dort ist, wo ich ihn möchte und damit er überhaupt dargestellt wird, ist das "position:absolute" nötig. "width" sollte selbsterklärend sein - so breit ist mein Button.
Nun kommen wir zum "Eigentlichen".
Ich möchte, dass sich der Button verändert, wenn ich mit der Maus drüber fahre (ul#navigation: lia.li-willkommen:hover).
Du wirst merken, dass sich die Eigenschaften kaum ändern. Lediglich die Eigenschaft "background" ist neu. Hier laden wir die Navigation (navigation.jpg). Mit den Werten hinter "scroll", also in meinem Fall mit "-1px 0" verschieben wir die Hintergrundgrafik in diesen Fall 1px nach links; die Höhe bleibt unverändert. Ein größerer Unterschied wird bei den nächsten Button sichtbar.
Damit der User meiner Seite später merkt, auf welcher Seite er sich befindet, möchte ich, dass der jeweilige Button so dargestellt wird, wie wenn man mit der Maus drüber fährt. Dies errreiche ich mit einer eigenen Klasse für den entsprechenden Listenpunkt: "ul#navigation li.li-willkommen-active".
In der HTML-Datei sieht es dann so aus:
Dem "a", also Link nehme ich die Klasse "li-willkommen" weg, weil ich nicht möchte, dass der Link benutzt werden kann, wenn man sich auf der jeweiligen Seite bereits befindet. Wenn Du das dennoch wünscht, kannst Du die Klasse drin lassen.
Nun bekommt also das "li" die Klasse "li-willkommen-active" und wird entsprechend dargestellt.
Jetzt fehlen noch die restlichen Button:
Nun ist die Navigation fertig und Einsatzbereit.
An dieser Stelle weise ich darauf hin, dass der "margin"-Wert von Mozilla FireFox und Internet Explorer & Co unterschiedlich interpretiert werden. Es kann also - je nach Art und Weise der Programmierung - dazu kommen, dass diese Werte für den IE oder FF extra angepasst werden müssen.
Bei Fragen stehe ich selbstverständlich zu Verfügung.
EDIT:
Damit nicht selber alles getippt werden muss, was hier negtaiv geäußert wurde hier zum kopieren der Text:
HTML
<ul id="navigation">
<li class="li-willkommen-active"><a href="index.html" title="Willkommen">Willkommen</a></li>
<li><a href="portfolio.html" title="Portfolio" class="li-portfolio">Portfolio</a></li>
<li><a href="ueber-mich.html" title="Über mich" class="li-ueber-mich">Über mich</a></li>
<li><a href="tutorials.html" title="Tutorials" class="li-tutorials">Tutorials</a></li>
</ul>
CSS
ul#navigation {
display:block;
height:67px;
margin:122px 0 0 437px;
position:absolute;
width:552px;
}
ul#navigation li {
border:none;
display:block;
float:left;
text-decoration:none;
text-indent:-9999px;
}
ul#navigation li a {
border:none;
display:block;
float:left;
height:30px;
text-decoration:none;
text-indent:-9999px;
}
ul#navigation li a:hover {
border:none;
display:block;
height:30px;
text-decoration:none;
text-indent:-9999px;
}
ul#navigation li a.li-willkommen {
height:67px;
margin:-1px 0 0 2px;
position:absolute;
width:144px;
}
ul#navigation li a.li-willkommen:hover,
ul#navigation li.li-willkommen-active {
background:transparent url(../images/layout/navigation.jpg) no-repeat scroll -1px 0;
height:67px;
margin:-1px 0 0 2px;
position:absolute;
width:144px;
}
ul#navigation li a.li-portfolio {
height:30px;
margin:-1px 0 0 156px;
position:absolute;
width:125px;
}
ul#navigation li a.li-portfolio:hover,
ul#navigation li.li-portfolio-active {
background:transparent url(../images/layout/navigation.jpg) no-repeat scroll -155px 0;
height:67px;
margin:-1px 0 0 156px;
position:absolute;
width:125px;
}
ul#navigation li a.li-ueber-mich {
height:30px;
margin:-1px 0 0 291px;
position:absolute;
width:124px;
}
ul#navigation li a.li-ueber-mich:hover,
ul#navigation li.li-ueber-mich-active {
background:transparent url(../images/layout/navigation.jpg) no-repeat scroll -290px 0;
height:67px;
margin:-1px 0 0 291px;
position:absolute;
width:124px;
}
ul#navigation li a.li-tutorials {
height:30px;
margin:-1px 0 0 425px;
position:absolute;
width:126px;
}
ul#navigation li a.li-tutorials:hover,
ul#navigation li.li-tutorials-active {
background:transparent url(../images/layout/navigation.jpg) no-repeat scroll -424px 0;
height:67px;
margin:-1px 0 0 425px;
position:absolute;
width:126px;
}
-
Reklame
-
-
- Farbe ins Gesicht
- Hallo erstmal ne
- [CONTEST] CSS-Contests: Worauf habt ihr Lust?
- Wacom Bamboo zu verkaufen!
- InDesign/CS5 unsichtbare €-Zeichen ersetzen
- Fotobüchern
- Umrandung um Textfeld
- Kanten glätten bei meinem Bild oder Vektor?
- After Effects Ram-Vorschau - Problem mit Cache (aktualisert nicht)
- blender render stürzt ständig ab
- jQuery - Größe von einem Frameset ändern?
- [CS5] "Löschen-Mitteilung"
- Zerissenes Foto
- Biete Programmierung Ihres PSD-Designs
- Fehler beim Platzieren von Bildern
- Zeilenumbruch CS4
- Gestaltung eines Logos
- Kaufberatung Drucker
- Dynamische Auswahlliste: Name und ID übergeben
- Adobe Encore - Probleme Schaltflächen Unterbild
-
-
Aktuelles Commag
Anzeige
-
DarkSide
-
Anzeige
ero77
12.10.2011 - 00:09
danke vielmals..ist echt cool
karol1988
07.09.2011 - 16:16
Echt Klasse, Super Alternative Vielen Dank
Elchblender
27.05.2011 - 09:43
Und was habe ich in den letzten Jahren immer geschnippelt!
Vielen Dank!!!
D3ViL42
14.02.2012 - 13:38
Da bist du nicht der einzige! ;)
Sehr schönes Tut übrigends!
penguinpower
20.05.2011 - 17:46
Sehr praktisch, ohne slicen und cutten eine schöne Navigation zurechzubasteln :)
xxCyRiuSxx
17.04.2011 - 10:47
Sehr schönes Tut das hab ich gesucht Thx und mach wieter so ...
Lilofee
13.04.2011 - 22:20
Super, auch für mich als Anfänger gut und einfach umzusetzen! Vielen Dank!
rinu
06.04.2011 - 19:28
super gemacht.
genau das hab ich gesucht
danke
lg
rinu
Lainay
05.04.2011 - 14:39
Vielen Dank für das Tutorial!
Nach kurzem Einbauen läuft es bereits einwandfrei, ebenfalls erspare ich mir dadurch das ewige Geschnipsel sollte sich bei der Navigation etwas ändern.
toni_87
10.03.2011 - 09:30
Vielen Danke, genau das was ich wollte:-)
skill2bereal
05.03.2011 - 18:41
super erklärt danke!
Kloppy
26.02.2011 - 23:16
Einfach erklärt und schnell nachzubauen. Prima!! So was kann ich immer gebrauchen :-)
khali
22.02.2011 - 10:07
Super Tut! Vielen Dank!
AgentHawk
26.01.2011 - 02:52
Werd ich die tage gleich mal testen;) Dankööö
Hundefreund88
25.01.2011 - 16:38
Das Tutorial hat mir wirklich weitergeholfen. VIelen Dank!
Kloppy
22.01.2011 - 05:38
Super Tutorial, danke!
tharuin
05.11.2010 - 17:06
Hat sehr geholfen, danke
PitPanda
10.09.2010 - 22:17
super tut danke man lernt immer dazu. :)
HGWLOCKE
07.07.2010 - 17:18
ein paar kleine tricks, um seine seite schlanker zu halten.
vielen dank!
UltimateX
20.06.2010 - 14:00
Super Tutorial, danke ;-)