Website Design Prototype Using Photoshop

How to create a Live Prototype using Photoshop

When it comes to creating a mockup design of your website design to present back to your potential client, creating a life-like prototype will certainly give you the advantage over your competitors who could just email across a flat jpeg of their design.

A prototype is something that can be made quickly and easily, and can incorporate impressive interactive features like rollovers and flash regions.

The Benefit of Using Photoshop

Last month Stephen posted an excellent blog post tutorial on how to use Photoshop, Fireworks and Dreamweaver to create a live prototype. The method I will be using today simply bypasses fireworks in order to get the same result.

Producing a Live Prototype in Photoshop has its benefits. Firstly, if you don’t have a copy of fireworks, or you are unfamiliar with the program then this will provide a viable alternative.

Secondly, if you do have to make minor edits further down the line, you only have to resave images and upload, not create a complete new prototype.

1. Create your Design

Firstly you will require your finished design produced in Photoshop.

Here is my example website design

2. Create Slices

Create the slices using the slice tool, and ensure that you accurately slice the regions for rollovers and flash.

Slice your design using photoshop's slice tool

3. Save for Web

a) Click on “save for web & Devices” from the file menu option

b) Keep the quality quite high of the jpegs as you are looking to impress the client.

High quality images will impress your client

c) Make sure you select the HTML and Images from the format option dropdown

d) Save the file as index.html this will mean that you can easily view the document on the web when you upload your design to a directory.

Nb. Photoshop will automatically create an images folder for both your source rollover images to sit within.

Save your document using the HTML & Images Option

4. Create Rollovers Images

One of the downsides of using Photoshop is that you will have to manually create your rollovers using Dreamweaver, but in my opinion, the time saved further down the line more than balances itself out.

On the Photoshop document, adjust your design to include the rollover state, and follow the above steps a) and b).

c) Ensure than you select Images Only from the formation option dropdown, as we only require one HTML document.

d) Save the files as rolls.jpg.

There is no need to create an HTML file for you rollovers, as we will be linking the images into the one we've already generated

5. Editing Using Dreamweaver

Open up the generated HTML document in Dreamweaver in order to edit your prototype document.

a)    Rename the page title to a more presentable output

b)   Centre the document if required by replacing the auto-generated comment code with a div defined with aligment set to center

c)    Use the following code to add a repeating 1px background image to your prototype and to remove any default padding or margin from your body tag.

6. Add the rollovers

As I briefly mentioned earlier, the only downside of using this technique is the fact that you have to manually create your rollovers using Dreamweaver. But the reality is that once you get used to using the built in rollover feature, this can be quite a speedy process.

a)    Select the image you wish to replace in your design view

Just click on your chosen image from design view

b)   Delete by clicking backspace

c)    Replace with a rollover by selecting insert > image options > image rollover, and fill out the dialogue box accordingly.

Select both the orignal and corresponding image

Once you have add or your rollovers use the same process to add in your flash regions, or if you’re feeling a little bit fruity, why not try a little JQuery.

7. Replacing Your Images

Now for the time-saving bit. Should your client require changes further down the line, you can make the required adjustments to the photoshop files and replace your images in seconds. Giving you the wow factor of the prototype without costing you valuable time.

Making adjustments to your prototype now only takes a few seconds