Creating Web 2.0 Effects With Photoshop, Part 1 Article

The visual style that has come to be associated with the term Web 2.0 has exploded in popularity; everywhere you look, corporate sites, web service sites, ecommerce sites, and even personal blogs are making use of clean, minimalist design coupled with fancy graphic effects. If you’d like to jump on the bandwagon, this is the article for you! Using Photoshop, I’ll show you how to add Web 2.0 graphic goodness to your site design using non-destructive techniques. It may even take your site from boring to trendy!

I won’t assume too much, nor should it matter if you’re not using the latest version of Photoshop. If you’re a Photoshop veteran, no doubt you’ll be happy skimming through the first few tips while we cover the basics. But I’ll be surprised if Photoshop whizzes don’t learn at least something along the way.

Oh, and one other thing — whenever I mention a tool for which a keyboard shortcut can be used, I’ve indicated that shortcut key in parentheses. If you’re a keyboard junkie, you’ll know that mastering these shortcuts is a real time-saver.

Let’s get started then, shall we?

Creating a Simple Gradient

One of the easiest effects to achieve in Photoshop is the subtle gradient. Looking at any mix of Web 2.0 sites, you’ll see gradients used as page backgrounds, behind a top banner or header area, on interface bars, and in different shapes (see starbursts, below).

One of the easiest ways to make a gradient effect is to apply a layer style to an existing layer. Here’s a quick series of steps for creating a rectangle that has a gradient.

1. Set a base color for your rectangle by clicking the color patch in the toolbar, as shown in Figure 1, and selecting the color that you’d like to use.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

2. To create a rectangle shape, select the rectangle shape tool (keyboard shortcut: U) and draw a rectangle on your canvas by clicking, dragging, and releasing, as illustrated in Figure 2.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

3. In the Layers palette, click the layer effect icon and select Gradient Overlay, like I’ve done in Figure 3.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

4. For a simple gradient, change the Blend Mode to Multiply and lower the Opacity to about 40%. Click OK. (The Multiply blend mode allows the black/white gradient — which you can see in the color patch — to simply darken the existing color. Lowering the opacity keeps the color from getting too dark.)

Creating Web 2.0 Effects With Photoshop, Part 1 Article

5. Figure 5 shows the completed gradient effect on the rectangle. What’s particularly handy is the fact that you can edit the effect at any time by double-clicking the effect icon (circled below) next to the layer name in the Layers palette.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

Variations

  • Set the blend mode to Screen in the Layer Style dialog box. This will lighten the base color instead of darkening it.
  • Click the gradient color patch in the Layer Style dialog box to edit the gradient. Drag the bottom color sliders to adjust how quickly the gradient fades.
  • Set the blend mode to Normal in the Layer Style dialog box, and click the gradient color patch to edit the gradient. You can pick one of the preset gradients, or edit and add color patches to the bottom of the gradient editor to create your own customized gradient. If you set the blend mode to Normal, the custom gradient completely overlays your shape, so it doesn’t even matter what the original color of your rectangle was!
  • You can apply a Layer Style to any layer, not just to rectangles. This means that you can apply this technique to rounded rectangles, circles, stars — you can apply a gradient overlay to anything that you create on a layer.

Creating a Background Gradient

What if you want to apply a gradient to something like the Background layer, which doesn’t allow for layer effects? Well, first fill the background layer with your desired base color. Then, change your foreground color to the new color that you want to use for your gradient. Select the Gradient Tool, which is part of the Paint Bucket flyout menu (keyboard shortcut G).

Creating Web 2.0 Effects With Photoshop, Part 1 Article

In the Options bar, choose the Foreground to Transparent gradient.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

Make sure that you have the Background layer selected in the Layers palette. Then click near the top of the Background layer, and hold the mouse button down. Hold down the Shift key (this constrains the gradient effect to the vertical axis), drag downwards, and then release the mouse button in the point at which you want the gradient to end. Your Background layer now has a gradient applied!

Creating Web 2.0 Effects With Photoshop, Part 1 Article

Creating Striped Backgrounds

Another nice Web 2.0 effect is the application of a striped background. Similar to gradients, striped backgrounds can be applied to page backgrounds, headers, banners, and shapes. They can even be combined with gradients for a stunning effect.

1. First, you need a striped pattern to work with. Create a new document that’s only 4×4 pixels in size. Set the foreground color to black and select the Pencil tool, as shown in Figure 9.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

2. Zoom in, if you need to, and draw a diagonal line like the one in Figure 10.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

