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.
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.
Hit ok and you should be looking at something like this.
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.
Now zoom in so you can align the images by matching the pixels.
Before
After
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.
Open Image -> Canvas size and copy the following settings.
Merge visible layers.
Select the marquee tool and select around the wireframe like so.
Now select Image – Crop
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.
Repeat this process until you have guides that run along all the horizontal and vertical lines of your prototype image like so.
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.
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.
