My first blog, showing the process of learning to research, design and build a website.

Wire Frame Workshop – making in Photoshop

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.

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

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.