Creating A Cool Web 2.0 Icon

Web 2.0 are those cool icons which you see every where, but do you no how to make them? This tutorial will explain how. Click on any of the images for the full version.

Stuff you will need:

Photoshop (or Similar)

Step 1)

The first step is to create you canvas, this can be any size you want it to be.

Step 2)

Add a shape to your canvas to a new layer and colour it.


Step 3)

Apply Bevel and Emboss to the layer using Size: 200, Highlight white at 100% opacity and a dark blue shadow at 75% opacity.

Step 4)

Apply a stoke around the shape, in the base colour you picked, size 4.


Step 5)

Apply an inner glow, white, size twenty.


Step 6)

This part becomes a little tricky, you need to create a new layer, right click and create this into a clipping mask. Apple a white to transparent gradient. Adjust the opacity as necessary.


Step 7)

Slightly rotate the layer so its at an angle.


Step 8)

Again, do this the same for a darker shadow at the bottom, adjust the opacity as necessary.


Step 9)

One of the defining points of web 2.0 icons is the reflective shadow. The method I used is to copy the layer, and remove anything except the white, and reflect it as shown.


Step 10)

Apply a layer mask to reveal all. And then add a black to white gradient, this hides parts of the image, leaving only the shadow.

Step 11)

As shown you have a cool web 2.0 icon which you can use on your websites.


The cool features of having a simple and effective logo is that you can scale the image to any size.


Kinda cool don't you think. Leave your comments, with your web 2.0 creations.

Amazing Coloured Water

Hey

My friend recently sent me these amazing photos, of coloured water. Over all there is over 20 different pictures.

You can download the whole pack here.




There is even more than these in this pack.

Fridays Website - Derek's Gold Mastery Guide, The Real Way to Collect Gold

Hey

Each week I have brought you a couple of good websites on the internet. This week it is a turn of one of the worst. This website is the page which is been used to market a product, that is probably very good.

Click the image for the full version or click here to visit the website.

There are many reasons why this website is one of the worst tainting the internet. For example it is all one page, look at the length of the image above. The entire website is a page. Normal people would have used a couple of pages, one for testimonials, one for the type of services it offers, one linking to the products description, another page linking to the authors contact address.

This of course poses a couple of problems. On a slow connection it would take an age to load. Even if you have a scroll wheel it would take you a couple of turns before you reach the bottom or the part of the content you want to read.

As well as this the page is also unordered. For example it sort of tells you the same type of information over and over again. In this case it is how much money you are going to make on World of Warcraft.

Finally since this is a product site, trying to sell the ebook offered, the "buy" links which you would expect to be major part of the visuals of the site are small and hidden at the bottom.

As a result this site could be improved many ways. For example it could be broken up into smaller pages. As well as make the font smaller easier to read. There is also a wealth of improvements that would make this site better.

Anyway, next week I will find a website that I will enjoy.

Creating a Modern Business Card.

A business card is an extension of your self. It is a little piece of you that you give out. In this tutorial I am going to show you how to create a stunning business card to remind people of who you are.

This tutorial will involve Photoshop although it can be done on any application. Click on any of the images for the full size version.

Step 1)

The first step is to set up the business card size. The average size for a business card is 3.5 inches x 2 inches (length x height). You can use any size you want.

Suitably name and save the file.

Step 2)

The first step is to create the front of the card. Use a suitable pastel colour. I've chose blue as that is my favourite. The next step is to add some text. Again going with the modern theme i've chosen Trebuchet MS, any suitable substitution will do.

Step 3)

For most fonts, the normal spacing doesn't look quite right. Using the character pallet tool in Photoshop squeeze the characters together. A good compact finish is what is being aimed for.


Step 4)

Most business cards have more than just a name. I've added my website, although you can add anything you want. Phone numbers, address be creative.

The colour I have used is a grey that blends into the background, you want it so you can read as see the text but isn't the most striking feature present.

Step 5)

With the lines guides shown (the light blue lines) you can see that the text characters are not fully lined up. Again using the character tool move the character spacing to a suitable size.

By having the characters lined up the name looks more eye catching, and well designed.

You may have to split up your names into separate layers to be able to align the names correctly.

Step 6)

The next step is to add some sort of logo or widget to the front of the business card. This serves as a graphical representation of you. This could be your personal logo or a shape.

I've picked by creating some circles with different colours inside them. Using the shape tool, these were drawn onto the page.



Different layers were used for different colours.

As you can see the final piece of the card looks interesting as well as modern. The next step is to move onto the back.

Step 7)

The back of the card needs to have as much white space as possible, as most people will write notes on the back, filling this up with colour and images doesn't help.

The back of the card needs to be as simple as possible. Again I have used the font from the front and suitably spaced it as required. The simple shapes that were created are used again, but smaller.


If you click the images you can see the full versions.



As you can hopefully see the business card does look stunning as is very effective. Overall this would have taken me about 10 minutes to create.

If you want more ideas for business cards you can see this post here.