10 Tips For Creating Website Mockups In Photoshop // Plasticmind Blog

10 Tips For Creating Website Mockups In Photoshop

Here are some things I’ve discovered while creating website mockups in Photoshop. They’re not gospel, just things that you may find helpful:

1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes.

Use Shape Layers

2. Blending options are your friend. Double click a shape layer and you can do all sorts of effects: gradients, shadows, color overlay. They’re much easier to make changes to later on when a client says: “Can I see that gradient in blue?”

Blending Options FTW!

3. Use Crisp antialiasing on your font layers. It’s much closer to browser rendering. Keep in mind that most modern operating systems don’t smooth fonts below 11 or 12 pixels, so for smaller fonts, you’re probably better off setting it to None.

Antialiasing in Photoshop

4. Use web safe fonts on any parts of the site with live text. You might be able to wow the client by using Verlag for the body text of your mockup, but you’ll have a rough time turning that into CSS/XHTML. While logos and other static text can be replaced with images fairly easily, you should use those web safe fonts as often as possible. Search engines index browser text, screen readers can read browser text for visually impaired folks and browser text is much easier to translate. (And if you’ve “just gotta have that font”, take a look at sIFR. Use sparingly.)

5. Use nested layers to duplicate the DOM. If that went over your head, let me rephrase: use your layer folders to recreate the general structure of your site. Put all of the images for the header in a header folder. Inside that, make a folder for the logo, a folder for the main navigation, a folder for search field, etc. Not only does this make moving stuff around easy, it helps things stay organized and think in terms of content. (Keep in mind, Photoshop CS3 only allows layers to be nested 5 deep.)

Nested Layers To Duplicate The DOM

6. Use different layers for multiple versions of the same page. If you do multiple page comps, usually just the main content changes while the header, footer and sidebar often stay the same. So using the folder structure in Photoshop, you could create folders like:

content - front page
content - contact form
content - entry

And then just toggle their visibility when saving multiple drafts.

7. Save the finished product as a JPEG at 100% quality. You can usually get away with 80%, but why skimp when sending a screenshot to a client for approval?

8. Get your width right. If your target screen resolution is 800px, your mockup shouldn’t be any wider than 760px. If your targeting 1024px, your mockup should probably not exceed 960px. A very large number of people these days are using 1024px or higher. Nathan Smith’s 960 Grid System has a good Photoshop template to start with.

9. When it comes to mocking up forms, don’t reinvent the wheel. The Designer’s Toolbox has a huge collection of form elements from different browsers and operating systems you can use, free of charge.

10. Use all of the resources you can find. Here are some I’ve found useful:

ColourLovers: Colors, Palettes and Patterns
Smashing Magazine’s Freebie Icons, Buttons and Templates
Deziner Folio: 131 Beautiful Photoshop Styles
Deziner Folio: 130 Beautiful Photoshop Gradients
Stylegala’s Bullet Madness
Vitaly Friedman’s 25 Best Free Quality Fonts
FamFamFam’s Silk Icons
Feed Icons (in every imaginable format)

Sometimes you just have to see it to get it, so I’ve put together a sample site mockup in PSD format for reference purposes. Hopefully you’ll find it beneficial:

Download Sample PSD Mockup (.zip/1Mb, 7/2/08)

The mockup took me some time to put together. If you do get some use of it, maybe you could drop a few coins in the old hat?

Also, if you found this article useful, check out my article, Tools of the Web Design Trade, Part 1 and Part 2. Part two includes a sample invoice you can download that may come in handy if you’re just learning the ropes.

posted on 2 July 2008
by Jesse

Comments (24)
in the chapter, "Design"
tagged with antialiasing, blending options, fonts, goodies, jpg, layers, photoshop, resources, shape layers

InterAction:

2 July 20081. Chuck:

Clear, direct... Wonderful and soo helpful, especially the links.

Thanks Jesse for a great Tutorial.

3 July 20082. dynante:

Thanks for the tips!

8 July 20083. adelle:

thanks for these great tips! they will come in handy - it's the little things you forget about and this will help!

8 August 20084. Geetika Sachdeva:

Thnaks for the tips for creating a website in photoshop.

11 September 20085. armin:

superthanx, especially for the form elements.

Cheers, Armin

11 September 20086. Robin:

Wait, even JPG at 100% is lossy. If you care about quality you should be sending files in a lossless format. PNG-24 is usually a good fit: it has the same colour fidelity as JPG and doesn’t throw away data.

11 September 20087. Jesse Gardner:

Robin: Fair point, and in fact I use PNG quite a lot. The only hesitation I have with that is that PNG support is spotty on older PC's, so it's probably best just to know your client. If they're a company still running IE6 and XP, JPG might be a safer bet.

11 September 20088. rob christianson:

Wow. I just clicked an interesting article title on my Delicious widget. Only now as I got to the end, do I realize it's someone I twitter with! Small internet!

This is a great article. As one who's designed Web layouts in Photoshop for over 8 years, I can definately relate. Especially to the Layer Effects and layer grouping tips. Everything is spot on - great article.

I learned something new, too - the thing about Designers Toolbox and the form stuff. That's great! Thanks!

See you on Twitter, Jesse!

12 September 20089. jayhan:

I'm very agree with you about point #1. Now, I'm using a lot of shape layers to design stuff too. Good for resizing later ;). Btw, nice site!

12 September 200810. Jesse Gardner:

I'd like to say a sincere thank you to those who have thanked me for this article via Paypal. Your random kindness makes it easier to take time out and write this stuff down!

15 September 200811. BBQ Junkie:

thanks for the great tips.

one thing that i would like to suggest to point #6 is that the use of layer comps helps out tremendously for creating multiple layouts from a single psd.

10 October 200812. anna:

i don't have any idea about making good design for my own project website design

26 March 200913. Lukes Beard:

Great! Clear and to the point!

26 March 200914. Jen Ruhman:

I agree with using Use Crisp antialiasing on your font layers.
Lots of designers miss this.

26 March 200915. Antonio Wells:

Awesome post. Guilty of #9, reinventing the wheel. Mostly because I customize forms elements with CSS as well in designs, but this resource is useful not customizing forms!

2 April 200916. Roosevelt P.:

Hi,
Very useful tips. I tried to digg this post, but there's something not right with the Digg API code you have on.

I also tried to digg your post manually but I received a redirection error (basically the post was redirecting back to digg).

You might want to fix that. I believe your story will be a great fit for the digg front-page :).

2 April 200917. James:

A very helpful article!

9 July 200918. Austin :

Good tips.

for step 6 I would recommend using layer comps. This is nice because you can toggle the visibility of layers and then save that comp all within the same PSD file. Then rather having to dig for the visibility buttons you just click a layer comp item. This way you can keep a whole lot within that one PSD.

The layer comp panel then has a list that says things like.
Main page - Content 1
Main Page - Content 2
...or whatever.
This is nice too because if you had a client looking over your shoulder you could quickly toggle. Also, there is an option from file / automate / scripts that allows you to produce individual files based on those layer comps.

Also, usually you may just want to toggle visibility but you can also toggle position if you tell it to.

28 July 200919. gate valves:

amazing blog. looks really good.

25 August 200920. web service development:

Thanks for the helpful information. Hope to hear more from you.

17 November 200921. Emadz:

Awesome.... excellent job done

16 December 200922. hibiscus jaune:

I am so glad I read your article! Template size for screen resolution has always been an issue for me. I couldn't find any place on the web where someone could give me a clear and succint answer. Ironically, I found your answer while looking for something else.