Web design process part 2: From HTML prototype to photoshop

May 10th, 2010 - Posted in Tutorial Tags: , , , ,

From HTML prototype to photoshop

In this post I will continue with my design process tutuorial, in the last post I talked about my design process, particularly prototyping and how I like to do it, taking a client from the first meeting to the working prototype stage. Now I will take the HTML prototype into photoshop and get it ready to start designing with it.
Grab some screens

To get the HTML prototype into photoshop, we will need to take some screen grabs of the HTML prototype and load them into photoshop. First make sure you have the prototype loaded in a web browser, I’m using safari.

If you are using a Mac the open Grab and hit capture – window (Shift – Cmd – W) and follow the onscreen instructions. You will have to take to grabs, top and bottom, once you have done that save them and open photoshop.

(If your using a PC then you can use the print screen button and paste them direct into photoshop, don’t worry about the dimensions when you open a new document as photoshop will automatically create a new document the size of your clipboard contents).

Step 1.

Opened your top screen shot in Photoshop you should be looking at something like this.

Step1 Top Screen Grab

We need to increase the height of the canvas to make room to paste in the bottom screen grab so open Image – Canvas size and copy the following settings.

Increase canvas size

Hit ok and you should be looking at something like this.

Photoshop canvas extended

Now open up the bottom screen grab and paste it in as a new layer. Set the layer opacity to 75% so you can see the layer below.

Photoshop layers

Now zoom in so you can align the images by matching the pixels.

Before
Align layers
After

Align layers

Now we need to trim the image, set the top layer Opacity back to 100% and select the marquee tool from the tool bar. Select the browsers header in my case Safari and hit delete.

Aligning the two layers

Open Image -> Canvas size and copy the following settings.

Set canvas width

Merge visible layers.

Merge visible layers

Select the marquee tool and select around the wireframe like so.

Select around the wireframe

Now select Image – Crop

Final wireframe

Step 2: Adding the guides.

Now its time to add the guides, turn on your rulers (View – Rulers) now take your mouse and click on the horizontal ruler and drag it down to the top of the navigation.

Add the guides

Repeat this process until you have guides that run along all the horizontal and vertical lines of your prototype image like so.

Horizontal and vertical guide lines

Step 3: Setup

Before we move to the design stage lets organise our layers. My personal preference is to organise them into the base elements of a website page. Background, wrapper, footer, content, header and navigation.

Organise the layers

We are now ready to start designing, as you can see you have your thought out and tested prototype in photoshop with guides setup so you can snap elements into place accurately.

Spread on Twitter

About the Author

Steven Wilson

Steven Wilson

Welcome to D79, my name is Steven Wilson and I am a graphic and website designer. Currently I work part time as a graphic designer for Aggregate Industries, Freelance under the name dominion79 and run this website. The mandate of D79 is to pass on some of the techniques, tips and tricks I learnt over the years. You can follow me on twitter.

Leave a Reply