It is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.
Here is a course I created where I show you exactly what I do to design a website visual for a client in Photoshop. In-depth Photoshop training here: Designing A Website in Photoshop and Illustrator
Getting started
Create a large Photoshop document, at least 1200 pixels wide by 900 pixels deep (this can be increased later with Canvas Size), RGB at 72 dpi.
I then usually center the design within the 1200 pixels wide canvas by drawing a couple of guides. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can’t see the rulers go Cmd(Mac)/Ctrl(PC)-R.
You can do this by eye, although I usually want the width of the website to be exactly 1024 pixels. Zoom in [Cmd(Mac)/Ctrl(PC)-plus] for greater accuracy. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.
The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document’s window.
Use vectors, Shapes and Smart Objects
When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.
Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo’s size multiple times without worrying about it’s quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.
Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!
Name Layers and Layer Groups to keep everything organized
A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.
So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”
One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven’t found a way around this yet!
Layer styles for text shadow
We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.
For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.
For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).
Grab your color with the Eyedropper
To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.
You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.
Presenting a web page design to a client
You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.
It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.
Here is the HTML I use to show a large JPG centered in a webpage:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home page visual number 1</title>
</head><body style=”padding:0; margin:0; background:#fff”>
<div style=”margin: 0 auto; padding:0; height:1900px; text-align:center;”>
<img src=”home-1.jpg”/></div></body>
</html>
You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.
Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.
Here is a course I created where I show you exactly what I do to design a website visual for a client in Photoshop.
In-depth training: Designing A Website in Photoshop and Illustrator
What about you?
What little tricks do you employ when creating the visual look of a website in Photoshop? Or do you use Fireworks or some other tool? Please put your excellent suggestions plus any queries in the comments section down below.
I designed 5 web templates for a client recently. Each template had to have 5 colour variations. To save time, I made extensive use of Adjustment Layers – they’re a real time-saver!
Ooh, that’s a good one, using Adjustment Layers for the Hue/Saturation/Brightness – I use that too, awesome! (And thanks for RTs recently, Andrew!)
The challenge we encounter in this part of the world (Nigeria) is that the client will like to see not only the your design, but also it’s functionality of the site (i.e. moving from one page to the other, etc.) before authorising you to go ahead with it. Therefore, showing him a Photoshop format alone (since Photoshop cannot create links) may not help in striking a deal. What do I do in this case?
Eze, I usually get round this by showing hover states for buttons and also showing drop-down menus where they exist in the Photoshop mock-up. If the client insists I can show multiple pages. But, obviously, there is a limit to how much you can show with Photoshop.
Usually, the client will agree with me when to finish the visualisation and to start developing. But it’s always good to design on as many design issues as possible before coding starts. Thanks for your comment.
In the past, I’ve done the layout and design work in Photoshop, then exported the work to Fireworks to add a touch of functionality. After that I just export it from Fireworks as html files and upload it to show it off. I don’t know if that’d help but its what has worked for me.
Really good to hear that, Shane, I’m really bad with Fireworks and I don’t know what’s possible with it. I should look into it.
Hey Rob,
I find your article very helpful to me, because I’m not using Photoshop yet, only Fireworks, when I should eventually use Illustrator 🙂
I will remember to visit again this article if I ever need to create a particularily well structured graphic design, especially if I am asked to provide Photoshop PSDs format instead of my traditional Fireworks PNGs, plus working a bit more with Illustrator should be cool too.
Thanks for all these useful tips. Have a great day!
Thank you, Karim, I think Fireworks is great for doing this but Illustrator is a ‘must’ if you want to really play around with vectors – especially when doing logos. I’m glad it was some help. Have a good day, yourself!
Wow, I really know very little about photoshop and let’s fact, I never use it to design a web page, so, you post helped me very much about how to do it. May I will try it to create the first web page with PTS. Thanks.
Thanks, Trung, it’s great to see how it’ll look before you start coding, etc. It’s faster to mock the page up in PS and move things around until you decide on a framework of a design and then move on to the development stage. Glad it helped.
Hi Rob again great article!
My only thought here would be when you save for web and devices to Jpeg to keep the file size down you have to really lower the resolution or let the client know to be patient for it to load.
I have always built it in dreamweaver as I go along and give the client a link to view it so far which is probably bad practice i know.
That way the client can get a better feel for what he/she will eventually get. I feel I have been quite lucky so far as most of the clients have been happy with what they have seen and any changes needed seem to not take to much extra time.
I also feel this gives you a bit more insight into helping with the design as you see it as it should be.
Good point, I always save for Web & Devices a JPG at 80% to get the quality in these visuals – which is a huge size and once I had to explain to a client that the web page won’t load as slowly – so client communication, again, is key!
Sometimes just building the website is enough – it depends on the client. My higher-end (and higher paying) clients usually get a mock-up of the home page. Not necessarily bad what you do, Del, I don’t think. 🙂
I don’t know who you wrote this for but you helped a bhroter out.
It was written for those that find it useful, Mina!
Hi Rob, you might want to check out the 960 Grid system at http://960.gs which is really useful when building websites. Cheers!
Thanks a lot for that Mark, that’s a great resource, loads of free stuff to download. I’m looking at it now!
Dear rob , thanksfor your insite i didn’t think of using photo shop for that when doing web pages. I’m new to this web design work, in school for web design, and have been a photographer for some years now again thanks for the help.
Thank you, Robert, Photoshop is quite good for web design once you start using it frequently.
Thanks for sharing Rob. I’m fascinated how others work. I don’t do any real design for proper clients, but for some reason I find Fireworks more intuitive.
Real designers might be a bit sniffy about this , but I have often started with a template or WordPress themes that has 80% of the functionality I want and then have restyled in the browser. If it means a lot of repositioning I then screenshot it and play around with it in Firework and then I’m back to the browser again. I end up with a unique design so effectively the original “borrowed” design acts as my wire-frame. It’s a bit long winded if the original theme has lots more div’s than was really needed.
Hey, David, I’ve heard from many people that Fireworks is actually better for designing for web than Photoshop. I just use Photoshop because I’m so used to it.
Interesting too to hear how you work. It makes real sense to take elements from pre-existing templates – it cuts down the development time. And taking screenshots and then moving bits around and adding bits is something else I do as well.
Artcove.co.uk looks like an excellent shopping cart site – what CMS did you use for that?
Many thanks Rob. It’s WordPress running a cart theme bought from templatic.com. Probably not my finest idea as I had to mess around removing unneeded php to speed it up, but I like WordPress.
I’ve used themeforest.net templates before, but I’m included to build from scratch when it come the html sites now. I admire those who can Photoshop a design and then build it. I’ve tried, but I think I must have some sort of commitment phobia!
I love WordPress as well, but finding the right cart system to go with it is a real challenge. There are loads of great templates out there for some clients a PS mock-up just isn’t necessary!
Why viewers still use to read news papers when in this technological world all is available on web?
I have no idea.
Really useful article, Rob (as have been your Genesis tutorials for a novice like me). I know some people are shying away from PSD layouts, but I still use them, mainly because it’s a great way for me to know when a site is finished, design-wise. Otherwise, I just keep tweaking and tweaking for hours.
Hi Dom. I’m glad you liked this article and the ones about Genesis. Always good to agree with the client on how the site will look before you start the development work otherwise, as you say, you could spend hours and hours tweaking. 🙂