Showing posts with label logo. Show all posts
Showing posts with label logo. Show all posts

Creating a Web 2.0 Logo From an Exisitng Logo

Hey

This tutorial is going to show you how to change any exiting logo into a cool Web 2.0 style logo. This is with cool gradient styles, reflections and interesting text.
For this tutorial you will need Photoshop or similar and and an existing logo (or the one provided). The Web 2.0 pack may also be useful to use, you can download it here. At any of the image you can click on them to see the full sized image.

If you are all ready and seated, lets begin.

Step 1)

The first step is to create a canvas. I use a default 500 x 500 pixel size. A large size should suffice.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 2)

Once you have your canvas find you suitable pre Web 2.0 logo. I've used Digital Points logo. Although any similar style logo would do.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 3)

Place or copy this into the canvas. This would be used as both a reference and suppling some of the shapes used.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 4)

Use the magic wand or the marquee tool to select the logo. In this logo it is the black shape on the left. I've copied this onto a new layer.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 5)

Enlarge and position on the canvas. I've enlarged the image so you can do some fine deatiled work. It can be repositioned later,

Creating a Web 2.0 Logo From an Exisitng Logo
Step 6)

These steps are used to apply effects to the logo. If you download the Web 2.0 pack, you have some of the cool styles already included.

This step involved picking a cool layer style and adding some after effects.

Creating a Web 2.0 Logo From an Exisitng Logo
One thing that is predominantly used is a drop shadow. I prefer a large dark fuzzy shadow. You can change it to suit as needed.

Creating a Web 2.0 Logo From an Exisitng Logo
Creating a Web 2.0 Logo From an Exisitng Logo
Creating a Web 2.0 Logo From an Exisitng Logo
Looking good. Photoshop is great for this kinda of work. The next step to mimic the work is to add some text.

Step 7)

Web 2.0 text uses a lot of Trebuchet MS, Tahoma and similar sans serif font. Take your pick.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 8)

Again use the Web 2.0 styles to add a layer style. Although this can be done manually having a preset style is quicker to do.

Again in the style of the original i've picked green.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 9)

Again add a small drop shadow to add effect.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 10)

This step is a little tricky if you haven't done this before. This involves creating a reflective drop shadow.

First select and duplicate the layer.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 11)

Reflect the layer vertically and position underneath the original. Slanted logos always look good in this configuration.

Creating a Web 2.0 Logo From an Exisitng LogoStep 12)

Apply a black to white gradient to remove parts of the image. Go Layer > Layer Mask > Reveal all. Added areas of black remove parts, white stays the same.

Creating a Web 2.0 Logo From an Exisitng LogoStep 13)

This is an optional step which you can do later. Crop the image to a more suitable size.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 14)

One of the little features of the original was the little black bars. These are copied from the original although if needed by they could be recreated. Position as necessary.

Creating a Web 2.0 Logo From an Exisitng Logo
Step 15)

The effects look cool. Although with time this could be improved such as the outline of the image It isn't a bad job for 10 minutes work.
Digital Point Logo

Hundreds of Web 2.0 Layers and Gradients

Continuing on the Web 2.0 theme, I have found and complied a large collection of about 200 + web 2.0 gradients and layer styles. These are great if you want a helping hand at creating buttons and layer styles for you website.

You can download the pack here.

For example the image below was a speech bubble shape with a layer style added. An amazing effect done in a couple of seconds.

Hundreds of Web 2.0 Layers and Gradients
As you can see from the preset manager there is a lot of style to chose from to get the best from you creations.

Hundreds of Web 2.0 Layers and Gradients
Hundreds of Web 2.0 Layers and GradientsTo install go Edit > Preset Manager > Gradients or Layer Styles > Import

You can download the pack here.

Cool Icons Of The Web 2.0 World

Every time you visit a business or some times blogs website most of the time they have and eye catching logo or banner. These are know nowadays as web 2.0 logos. 2.0 being the second generation of the internet after the .com bust.

Below is a selection of the best Web 2.0 logos which I thought were some of the best out on the intertubes.

Website Grader

Website grader
One of favorite websites at the moment this logo is a real star at what can be done to show how cool a logo can be.

9Rules

9 rulesAnother cool logo, this one with a background image and plenty of colour, nothing is worst than a dark monotone logo.

Campfire
Camp fire nowCamp fire is business chat for groups, or so the description says. This logo is a top job for making something look interesting.

Designers Mind

Designers mindOne of my favorite design blogs, and this logo certainly does the website justice.

Veerle's Blog


 Veerle blog
An amazing website with a striking logo. Its one to be proud of.

Pando

 PandoThis websites the features of 3D and shading more than the previous, a very interesting logo.

Spongecell
sponge cell
Probably one of the only web 2.0 that utilizes, and object into there logo name. Again, funky looking and a great logo.

Shutterfly

shutterfly
What makes a striking logo is always little widgets or vector art that is used to add more interest to the text. The little colors and circles make this logo stand out.

Pingoat

PingoatOne of my favourite websites at the moment on the internet. This logo is fun and interesting to look at.

If you found any more cool looking web 2.0 logos, or want to share your views please leave a comment below.