How to Convert a Photoshop Prototype to Web HTML
Photoshop is a good tool for designing the image elements of your website, including rollover buttons, drop-down menus and graphics that link to other web pages. However, Photoshop itself is not a web-page creation tool. Fortunately, it is relatively easy to export your prototype into a web-friendly graphics format, and build an HTML web page that uses these elements. Keep in mind that interactive components such as hypertext links, rollover buttons and drop-down menus require additional work. Moving beyond the basics is highly dependent on your application, and may require specialized programming knowledge.
- Difficulty:
- Moderate
Instructions
-
Basic Web Page
-
1
Open your prototype in Photoshop and export to a web-supported image format. Choose "Save for Web and Devices" from the File menu. In the dialog box select either JPEG, GIF or PNG. Select an image quality, keeping in mind that higher quality increases file size.
-
2
"Save" your file to disk, giving it a name such as "myPrototype.jpg."
-
3
Open your HTML editor and create a new web page. Most HTML editors will create a skeleton web page for you.
-
4
Add an image element directly below the opening <body> tag. The image element will take the form: <img src="myPrototype.jpg" />.
-
5
Save your web page and load into any browser.
Beyond Basics
-
1
Improve your layout by using either tables or Cascading Style Sheets (CSS) to position your layout. The preferred method is to take the individual layers, or slices, created in Photoshop and position them using CSS. Done properly, this creates a "liquid" layout that repositions the layout as the browser is resized.
-
2
Improve speed by using repeating background elements. In Photoshop, create a 5-pixel-wide slice of your background and save it to file. In HTML, you can repeat the element using the background attribute of your <body>, <table> or CSS style. Syntax for each case varies, so check your HTML guide. Be sure to set the background attribute to "repeat."
-
3
Use image maps to create simple links from an image to another web page. According to web developer Gregory Hodges, create a <map> element within a <div> tag, then define the <area> for your image. The area will contain the coordinates of your image to link and reference the image file to load.
-
4
Use JavaScript to create rollover actions and navigational menus such as drop-downs. While this can be a more challenging task, professional web editors such as Dreamweaver and GoLive support the creation of rollover actions and navigation, so you don't have to write the JavaScript by hand.
-
5
Add interactive media elements such as Flash animations, Java applets and Shockwave files to enhance the user experience. Use the <object> element to place and position these in your web page. Again, a professional web tool will make the job much easier.
-
1
Tips & Warnings
Place elements such as rollover buttons and menus in their own layers (or slices). Be sure to export them separately as separate files.
Export animations created in Photoshop to the GIF file format only. Gif is the only format that supports image animation.
Use an HTML editor if possible. These specialized editors offer specific support for creating web pages and will make the process easier. They also make it possible to imlement more advanced features that would otherwise require programming.
Select medium image quality when exporting your graphics from Photoshop. Be sure to balance the image quality so you don't degrade the image.
High-quality images create larger files and can significantly slow the end-user experience.
