Buchrezension: Von Photoshop zu HTML

Wenn Sie zum ersten Mal Website-Designs mit Photoshop erstellen, kann es etwas einschüchternd sein, zu lernen, wie man diese .PSD-Dateien in semantische, standardkonforme CSS- und HTML-Dateien umwandelt.

Schließlich gibt es viele großartige Dienste, die Ihre Dateien für Sie aufteilen und kodieren können. Aber es gibt Fälle, in denen Sie diese Designs vielleicht lieber selbst schneiden möchten.

Das ist wo von Jeffrey Way, Herausgeber von Nettuts+, kommt herein.

In diesem 145-seitigen Buch wird der gesamte Prozess der Konvertierung einer .PSD-Datei in ein funktionierendes Website-Design ausführlich anhand von Codebeispielen behandelt.

Eine Modellseite wird verwendet, um Leser Schritt für Schritt anhand eines einzigen Beispiels durch den gesamten Prozess zu führen. Von der grundlegenden Codierung bis zur browserübergreifenden Kompatibilität Ihrer Designs wird alles abgedeckt.

Das Buch geht davon aus, dass Sie über grundlegende Kenntnisse in CSS und HTML sowie über ein bereits in Photoshop erstelltes Design verfügen. Das im Buch verwendete Design ist einfach, aber die zur Erstellung des Designs verwendeten Konzepte können problemlos auf komplexere Designs angewendet werden.

Das Buch beginnt mit einem Abschnitt über die Betrachtung eines Designs, bevor Sie sich mit der Erstellung des HTML-Codes befassen.

Es werden die drei Grundabschnitte herausgegriffen, die die meisten Websites enthalten: eine Kopfzeile, der Hauptinhaltsbereich und eine Fußzeile. Anschließend geht es direkt mit dem Einrichtungsprozess Ihrer grundlegenden HTML-Datei los. Auch hier wird jeder mit HTML-Grundkenntnissen mit diesem Teil keine Probleme haben.

Sobald Ihr grundlegender HTML-Code fertig ist, Von Photoshop bis HTML behandelt, wie Sie Ihre .PSD-Dateien in Segmente aufteilen.

Obwohl beide Methoden zum Aufteilen Ihrer Dateien erwähnt werden, verwendet das Buch eine Kombination aus Zuschneiden, Ausschneiden und Einfügen, um die benötigten Bilder zu erfassen, anstatt das Slice-Werkzeug zu verwenden.

Lesen:  Die Rolle der Inhaltswortzahl bei der Verbesserung von SEO

Tastaturkürzel zur Beschleunigung dieses Vorgangs werden ausführlich behandelt. Das Speichern dieser Bilder für das Web, einschließlich aller Einstellungen, die Sie verwenden sollten und der für welche Bildtypen zu verwendende Bilddateityp, wird ebenso ausführlich besprochen wie CSS-Sprites. Abschließend finden Sie in diesem Abschnitt einige Hinweise zu Anpassungen, die dann anhand der verwendeten Hintergrundbilder an der HTML-Datei vorgenommen werden müssen.

Sobald Ihr HTML und Ihre Bilder fertig sind, ist es an der Zeit, sich mit dem CSS für Ihre Website zu befassen. Das Zurücksetzen des Browsers wird hervorgehoben und ausführlich behandelt, ebenso wie die Wiederherstellung einer standardisierten Standard-CSS-Datei.

Darüber hinaus werden eine Reihe von Tipps und Tricks für die Einrichtung Ihrer CSS-Dateien behandelt, einschließlich der Bezugnahme auf Ihre Photoshop-Datei für Textformatierungswerte und der Verwendung von Fahrners Bildersetzungstechnik für einen Teil der Kopfzeile. Es gibt auch einen großen Abschnitt zum Erstellen von Spalten in Ihrem Design, in dem die häufig verwendeten Konzepte behandelt werden.

Es gibt eine Reihe von CSS-Prinzipien, darunter relative und absolute Positionierung und CSS-Formen, die auf praktische und nutzbare Weise behandelt werden. Für diejenigen, die keine CSS-Experten sind, sind diese Abschnitte besonders informativ, während diejenigen, die es sind, diese Teile vielleicht überspringen möchten. Ein weiterer großartiger Teil des behandelten CSS-Codes ist die Erstellung von Sticky Footern, was für neue CSS-Designer frustrierend sein kann.

Es wird die Codierung zusätzlicher Seiten über unsere Homepage hinaus behandelt, einschließlich der Art und Weise, wie Sie geringfügige Anpassungen am Layout und Inhalt vornehmen und was Sie Ihren CSS-Dateien hinzufügen müssen. Wenn Sie mit diesem Abschnitt fertig sind, verfügen Sie über alle Seitenvorlagen, die für eine voll funktionsfähige Portfolio-Website erforderlich sind.

Lesen:  So erstellen Sie ein Kundenaufnahmeformular für Ihr Webentwicklungsunternehmen

Im letzten regulären Kapitel des Buches geht es darum, wie Sie Ihr Design browserübergreifend kompatibel machen, insbesondere wenn es um ältere Browser wie Internet Explorer 6 und 7 geht. Eines der größten Probleme, das ausführlich behandelt wird, ist die mangelnde Transparenzverarbeitung in Bildern im IE6 , mit einer Vielzahl von Lösungen zur Überwindung.

Ein Bonuskapitel am Ende zeigt Ihnen, wie Sie jQuery-Übergangseffekte erstellen, die in das Site-Design integriert werden. Für alle, die neu bei JavaScript und jQuery sind, ist es ein interessantes Projekt, das einige grundlegende Techniken vermittelt.

Insgesamt ist dieses Buch auf jeden Fall eine Lektüre wert, wenn Sie die Konvertierung Ihrer .PSD-Dateien in HTML ausgelagert haben oder das Entwerfen von Websites in Photoshop ausprobieren wollten.

Mit vollständigen Schritt-für-Schritt-Anleitungen, die problemlos auf viele Projekte angewendet werden können, und unzähligen Beispielcodes. wird Ihnen sicher den Einstieg in die Konvertierung Ihrer eigenen Designs erleichtern. Mit etwas Übung können die behandelten Konzepte auf praktisch jedes Design angewendet werden!

Das Buch enthält außerdem die Quelldateien für die erstellte Site, die Sie nach Belieben in Ihren eigenen Projekten verwenden können.

Laden Sie ein Beispielkapitel herunter

Exklusiv für WDD geschrieben von Cameron Chapman.

Was halten Sie von diesem Buch? Bitte lassen Sie es uns im Kommentarbereich wissen…

Aktuelle Artikel:

Empfohlen