TUTORIAL: Polishing off your designs

May 14, 201016 yr

I was browsing another forum that I'm on and came across this tutorial and thought I would share it with everyone here

I DID NOT WRITE THIS TUTORIAL, CREDIT GOES TO http://slowduck.deviantart.com/

You guys know all this stuff but this is for the new guys. I have already sent a psd to Aqib which had these effect in it so I thought I might as well make a guide for everyone to see and for the pros to add what they know.

We all come up with these grand ideas which at the time we think are pure genius then are not happy with the outcome due to the design lacking that something special. That something that takes your designs to a new level. Here are details that you could include in your next designs.

1px Effect

Lets start simple with the 1px effects. For me this is a great way to polish off content areas and text. The first example uses a white 1px most probably set to overlay and the opacity slightly lowered for the best result. Example 2 uses the same 1px white line but adds a second 1px line this time black. Again both 1px lines are most probably set to overlay with lowers opacity.

Another variation of this effect is to create the 1px lines and motion blur them.

This effect can be used around the edges of content areas to show highlight areas or to divide content. (Preview for some reason comes out LQ sorry)

This same effect is also rather useful on fonts. Once you have created your desired text simply open the blending options and use these settings. The example below features this effect with on the logo and on the sidebar text.

Gradients

Gradients are used everywhere but I am tired of those blending option gradient. They always come out dull and boring so here is how to use gradients. This is a very hard to thing to explain so don't hate me if you don't quite catch it. Instead of going to the layer blending options you should create a new layer. On this new layer you create the gradients you want and simple make them clipping layers on the shapes you desire. You can add multiple gradients as well as play around with soft lights, overlays and opacity.

In my example you see the top gradient being the normal blending option gradient and below that is the more styled gradient. The first gradient is just a simple black to white gradient while the styled gradient has black at the top and bottom with a white gradient in the low mid area.

Using gradient with the 1px lines is a method for success. In the example below we see a dark gradient going from the top down. A simple 1px white line just above the gradient will give a much more crisp look.

Shadows

A really simple way to make a fairly decent shadow is to use the Marquee tool to make a small box. Normally I try to make this box no more then 4px high. Inside the box you just created (on a new layer) you make a simple back gradient. Remove the Marquee box and then use the motion blur tool to fade out the sides of the gradient. The 1px white line and gradient effect in the above example also works here as I normally like to leave a 1px space between my content area and my shadow like shown in the example below.

KJ made a nice tutorials on how to create a different shadow effect.

Going to add more things when I think of them.

Wave Gradient

This is a simple effect that can be used on areas that you feel are a touch dull and boring. All you do is make a new layer and brush a nice circle shape. Should not be a perfect circle tho. Then you simply blur the new layer so the edges are nice a blurred. Don't blur it to much or it just ends up in a circle shape. Once it is blurred you just wrap it in a nice position. I normally take the first inner wrap line and push it up. (See example) then you just play with the blending modes and opacity.

The Pen Tool Wave

This effect is really nice for getting s straight gradients wave like effect. You simple make a rough semi circle using the pen tool and fill it with black or white depending on the background. All that is done after that is to erase the curved bottom and edges then motion blur it. Once that is done you can play with the opacity and overlay settings. If anything is unclear let me know.