PSD zu HTML-Programmierung
Die Softwareingenieure bei Adobe, der Entwickler von Photoshop, haben den Prozess für Benutzer für HTML und CSS Ausgabe aus ihrer Grafik-Design-Stammdateien nach dem Prinzip der was Sie See Is What You Get (WYSIWYG, ausgesprochen "Wizzywig") gestrafft. Nutzung Photoshops systemeigenen Ressourcen, können Designer den Brückenschlag zwischen der Wiedergabe im Photoshop eigenen Dateiformat, PSD und das Layout, das vom Webbrowser so nahtlos und effizient wie möglich reproduziert wird.
Vorbereitung
Weil Websites umfassen unterschiedliche Funktionsbereiche und daher unterschiedliche Teile des Codes, die wiederum Bilder und Text enthalten, müssen Sie vorbereiten auf die Bereiche in Ihrer Komposition abgrenzen, die verschiedene Funktionen für den Besucher dienen. Ermittlung der Grenzen, die in Ihrem Design inhärenten erleichtert den Übergang zwischen der visuellen Komposition und Umsetzung der Grafiken in Markupsprache. Zum Beispiel wie das Banner befindet sich in einen bestimmten Bereich Ihres Entwurfs, visualisieren Sie, eine Box, die sie hüten, die keine angrenzenden Felder, z. B. auf die Inhalte der Site enthalten, können sich überlappen die Kiste, die Sie für das Banner benennen enthalten würde. Letztendlich Photoshop erzeugt Markup-Sprache treu zu Ihrer Bezeichnungen und Ihre Möglichkeiten werden im Code wiedergegeben.
Schneiden
Das Slice-Werkzeug dient dazu, Bereiche des Designs in modulare Bilder zu unterteilen, die bereit sind für den HTML- und CSS-Code zu nennen. Ein Slice mit dem Slice-Werkzeug erstellt bestimmt die Parameter, die die resultierenden Bilder und Code übergeben werden, auf. Benennen Ihre Scheiben kann Photoshop nicht nur die entstandenen Bilder mit Dateinamen Ihrer Wahl zu investieren, sondern auch die Bilder entsprechenden entsprechenden HTML ID-Attribute zuweisen. Über die Namen der Segmente beachtet Photoshop auch ihre Position und Abmessungen in der Herstellung von CSS-Parameter.
Für Web und Geräte speichern
Save ist ein Schnittstellen-Ergänzung zu Photoshop-Hauptfenster in dem Sie bereiten die segmentierten Bereiche Ihres Designs und speichern Sie sie als diskrete Bilder für Web und Geräte. Werkzeuge für jedes Slice gelten unabhängig, Ausgabenbilder zur online-Nutzung optimieren und erlaubt Ihnen, die günstigste Gleichgewicht zwischen Datei Größe auf der einen Seite und die Qualität auf der anderen. Es ist möglich, Scheiben für die Ausgabe in einer der drei Formate im Web sichtbar zu benennen: JPG, GIF (mit oder ohne Transparenz) und PNG (mit oder ohne Transparenz). Mit den richtigen Einstellungen Wenn Sie Ihr Photoshop-Design aus dem Bereich speichern für Web und Geräte speichern und geben Sie den "Speichern als Datei" als "HTML und Bilder", erhalten Sie das HTML-Dokument und die zugehörigen Bilder.
Ausgabeeinstellungen
Zugänglich durch das Fenster für Web und Geräte speichern, die Ausgabe-Einstellungen-Dialog-Box können Sie genau das Format der Ausgabe in Vorbereitung für HTML und CSS außerhalb von Photoshop Bearbeitung angeben. Entscheidend ist, beschriftet im HTML Bereich müssen Sie das Kontrollkästchen "Ausgabe XHMTL" für Photoshop in ein HTML-Dokument erstellen, zu bearbeiten. Der Scheiben-Bereich enthält die Option "CSS generieren"; Sie müssen dies für CSS im HTML-Dokument aufgenommen werden aktivieren. Kann es sinnvoll, mit den anderen Einstellungen in der Dialogbox zu experimentieren, aber mit Photoshop set zur Ausgabe von HTML und CSS entsprechen den Parametern, die Sie in Ihre Scheiben gebaut, haben Sie den Großteil Ihrer Ziel zufrieden.
Bearbeitung der HTML und CSS-Ausgabe
Nachdem Sie alle Segmente und das HTML-Dokument mit der richtigen Ausgabeeinstellungen für Web und Geräte speichern mit CSS-Stilen gespeichert haben, können Sie das HTML-Dokument mit der Bearbeitungs-Software Ihrer Wahl öffnen. Wenn Sie keine andere Software zur hand haben, können Sie Windows Notepad Texteditor. Wenn man das HTML-Dokument, das Photoshop produziert, finden Sie vollständig und korrekt formatierte Markup in den Körper als auch CSS-Stile im Kopf, alle gemäß den zuvor angegebenen Parametern. Während Sie möglicherweise Änderungen am Code vornehmen möchten, kann das Dokument erstellte Photoshop als verlässlicher Bezugspunkt dienen, die sicherlich genau in jedem modernen Browser angezeigt.