Photoshop ist ein ausgezeichnetes Werkzeug für die Erstellung von Website Mockups . Wenn es Zeit, Ihre Mockup implementieren ist , wäre es schön, klicken Sie einfach auf einen Knopf, und nehmen Sie Ihre Prototypen leben. Allerdings ist Photoshop eine reine Grafik-Programm ohne HTML- Fähigkeiten. Glücklicherweise Export Ihrer Mockup in ein Web -friendly Grafikformat wie JPEG oder GIF, und den Aufbau einer Web -Seite, die diese Elemente verwendet, ist einfach. Denken Sie daran , dass Sie zusätzliche Arbeit auf der HTML- Seite zu tun , um die interaktiven Komponenten wie Links , Menüs und Pop-ups zu erstellen. Die Möglichkeiten für Interaktivität sind endlos, so Pinsel auf Ihrem HTML und CSS . Things You
Photoshop (alle Versionen)
HTML-Editor
Browser
brauchen anzeigen Weitere Anweisungen
Basics
1
Öffnen Sie Ihre Mockup in Photoshop und exportieren, um eine Web -friendly Bildformat. Wählen Sie " Für Web und Geräte speichern " aus dem Menü "Datei" . Im Dialogfenster wählen Sie ein Dateiformat wie JPEG, GIF oder PNG und wählen Sie eine Bildqualität .
2
Klicken Sie auf "Speichern" und benennen Sie die Datei (z. B. myMockup.jpg )
3
Öffnen Sie Ihren HTML-Editor und erstellen Sie eine neue HTML-Datei. HTML -Editoren wie Dreamweaver wird das Skelett Web -Seite für Sie zu erstellen.
4
Fügen Sie ein Bild -Tag innerhalb des
Element Ihrer Webseite. Das Bild -Tag wird in etwa so aussehen :
5
Speichern Sie Ihre HTML -Datei, dann laden Sie sie in jedem Web-Browser
< br . >
