Antworten auf deine Fragen:
Neues Thema erstellen

Wie slice ich dieses Design am sinnvollsten

C

crephix

Guest

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
 
Zuletzt bearbeitet von einem Moderator:

C

crephix

Guest

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
 
C

crephix

Guest

AW: Wie slice ich dieses Design am sinnvollsten

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

Nicht mehr ganz neu hier

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

Alles wird gut

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

Hat es drauf

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.
 
R

RockfirmBear

Guest

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.
 
C

crephix

Guest

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
 
R

RockfirmBear

Guest

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 :)
 
C

crephix

Guest

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

Hat es drauf

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
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.474
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben