Tutorial Plusable

Elements of Great Web Design: The Polish

Saturday, May 26, 2012

When I put together designs, I usually do so in two phases – Layout and Polish. During the layout phase, I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage – the Polish – I go over the design and adjust colors, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we’ll be looking at the Polish.

A Short Preface

Unlike with Photoshop effects, Web design can’t really be taught in a set of easily repeatable steps. If you look at most great Web designs, they are not difficult to reproduce technically. You could probably screenshot a design, put it into Photoshop and then replicate the same design layer by layer. The trick, however, is coming up with that design in the first place.

For this reason, in these tutorials on Web design I am going to try a few different techniques to convey different aspects of the process that I personally go through when designing a Web site.

Today we are looking at a site that I put together earlier this year called Not By The Hour, which is a subsite for another of our blogs called FreelanceSwitch. Fortunately when I designed it months ago, I kept a version of the PSD file before and after I polished it up, so just like in a weight loss commercial we are going to do a little ‘before and after’…

Before I explain some of the things that I did to polish up the Web site, it is important to look at the before and after.

VIEW BEFORE AND AFTER

Step 1 - Clarity:

You will hear me say this time and time again, but when you design for the Web it is ALL about the pixels. One of your aims should always be to keep things sharp and clean. This means for example:

Text Clarity
When laying out text, you should give thought to what Anti-Aliasing you use. To do this you would bring up the Character panel, which you can do by going to Window > Character or when you have the Type Tool selected and some text highlighted, press Ctrl-T (yes it’s the same shortcut for transform so you have to make sure the text is selected). In your Character panel, down at the bottom right you can choose between None | Sharp | Crisp | Strong. For different fonts and different sizes you should experiment. I mostly use the setting Sharp which will force some pixels to be aligned and sometimes distorts the font a little at smaller settings. But for example in the image below the textMaking is set to sharp, which is why when I apply a 1px outline it is very clearly defined.
Lining
As you can see between the lighter grey and darker grey bars, I have added a faint 1px line. This trick mimics the effect of the sharpening filter. If you have ever run one of the sharpen filters too often on a photo you will notice that little borders start appearing. This is because emphasizing the border between makes the two parts appear more separate to your eye and hence sharper. So often times I will use a faint line to emphasize the border and make the two parts seem clearer.
Colouring
Color can also make a big difference in sharpening things up. In this instance, I desaturated the background from a sort of off-grey/green to pure grey. This means that the safe, which has a greenish tone, stands out more from the background and winds up looking sharper.
Cleaning Up Objects
Another thing that I did not do in this image but that you can do to sharpen things up is to go through objects like the logo or the safe and make sure that edges are pixel aligned. So, for example, have a look at the left edge of the safe compared to the right edge. You will see that the right edge looks slightly blurry. We could fix this by using the Polygonal Lasso Tool (L) and selecting a tiny edge off the right side and hitting Delete. Of course this isn’t essential and I don’t mean to sound nit-picky, but it’s a good idea to think about these details and make sure everything is nice and crisp!

One other element to discuss here is that on the text you will see a faint gradient / stroke effect. This is achieved with two layer styles, an inner stroke of 1px and a subtle gradient. I’ve used this here because it is part of the FreelanceSwitch brand, and it also is quite a Web 2.0 sort of effect. It is best done with Sharp text as mentioned previously. You can see the exact layer styles in the Sample PSD below.

Step 2 – Light and Shade:

Gradients, Gradients, Gradients. Some would say they are the hallmark of Web 2.0 design, and I must admit to using them constantly in my designs. In the image below, you will see that I have added shadows and gradients to a few different places to give the design more depth.

One of the principal differences between print and Web design in my opinion is the amount of depth you need in your design. What I mean by this is that in print design, if you were to have a brochure cover with a straight, flat color, often times it will still look lovely because of the paper stock or a celloglaze that might be applied and the reaction of light to that paper/coating. So in the ‘design’ it might look like a simple flat color, but in the output it will have depth nonetheless. On the screen you don’t have this effect.

This is not to say that you can’t have flat backgrounds or panels of color in Web design, however, all the print designers I have ever art-directed to create Websites, the most common two failings I have noticed are

Failing to focus on sharpness and clarity of the design
In print, you rarely zoom right in to modify individual pixels since when something is printed out, that level of detail will often escape the eye anyhow. You think in millimeters not pixels.
Failing to add depth cues and sufficient visual interest
Gradients generally don’t work that well in print, but on screen they work a treat. Similarly adding faint shadows and highlights work well on screen. Together they can make a site much more visually appealing as the different elements on the screen play against each other. In the image below for example, the money bags, which were initially straight vector images with flat coloring, were given very subtle graduations using the Burn Tool (O) so that they looked softer.

Step 3 - Precedence:

Precedence is the single most important visual aspect of information design. And since Web design is largely about how you lay out and present information to your user, precedence is therefore of the utmost importance.

What do I mean by precedence? Well when you look at page you have to ask yourself, what do I look at first, what’s next, what’s after that, and so on. And why do you look at certain things in a certain order?

Visual precedence is a mix of factors:

Size
It’s pretty obvious that something big is going to take precedence over something small. So in this design, the safe and the main title have top precedence. When you look at the page the first thing you notice are those two elements.
Colour
Color also creates precedence. For example in the Before image you will see that the subtitles in the area marked 4 in that image below were initially the same Dark Blue as the words Hi There! This meant that there was less distinction between the two and it was not as clear which was meant to be read first. By fading them back to a beige, they are given less importance and it is more obvious that they are of less importance in the information hierarchy.
Background Color
With both background color and color in general, the important thing is not so much what specific color something is as what colors everything else is in relation. So for example if everything is black on a page and there is one white object, obviously that white object is going to leap out at you. In this instance by contrasting bright yellow with the dark grey we get emphasis. So although the very first thing on the page that you see might be the safe and the words Making Passive Income, you will probably notice A Guide to next, and the Part 1| Part 2 | … navigation second. This is on purpose as I want the user to see first a visual image and a title so they know what they are looking at, then I want them to see the primary navigation so that they understand how to get around the site.
Position
Finally position in the layout also makes a difference in how items are perceived. As you have probably heard, studies show that the user’s eye goes from top left to bottom right in some variation (I’ve seen both studies that say it goes top left to top right and then bottom left to bottom right, and alternately that it goes in a kind of arc from corner to corner.) The important thing here is that having something higher up usually gives more precedence, and having something further left usually gives something more precedence.

Step 4:

I’ve said it before, I’ll say it again… It’s all about the pixels!

In this image, you will see what appears to be a fairly straightforward gradient. In fact there are three gradients drawn in and three 1-pixel lines used. It’s quite subtle, and arguably doesn’t make that much difference, but in my opinion every detail counts towards the end.

Step 5:

Someone in the comments asked about Web 2.0 sorts of styles. Here is a simple effect where you give a 1- or 2-pixel outline and then a faint gradient for a background. If you hadn’t already noticed it already, you’ll start to realize it’s all over the place, possibly a little overused, but kind of nice anyhow.

Step 6:

In this image, you can see how sometimes during the polish you may even change the actual information on the page. In this instance, I decided that although it was more infromationally rich having all the titles for the different parts underneath the money bags, it looked so messy I didn’t think it was particularly informative – though this is somewhat debatable. So instead I removed the excess brown on brown text and replaced it with bold yellow on dark grey, which because of the contrast leaps out.

And there you have it!

So there is my first Web design tutorial. Please let me know in the comments if this is informative. It’s challenging explaining Web design! Also bear in mind that my style of Web design is of course my taste, particularly as I am my own client in 99% of projects I do these days :-)

The next time I have a Web site to design, I am planning on recording the whole thing with a screen capture program then speeding it up into a few minutes. So you can look forward to that! I think it’s going to be pretty cool, though I’m a bit nervous because like all designers some days it comes easy, and some days it’s a blank slate inside.

Anyhow hope you enjoyed the tutorial. Please give it a Digg if you did!

Sample PSD

One quick note about this PSD, I haven’t labeled any of the layers or grouped them. This is quite literally the PSD that I built the site off that I’ve zipped up for you to look through. The design and contents of the PSD are provided purely for instructional purposes. Copyright for the design and illustrations rests with the respective owners. Please don’t use elements of the design elsewhere.

Download the PSD for this tutorial

Making a Photoshop Shield!

DownloadSOURCE FILES

In this tutorial, we’re going to use the Path Tools in Photoshop to draw a shield-like shape. Then using some gradients, we’re going to give it a metallic edge and shiny center. I actually made this tutorial when making the default icons for some posts here on PSDtuts, so if you go to the main listing on the site you’ll see them in action.

