How to Convert Photoshop Mockup to HTML Web
Photoshop is an excellent tool for creating website mockups. When it's time to deploy your mockup, it would be nice to simply click a button and take your prototype live. However, Photoshop is strictly a graphics program with no HTML capabilities. Fortunately, exporting your mockup into a Web-friendly graphics format like JPEG or GIF, and building a Web page that uses these elements is straightforward. Keep in mind that you must do additional work on the HTML side to create the interactive components like links, menus and pop-ups. The possibilities for interactivity are endless, so brush up on your HTML and CSS.
- Difficulty:
- Moderate
Instructions
-
Basics
-
1
Open your mockup in Photoshop and export it to a Web-friendly image format. Choose "Save for Web and Devices" from the "File" menu. In the dialog box select a file format such as JPEG, GIF or PNG and choose an image quality.
-
2
Click "Save" and name your file (for example, myMockup.jpg)
-
3
Open your HTML editor and create a new HTML file. HTML editors like Dreamweaver will create the skeleton Web page for you.
-
4
Add an image tag inside the <body> element of your Web page. The image tag will look something like: <img src="myMockup.jpg" />
-
5
Save your HTML file, then load it into any Web browser.
-
1
Tips & Warnings
If you received Photoshop as part of the Adobe Creative Suite (CS2 or later), Dreamweaver is included for creating HTML pages.
Place interface elements like buttons in their own layers and export them separately.
You can create animations in Photoshop using the Animation panel. Be sure to export them as animated GIFs.
Large graphics files can slow the loading of your Web page. To improve the speed in which your Web page loads, select the lowest image quality you can without degrading the image.