3. Type Ctrl-A (PC) or Command-A (Mac) to select the entire canvas. Go to Edit > Define Pattern. In the dialog box, type a name for the brush (e.g. “Diagonal pattern”) and click OK (see Figure 10). You can close the pattern document without saving if you want — you don’t need it anymore.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

4. Create another rectangle, click the Layer Style icon and choose Pattern Overlay. Change the Blend Mode to Multiply, the Opacity to 30%, and choose your new diagonal pattern from the pattern drop-down. If your settings window looks like Figure 12, you’re good to go — click OK.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

5. As Figure 13 shows, a striped pattern is now applied to the rectangle.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

For some extra Web 2.0 goodness, apply a gradient overlay layer effect as well:

Creating Web 2.0 Effects With Photoshop, Part 1 Article

Transparent Layers

Creating layers that are slightly transparent is very easy. Simply select the layer that you want to be transparent in the Layers palette, then change the opacity level by changing the percentage or by dragging the slider. In Figure 15 below, the white rectangle has been made slightly transparent so that you can see the striped gradient background behind it — perfect for, say, a navigation bar.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

2. This creates a copy of the layer, which you can now flip upside down. With the copied layer selected, type Ctrl-T (Command-T on Mac) to “transform” the shape. You’ll see a boundary box with handles on the corners and sides appear around your layer. Click on the top handle and, holding the Shift key, drag downward to flip the text vertically like that shown in Figure 17.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

3. Double-click inside the bounding box to commit the transformation, then change to the Move tool (V) and move the layer up to meet the bottom of the original layer. Lower the opacity slightly, as I’ve done in Figure 18.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

4. To add another level of visual interest, add a layer mask to fade out the bottom part of the reflection. Click the Add Layer Mask icon at the bottom of the Layers palette. As shown in Figure 19, you’ll see a linked blank square attached to your layer.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

5. Set your foreground color to black and select the gradient tool (G), choosing the Foreground to Transparent option in the options bar.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

6. Click on the white mask thumbnail in the Layers palette to make sure you’re going to edit it, then click a little below the bottom of your reflected layer. Hold the Shift key, and drag upwards until you’re just about at the top of your layer. Release your mouse button, and you’ll see that a gradient has been completed on the mask layer, as shown in Figure 21. The black areas of the mask hide the layer, so the gradient effectively fades out your reflected layer.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

Tip: You can add a layer mask to any layer for a similar faded effect. Or, add a layer mask and then use a paint or shape tool to hide part of a layer — black will completely hide the area you paint, and different shades of grey will provide different levels of opacity!

Glassy Objects

Glassy buttons and bars are another common way for Web 2.0 sites to add eye candy to a design. Let’s start with an easy glassy bar.

1. Start with an existing rectangular shape for the base of your bar. This can be a solid color, but for added depth you may want to start with a gradient bar or even a slightly transparent bar like the gradient rectangle that we created earlier.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

2. Draw a white rectangle shape that’s slightly shorter than the base shape. This is your highlight layer.

Creating Web 2.0 Effects With Photoshop, Part 1 Article

3. Add a layer mask to fade out the bottom portion of the highlight layer, and lower the opacity to achieve a glassy highlight effect:

Creating Web 2.0 Effects With Photoshop, Part 1 Article

Creating a basic glassy button or shape involves a similar process — start with a gradient shape layer, add a white highlight layer with an appropriate shape that’s slightly smaller, then fade out the highlight layer with a layer mask. If you’d like to see a step-by-step description of how to do this, check out the excerpt from my book, The Photoshop Anthology, which uses a few different examples to describe how to create glassy buttons.

Summary

In this article, we learned a number of Photoshop techniques for creating Web 2.0 visual effects.

As you can see, creating these effects for your own site is very easy! In the next article, we’re going to add a few more techniques to our arsenal, so that you can ensure your site designs are modern and slick.

I’ve also created a master document that you can download, which includes all of these effects so that you can pick apart the layers and layer styles to better understand how it’s all done.

Replay

Category: software Time: 2007-12-26 Views: 1
Tags:

