Anzeige
Tutorialbeschreibung

Vom Photoshop-Layout zum TYPO3-Template - Teil 1

Vom Photoshop-Layout zum TYPO3-Template - Teil 1

Bei diesem Tutorial (es ist mein erstes) geht es darum, sich in Photoshop ein Konzept für das Layout einer Homepage auszudenken und dabei schon einige wichtige Dinge zu beachten, die für die spätere Umsetzung in TYPO3 sehr wichtig sind. Außerdem zeige ich, wie man ein Layout Slicen kann und schließlich eine HTML-Datei daraus erstellt.

Weitere Tutorials werden folgen, in denen die erstellte HTML-Datei für TYPO3 vorbereitet wird, in TYPO3 eingebunden wird und schließlich mit Inhalten gefüllt wird.

Diese Tutorials erheben keinen Anspruch darauf, den perfekten und einzig wahren Weg zur erstellung eines TYPO3-Templates aufzuzeigen. Es ist lediglich eine von vielen Möglichkeiten.

Sollten Sie sich für meine sonstigen Projekte und Arbeiten interessieren, freue ich mich natürlich über jeden Besuch auf meiner Homepage (die übrigens auch auf TYPO3 aufbaut):

www.sleen-design.de


Schritt 1:

Als erstes sollte man ein Design in Photoshop entwerfen. Bei diesem Schritt sollte man bereits im Auge behalten, wie sich das Design später als Web-Template verhalten soll. Eine gute Dokument-Größe ist 800 x 600 Pixel. Das sieht gut aus und, vor allem, können es so gut wie alle Anwender (selbst mit einem 15‘‘-Bildschirm) komplett im Browser anschauen.

Weiterhin sollte man schon einmal planen, an welcher Stelle, welche Inhaltselemente platziert werden sollen. In meinem Beispiel gibt es eine horizontale Navigationsleiste, ein links-bündiges Menü, einen Haupt-Inhaltsbereich und einen Footer.

Bilder

Ganz wichtig zu beachten ist, dass der Haupt-Inhaltsbereich mit beliebig großem (bzw. langem) Inhalt füllbar sein sollte. Ich habe bereits viele Design-Entwürfe gesehen, die zwar sehr eindrucksvoll aussahen, jedoch gar nicht als Web-Template zu gebrauchen waren, da sie, sobald der Inhalt größer ist als der vorgesehene Inhaltsbereich, vollkommen auseinanderfallen. Ein solches Design mag also manchmal recht ansprechend aussehen, doch ist es (besonders für die Umsetzung in TYPO3) nicht so gut zu gebrauchen.

Bilder

Um ein gutes Darstellen von Inhalten zu gewährleisten, muss es im Design einen Bereich geben, der beliebig oft vertikal wiederholbar ist, ohne, dass man irgendwelche Übergänge oder Kanten sieht.

Bilder



Schritt 2:

Nun muss man das erstellte Layout Slicen. Dabei teilt man das Bild in verschiedene Bereiche, die später von Photoshop automatisch in einer HTML-Tabelle zusammengestellt werden. Beim Anlegen der Slices sollte man sich an die bereits besprochene Aufteilung der Inhaltsbereiche (Navigationsleiste, Menü, Inhalt und Footer) halten und dabei so wenig Spalten wie möglich erstellen. Wählen Sie also das Slice-Werkzeug aus.

Bilder

Ziehen Sie mit dem Slice-Werkzeug Rechtecke, so dass am Ende kein Bereich im gesamten Layout verbleibt, das nicht zu irgendeinem Slice gehört. Wenn Sie ein Slice nachträglich Bearbeiten wollen, weil es in Größe und Position nicht ganz stimmig ist, dann klicken Sie auf das Slice-Werkzeug und halten Sie die linke Maustaste einige Sekunden gedrückt. In dem sich nun ausklappenden Untermenü, können Sie das Slice-Auswahlwerkzeug wählen, womit sich vorhandene Slices bearbeiten lassen. Sollten bereits erstellte Slices einmal nicht zu sehen sein (z.B. nach dem Sie die Datei gespeichert haben und neu geöffnet), dann wählen Sie die Option „Ansicht / Einblenden / Slices“.

Ich habe mein Beispiel-Layout in 8 Slices unterteilt (Siehe Bild 5), wobei Nr. 3,5,6 und 8 am wichtigsten sind. Dort werden später die Inhaltselemente (Navigationsleiste, Menü, Inhalt und Footer) erscheinen. Die restlichen Slices (Nr. 1,2,4 und 7) sind lediglich da, um die Lücken zwischen den wichtigen Slices zu füllen.

Bilder



Schritt 3:

Nun wird die HTML-Datei erstellt. Dazu wählen Sie „Datei / Für Web und Geräte speichern…“. Es erscheint ein neues Fenster mit einer Vor-Ansicht des Layouts und der vorhandenen Slices. In der rechten, oberen Ecke des Fensters sehen Sie die Einstellungsmöglichkeiten für das Format der Bilddateien. Wählen Sie das JPEG-Format und eine maximale Qualität. Mittlerweile hat so gut wie jeder Mensch eine schnelle Internetverbindung, so dass man sich um die Größe der Bilddateien (zumal sie auch bei maximaler Qualität nicht sonderlich groß sind) keine Sorgen machen muss.

