Produced by KelbyOne

Website Design Tips Using Photoshop CS4

4.29K 29

How to make your next website design pop!

Web design is one of those areas that, when done right, you just know it. The finished site looks refined and well done—it pops! There are a number of ways that you can achieve this by polishing off your design in Photoshop. Here we look at some of the ways to do just that.

1 [LAY OUT THE FUNDAMENTALS]
Before you go about making your website pop, you must first have your fundamentals in place. By this stage you should have done the research, laid out your website appropriately, and done most of the basic design work—but you haven’t applied the polish. In the following example, we’re going to look at some techniques used for a chocolate delivery website; however, these same techniques can be applied to any website.

Photoshop for Photographers Tutorial Image

2 [CHECK ALIGNMENT AND SPACING]
Alignment and spacing in website design creates order, organizes the page, and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid is from www.960.gs). Notice how the logo and all of the text is left aligned? Also take note of the even spacing around the boxes and text. Use guides in Photoshop to ensure all of your elements are aligned. To add a guide to your document, drag it from one of your rulers (press Command-R [PC: Ctrl-R] to turn rulers on).

Photoshop for Photographers Tutorial Image

3 [APPLY ANTI-ALIASING TO TEXT]
Something that’s often overlooked when designing for the Web is anti-aliasing text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of the anti-aliasing options in your Options Bar (or Character panel). You can choose between None, Sharp, Crisp, Strong, and Smooth. Experiment to see what works best, as different fonts and sizes will yield different results; however, the Sharp setting usually prevails in most cases.

Photoshop for Photographers Tutorial Image

4 [ADD A 1-PIXEL STROKE]
Something that really makes a difference in making a website pop is the use of a 1-pixel stroke inside borders and lines. Take a look at the zoomed-in screenshot above—see the inner purple line that runs alongside the inside of the box on the right? These stroked borders really add that extra crispness to the design as it provides extra contrast to the surrounding elements and gives the design more depth. You can add two strokes by selecting the object, choosing Edit>Stroke, and applying the 1-pixel stroke to the Inside. With your selection still in place, go back to Edit>Stroke and apply your second stroke to the Outside.

Photoshop for Photographers Tutorial Image

5 [ADD SUBTLE GRADIENT EFFECTS]
Gradients are popping up everywhere in Web design and for a reason—they add depth and real aesthetics to the design. Unlike print design where gradients seem flat, onscreen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen, so to speak. Use Gradient Overlay in the Layer Style dialog to create these nice subtle (emphasis on subtle) effects.

Photoshop for Photographers Tutorial Image

6 [ADD SUBTLE DROP SHADOWS]
Use subtle drop shadows in conjunction with the gradients and stroked borders. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other and pop out at you. Notice in the screenshot above that the logo, text, and boxes all have subtle drop shadows applied to them, which break them away from the other elements. You can use the Drop Shadow layer style to achieve these effects—but make sure you use them in moderation.

Photoshop for Photographers Tutorial Image

7 [HIERARCHY & CALL TO ACTION]
When someone first visits your website, what is the first thing they’re going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project; however, now is a good time to go back and reflect on these decisions. Can you adjust the colors, size, or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the “Pick a Basket” button, which is placed conveniently after the main opening slogan.

Photoshop for Photographers Tutorial Image

8 [COLOR CORRECTION & SHARPENING]
In Web design, photos, icons, and images are usually quite prominent, so you should ensure that they’re of the highest quality. Check the color balance, sharpness, and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Levels, Unsharp Mask, and Curves in Photoshop. A quick search at www.layersmagazine.com will yield results on how to do this—these functions go beyond the scope of this tutorial.

Photoshop for Photographers Tutorial Image

Less Is More

In Web design, the old saying goes, “less is more.” After completing your website design, have a break and come back to it. Then ask yourself these questions to see how you can further improve your site:

1. Is there anything that I can remove, fix, replace, move, change or edit?
2. Does one element take up too much space or draw too much attention?
3. Are there too many colors?
4. Is the site balanced?
5. Is there consistency?
6. Can I make use of more white space?

When you set out to design your next website, you can also ask yourself these questions:

1. Do I have the basic fundamentals in place?
2. Can I improve my alignment or spacing?
3. Have I used the appropriate anti-aliasing?
4. Can I sharpen my images or text with strokes or borders?
5. Can I give more depth to the page by using gradients or drop shadows?
6. Is there a clear hierarchy with a call to action?
7. Are all of the images color corrected, balanced, and sharpened?
8. And last of all, ask yourself—does the website pop?

Before

Photoshop for Photographers Tutorial Image

After

Photoshop for Photographers Tutorial Image


ALL IMAGES BY JACOB CASS UNLESS OTHERWISE NOTED

