Designing a Web 2 0 Logo in Photoshop CS3

 

 

I will walk you through creating the logo for the black background and then I’ll show you how you can change a few things around to make it be for a white background.

First we will start with a black background canvas about 300 X 300 pixels.
Type the word or words you want to use for your logo. I’ll use the word “logo” in small caps sinse Web 2.0 style seems to use a lot of all-small-caps logos. The font I am using is Arial Rounded, 72 px. Rounded letters are also a Web 2.0 sign so we’ll stick with that.

Now I am going to give the logo a gradient fill. To do this we I will double-click the layer to go into the Later Style window.

In the Layer Style window, check and select the Gradient Overlay option in the left menu. Click on the black and white Gradient box to change the gradient colors.

In the Gradient Editor window click the top-left Preset box (black and green).

Click the left-bottom (lighter green) slider on the big gradient adjustment bar to adjust the color of the left side then click the Color box down lower.
Once you got one side to the color you want then do the same thing to adjust the right side. When satisfied with the colors you chose click OK. Notice that you can see your project behind this window change colors as you adjust them here.

Here is what we have now. You want the darker color on the top and the lighter color at the bottom. Don’t be afraid to have the wide contrast, the more contrast in the gradient the deeper the color will look when done.

Now we’ll add the white outline by checking and selecting the Outer Glow style. Set your Blend Mode to Lighten and click on the box under the word Noise to set the color to White, Opacity to 100%. Spread will be 80% and Size – 13px. Click OK.

You have a nice outline.

We’re going to create the highlight effect for the letters now and we’re going to need a new layer for that.

Make a selection of the letters by holding down Ctrl and clicking on the logo layer.

Then with the letters selected go to Select in the Tool Bar and lick Modify and Contract.

Contract the selection by 1 px.

Now usine the Rectangular Selection tool cut off lower half of the selection by holding down the Alt key while selecting the lower half of the selection.

With the upper half selected change the main color to White by clicking on the color box.

Select the Gradient Fill tool and click the Gragient box at the top to see the Presets menu. Select the second Preset, the one that has color to transparent gradient setting.

Fill the selection starting about halfway of the letter “L” and drag it down in a straight line about to the bottom of the white outline of letter “L”.

Select both layers by holding down Ctrl and clicking each layer, then click the chain link looking icon at the bottom of the Layers Palet. Now to merge them click Layers on the Tool bar and Merge Down.

We’re going to duplicate this layer to make the reflection. Click Layer on the Tool Bar and Duplicate Layer.

Then Do Edit, Transform and Flip Vertical.

Drag the reflection down to where it’s top is just barely touching the bottom of the logo.

Adjust the Opacity of the reflection layer to 30%.

This is already starting to look good.

Use the Eraser Tool to erase the bottom half of the reflaction. Adjust your Eraser Brush to 65 px in diameter. Opacity 37%.

Make it look about like this. And here is your final logo.

You can also add another layer of an outer glow by Rasterizing the Logo layer and adding a Layer Style to it. To Rasterize the logo Layer create a new layer, then join and merge it with the logo layer. This will Rasterize any of the current layer styles and make them all a part of the image. Now you can double-click the layer and add another Outer Glow. I am using a blue color with 100% Opacity, 18% Spread and Size of 18 px.

I turned off the reflection layer to see how it looks without it.

Here is one with the green outer glow.

To make the white-background version of this all you have to do is fill the background layer with white color and then you can change the last Outer Glow layer effect to gray color and play with the size and thickness sliders to make it look nice.

This was brought to you by Valik Rudd of wbDesignIdeas.com. Enjoy.

You Might Also Like:

• Simple Web 2.0 Text Logo Tutorial in Photoshop CS3
• Page Layout Using CSS
• Web 2.0 Logo Design Example
• Easier Way To Create an Illustration
• My Web 2.0 Logo Design Idea