Navi in PS erstellt,wie speichern um sie in html einzubinden

  • Hallo,
    ich habe mir eine Navigationsleiste in Photoshop CS4 gebastelt. Nun habe ich ein Problem, ich bin absoluter Anfänger mit HTML und CSS, beherrsche die Grundlagen aber schon.
    Wie muss ich eine in PS erstellte Navigation speichern, um sie in meine Webseite einzunbauen?
    Wenn ich es als jpg oder gif mache, kann man ja die Buttons nicht mehr anklicken.

    Kann mir da jemand helfen?

    LG Jenny

  • naja also die buttons speicert man einzeln mit all ihren zuständen, da man sie dann nur noch mit css verschieben muss (be a:hover.. etc)
    anssonsten find ich die qualität von png sehr gut, musste halt gucken was du als "objekt" hast, bei feineren detils png, sonst jpg mit 80 bis 90% qualität.
    du musst das bild slicen und zwar so, dass du deinen einzelnen containern nen entsprechenden hintergrund geben kannst

  • Hi Synaptic,
    danke für deine Antwort.
    Muss ich die fertige Navigationsleiste denn schon in mein HTML einbinden und dann die ganze Seite Slicen?

    Hab ich dann nicht weniger Arbeit wenn ich die Buttons einzeln als img in mein HTML einbinde und dann verlinke?

    Hab noch nie etwas gesliced. Gibt es dafür gute Tutorials?

    LG Jenny

  • Slicen heißt einfach ausschneiden ;) ( Slicen ), hat also nichts mit HTML zu tun, das machst du mit deinem Layout, fals du die Grafiken bereits in einzelnen Files hast, dann bist du damit schon fertig :P
    Ansonsten: google liefert dir da bestimmt genug Tutorials wie man sich es am einfachsten macht (hängt ja auch von deinem Grafikprog ab).

    Das mit dem <img> :
    Fals du keine Hovereffekte brauchst, kannst du es so machen - bei hover effekten ist eine background verschiebung viel Sinnvoller.

  • interessant zu wissen wäre, wie die navigation genau aussieht...

    normalerweise würd ich diese in ps erstmal unterteilen. also z.b. zuerst alle
    buttons ausblenden, damit du den hintergrund alleine hast. diesen dann als
    png oder jpg abspeichern.

    anschließend einen button nehmen, zurechtschneiden und diesen auch abspeichern
    (natürlich nur, falls alle buttons gleich sind) - wenn möglich ohne text darauf.

    jetzt kannst die navigation mit html/css zusammenbauen. also z.b nen div-container
    oder direkt ne liste nehmen, dort den hintergrund als backgroundimage einbinden.
    in die listenpunkte kannst dann deine menüpunkte erstmal eintragen (also den text).
    anschließend legste hinter die punkte (li) die buttons als hintergrundgrafik.
    richtest des ganze evtl noch mit margin, padding, width und height aus.

    so mal theoretisch - ohne dein menü zu kennen...

  • Kleine Ergänzung zu Drivers Theorie-Post:

    Evtl. gucken ob man Teile der Navigation nicht ohne Bilder lösen kann sonder mit CSS ...zb. wenn du als Hintergrund nur eine Farbe hast mit nem kleinen Rand dann brauchste das nicht extra ausschneiden und als Bild abspeichern ;)

    Einfach darauf achten das man die Bilder so knapp wie möglich hält der Größe wegen ;)

  • Danke!
    Auch das werde ich in den nächsten Tagen versuchen umzusetzen.
    Man, da kommt ja echr eine menge auf mich zu...;)
    und ich habe gedacht das ich mal schnell in ein zwei Wochen HTML und CSS lerne...:o

    LG und danke für eure Hilfe!

    Jenny