Wie slice ich dieses Design am sinnvollsten

crephix · 28.09.2013

Moin,
ich habe mich extra mal registriert in der Hoffnung das ihr mir helfen könnt. Ich bin "Anfänger" auf dem Gebiet, habe mich aber bereits mit einigen Tutorials zum Bereich "Umsetzung" einer PSD zu XHTML / CSS eingelesen. Dummerweise verwenden diese Tutorials immer recht simple Designs (ausschließlich viereckige, einfarbige Flächen) die dann einige Fragen bei etwas "aufwendigeren" Design offen lassen.

Mich würde interessieren wie ich folgenden Kopfteil meines Designs am besten unterteile:

http://abload.de/img/tsdesignsslicesjjul.jpg (Mit eingeblendeten Slices)
http://abload.de/img/tsdesignssliceqhsqh.jpg (ohne eingeblendete Slices)

Auf dem Bild sieht man ca. meinen Grundgedanken wie ich intuitiv gesliced hätte. Zum einen habe ich den Header als ein gesamtes Bild gesliced und darunter die Buttons einzeln gesliced (wobei ich der Text nicht auf dem Bild sein soll). Nun ich habe bei den oberen Buttons (Home, Ts3 Verwalten etc.) in meinen Augen 2 verschiedene Buttons: Einmal habe ich den ausgewählten (oder Mouseover) Menüpunkt nämlich in dunkel und einmal in hell. Also möchte ich die zwei Buttons als einzelnes Bild slicen.

Beim "Submenü" (also dort wo About us, Community etc. drin steht) bin ich mir derzeit sehr unsicher. Mein Gedanke war dort, dass ich nur ein kleines Bild von der linken sowie rechten Ecke/Seite mache und zwischen diesen zwei Bildern eine Fläche in HTML bzw. CSS definiere. Ist das eine gute Idee oder sollte man dies besser anders lösen?

Auch die Trennlinie mit dem wiederholdenden Muster wirft Fragen auf. Im Prinzip kann ich dort doch eine z.B. 10x3px Grafik machen die sich in der Breite so lang wiederholt, bis die gewünschte Breite erreicht ist? Nicht anders habe ich sie in Photoshop ja entworfen. Ist das in diesem Falle sinnvoll um Ladezeit bzw. Bilder zu reduzieren oder denke ich da zu aufwendig ?

Wenn ich weiß wie ihr das ganze angehen würdet, wäre das ein riesen Vorteil für mich. Die letztendliche Umsetzung bekomme ich schon zu recht gewurstelt.

Vielen dank im voraus,
crephix

crephix · 28.09.2013

AW: Wie slice ich dieses Design am sinnvollsten

Wie bereits erwähnt, ich habe mir einige solcher Tutorials angeschaut. Die meisten Tutorials slicen einen ganzen Button, aber wenn ich mir andere Homepages anschaue ist der Text auf dem Button in HTML/CSS eingefügt wurden und nicht als ein ganzes Bild. Außerdem sind es in den ganzen Videos fast immer nur einfarbige Rechtecke was auf obiges Design ja nicht zutrifft.

Könnte mir jemand sagen wie man es speziell für obigen Screenshot am sinnvollsten slicet/umsetzt?

Viele Grüße

cebito · 28.09.2013

AW: Wie slice ich dieses Design am sinnvollsten

crephix schrieb:
wie man es speziell für obigen Screenshot am sinnvollsten slicet?

Gar nicht! Du brauchst nur dieses eine (rot eingerahmte) Bild

alles andere erledigst du per CSS.

crephix · 28.09.2013

AW: Wie slice ich dieses Design am sinnvollsten

cebito schrieb:
Gar nicht! Du brauchst nur dieses eine (rot eingerahmte) Bild

alles andere erledigst du per CSS.

Ok mittlerweile habe ich auch gesehen, dass eine wunderschöne Möglichkeit gibt Radien mit CSS einzufügen, aber zumindestens den nicht ausgewählten Button z.B. TS3 verwalten muss ich doch als Bild nehmen, denn oben ist ja eine Art Schatten oder sehe ich das falsch?

Grüße

imac123 · 28.09.2013

