Creating a Photo Composition in Photoshop 6
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
You can download the files for this tutorial at www.mitomediabooks.com.
If you're interested in seeing the final result, check out www.basilio.org.
Figure 1 The photos were taken by Tom Behrens.
){kind=link}
Creating a Photo Composition
Many Web site designs are a combination of one or more photos and graphical elements. In this tutorial I'll show you some of the basic techniques for working with layers and layer masks to create such photo compositions.
-
Create a new document that is 630x440 pixels. The design is compact, almost like a CD-ROM interface, because the Web site doesn't have much content to display, and what content there is will later appear in a frame.
Figure 2 If you paste the images into the new document, they will be placed on a new layer automatically. If you use the Free Transformation command, the layers are scaled and arranged.
- The background is composed of four images. You can import the images for the photo composition simply by opening the images, selecting everything (Select > Select All), and copying to the Clipboard. When it's pasted into a new document, the image will automatically be placed on a new layer. Since all the images are too big, they need to be scaled and placed with Edit > Free Transform.
- You'll need to use layer masks to blend the four layers into each other. To create a layer mask for an activated layer, use the Layer > Add Layer Mask > Reveal All command. Then use the Airbrush and a black foreground color to paint the areas of the layer mask that should blend with the layer below.
- Using blending modes, you'll blend the four layers with the background layer, but first you need to fill the background layer with a color-#FF9933, a bright orange-by clicking on the foreground color in the Tool palette and selecting it in the Color Picker.
- Lastly, you'll create the text layers and buttons. For the text layers, use the Text tool and click on the document. Some of the text layers use the Outer Glow effect so that they'll stand out more. Create the navigation buttons at the top and the bottom by drawing the shapes on their own layer with the Rectangle tool (the blue color is #333366, the brown #660000).
){kind=link}
Figure 3 The photo composition consists of four images.
){kind=link}
){kind=link}
){kind=link}
Select the background layer and fill it with the Paint Bucket tool. Then select all the other layers and change the blending mode to Overlay (only the layer with the desk is set to Darken). Now, all the layers blend together with the orange background. You can adjust their overall opacity using the Opacity slider in the Layers palette. It might be necessary to do some more work on other layer masks, because now areas that were covered by the layer above might be visible. The background is basically finished. To organize the layers, create a new layer set by clicking on the folder icon at the bottom of the Layers palette. Drag all the layers into this folder.
Figure 6 Blend the layers using layer masks.
){kind=link}
Figure 7 After all the layer masks are in place, change the blending mode to Overlay (and Darken for the layer with the desk).
){kind=link}
Figure 8 The background layer is filled with orange.
){kind=link}
In the final Web site, the text was animated with GoLive's Timeline Editor. If you want to experiment with this feature, you can take advantage of a new command that GoLive offers: Import Photoshop as Layers. To do this, save a copy of the file, delete all the unnecessary layers (the buttons, for example), and flatten the images with the background color. GoLive will place each of the text layers in a new layer automatically, so that they're ready to be animated.