Wire Frame Workshop – making in Photoshop

first Screen shot wireframing photoshop web design

This screen shot is the beginnings of making a wire frame based on the Tim Walker website that I like. Because a home page for a website shouldn’t scroll to see everything it is important to include all the elements in a box the same size as a computer screen, so here I have created a plain white background which is 960 x 760 pixels, 72 dpi, RGB, 8 bit in Photoshop. Then to create the blocks of colour I used the ‘rectangle’ tool to make the gray areas, then I use the ‘move’ tool and in the top bar I make sure that ‘auto select’ and ‘show transform controls’ are both ticked, as above in my screen shot. This means it is easy to resize my box. Then to make a second box I use the ‘move’ tool still and hold down ALT while my mouse is over the original box, this creates a black and white arrow so I can drag a new box out of the first one and drop it any where on my page to then resize it any shape I like. In each boxes layer I can change the colour to anything I like by clicking on the layers picture. To add text I use the ‘text’ tool and in the same way as making new rectangles (& layers for them) I can hover over some text and hold down ALT to make a new text layer. Here is my wire frame.

 Screen shot wire frame web design

I have saved this basic wire frame, but am now going to add a little more information into in to personalise it a little.

Screen shot wire frame web design

Here is a screen shot once I had labeled each area to show the logo, hero image, navigation bar, thumbnails, social media links and footer. This is a very simple wire frame but it is based on a particular website that I think works for its simplicity, I don’t think that photographers websites need to be loaded with information because realistically they are used as a sophisticated gallery more than anything else, with links to contacting the photographer for more information and prices. ALT + g to do ©.

This is another wire frame that has more spaces delegated for areas such as branding, and with a slightly different style of navigation so that the main options are at the top and the gallery’s for images are just below a mini biography.

Screen shot wire frame web design

To summarise this workshop, the main tools I used in Photoshop are: Move (V), Rectangle (U), AT + G to do © sign, Text (T).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s