Web Design Forum: TUTORIAL: Polishing off your designs - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

TUTORIAL: Polishing off your designs Rate Topic: -----

#1 User is offline   TylerCollins 

  • Dedicated Member
  • PipPipPip
  • Group: Members
  • Posts: 437
  • Joined: 28-May 08
  • Reputation: 25
  • Gender:Male
  • Location:Northern Ireland
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 14 May 2010 - 12:52 PM

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.

Posted Image
Posted Image

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)

Posted Image

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.

Posted Image


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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image
4

#2 User is offline   AKLP 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 31
  • Joined: 06-May 10
  • Reputation: 0
  • Gender:Male
  • Location:Greece
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 20 May 2010 - 08:02 AM

This is a really interesting tutorial for people new to the web designing
Most of those i already know (except Wave Gradient that i dont use at all o.o)
Well everyone has his own technique and way of using them
0

#3 User is offline   Acrylic 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 272
  • Joined: 28-March 08
  • Reputation: 17
  • Gender:Male
  • Location:Dublin, Ireland
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 20 May 2010 - 09:03 PM

Very good compilation. 2 thumbs up my man. :good: :good:

Another method of creating nice gradient would be the Dodge and the burn tools. Proper use of them can create a lot of depth in an image.
0

#4 User is offline   TylerCollins 

  • Dedicated Member
  • PipPipPip
  • Group: Members
  • Posts: 437
  • Joined: 28-May 08
  • Reputation: 25
  • Gender:Male
  • Location:Northern Ireland
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 20 May 2010 - 09:45 PM

+1 me ;)
1

#5 User is offline   mteam 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,828
  • Joined: 07-November 09
  • Reputation: 247
  • Gender:Male
  • Location:Manchester
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 20 May 2010 - 10:14 PM

I'll give you a +1 mate good find :drinks:
0

#6 User is offline   Frost Tear 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 713
  • Joined: 10-May 10
  • Reputation: 17
  • Gender:Male
  • Location:Bristol
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 May 2010 - 03:08 AM

Excellent tutorial; shall be saving this. Thanks a lot!
0

#7 User is offline   Lev 

  • -'-
  • PipPipPipPipPip
  • Group: Members
  • Posts: 3,946
  • Joined: 28-October 09
  • Reputation: 258
  • Gender:Male
  • Location:Russia
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 21 May 2010 - 05:07 AM

+1
for efforts to popularize the tips and tricks of good design
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users