Slick, reflective Web 2.0 icons and graphics can bring your Web site firmly into the 21st Century. Here’s how to spruce up your Web graphics.
Web 2.0 is a buzzword that has been used to describe new trends in Web development and design. While some see it as cliché, it has definitely been widely adopted across the Internet.
With Photoshop, these new design styles can be fairly easy to create. The goal here is to teach the method for creating these styles and not just how to create a specific image, allowing you to use your own creativity.
Web 2.0 itself is a term used to define Web sites that are based around user- created content. Blogs with trackbacks and comments, Myspace, Facebook, and YouTube are prime examples.
What many of them feature is an adopted reflective, aqua-style of graphics – first widely seen in Apple’s Mac OS X operating system. The style has risen hand-in-hand with Web 2.0 sites as an iconic signature style.
01. The first step is to create some Web 2.0-style gradients. Create a new Gradient Fill Layer by going Layer > New Fill Layer > Gradient... or use the Fill Layer button at the bottom of your Layers palette.
Inside the Gradient Fill dialog box, click on the Gradient colour bar to bring up the Gradient Editor. Click on the Foreground to Background preset in the Presets box to reset the Gradient Editor. This is usually the first preset in the list. To make this more flexible, I’m going to use variations of grey, though you can use the colours you would like.
02. Click just below the Gradient editor bar to add two more markers for a total of four. I’ll refer to them as Markers 1 to 4, from left to right, respectively. Click on a Marker and then click the Color box to bring up the Color Editor.
Here are the settings I used, feel free to choose your own: Marker 1: #363636; Marker 2: #404040; Marker 3: #565656; Marker 4: #767676. Select Marker 2 and change the Location to 50%. Do the same with Marker 3. Type in a Name for your Gradient and click New to save it.
03. If you created a grey gradient and would like to add some colour, create a new Solid Color Fill Layer by choosing Layer > New Fill Layer > Solid Color... or, again, use the button at the bottom of the Layers palette.
Try choosing a bright colour and set the Layer Mode to Overlay. You can play around with different colours and different Layer Modes. That’s really all there is to creating the Gradient effect.
04. The reflection effect is most commonly used with text, but can be used for almost any object. We’ll start with some raw text. Select the Type tool 'T‘, select your font and create your text. Make sure your document size is at least twice that of the object you’re reflecting. Duplicate the Text Layer by pressing Ctrl + J
05. Press Ctrl + T to bring up the Free Transform on your duplicated Layer. Right-Click within the Free Transform binding box and choose Flip Vertical. Drag your flipped Text Layer down to match the bottom of your original Text layer. Press Enter to apply the Free Transform.
06. The next step is to apply a Layer Mask to your flipped layer by Layer > Layer Mask > Reveal All clicking on the Add Layer Mask button at the bottom of the Layers palette. With your Layer Mask applied, you shouldn’t see any difference in the image, just the icon in your Layers palette.
07. Press D to reset your colours. Choose the Gradient tool ‘G’ and select the default Foreground to Background gradient. While holding Shift, drag the gradient tool from top-to-bottom until you get the desired reflection. You may have to start the drag outside of the document area, or try selecting a Grey Foreground Color to get a better effect.
08. This step is optional, but I’ve seen this effect altered a bit on several occasions. If your Reflection layer is Type, you first have to Rasterize it by going Layer > Rasterize > Type. If it’s not Type, you can ignore that. Press Ctrl + T to bring up the Free Transform Tool.
Right-click inside of the Bounding Box and choose Perspective. Click and drag one of the lower corners outward. Right-click again and choose Scale and bring the bottom of the reflection up to shrink it a bit.
09. Photoshop has an easy way to create rounded rectangles, but I find that it doesn’t work in all situations or will leave unclean lines. This method is a few more steps, but usually comes out a bit cleaner.
You can start by creating a regular square selection with the Rectangle Marquee tool smaller than your document. Then create a new Solid Color Fill layer by going to Layer > New Fill Layer > Solid Color.
10. Create a slight blur by going to Filter > Blur > Gaussian blur. The amount of blur you add will be relative to how rounded you want the corners. Smaller blur (pixels) will create less of a rounded corner while higher will be more rounded. The usual blur amount is 2.0 to 4.0 pixels.
11. With your blurry square selected in the Layers palette, bring up the Levels Adjustment dialog box by pressing Ctrl + L. In the very left box, with the default value of 0, set the value to 115. Leave the middle value at 1.0. Set the third value, default 255, to 135. This should give you nice rounded corners, while keeping the box dimensions the same.
12. Getting a good diagonal pattern can be a bit tricky sometimes, so this may take some practice to get it perfect. Create a New Document Ctrl + N with a width and height of 25-pixels. Press Ctrl + D to reset your colours. Let’s make an 8-pixel thick line. Select the Line Tool 'U'. In the Options Bar check Fill pixels, set your Weight to 8px and un-check Anti-alias.
13. Create a new Layer in your document by pressing Ctrl + Shift + N. Now would be a good time to zoom in to around 600% or so. With the Line tool still selected, hold the Shift key and draw your line from the upper-right corner to the lower-right corner. To best make sure your line was drawn directly down the centre of the diagonal axis, put the centre of your cursor directly on the corner of your document.
14. With the Line tool still selected, align the centre of your cursor with the lower- right corner of your document. While holding Shift, drag a line at a 45-degree angle to the upper-right. Align the cursor with the same corner and while holding Shift, drag a 45-degree angle line to the lower left. Do the same in the upper-left corner.
15. Hide your Background layer by clicking the Eye icon next to it in the Layers palette. Press Ctrl + A to select the whole document. Go to Edit > Define Pattern and enter in a pattern name you will remember. Your pattern is now ready to use.
16. These steps will be nice and short, as all of the techniques are explained above. Create a new Gradient Fill Layer by Layer > New Fill Layer > Gradient. Choose the Web 2.0 Gradient you made before. Add a 2-pixel stroke by going Layer > Layer Style > Stroke. Choose a colour that blends with your gradient nicely. Now round the corners of the Fill Layer.
17. Add your Type Layer and reflect it. In the Layers Palette, click on your Gradient Fill Layer to highlight it, then hold the Ctrl key and click on that layer’s Layer Mask to load it as a Selection. Create a new Pattern Fill Layer by going Layer > New Filler Layer > Pattern.
Create another new Gradient Fill Layer above your Pattern Layer and choose colours similar to your Web 2.0 style gradient. Press Ctrl + G to create a clipping mask. Adjust the Opacity of your Pattern Layer until it blends in a bit.
01. If you want to get a little closer to the action without the distraction of desktop clutter, press F to cycle between three different Full Screen modes (or use the buttons near the bottom of the Toolbar). Press Shift + to toggle the menus in Full Screen Mode.
02. A tutorial such as this can require a lot of close zooming. You can save significant time by creating a second view > New View). Zoom in one of your views and leave the second at 100 per cent. What you do on the zoomed window will be shown on the 100 per cent window as you work on it, giving a live update.
Who: Tommy Maloney started his Photoshop career with Photoshop 2.5. After working for some of the biggest names in the Photoshop-industry, he created www.photoshoplab.com as a creative outlet and Web development.
Software: Adobe Photoshop
Time to complete: One hour
On the CD or download: All files for this tutorial can be found on the cover CD or can be downloaded here