29 Comments

  • Sonia says:

    This is really nice – I wish the images could be clicked on to make them larger.

  • Valcho says:

    Cool! Thanks for sharing:)

  • Stefan Drakulich says:

    I think this is an amazing article! Thank you so much!

  • Mark Casebeer says:

    This a nice article about Web Design. I think as a designer we all get caught up in our designs and sometimes loose site on the overall content and layout. I think what is really being conveyed here is step back and take a good hard look at your site, I’m sure you’ll always find something that needs a little tweaking.

  • Amitoj Duggal says:

    nice article , thanks alot for sharing

  • Larry says:

    Wow! I didn’t know you could change capital letters to lowercase with just color correction!

  • Pradeep Singh says:

    The questions that need be asked to self before designing and after designing really well laid above. And ya its really good tutorial.
    http://www.bloggeruser.com

  • Caleb Fennell says:

    I’m curious what relevance anti-aliasing has after converting layered PSD to XHTML and CSS – assuming of course that the text will be rendered by the browser and not placed as an image. With my stated assumptions, isn’t anti-aliasing only useful for presenting a design comp to client (and therefore creating unrealistic expectations?

    Is the designer in this example aware of programming constraints and best practices in terms of lightweight design?

    In terms of best practices and ease of upkeep, satisfactory results can be had with new CSS3 features. Yes, yes… I’m attempting to be an early adopter… I just don’t think text as image is a good recommendation – especially at this stage in the game.

    Other tips are decent in terms of PSD design stage.

  • Daaz says:

    for u…

  • Bill Gates says:

    Wow, this is a very well detail’d and informative article. It reminds me alot of what I usually do, excellent foundation to build upon!

  • Lesley says:

    Thanks, Layers. I always enjoy reading your tips!
    http://www.browndogcreative.com/blog

  • Ionut Staicu says:

    Yeah, this is totally great. If you want to keep your site as a PSD/JPG image… Otherwise you can’t have font antialias on all browsers (and if you have it, you don’t know EXACTLY how will look).

    This is also available for font shadows

  • ExtremeShoop says:

    It’s pretty basic, contemporary and conventional but essential nonetheless.

  • Enk. says:

    Cool Post.. good for a newbie 😛

  • Margot says:

    The “add gradients and drop shadows” thing is crap. That’s not only personal preference, but you have to determine if it’s project-appropriate. Not to mention that gradients and drop shadows usually look pretty tacky anyway (web 2.0 anyone?), but then again, that’s personal preference. Still, to say that you should add those things to make your website “pop” is untrue and misleading. Why do people give out tips like this for the web and not for print? I don’t think any designer would tell you to add a gradient and dropshadow to make a printed poster “pop”, but somehow the web is different and you won’t get anybody’s attention online with only solid colours? That’s bull.

  • Ashley Bailey Designs says:

    My favorite tip was the 1-pixel stroke. I need to pin that on my forehead because I often forget that but it really does make such a difference. 🙂

  • Darshan says:

    great tut…!
    i ll surely try it.

  • Jacob Cass says:

    Thank you all for your comments, glad you enjoyed the tips.

    Caleb, Ionut,
    Anti-Aliasing is useful for smaller text where you save the final product as an image though you are correct, for larger images, this is not best practice.

    Margot,
    You would be surprised to see how much a subtle gradient or drop shadow can enhance a design but of course this depends on the project at hand. If it is done incorrectly, yes it will look tacky. In regards to the web and print tips – they are totally different beasts. Gradients and drop shadows on the web give another dimension to the design and do make a website pop off the screen so to speak, though this is not to say full solid colours will not work either. Ultimately, it depends on the project & the message you are trying to communicate.

  • Ashley Adams : Postcard Printing says:

    Hey thanks for the tutorial.. photoshop CS4 actually has little improvement from CS3 in terms of smart filters.. the other options presented by CS4 is worth trying.. however, it has certain bugs which I hope would be taken care of by Adobe..

  • web says:

    you can also checkout this site
    http://www.spiralteck.com

  • Amaan Goyal says:

    This a nice article about Web Design. I think as a designer we all get caught up in our designs and sometimes loose site on the overall content and layout. I think what is really being conveyed here is step back and take a good hard look at your site, I’m sure you’ll always find something that needs a little tweaking.

    http://www.spectramindz.com

  • Great article. Thank you!

  • I will post a link to this page on my blog.
    Thanks!

  • These are wonderful tips! And ones will be adding to my designs.

    And just to note, it is two years later since this article was posted. Websites today are all about making things ‘pop’ in front of their audience, using drop shadows, gradients, and layers. Website designs have certainly turned into making things more simplified. So hats off to you Jacob for making a great post in 2009, because it sure is being used in today’s world!