VoX
6th June 2008, 06:06 PM
All you need to do is take a look at a website to see the talent that the designer has, and not just in making you go "Wow!" but in subtle effects too. Take a look at the ATK Skull in the website header:
http://www.atkcommunity.com/images/atk/atk_headerbg.jpg
With a minor glance, it looks like a normal cartoon skull, but if you look closer, you can notice the gradients in the eyes, the sparks from the fuse and a gentle outer glow/drop shadow.
Here is a sophisticated looking web dialogue box, in all fairness it is extremely quick and easy to make, it took me about 5 minutes.
http://img206.imageshack.us/img206/6421/shadowhighlightcopych6.jpg
Let's look at the main features that you notice straight away:
- The bold second word in the title.
- Sleek typeface.
- A gradient in the top of the main text box.
If you have a closer look you may also notice that there is a slight gradient in the title box.
If you look even closer than that, you will see what makes the drop shadow (gradient near top of text box) stand out more, at the top of the shadow there is a 1 pixel white line with opacity set down to around 25%. The is also a white line at the top of the Title Box too.
http://img365.imageshack.us/img365/6672/linescloseupbu3.jpg
Small details like this can make all of the difference, so there is no need to go over the top with effects when making something like a Sig, and always remember to give it a border!
http://www.atkcommunity.com/images/atk/atk_headerbg.jpg
With a minor glance, it looks like a normal cartoon skull, but if you look closer, you can notice the gradients in the eyes, the sparks from the fuse and a gentle outer glow/drop shadow.
Here is a sophisticated looking web dialogue box, in all fairness it is extremely quick and easy to make, it took me about 5 minutes.
http://img206.imageshack.us/img206/6421/shadowhighlightcopych6.jpg
Let's look at the main features that you notice straight away:
- The bold second word in the title.
- Sleek typeface.
- A gradient in the top of the main text box.
If you have a closer look you may also notice that there is a slight gradient in the title box.
If you look even closer than that, you will see what makes the drop shadow (gradient near top of text box) stand out more, at the top of the shadow there is a 1 pixel white line with opacity set down to around 25%. The is also a white line at the top of the Title Box too.
http://img365.imageshack.us/img365/6672/linescloseupbu3.jpg
Small details like this can make all of the difference, so there is no need to go over the top with effects when making something like a Sig, and always remember to give it a border!