In this blog, Ill be creating a nice blue website logo based around the text "web 2.0".
To create this, you will need a copy of adobe's photoshop. Im currently using adobe photoshop cs3.
Step One
To start with, open up Photoshop and create a new image 600px wide by 500px height. You should take into account that you can always resize an image to make it smaller without loosing image quality, however, if you try to increase its size, you may get pixalating.
You can have any background color you want, Ill be using a very dark gray (#191919) to make the text even more vibrant.
Step Two
Now, you first need to create the basic text. Again, ill be using the test "web 2.0" just as a default, but you can use anything you want.
Select the text tool on the left hand toolbar, click the center of the image and enter the text you want.
You can have the text color anything you want at the moment, as this will be lost during text transformation.
I've gone with a white font, using Futura Hv - Heavy at size 60pt.
Step Three
Now we're gonna put some color into the logo. To do this, we're going to need to think about what color you would like it. Web 2.0 Logos use a nice vibrant gradient to create a distinct look. In this example, ill be using blue.
So, make sure the layers window is open. To do this, click window on the menu toolbar, and click layers. This should open up a layers toolbox.
You should currently have 2 layers. "Background" and a text layer. Right click the text layer, and click blending options.
In the new window that appears, click Gradient Overlay, ensuring the box is ticked, and the tab is open.
This is where you select the color gradient you will be using. In my example, we will be using a dark blue to blue gradient. If you wish to use this color scheme enter the values which are in the picture below.
Note: If you want another color scheme, you can use the values in the picture below, and change the color scheme later in the tutorial.
Where it says Gradient it should have a small linear color gradient. Click this once to bring up the gradient editor.
Window 1:
Window 2:
Once you've entered the required color values, click "OK" to commit and close the window. When your returned to the "Blending Options" screen, ensure that the "Reverse" checkbox is ticked.
Step Four
Ok, so now you've got a good color gradient going on. Remember, the darkest color should be on the top of the text, with it going to a lighter color further down. If its the other way round, open up blending options and tick the "reverse" checkbox mentioned at the end of step 3.
Ok, so now we have to give it a gloss effect. To do this, ensure the "layers window" is open. Hold down the "ctrl" button on your keyboard. Now, click the text layer preview on the layers window.
If you are confused, look at the image below. This is the layers window. You should click the area marked by a red square while holding down the ctrl button.
Doing this should select the text on the main image only. Once you have done this, and the text is selected, click the Eliptical Marquee Tool using the left hand side toolbar. To do this, right click the marquee button to bring up a list of other options. (See image below)
Now, with the eliptical marquee tool selected, ensure the "Intersect with selection" button is pressed. This is located just below the menu toolbar:
This will allow you to select certain parts of the text important to give it that glossy feeling.
Now, this part may take a few attempts to get right. You need to make a selection on the text using the eliptical marque tool.
This tool will create an oval selection based on whats already selected. You need to get the bottom center of the oval the be in the middle of the text with it rising slightly on each side.
The image below will help you choose places where to start your oval and where to end it:
After doing this, you should be left with a selection much like below:
Alternatively you can use the rectangular marquee tool instead of the eliptical marquee tool to give you a straight selection instead of a curved one.
Step Five
Now, don't click anything! Ensure that your partially selected text is still selected. Select the "Move Tool". This is the button located to the right of the "eliptical marquee tool".
With this tool selected, click inside the selected area. Now, click "Edit on the main menu (Next to file), and select "Copy Merged". This will copy the selected area only.
Now, click "Edit" again, but this time, select "Paste". You may not notice anything different at the moment. But you will.
Go back to your "Layers window". You will have a new layer called "Layer 1" which is on top.
Right click this layer, and click blending options. This time, instead of selecting "Gradient Overlay", click "Color Overlay". The default color is red. Change this to white (#ffffff). This should now change your once selected aread to a solid white color.
Click OK and go back to the original image. Now, in the layers window, there should be two sliders. Opacity and Fill. On the opacity slider, enter 12-25% you can choose how much opacity you want.
Your image should now look like the one below:
Step Six
Ok. So its got a kinda glossy feel, however something else needs to be done. We need a decent border.
So go back to the original image and open up the layers window.
Right click the original text layer (Not the gloss layer). On the new menu that appears, go back into Blending Options. Now, at the bottom of the tabs on the left, click Stroke. This will create a border around the text.
Ensure the stroke structure is as below:
Next, below the structure settings, it will have a "Fill Type" drop down box. Click "Gradient.
New settings will appear. Click the gradient that appears. This will bring up the "gradient editor".
You will need to create a 5 part gradient now. This is simple. All you need to do, is enter what you see in the image below. Each color tab is spaced 25% from each other, and i will be using the color #424242 as the darker gray and #7f7f7f as the lighter gray.
These two colors need to alternate. So, click on the first color tab, and enter #424242. Then click in the middle of the gradient. A new color tab will appear, click and hold this new tab, and drag it left until the location reads 25%, and fill this one with #7f7f7f.
Continue doing this. And you should have a gradient editor which looks like this:
Click OK and go back to the image to review it. You may find that the border needs to be thinner. If so, go back into the stroke settings, and change the stroke size to 2.
Step Seven
Now we need to add a reflection. To do this, you will first need to merge the top two layers.
In the layers window, click the top layer (Layer 1) and while holding the ctrl buton on your keyboard, select the middle layer (Your original text layer). This will select both of the layers.
Right click one of the selected layers, and at the bottom of the new menu, click "Merge Layers".
Important Note: After merging these two layers, you will not be able to go back and edit them. So please ensure that the image is what you want.
With the combined layer selected, right click it, and select "Duplicate Layer then click "OK" in the new window that appears. You should now have two identical layers.
Select the top layer from the layers window, and click "Edit" in the menu toolbar at the top of the screen.
Scroll down to where it says "Transform. Under the new menu, click "Flip Vertical". This will flip the layer.
With the same layer selected, ensure that the "Move Tool" is selected in the left toolbar menu.
Hold down the shift button on your keyboard, and press the down arrow untill the top of the layer your moving meets up with the bottom of the original layer:
You now need to create a layer mask. Open your your layers window again, and make sure that layer that was flipped upside-down is highlighted. Then click the Mask button.
Step Eight
Now, you should have created the layer mask now.
Right click the Paint Bucket Tool in the left hand side toolbox. This will allow you to select the Gradient Tool. Select it. And click the gradient under the menu tool bar:
This will open up the gradient editor again.
First, on the tile buttons at the top of the window, click the second from the left (as shown in the image). Next, you need to click the first color tab in the gradient bar.
This color needs to be the same as your background color. In this case, my background color is #191919.
Once you've done this, click OK to take you back to your image. Select the upside-down text layer. Now, your cursor should be a crosshair.
This part is tricky. Click the bottom of your upside-down text and hold the button down. Drag your cursor towards the top of your original text. As you drag, you should see a vertical line appear. Once you've done this, let go of the mouse button. This will blend the upside down text into the background color.
The next step is to reduce its opacity.
Select the upside-down layer in the layers window. And like before, slide the opacity slider to around 20%. This should make it more like a reflection.
The last step is to create a drop shadow.
Step Nine
Click the original text layer (The layer which doenst contain the upside-down text), right click and go back into blending options.
Click the first left side tab which says Drop Shadow.
Enter the settings as shown in the image below:
Click Ok to commit the changes. And there you have it, a decent, web 2.0 logo.
discuss this topic to forum
