Photoshop and your Website Mock-up

July 22, 2012 2 min read

Photoshop is a popular tool for graphic designers, photographers, web designers, and possibly even your parents if they want to get rid of all the “red eye” in their latest vacation photos. It’s the kind of software program which is so comprehensive most users will only scrape the surface of the tools available to them.

That being said, if you are beginning the process of designing a mock-up for a new website, Photoshop might be your new best friend. Even a beginner will be able to get to know a few basic commands in Photoshop, and use these to create a look-alike of the website they hope to have created. A good mockup will help give your website direction, an image, and will allow you to plan out exactly what needs to be included on the site to fully explain your services, products, or brand for your customers, clients, or readers. Here are some of the basic tools Photoshop offers which you can use to design a website mockup:

Ruler and Grid: The rulers and grids are the best tool for lining up every part of your website. It will just take a little math to figure out the exact dimensions of all the images, text boxes, and white space you will be using on each page of your site. One popular design rule is to split your page into thirds and make sure all parts of your site fit within these parameters (either into one third, or two thirds, or all of it). With rulers and grids, it is a breeze to follow the rule of thirds.

Fonts: Photoshop comes standard with many different font options, but it is important to note that not all fonts look good online. Some of the more popular standard fonts for online use include Arial, Georgia, Verdana, and Courier. In Photoshop, you will be able to play around with these different looks until you find which fits the style of your business or brand the best.

Boxes: Whether you are designating white space or filling up an area with text, it is always best to designate a box and a layer specifically for each segment of your webpage. Even if you choose for the box to have an invisible outline, still set a space for every segment you want on your site to ensure it all fits nicely.

Once you have a mockup of your website completed in Photoshop, you’ve only just gotten started. The next step would be transfer your design into Dreamweaver, code it all up, and get it online. However, this is certainly not a process for the faint of heart – or really anyone without a good amount of programming or web design experience. For everyone else, consider hiring a web design firm to polish your mockup and get it web ready.


Leave a comment

Comments will be approved before showing up.