Related post

  • Creating Web 2.0 Effects With Photoshop, Part 2 2008-01-09

    In the first of this two-part series, we looked at how to create a number of Web 2.0 visual effects in Photoshop, including gradients, stripey backgrounds, transparency, reflections, and more. In this article, we're going to look at a few more effect

  • Create a Bursting Spark Effect with Photoshop 2012-05-17

    Almost anything can be made with Photoshop. All it takes is the right combination of tools to get the job done. Type is no exception, and in Photoshop, you can make your type stand out with a variety of eye-catching techniques. The possibilities are

  • How can I create a coffee cream effect with Photoshop? 2012-11-27

    Today I would like to create a coffee cup with the cream floral on it as a text by using Photoshop. It looks like you order a cup of hot cappuccino and the bartender will draw a flower with cream on the surface of coffee but now I want to make it lik

  • DesignFestival: How to Create a 3D Text Effect with Stock Photos in Photoshop 2011-12-21

    In this tutorial, I will teach you how to create a text effect with the use of photos. This tutorial should take about two hours to complete if you're already somewhat familiar with Photoshop. Preview Here's a look at the end result of what you'll be

  • Create An Icy Text Effect in Photoshop 2013-02-22

    Creating realistic effects in Photoshop is an essential skill for any designer. Creating seasonal themes and convincing imagery is something that we do every day. With the right combination of textures and filters, you can simulate just about any sur

  • How would I create this spotlight projection effect in Photoshop? 2014-12-08

    I would like to create a similar effect to this image in Photoshop. The aim is that the background and the effect colours can be changed as needed. I only need the projection part of it, I don't need the cirlce at the bottom. I mostly use vector prog

  • Create a Luminous Text Effect in Photoshop 2012-08-14

    Today I'll show you how to create a luminous text effect in Photoshop. We'll learn on the way how to manipulate the font to get the desired effect, how layer styling could help us to bring amazing results on the canvas. You will learn how to give tub

  • Is it possible to create striped array (RAID 0) with two parts on two disks (Windows 7)? 2015-10-25

    I have 2 physical disks. Part of one disk is occupied by Windows 7. I have two not allocated parts on these two disks of equal size. Is it possible to create striped array (RAID 0) with two parts on two disks (parts - not the whole disks)? How? On Vi

  • How To Create A Cool Halftone Effect With Text & Images In Photoshop 2010-01-18

    Halftone effects can bring a nice tactile effect to a web graphics, giving the impression of printed work. I'm going to show you how to create this effect in Photoshop using the Bitmap Image Mode. 1. Create a new Photoshop document with a white backg

  • How to Create a 3D Text Effect with Stock Photos in Photoshop 2011-12-20

    In this tutorial, I will teach you how to create a text effect with the use of photos. This tutorial should take about two hours to complete if you're already somewhat familiar with Photoshop. Preview Here's a look at the end result of what you'll be

  • Create a Reusable CSS Menu with Photoshop 2012-02-13

    In web design and development, you'll find that there are many different techniques to meet a given goal. Some are good, and some are great, but as long as your chosen method works well and looks good, you should use it with confidence. To complete a

  • Create Rich, Detailed 3D Typography With Photoshop CS6 2012-07-24

    Photoshop has always been a great tool for creating cutting-edge imagery. You can merge images together, create digital artwork, matte paintings, correct images, or create just about any type of artwork from scratch. 3D was integrated in the previous

  • Create a Flaming Text Effect in Photoshop 2012-09-27

    One of the hardest effects to recreate in Photoshop is fire. Flames are random and behave unexpectedly. One of the most difficult aspects of creating something out of flames in Photoshop is blending the fire effects with an object or text. It is diff

  • Create a "Lomographic" Photography Effect in Photoshop 2013-09-30

    The "Lomography" photo effect is a popular contrarian photographic style characterized by oversaturated colors, distortions, unexpected prismatic effects, and several other qualities that are usually avoided or corrected by traditional photograp

  • How to Create a Torn Page Effect in Photoshop? 2011-07-25

    I saw an image as the 404 error in CSS Tricks, and I wondered how to create such an effect in Photoshop. --------------Solutions------------- That image is a combination of torn paper and page curl. Spoongraphics.co.uk has excellent tutorials for bot

  • How to create this fading shadow effect in photoshop? 2011-12-30

    I would like to know how to create this shadow effect in photoshop. I know how to make shadow in photoshop but don't know how to make this fading shadow on the left and right side in the image. --------------Solutions------------- There's no automate

  • How do I achieve a long shadow effect with Photoshop? 2011-12-30

    I would like to know how to create this shadow effect in photoshop. I know how to make shadow in photoshop but don't know how to make this fading shadow on the left and right side in the image. --------------Solutions------------- There's no automate

  • How to Create a Gooey Text Effect in Photoshop 2012-02-05

    In this tutorial, I will teach you how to create a text effect with gooey splatters in Photoshop. This tutorial should take about one to one and a half hours to complete if you're already somewhat familiar with Photoshop. This effect would be perfect

  • Creating a Flashing Text Effect with jQuery 2013-01-16

    Sometimes you need a nice effect to boost your website's look and feel, and catch your visitors' attention. There are many free and ready-to-use plugins out there that can enhance the style of your website. This tutorial will guide you through the de

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 1.035 (s). 13 q(s)