Cool Favicons

Hey

You see favicons all over the web. These are the small 16 x 16 pixel images that appear in you browser address bar or your tabs. But which are the coolest on the internet.
I think these are some of the best.

Candy Stand, The Black bits don't appear on the final make up. Simple yet effective.

ClickBank, A very stylish favicon.


Digg, Appears through out there site. Simple design.


ExtraLife, One of my favourite Cartoons, the favicon is a relation to this.


Radiotimes, This icon glares out at you, simply showing the cut down version of the sites logo.

Reddit, Again using the logo for the favicon, this scales well and it instantly recognizable.

Tv Links, Again simplicity at its best another great piece of design.

World of Warcraft Guides, So much detail in such as small space. Another good icon.

Creating a Website Badge - Photoshop

Hey

This is another tutorial which uses Photoshop and it shows you how to make a cool retro style badge for you website. With a lot of time and effort you can make this look amazing.
For this tutorial you will need:

Photoshop or Similar
Time
Optionally the source pack located here.

If you are read lets begin.

Step 1) Create a good sized canvas, I picked 500 x 500 pixels. You can pick any size you want just don't make it to small.


Step 2) Create a red (or any other colour) circle in the center of the canvas don't let it touch the edges, leave a little room. Its best if you set the background to a new layer and set the background to zero transparency. I think it helps you work with the layers better.


Step 3) Add a 2 pixel Stroke to the circle you just drawn. If you have a bigger canvas use a larger stroke, small canvas your stuck at 1. A bigger canvas lets you fiddle around with the layers more.


Step 4) Duplicate, shrink and position the layer so you have a double boarder. There is probably an easier way to do this, I just can't find it.


Step 5) One hand tip is to create a cross with the ruler guides so you can align the center of the circles.


Step 6) Add a green circle on a new layer, and again add a Stroke.


Step 7) Finally add a white inner circle on a new layer. A stroke will be used as a boarder image.


Step 8) Add an interesting image in the white area. Apply a white stroke if the shape calls for it.

Step 9) Add your website name in the style and colour of what you want to use.


Step 10) Warp, bend and transform the font until it lines up with the curve of the circle.


Step 11) One final touch is to add a layer effect to the text. This is optional, but it adds and extra level of detail.


Step 12) If you want to use the image again you can put all the layers into folders, it keeps them all organized. If you are happy to use the image, flatten or directly export the image.


You have a cool looking website button created in Photoshop. You can find the The Powell Blog here.

With a lot more time you can make some amazing effects. Please leave a comment to you creations.

Creating a Cartoon In Photoshop

Hey

Recently on my other blog I posted a funny Pac Man account with the ghosts. Being the design type that I am, I thought I would show how I did it and hopefully you can do it to.
For this tutorial you will need:

Photoshop or similar (MS paint if you have to)
Optionally the source pack with the swatches. Located here.

For any of the image if you click them you will get the full glorious size of 1440 x 900. Which you can ponder over. If you are ready lets begin.

Step 1)

First you need a hand drawn cartoon. This is best done in pencil then penned over. One note rub out all the pencil lines it helps in the later stage. Scan in the image at a high quality.


Step 2)

Flip the image as necessary and remove the white background. It is best to put this on a new layer.

Step 3)

Go over the lines of draw drawing if they are all grainy. The next step is to create a layer underneath and colour it white. This would be used later.


Step 4)

Create a new layer again. Add in a folder. On this layer colour in the image with a bold colour. If you go over the line, erase.


Step 5)

This time darken the colour and go over the image again. Use this as a shadow. Again remove anything that is over the lines.


You should have a nice well colored image. On other tip is to create a new layer and apply white to the eyes.

Step 6)

Apply again to the other characters in your piece. You can add the white of the eyes to the same layers.
The colour of the tongue is again on another layer.


Step 7)

Adding the shadow is again done in the same way as before. Keep the shadow direction in the same side.

Step 8)

As you can see if the pencil isn't removed you have small white areas that need to be removed.


Step 9)

Use the white layer and change it to a random colour, this can be used to see if you have missed any spots.


Step 10)

Apply a lighter layer to the background in Photoshop.


Step 11)

Apply a darker layer for the background and the image is complete.


Step 12)

The next step is to add speech bubbles. Add the shape and add a wide black stoke.


Step 13)

Add the font which is included in the pack and your cartoon is done.


If you want to download the cartoon source files please go here.

Well Designed and Funny Website Error Messages

Hey

You will probably have noticed by now that hen you miss type a URL or go on a website that doesn't exist you usually get a 404 page or similar. Some website leave it as a boring default, but some get creative and change the style and text.
Although many of these don't have that much useful information they are well designed and some are down right funny.
If you click on the image you will get a full size version. In no particular order:

1) TV Links

A great website where you can get links to TV shows, this is a really good error message because it continues in the style of the website.

2) Google

A bit boring and not as interesting as some, but the cool retro look is great.

3) Orkut
The popular myspace type site from Google, I just laughed at the first line.

4) Reddit

The only reason this is in the list is because of the sad space man thing (can't remember what it is called).

5) Torrentz
Dam hamster powered servers they just can't keep up. This is one of the funniest error messages around.

6) Apple
Probably the best 404 error message here. The only one that contains links to other parts of the site. A well designed error which you can navigate from.

7) Blogger

Again like Apple's this does give some sort of access to other parts of the site after the screw up, although not as much.

8) Digg

The big question mark definitely makes the point that you screwed up.

9) eBay
This again has a lot of navigational links for you to use. With a little descriptive error.

10) Fark

The only reason this is here is because of the chipmunk thing. Very funny.