Tutorials' . $breadcrumb['devider'] . '' . $txt['photoshop'] . '' . $breadcrumb['devider'] . '' . $txt['web20'] . ''; /** * added by Shawn */ echo 'Passed variable link'; //Display the tutorial title. echo '

', $name['web20'], '

'; //Step One echo '

Step 1

First lets start off by creating a new file 770 pixels wide and 100 pixels tall.

  1. In Photoshop, go to File » New.
  2. Name it "web20logo" without the quotes.
  3. Width: 770 pixels
  4. Height: 100 pixels
  5. Resolution: 72 pixels/inch
  6. Color Mode: RGB Color / 8 bit
  7. Background Contents: Transparent
'; //Step Two echo '

Step 2

Press "D" on your keyboard to reset your colors to Foreground: black / Background: White. Now press Ctrl+Delete to fill your layer with white. Now in your layers pallet, double click the Layer 1 text and rename it to "white background" without the quotes. Change your foreground color to #8cd0ff. Now create a new layer in your layers pallet by clicking the new layer icon:

New Layer Icon

Double click on the Layer 1 text and rename it to "background gradient" without the quotes. Now select your Gradient Tool from your tools pallet. If it\'s currently the Paint Bucket Tool, click and hold on it then select the Gradient Tool. At the top of your screen, go to your Gradient Options and select the Foreground to Transparent gradient. Now, on your background gradient layer, using the gradient tool, click and hold at the very top of your file. Now holding Shift, drag your mouse down to the bottom of the file and then release your left moust click, then release the Shift key.

Gradient Options
'; //Step Three echo '

Step 3

Now press "X" on your keyboard to switch your background and foreground colors. Change your foreground color (white) to black. Now grab your Text Tool by pressing "T" on your keyboard. Change your font to Arial Black, 30px with Aa set to Sharp. Click on your file and type "Web 2.0 Logo" without the quotes. Move it to the left side of your file and offset it to the right a little and towards the top a little from the center.

Right click on the text layer and select Blending Options.

  1. Go to Gradient Overlay and click on the gradient. You should see two lower sliders. Click the one on the left and then click it\'s color below it and change it to #0068a3. Then click on the right slider and change its color to #57c6ff. Now hit OK.
  2. Go to Stroke and click on the color and change it to #00516f. Lower the Size slider to 1 px. Now hit OK.

Step 3 Preview
'; //Step Four echo '

Step 4

Create a new layer and name it "text glare" without the quotes. Hold down the Control key and click on the T thumbnail for your text layer. It will make a selection around your text. Change to the Elliptical Marquee Tool. Hold the Alt key and make a selection on the lower half of your text. It will remove that part of the selection. You want the curve to be long and flat and be lower on the left side of the text and very slightly climb towards the left side of your text.

Step 4 Preview

Change your foreground color to white. Grab your Gradient Tool again. Start the gradient at the lowest point of the selection and hold shift and end it at the top of the selection. Now press Ctrl+D on your keyboard to deselect the selection. On the layers pallet, reduce the fill of the text glare layer to 90%. That will soften the glare a little bit and let some of the blue show through.

Step 4 Preview B
'; //Step Five echo '

Step 5

Click on the text layer and then drag it down to the new layer icon to create a copy of the layer. Now create a new blank layer. Holding Ctrl, make sure the duplicate text layer and the new blank layer are active in the layers pallet. With both active, right click one of the layers and select Merge Layers. Rename the layer to "mirror text" without the quotes. Drag the new layer down below the original text layer in the layers pallet. Go to Edit » Transform » Flip Vertical to flip the copied layer upside down. Grab your Move Tool and press the down arrow key until the top of the upside down text is butted up against the bottom of the right side up text, ignoring the lower part of the "g".

Step 5 Preview A

Now you need to create a mask for the inverted text layer. To do this, look in the layers pallet down by the New Layer icon, you\'ll see an icon that looks like a rectangle with a circle inside of it. This is the Add Vector Mask button. With this, you can remove some of the layer without actually destroying any of its information. After you have clicked it, grab the Rectangular Marquee Tool and make a box the same height and width of the inverted text around it. Press "X" on your keyboard to flip the background and foreground colors so that black is the foreground. Starting the gradient at the bottom of the "o" in the upside down "Logo", drag the gradient to the top of the upside down text while holding shift. Then press Ctrl+D to deselect the selection. Now lower the fill of the upside down text layer to about 50% to reduce the strength of the "mirror". You should end up with your web2.0 logo.

Web 2.0 Logo Final
'; //Display the download link echo ' '; //End the tutorial echo '
'; ?>