Bilder

Klicken Sie, sobald Sie die erwähnten Einstellungen vorgenommen haben auf Speichern. In dem nun aufklappenden Fenster wählen Sie als Dateityp „HTML und Bilder (*.html)“ aus. Bei Einstellungen stellen Sie „Standardeinstellungen“ ein und bei Slices „Alle Slices“. Als Dateiname wählen Sie einen passenden Namen für Ihr Projekt. Es sollte keine Leerzeichen oder Sonderzeichen enthalten. Ich nenne meine Datei einfach „tutorial.html“

Bilder

Wenn Sie nun, beispielsweise im Windows Explorer, in den Ordner wechseln, in das Sie die HTML-Datei angelegt haben, werden Sie feststellen, dass nicht nur die Datei „tutorial.html“, sondern auch ein Ordner mit den Bilddateien angelegt wurde (Siehe Bild 8). Dieser Ordner enthält für jeden Slice eine JPEG-Datei, sowie (in den meisten Fällen) eine Datei „Abstandhalter.gif“. Die Bild-Dateien haben den Namen der HTML-Datei plus die angehängte Nummer des Slices.

Bilder

Öffnen Sie die HTML-Datei durch einen Doppelklick, sollte sich Ihr Standard-Browser öffnen und Ihr soeben dargestelltes Layout sollte an der linken, oberen Seite des Browser-Inhaltsfensters, über einem weißen Hintergrund zu sehen sein (Siehe Bild 9). Man kann allerdings noch keine Inhalte sehen, keine Buttons und auch sonst ist mit der HTML-Seite noch nichts anzufangen. Im nächsten Tutorial werde ich erklären, wie man in einem HTML-Editor (wie zum Beispiel Dreamweaver), die erstellte HTML-Datei für den Gebrauch in TYPO3 vorbereitet.

Bilder


Mit freundlichen Grüßen!    nils1983


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von pmaxi
  • 21.05.2014 - 16:30

Vielen Dank für das Tutorial!

Portrait von Luenemann
  • 22.02.2013 - 14:59

Vielen Dank für das Tutorial! Ich suche dann auch mal Teil 2 :)!

Portrait von thielmann
  • 24.01.2013 - 08:59

Hat mir schon mal weitergeholfen, Schönen Dank.

Portrait von MaoMao
  • 15.01.2013 - 20:45

Vielen Dank für den Download.

Portrait von pTown
  • 29.11.2011 - 09:20

an manchen stellen ggf ncoh ein wenig zu kurz...

Portrait von painteri
  • 15.11.2011 - 18:48

Detailliert, aber doch kurze Anleitung, die eine gute Hilfe bietet

Portrait von Laya
  • 12.08.2011 - 09:34

hat mir sehr geholfen. vielen Dank!

Portrait von Kloppy
  • 11.03.2011 - 15:21

Schöner Einstieg in Typo3. Danke! Jetzt bin ich auf den weiteren Schritt gespannt ...

Portrait von blomster68
  • 11.02.2011 - 11:25

Super-Sache! Gut erklärt und einfach nachzuvollziehen.
Vielen Dank - Blomster

Portrait von marco_22chsob
  • 20.01.2011 - 20:06

schade dass ich das tutorial umsonst runtergeladen habe. hätte ich mir sparen können, oder besser lesen dass es nur um slicen geht. bin mal auf das 2. tutorial gespannt das mit tabellen statt ebenen (div) arbeitet ;)

Portrait von TK814
  • 08.01.2011 - 20:03

Das Design selbst anpassen wäre besser, sonst ganz okay

Portrait von trandi
  • 23.12.2010 - 09:04

Danke super Einführung!

Portrait von broedersen
  • 23.11.2010 - 20:33

Schöner Einstieg in Typo3. Danke! Jetzt bin ich auf den weiteren Schritt gespannt ...

Portrait von nora1
  • 17.11.2010 - 19:37

habe es nur überflogen aber werde mich nochmals damit befassen denn es scheind interessant zu sein....

Vielen Dank

Portrait von pcdoktor
  • 03.09.2010 - 12:58

Fand ich richtig gut und auch sehr hilfreich das tut kann man an seine auszubildenden geben
mfg
pcdoktor
http://www.webcompany-kw.de

Portrait von berlinsdoenerfress
Portrait von Hannes1709
  • 30.07.2010 - 23:11

Super !!!!! Danke !!!

Portrait von Salvo
  • 11.06.2010 - 14:20

Wunderbar :) jetzt mache ich mich auf die Suche nach einem Tutorial für die TYPO3-Umsetzung ;)

Portrait von Endless_Breath
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.02.2010 - 09:41

Danke für Dein "Tut". Ich werde mich mal daran versuchen :-)

x
×
×