Step 1:

We begin with a dark grey to black gradient. I drew this with the Radial Gradient, which long-time PSDtuts readers will know is my favorite gradient tool. Anyhow don’t worry too much about these colors, because midway through the tutorial, I decided they were too dark and changed them!

Step 2:

Now press Ctrl-R to switch on your rulers and drag some guides out. You do this by clicking on the ruler and then keeping your mouse down and dragging out to where you want them to be. I set up my guides as shown below. Because I’m drawing a triangle, I want to make sure that it’s symmetric and not wonky – hence the guides.

Note that at any time you can press Ctrl+’ and the guides will switch on and off. This is useful because otherwise they get in the way of what you’re trying to do sometimes.

Also with the rulers you can right-click on the rulers and you’ll see the different measurements they work in. For Web graphics it’s probably easiest to work in pixels (though for print you’d want something larger probably). Anyhow because my canvas is 500×500, I put the guides at 100px, 250px, and 400px and then 100px and 250px downwards.

Step 3:

Next grab the Pen Tool (P) and draw a triangle as shown. You can do this with three dots (yes all the high school math is worthwhile after all!). Note that if you hold the mouse down when you place dots you’ll get into the curvy pen thing (it’s technical name is bezier curves) and we’re not interested in those today, so just click once to get nice angled points.

Also if you hold down Shift you’ll find you get the Pen Tool snapping to lines which are in multiples of 45 degrees. This can be good particularly if you want to draw the dead straight line at the top (and not accidentally place a mark a few pixels off). Alternately I suppose you could make sure you have snapping on which is under View > Snap To > Guides. Either way should get you the right result. As always Photoshop gives you a zillion ways to do everything.

Step 4:

Now we want a variant of the Pen Tool called the Add Anchor Point tool. You can see it in the picture below.

Step 5:

With the Add Anchor Tool selected and your guides still up, go through and add extra points in the positions shown below (note that I’ve switched off the guides with CTRL+’ so that I could screenshot it properly).

You may be wondering why we didn’t just add all these points in the beginning rather than after we’d drawn the triangle. The answer is simply that it’s hard to get everything looking nice and symmetrical. This is just an easier way.

Step 6:

Now we are going to change to the Direct Selection Tool (A) which is the arrow shown. There are actually three Arrow tools in Photoshop, this one, it’s alternate which is called the Path Selection Tool and our regular arrow also called the Move Tool. What’s the difference?

Well basically the Move Tool (the regular one) is for moving objects around as you do normally. These other two are for paths. The Direct Selection tool is for selecting either points or edges (the lines between the points). While the Path Selection tool is for moving the entire path around all together (without it losing shape).

The best way to understand them, of course, is to click on each one in turn and see what it does! But for now we just want the Direct Selection Tool.

Step 7:

So using the Direct Selection Tool, first click on the top middle point to select it. Now hold down Shift and press the Up arrow a couple of times and you’ll see the point move up. Next do the same with the left and right midpoints to make them move about.

We hold down Shift because it makes movement faster (I think SHIFT+Arrow is the same as 10xArrow with no Shift).

Anyhow, move the points about until you have something like shown…

Step 8:

It’s up to you how you make your final path turn out, I made mine kinda quirky by just moving points about until they kinda looked like a shield. I saved the path in the PSD file for download in case you want that exact path. You can find it by clicking on the Paths tab and then you’ll see a path marked Shield Path.

Any time you have a path you think you might want later, click to the Paths tab and then click on that little arrow pointing to the right and choose Save Path. This is particularly handy if you’ve spent a long time deep-etching a person out of a photograph and you want to make sure you don’t accidentally lose your path work.

Step 9:

Next create a New Layer. Click on the Pen Tool and then right click anywhere on the canvas and choose Make Selection. You’ll get a little dialog box asking if you want to feather your selection, make sure it’s set to 0 (the default) and press OK.

Next get a light grey to dark grey and draw a gradient in your new layer as shown.

Step 10:

Now with that layer still selected, create a New Layer and go to Select > Modify > Contract and put in 10 pixels.

Next draw a gradient going the OTHER way with the same two light grey and dark grey colors. So the first one should be from top-left to bottom-right. This new layer should be bottom-right to top-left. You can see the effect of the two gradients in the picture for the next step.

