Template (einfach und mit PS) selbst erstellen

[spiderchristian]

Hallo zusammen,

ich nutze als CMS Joomla und erstelle damit auch Seiten für kleinere Firmen. Da ich mich doch etwas mit Photoshop auskenne, wollte ich mein komplettes Design einfach mal in Photoshop entwerfen und als Template einbinden. Da ich schon festgestellt hab, dass von der PSD-Datei (aus Photoshop) zum Template ein langer weg ist, wollte ich nach eurem Rat fragen, ob es vielleicht mit anderen CMS leichter geht, ein Template zu erstellen.
Ich kenne mich zwar an sich gut mit Joomla aus, aber die vielen Komponenten benötige ich für die Firmen eigentlich kaum. Also wenn das Templates erstellen woanders einfacher geht, würd ich auch wechseln. (Modx, Drupal, Typolight, usw.)

Oder ratet ihr mir, mich bei Joomla in die Templateerstellung reinzulesen/arbeiten?

gruß,
chris

 

[GrafiKman]

AW: Template (einfach und mit PS) selbst erstellen

Du kannst ganz normal dein Template erstellen in PS, danach Slicen und HTML & CSS Programmieren. Zum Schluss einfach den Joomla-Code einfügen

 

[spiderchristian]

AW: Template (einfach und mit PS) selbst erstellen

Hört sich jetzt ganz einfach an

Also hab ja schon Standard-HPs mit Photshop erstellt, also auch gesliced aber dann eben als HTML (ohne extra css) betrieben.

Gibts vielleich irgendwo eine Übersicht aller Joomla Codes und auch etwas über CSS, da ich hier noch nicht sooo fit bin. Verstehen tu ichs zwar, aber beim selber erstellen wirds bissl schwieriger.

Danke schon mal für deine Hilfe!

 

[mros]

AW: Template (einfach und mit PS) selbst erstellen

Hier gibt es ein nettes Tut für Joomla ..



Viel Spaß mros

 

[Samuelll]

AW: Template (einfach und mit PS) selbst erstellen

Wenn du das Beez-Template als Vorlage nimmst, kansnt du sehr viele Joomla-CSS-Angaben hier herausziehen (Beez da weitestgehend Tabellenfrei). Das geht natürlich auch bei allen anderen Templates.

Und, was du weist das du eh "nie" brauchst, musst du ja nicht formatieren. Spart Zeit

 

[spiderchristian]

AW: Template (einfach und mit PS) selbst erstellen

Wie mach ich das dann genau beim Slicen... Also, soll ich Slicen so wie ich es in Joomla unterteilen möchte? Oder kann ich auch detaillierter vorgehen?

 

[Samuelll]

AW: Template (einfach und mit PS) selbst erstellen

Für das Slicen kann man wohl keine Pauschalanleitung geben.

Es gibt leute die Slicen ganze Seitenbereiche, hinterlegen diese als statisch Bild im Template und überlagern dann nur Teilbereiche mit Bilderteilen.

Ich hingegen versuche immer die Boxen unabhängig von einander "einzeln" nachzubauen. So kann ich das Design später so flexibel wie möglich halten, ohne zwingend auf ein statisches bild angewiesen zu sein, das mir das Aussehen der Box simuliert weil es im Hintergrund liegt.

Hier wirst du Deinen eigenen Weg finden müssen.

Hier im Video-Tutorialbereich findest du allerdings 2 Tutorials zum Thema Seiten Erstellen und aus PSD übertragen.

Das eine ist das Tutorial zum CD-Menü der PSD-Tuts. CDs, das andere war irgendwas mit "Jungle".

Beide Tuts. kann ich dir empfehlen.

 

[spiderchristian]

AW: Template (einfach und mit PS) selbst erstellen

Ok, danke, werd ich mir dann reinziehn
Eine letzte Frage hab ich noch... Das Hauptmenü ist ja variabel in der Höhe. Also für den Fall, dass ich z.B. einen Rahmen drumrum machen möchte, muss ich das dann auch gleich in meiner PSD-Datei in einer x-beliebigen Größe machen (also das Hauptmenü) oder in einer eigenen PSD-Datei?

 

[Samuelll]

AW: Template (einfach und mit PS) selbst erstellen

Du "malst" dir einfach ein Menü mit 1,2 oder X Elementen in Dein PSD hinein. Eine Seite ist dann eine eigene PSD-Datei und überträgst dann die "Werde" aus der PSD in CSS. zB Hintergrundbild ausschneiden und einfügen, Innenabstand ausmessen und in die CSS eintragen, Border direkt in CSS als als Bild, ......

 

[spiderchristian]

AW: Template (einfach und mit PS) selbst erstellen

Glaub ich hab verstanden... Werds jetzt mal ausprobieren, zur Not meld ich mich halt nochmal.

Danke für euere Hilfe!

 

[Vertico]

AW: Template (einfach und mit PS) selbst erstellen

Ich slice immer recht gründlich (siehe Screenshot), auch wenn nur ein Teil der Grafiken dann direkt genutzt wird. Von der Navigation links werden zB nur eine Abschnitt-Überschrift-Grafik und eine Linkgrafik genutzt da über CSS als Hintergrundgrafik für jeden Link kopiert wird. Boxen (in meinem Beispiel eine Box mit einem 1px-Rahmen) baue ich über CSS, indem ich beim slicen 3 Grafiken erstelle. Einen Boxhead (3px höhe für horizontale Linie plus die beiden Zipfel der vertikalen Linien), einen Boxcontent (1px höhe) und einen Boxfoot (wie Boxhead). Die Boxcontent-Grafik wird dann auch wieder über CSS wiederholt, Head und Foot oben und unten drangesetzt.