Did you know you can use Adobe Photoshop to create a mockup of your website design? In this post, we’ll show you how to take that excellent idea you have in your head and put it into Photoshop to begin laying it out.
First off, you need to have a general idea of what you want your website to look like. But where do you find inspiration and ideas? Andy Anderson, author of our Photoshop for the Web training course, advises you to learn from experience (either yours or someone else’s), to see what works and what doesn’t, and to get out there and check on what other people are doing to see what you like and don’t like about their sites, then apply it to your own site.
Most websites are in a 4×3 format, so Andy suggests grabbing a piece of graph paper and drawing a 4×3 ratio as a rectangle on the page and then starting to jot down your creative ideas. Once you’ve got a basic plan for your site, you can begin to lay it out in Photoshop. Start by sizing the document you’re working with to 1024×768, which is the average size of a browser (this will be a size preset in Photoshop).
The first thing Andy likes to do is create a directory by putting down the sizing he’s going to use. He likes to include this because he might not be the only one who’s going to be working on the site – he might have someone else working with him who will need to know this information also.
Once the numbers are planned out, you then move on to creating the main viewing area. While creating your wireframe, make sure you name your layers accordingly. For the main viewing area, you need to take into consideration things like the navigation bar at the top of the browser, the side areas in the browser, etc.
Next, create the holding place for your images. This is why it is important to decide ahead of time on the sizes of your images. Lastly, you can go ahead and add the footer and your logo.
You can also add guidelines to the page by going to View>New Guide. You can choose a vertical or horizontal guide and put in the exact position you want. It will place the guide directly for you. A key thing to remember about this wireframe is that it’s not set in stone, it’s just a mockup that can be altered at any time.
This is what your final site model will look like:
Watch Andy demonstrate the entire process in this training video from his Photoshop for the Web training course: