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.

    Basics

  1. Step 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. Step 2

    Click “Save” and name your file (for example, myMockup.jpg)

  3. Step 3

    Open your HTML editor and create a new HTML file. HTML editors like Dreamweaver will create the skeleton Web page for you.

  4. Step 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. Step 5

    Save your HTML file, then load it into any Web browser.

« «