Step 11:

Next while your second layer is still selected, go to Select > Modify > Contract again and use 10pixels again. Then create a new layer, and this time with a Radial Gradient, draw in a nice orange gradient with the lighter part in the top left as shown.

Step 12:

Now go back to the middle layer and press Ctrl and click on the layer to select its pixels as shown. Create a New Layer above that one and fill it with white.

Then go to Select > Modify > Contract and use a value of 1 pixel and then hit Delete. This will leave a one pixel thin white line between the two metallic gradients. It will look like the top of a ridge of metal (sort of …)

Step 13:

Ok, so here’s what we have so far. You can see that by using the two gradients going in opposite directions, we’ve created a sort of 3D effect which looks like light is coming from the top left and creating a highlight and shadow on the "metal."

Step 14:

Now we add a simple Drop Shadow and Inner Shadow to the orange layer. You can see these in the sample PSD file for download, but basically it’s just an inner shadow with distance of 0 so that the shadow is even around the edges, and similarly with a drop shadow. We want the inner shadow as it makes it look a little more three dimensional because the edges are curving away from the viewer’s perspective. The drop shadow is just to make the orange layer react a little more with the metal frame.

Step 15:

Here’s what we have now… It’s starting to look pretty cool. At this point I’ve also lightened the background (though it’s hard to tell now that I look at it). So here it’s a very dark grey, as opposed to black. Also I’ve added a drop shadow to the very first grey metal layer, though it’s pretty faint.

Step 16:

Now in a new layer at the very top, draw an ellipse with the Elliptical Marquee Tool (M) and fill it with white as shown.

Step 17:

Now the only reason we’ve actually filled this with white is so that we can now press Ctrl-T and rotate the ellipse as shown.

Step 18:

Once you’ve rotated the ellipse hold down Ctrl and click on that layer to select the ellipse and then delete the layer itself so you are left with just a selection shaped as an ellipse on an angle.

Then create a new layer and draw a Radial Gradient going from white to transparent as shown.

Step 19:

Now hold down Ctrl and click on the orange layer to select its pixels and then press Ctrl+Shift+I to invert the selection (i.e. you’ll be selecting everything except the orange layer’s pixels) and then click on the very top layer, which has that white-transparent radial gradient from the last step, and press Delete. You should now have a highlight as shown.

Step 20:

Now set that highlight layer to a blending mode of Overlay and an Opacity of 60%. It should give a nice golden yellow as shown.

Step 21:

Now in create a new layer and then again hold down Ctrl and click on the orange layer to select its pixels. Then in the new layer draw a Linear Gradient downwards from black to transparent as shown.

Step 22:

Set this new black layer to a blending mode of Soft Light and then hold down Ctrl and click on the orange layer yet again then hold down Shift and press the down arrow a few times to move the selection down. Next go back to that black layer and hit Delete to leave just a bar running along the top as shown.

Step 23:

At this point, I decided to brush the metal up a bit. To do this, click on either of the two grey layers and with the Burn Tool (O) selected and a soft brush, just darken the parts that are darker and lighten the parts that are lighter as you see fit. I did this just to get a bit more contrast as shown. Don’t forget if you hold down Alt while using the Burn Tool it changes to the Dodge Tool (which lightens instead of darkening) so you don’t need to keep switching between them.

Step 24:

OK now for the radial burst in the background. Choose the Custom Shape Tool (U) and select the shape shown below.

Step 25:

Create a new layer just above the dark grey background and, using white as your foreground color, draw a very large version of that shape as shown. This makes a kind of vector starburst effect.

Step 26:

Now set that layer to Overlay and 30% opacity so it’s much fainter. Finally in a layer at the very top, I added a giant S in a darkish red color and set it to Multiply at 20%. Then I wrote a word over the top and we’re finished! A bit of a strange effect, but a fun one nonetheless!

Slow Shutter Effect

Back in 2009, we posted a tutorial on creating a ‘slow shutter’ effect in Photoshop. This tutorial still brings in around 7000+ unique site visits every month and is a perfect example of how a blog can really generate traffic for your site.

Creating a blog post on a subject that utilises your knowledge and skills within your industry can mean as little time investment as an afternoon, yet that resource can be shared across the internet any number of times. If you have any questions or would like advice on how to get the most out of your content, please get in touch.

Now for the tutorial…

