Buchbesprechung: Von Photoshop zu HTML
Wenn Sie mit der Erstellung von Website-Designs mit Photoshop noch nicht vertraut sind, kann es etwas einschüchternd sein, diese .PSD-Dateien in semantische, standardkonforme CSS- und HTML-Dateien umzuwandeln.
Schließlich gibt es viele großartige Dienste, die Ihre Dateien für Sie aufteilen und codieren können. Aber es gibt Fälle, in denen Sie es vorziehen, diese Entwürfe selbst zu schneiden.
Das ist wo Von Photoshop zu HTML: Wie Sie Ihre Designs wie ein Pro schneiden von Jeffrey Way, Redakteur 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 mit Codebeispielen behandelt.
Auf einer Modellwebsite werden die Leser Schritt für Schritt durch den gesamten Prozess mit einem einzigen Beispiel geführt. Von der grundlegenden Codierung bis hin zur browserübergreifenden Kompatibilität Ihrer Designs wird alles abgedeckt.
Täglich hört man - wenn man genau zuhört - überall auf der Welt Schreie von Codierern, die erfolglos versuchen, ein Design in Position zu bringen. Es geht nicht nur darum, die Sprache zu lernen. Auswendiglernen ist eine leichte Aufgabe. Die Punkte, die zum Schreien führen, treten auf, wenn Sie Ihre Website in zehn verschiedenen Browsern anzeigen, die Ihre Website auf unterschiedlichen Konsistenzstufen darstellen.
Das Buch setzt voraus, dass Sie Grundkenntnisse in CSS und HTML sowie ein bereits in Photoshop erstelltes Design besitzen. Das in dem Buch verwendete Design ist einfach, aber die Konzepte, die zum Erstellen des Designs verwendet werden, können leicht auf komplexere Designs angewendet werden.
Das Buch beginnt mit einem Abschnitt darüber, wie Sie ein Design betrachten können, bevor Sie in den Prozess der Erstellung des HTML-Codes eintauchen.
Es mag zwar naheliegend sein, sofort mit der Gestaltung unserer Website zu beginnen, aber das könnte nicht weiter von der Wahrheit entfernt sein. Stattdessen müssen wir zuerst unsere Basis oder den Mark-Up aufbauen, und erst wenn es abgeschlossen ist, können wir mit den Visuals fortfahren.
Wählen Sie die drei grundlegenden Abschnitte aus, die die meisten Websites enthalten: Eine Kopfzeile, der Hauptinhaltsbereich und eine Fußzeile werden abgedeckt, und dann springt das Buch direkt in den Prozess der Einrichtung Ihrer grundlegenden HTML-Datei. Auch hier wird jeder, der über grundlegende HTML-Kenntnisse verfügt, keine Probleme mit diesem Teil haben.
Sobald Ihr einfacher HTML-Code vollständig ist, wird in " Von Photoshop zu HTML" beschrieben, wie Sie Ihre .PSD-Dateien aufteilen.
Nehmen Sie sich einen Moment Zeit und schauen Sie sich das Design in Photoshop an. Versuchen Sie, jedes Bild, das benötigt wird, zu lokalisieren. Denken Sie daran, dass Features mit CSS neu erstellt werden können. Sei also kreativ.
Während beide Methoden zum Aufteilen Ihrer Dateien erwähnt werden, verwendet das Buch eine Kombination aus Zuschneiden und Ausschneiden und Einfügen, um die Bilder zu erhalten, die Sie benötigen, anstatt das Schnittwerkzeug zu verwenden.
Beide Methoden sind vollkommen gültig. Ich empfehle, dass Sie beides versuchen und wählen, welches sich als das schnellste erweist ... für Sie.
Tastaturkürzel zur Beschleunigung dieses Prozesses werden ausführlich behandelt. Das Speichern dieser Bilder für das Web, einschließlich aller Einstellungen, die Sie verwenden sollten, und welcher Bilddateityp für welche Arten von Bildern verwendet wird, wird ebenfalls ausführlich diskutiert, ebenso wie CSS-Sprites. Zu guter Letzt finden Sie in diesem Abschnitt einige Hinweise zu Anpassungen, die dann basierend auf den verwendeten Hintergrundbildern an der HTML-Datei vorgenommen werden müssen.
Sobald Ihr HTML und Ihre Bilder fertig sind, ist es an der Zeit, in das CSS für Ihre Website einzutauchen. Browser-Resets werden gestresst und ausführlich behandelt sowie das Erstellen einer standardisierten Standard-CSS-Datei.
Jeder Browser verwendet ein wenig "Standard-CSS", um Ihr Markup automatisch zu formatieren. Auf den ersten Blick könnte man meinen, dass dies sehr hilfreich ist ... Wenn jeder Browser sie identisch implementiert, wäre das kein Problem. Leider ist dies nicht der Fall.
Es gibt eine Reihe von CSS-Prinzipien, einschließlich relativer vs. absoluter Positionierung und CSS-Formen, die auf praktische und nützliche Weise behandelt werden. Für diejenigen, die keine Experten in CSS sind, werden diese Abschnitte besonders informativ sein, während diejenigen, die es sind, diese Teile überspringen möchten. Ein weiterer großer Teil des CSS-Codes ist die Erstellung von Sticky-Footern, was für neue CSS-Designer frustrierend sein kann.
Die Kodierung zusätzlicher Seiten über unsere Homepage hinaus wird behandelt, einschließlich geringfügiger Anpassungen des Layouts und des Inhalts und was Sie Ihren CSS-Dateien hinzufügen müssen. Wenn Sie mit diesem Abschnitt fertig sind, verfügen Sie über alle erforderlichen Seitenvorlagen für eine voll funktionsfähige Portfolio-Website.
Das letzte reguläre Kapitel in diesem Buch behandelt, wie Sie Ihr Design browserübergreifend kompatibel machen können, insbesondere wenn es sich um ältere Browser wie Internet Explorer 6 und 7 handelt. Eines der größten Probleme ist die fehlende Transparenz in Bildern in IE6 , mit einer Vielzahl von Lösungen, um es zu überwinden.
Wenn Sie Ihre Website zum ersten Mal in Internet Explorer 7 und darunter anzeigen, werden Sie erschaudern. Sie können Glück haben, aber meistens finden Sie zahlreiche Probleme, die behoben werden müssen.
Ein Bonuskapitel am Ende zeigt Ihnen, wie Sie jQuery-Übergangseffekte erstellen, die in das Site-Design einfließen. Für alle, die neu in JavaScript und jQuery sind, ist es ein interessantes Projekt, das einige grundlegende Techniken lehrt.
Alles in allem, wenn Sie die Konvertierung Ihrer .PSD-Dateien in HTML ausgelagert haben oder wenn Sie in Photoshop Photoshop-Websites entwerfen wollten, ist dieses Buch definitiv eine Lektüre wert.
Mit vollständigen, Schritt-für-Schritt-Anweisungen, die leicht auf viele Projekte und Tonnen von Beispielcode angewendet werden können, Von Photoshop zu HTML ist sicher, dass Sie damit beginnen, Ihre eigenen Designs zu konvertieren. Mit ein wenig Übung können die abgedeckten Konzepte auf praktisch jedem Design verwendet werden!
Das Buch enthält auch die Quelldateien für die erstellte Website, die Sie in Ihren eigenen Projekten verwenden können.
Geschrieben exklusiv für WDD von Cameron Chapman .
Was denkst du über dieses Buch? Bitte lass es uns im Kommentarbereich wissen ...