AW: Wie slice ich dieses Design am sinnvollsten

Nur den banner slicen wie @cebito gesagt hat, Rest kann per css erledigt werden.

Ausser du willst Button als Bild.

PrintMaus · 28.09.2013

AW: Wie slice ich dieses Design am sinnvollsten

Definiere im CSS den Schatten als Top-Border, z.B.
border: 1px;
border-top-style: solid;
border-top-color: #333;

Gutes Gelingen

Myhar · 30.09.2013

AW: Wie slice ich dieses Design am sinnvollsten

Verwende auch border-radius für abgerundete Ecken und box-shadow für Schatteneffekte. Damit solltest du deine anfänglich auftretenden Probleme lösen können.

RockfirmBear · 05.10.2013

AW: Wie slice ich dieses Design am sinnvollsten

Alternativ lässt sich für den Schatten oben im Button auch ein entsprechend gestalteter Verlauf verwenden. Den kannst Du ganz einfach per Web-Tool erstellen. Den Gradient Editor von ColorZilla hier finde ich genial.
Das Play-Symbol unter dem Menü kannst Du entweder als Unicode-Zeichen oder als Webfont einbetten.
Das Menü nicht per Bilder zu erstellen hat den Vorteil, dass Suchmaschinen leichter damit klar kommen.

crephix · 09.10.2013

AW: Wie slice ich dieses Design am sinnvollsten

Ok, da ihr mir schon fleißig und schnell zu obigem Thema helfen konntet, versuche ich mein Glück nochmal hier. Ich bin leider noch nicht weit gekommen, da ich es möglichst sauber umsetzen will und viele Seiten/Tutorials da gegensätzlich sind. Derzeit lerne ich am meisten von ähnlich strukturierten Seiten, dessen Html/CSS code ich mir anschaue.

Nun bin ich auf das Problem gestossen, dass wenn ich unterschiedlich große Elemente (Text + Form Felder) in zwei verschiedenen Spans habe, bekomme ich diese nicht auf gleicher Höhe bzw. zentriert ausgegeben. Außerdem bereitet die Umsetzung des Submit Button auch Kopfschmerzen. Ich habe mal das ganze hochgeladen wie es bei mir ausschaut und freue mich auf eure Hilfe bzw. Verbesserungsvorschläge wie ihr es machen würdet.

Viele Grüße und danke im voraus

RockfirmBear · 11.10.2013

AW: Wie slice ich dieses Design am sinnvollsten

Hi.
Ich konnte die vertikale Positionierung gut mit dem Einsatz von vertical-align:middle; in den passenden Klassen korrigieren.Ggf. muss noch weiterer Text in Span-Tags.
Kleiner Tipp zu den Input-Feldern: Statt den Text als Value zu schreiben, kannst Du ihn auch im placeholder-Attribut platzieren. Moderne Browser löschen den Text dann automatisch, sobald der User mit dem Feld interagiert und stellen ihn auch etwas grau dar.
Beim Button kann es nötig sein, Pudding und margin auf Null zu setzen.
Viel Spaß beim Coden

crephix · 11.10.2013

AW: Wie slice ich dieses Design am sinnvollsten

Mit vertical-align erziele ich in meinem Browser leider garkeine Wirkung? Ist das wirklich das richtige Mittel? :/. Dieses kleine Problem bringt mich wirklich zum Kochen

. Habe es in der tophead , sowie in tophead.login versucht einzubauen und es zeigte bei beiden klassen keine Wirkung :/

patrick_l · 11.10.2013

AW: Wie slice ich dieses Design am sinnvollsten

Die Headergrafik samt der gestreiften Linie darüber würde ich als eine Grafik einbinden. Die Navigation mittels CSS-Sprite umsetzen. Also den Status beider Zustände als Grafik speichern und entsprechend per CSS und dem Positionieren umsetzen.

Alternativ bei der Navigation komplett auf Grafiken verzichten und nur mit CSS3 arbeiten. Deine Zielgruppe ist ja eh recht jung. Daher kann man sicher davon ausgehen, das die meisten User einen aktuellen Browser verwenden und somit CSS3 kein Problem sein dürfte.

Liebe Grüße, Patrick