Antworten auf deine Fragen:
Neues Thema erstellen

Navigationbar

Mr_BIG1893

Bildchenmacher

Hallo zusammen,

Ich möchte eine Website ins Leben rufen, mit diesem Design



Ich habe noch nicht allzuviel Erfahrung mit Webdesign, aber ich hoffe ich kriege das doch in etwa so hin, wie ich das gerne möchte.

Ich versuche mal zu beschreiben wie ich es vorhabe zu machen und wäre dann froh wenn ihr mir sagt, ob es so umsetztbar ist.

Also, das Grunddesign steht ja, das wurde im Photoshop gemacht.
Jetzt dachte ich mir, ich Slice das ganze und importiere es dann in Dreamweaver.

Soweit so gut. Ich hoffe das geht doch so oder? Ist ja eigentlich ziemlich einfach.

Jetzt hab ich nur noch eine Frage.

Krieg ich das hin, dass die Navileiste einen Rollover Effekt bekommt und Trotzdem die spezielle Schrift behalten kann?

Wenn ja, könnte mir villeicht jemand sagen wie?
Meine Idee war, die einzelnen Slices der Navileiste zu kopieren Ihnen den ensprechenden "Rollovereffekt" zu geben (zum Beispiel einen Innerglow) und dann per Dreamweaver dem "Original Navileistenbild" das "Rollover Navileistenbild" als Rollovereffekt hinzuzufügen.
 

energie95

Neulanderforscher ^^

AW: Navigationbar

Hallo zusammen,

Ich möchte eine Website ins Leben rufen, mit diesem Design



Ich habe noch nicht allzuviel Erfahrung mit Webdesign, aber ich hoffe ich kriege das doch in etwa so hin, wie ich das gerne möchte.

Ich versuche mal zu beschreiben wie ich es vorhabe zu machen und wäre dann froh wenn ihr mir sagt, ob es so umsetztbar ist.

Also, das Grunddesign steht ja, das wurde im Photoshop gemacht.
Jetzt dachte ich mir, ich Slice das ganze und importiere es dann in Dreamweaver.

Soweit so gut. Ich hoffe das geht doch so oder? Ist ja eigentlich ziemlich einfach.

Jetzt hab ich nur noch eine Frage.

Krieg ich das hin, dass die Navileiste einen Rollover Effekt bekommt und Trotzdem die spezielle Schrift behalten kann?

Wenn ja, könnte mir villeicht jemand sagen wie?
Meine Idee war, die einzelnen Slices der Navileiste zu kopieren Ihnen den ensprechenden "Rollovereffekt" zu geben (zum Beispiel einen Innerglow) und dann per Dreamweaver dem "Original Navileistenbild" das "Rollover Navileistenbild" als Rollovereffekt hinzuzufügen.



Vielleicht hilft dir das weiter, wenn du nicht nur den text markierst, und die Glanzebene etwas in der deckkraft senkst ;)
 

Mr_BIG1893

Bildchenmacher

AW: Navigationbar

Villeicht steh ich grad auf der Leitung....
Aber ich verstehe im Moment nicht, was das mit meinem Problem zu tun hat
 

energie95

Neulanderforscher ^^

AW: Navigationbar

Es hieß ja, ob du diesen Effekt bekommsz und die Schriftart erhalten bleibt.

So macht man es. Diese als GIF einzeln speichern und in die css / html - datei einfügen
 

HansHansa

[Mod] Foto

AW: Navigationbar

Das obere Menü ist ganz einfach.
Es ist per CSS erstellt: (ID "navBar") es ist nur ein Hintergrundgrafik die nach links und rechts verschoben wird.


Die Schrift ist über eine Liste erzeugt.

Code:
<div id="navBar">
    	  <ul>
    	    <li><a href="../">HOME</a></li>
  	        <li><a href="tutorials/">TUTORIALS</a></li>
    	    <li><a href="contact/">CONTACT</a></li>
            <li><a href="resources/about">ABOUT ME</a></li>
    	    <li><a href="resources/">RESOURCES</a></li>
            <li><a href="buying/">BUY VIDEO</a></li>
    	  </ul>
        </div>
 

Kronod

Noch nicht viel geschrieben

AW: Navigationbar

ich würde vorschlagen ein zweites Bild zu machen. Dieses mit einer helleren Menüleiste zu erstellen und diese da genauso zuzuschneiden wie das normale Bild. so könntest du per hover effekt des zweite einblenden, wenn man mit der Maus drüberfährt

Gruß Kronod
 

Mr_BIG1893

Bildchenmacher

AW: Navigationbar

Das obere Menü ist ganz einfach.
Es ist per CSS erstellt: (ID "navBar") es ist nur ein Hintergrundgrafik die nach links und rechts verschoben wird.


Die Schrift ist über eine Liste erzeugt.

Code:
<div id="navBar">
          <ul>
            <li><a href="../">HOME</a></li>
              <li><a href="tutorials/">TUTORIALS</a></li>
            <li><a href="contact/">CONTACT</a></li>
            <li><a href="resources/about">ABOUT ME</a></li>
            <li><a href="resources/">RESOURCES</a></li>
            <li><a href="buying/">BUY VIDEO</a></li>
          </ul>
        </div>

Das klingt nach einer sauberen Lösung, nur weiss ich nicht wie das mit der Liste geht... aber das ginge warscheindlich zu weit das zu erklären nehm ich an


ich würde vorschlagen ein zweites Bild zu machen. Dieses mit einer helleren Menüleiste zu erstellen und diese da genauso zuzuschneiden wie das normale Bild. so könntest du per hover effekt des zweite einblenden, wenn man mit der Maus drüberfährt

Gruß Kronod

Das wäre glaube ich ziemlich genau dass was ich gemeint habe, nur nicht ganz so kompliziert ausgedückt ;)
 
Zuletzt bearbeitet:

temporary

Noch nicht viel geschrieben

AW: Navigationbar

Hey,
kurzer Ratschlag: Das ist in PS schön kreiert. Aber bitte, bitte nimm nicht einfach die Slice-Funktion und erstelle daraus eine Webseite! Arbeite Dich erstmal ein bisschen in CSS und HTML ein, damit kannst Du den Menueeffekt genauso realisieren, und nebenbei Deine Seite weiter in Richtung SEO, Dateigröße und Features optimieren.
 

Mr_BIG1893

Bildchenmacher

AW: Navigationbar

Habe die 2 Bildervariante genommen, gefällt mir sehr gut.

Hier seht ihr was draus geworden ist:

Vielen Dank

Leider ergab sich ein nächstes Problem :(
 

temporary

Noch nicht viel geschrieben

AW: Navigationbar

.. ich find das Menue auf der Seite zu groß. Etwas kleiner wirkt das nochmal mehr professioneller. Und zu Deinem Problem wg. zerreissen.. hatte ich ja angesprochen, nicht einfach exportieren.. hehe ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.355
Mitglieder
67.534
Neuestes Mitglied
Mario Rossi-Munter
Oben