Firstly you need to create a new document at whatever size you wish to work at. As with most artwork it is always a good idea to create the original piece at the largest size that it will be needed as it can always be reduced down, but enlarging the image once its finished is not going to work out too well. If you are planning on using this as a desktop background then make it as large as your screen resolution.

Unless you are going to print the final piece then set your colour mode to RGB as it gives you a broader range of colours to work with. If you are printing, then use CMYK. We also like to work using 16bit colour or above, as it makes your gradients look much smoother.

Once your workspace is setup you will need to apply a base gradient (see steps 1. + 2. below) Select the gradient tool by holding the mouse button down on the fill tool, then double click the gradient just below the menu bar. You now have the opportunity to create a custom gradient. Experiment by adding in different colours (click just below gradient bar & click color to change it) and moving them around (drag colour pointer left and right)

Once you are happy with the graident click OK and drag your gradient line out over your canvas. We want our gradient to be horizontally even across the canvas, so hold Shift while dragging the cursor in a vertical line upwards. If you are not happy with the gradient you can always click ‘undo’ and adjust the gradient and try again.

Now we have our canvas set with a background gradient it is time to create our text. The ‘slow shutter’ effect that we are looking to replicate can be applied to any pattern, but we are trying to apply it to text. The text needs to be created as paths using the pen tool as opposed to the text tool. Creating it this way will also give it a more ‘freestyle / hand-drawn’ feel which is important. Create a new layer, select the pen tool (1.) and create your text as one long path as shown below.

Now you need to stroke your line with a fine white brush. Select the brush tool and set the size to 2px (1.) Now click the paths tab in the layers menu and then click the Brush button (2.) This will stroke your line with white which represents the lights source and its brightest part.

To create a realistic outer glow don’t use the default settings! Right click on your new layer and select blending options, then select the outer glow option which will give you the menu shown in the diagram (1.) Now adjust the settings so they match the ones in the diagram. If your using a different overall colour then select once close to it, I have used a slightly lighter green than the background.

You now have a decent glowing path. The next part of the tutorial explains how to customize the whole image and make it unique so don’t feel limited by what you do next, it’s all about experimenting! There are lots of uses for this effect such as simulating moving lights in photo’s, creating cool masked animated light in flash, or just creating illustrations. We are creating a static wallpaper so if your ready, lets continue…

Firstly, we are going to enhance the background layer with some more simulated light. Do this by selecting a nice complementary colour in it’s brightest shade (1.) and a big 300px brush. The rest is up to you, but I recommend working on a fresh layer as this gives you the flexibility to build up a few colours. It also helps if you don’t like how its going, a bigger brush sometimes helps.

Once you are happy with the background you will probably want to add some depth to the text path. The best way to achieve this is by copying your original linework. Do this by dragging the glowing line layer onto the new layer button in the layers menu twice (1.) This may look like too much at first but the next stage will really improve the image.

Go to the menu and click Filter > Blur > Guassian Blur and apply about a strength 5 blur. With this layer selected slightly rotate it using Cmd + T and you may want to distort it by holding Cmd and dragging a corner when the transform handles appear.

To add a really dynamic moving effect get your second duplicated layer and apply a radial blur to it. Do this by going to the menu and clicking Filter > Blur > Radial blur. Playing with different strengths will help you get the look thats right for your image. Its fairly strong on our piece hence the very opaque look. Less strength will create a more ‘vibrational‘ effect.

Finally we have added a few ways of making your artwork even more distinctive. The possibilities are endless but here’s what we’ve done.

Another new glowing text layer with a red glow has been added to bring in some contrast. In order to stop it overriding the main text I have used the eraser on the line crossovers.
To bring out the line connections I have used the dodge tool on a 50% strength. This can be found by holding down the mouse button on the 14th tool on the toolbar. Set it up like you would a brush and get creative. It sometimes works best if you flatten the entire image before you get started.

Finally, to add some adjustable contrast to the image I flattened the whole thing and copied it to another layer (like I did earlier with the path itself). Selecting the ‘Overlay’ blending mode and adjusting it’s opacity will give you a ‘deeper’ image.

The key to this effect is experimentation with the multiple layers and blending modes.

Using Gradients to Make Light and Shadow – and a Coffee Cup!

In this tutorial, we’re going to use some simple circles and gradients to make a cup of coffee viewed from above. The end result isn’t that useful, but the process is interesting nonetheless.