Designing Page Elements


Follow the exercises in this chapter to become accustomed to designing for the Web by using Photoshop and ImageReady. In this section, you ll build a few types of Web graphics.

Creating a Margin-Style Background in Photoshop

A margin-style background is a common visual element that helps unify the design of a Web page. It serves as a visual compass because it fills the entire vertical depth of the document no matter how tall it might be. Furthermore, a margin can help establish the ordered division of information by separating the background into vertical blocks. It is also a perfect way to infuse the page with interest and character by adding a splash of color or texture.

A margin background is simply a pattern that is configured so that the image repeats vertically but not horizontally. Because all Web backgrounds tile from the upper-left corner into the available space, you have to ensure that you create a strip long enough so that the tile doesn t appear to repeat along the horizontal axis.

To create a margin-style background:

  1. Choose File New.

  2. Name the file Margin .

    Don t worry about the gif , jpg , or png extension at this point. Because the default Saving Files preferences is Append File Extension, Photoshop will automatically add the extension when the document is saved.

  3. Enter a width of 1070 pixels and a height of 60 pixels (see Figure 25.5). The width of 1070 pixels in this image ensures that the image will not repeat at monitor resolutions of 1024 —768 or lower. However, at higher resolutions , you run the risk of the image repeating. For this reason, some Web designers prefer to set their margin background widths to 1280.

    click to expand
    Figure 25.5: Choosing margin-style background settings in the New dialog box

  4. Set the resolution to 72 pixels per inch.

  5. Choose RGB Color for the mode.

  6. For Background Contents, choose White. Ignore the Advanced button for now.

  7. Click OK.

Now, fill a portion of the file with color:

  1. Click the Rectangular Marquee tool to display its settings in the Options bar.

  2. Choose Fixed Size from the Style list; enter 108 px for the width and 60 px for the height, as shown in Figure 25.6.

    click to expand
    Figure 25.6: Choosing the marquee size

  3. Click the image in the upper-left corner of the document.

  4. Open the document margin_texture.psd from the ch25 folder on the Photoshop CS Savvy CD.

  5. Choose Select Select All. Choose Edit Copy.

  6. Click on the margin document title bar or choose Window margin_texture.psd. With the Rectangular Marquee still active, choose Edit Paste Into.

  7. From the Swatches palette list, choose Web Safe Colors (see Figure 25.7). Click a light color to choose it.

    click to expand
    Figure 25.7: Choosing a color from the Swatches palette

  8. In the Layers palette, target the Background.

  9. Press Option-Delete (Mac) or Alt-Delete (Win) to fill the marquee with the foreground color.

You can now choose what to do with the file:

  • Save the file in native Photoshop format, layers intact, for future use or modification in Photoshop (always recommended).

  • Save it for the Web in GIF, JPEG, or PNG format (see Saving for the Web later in this chapter).

  • Import the file into ImageReady for processing.

  • After the file is optimized, load it into your HTML editor as part of your Web page. When the image is loaded as a background, it will repeat vertically as a pattern and appear to be a continuous design down the depth of the page (see Figure 25.8).


    Figure 25.8: The margin-style background as a Photoshop document

  • When you open the Web page in the browser, it appears as a seamless margin, as in Figure 25.9.

    click to expand
    Figure 25.9: The margin-style background as it repeats vertically in the browser

start sidebar
CHOOSING A WEB-COMPATIBLE COLOR

There are three ways to choose colors that are Web-compatible:

  • Choose Window Swatches. From the pull-down list in the upper-right corner of the palette, choose Web Hues, Web Safe Colors, Visibone, or Web Spectrum. Any of these color palettes displays the 216 Web-safe colors; the palettes consist of the same colors organized differently. If you hover your cursor over any color in the palette, its hexadecimal name will be displayed.

  • You can click the foreground color in the Tool palette to reveal the Color Picker and check the Only Web Colors box. Move the slider on the color bar to scroll through the hexadecimal hues and then pick a color from the color field.

  • Choose Window Color. From the pull-down list in the upper-right corner of the Color palette, choose Web Color Sliders. Drag the sliders to pick a color.

end sidebar
 

Creating a Seamless Background in Photoshop

An alternative to the margin-style background is a background-repeating tile, also referred to as wallpaper. In most cases, you will want the pattern to be subtle so as not to compete with the information that floats on top of it.

Wallpaper patterns were the first wave of background graphics. You ve probably seen lots of them, in all kinds of styles. They can be problematic for a number of reasons: if they re too dark or busy, for example, they interfere with the readability of images and hypertext. They re also demanding on the designer ”making them completely by hand takes a bit of skill.

If you design them properly, however, seamless backgrounds can create an extremely attractive look for your site. The following are some general guidelines to use when creating tiles:

  • Individual tiles should be at least 50 pixels by 50 pixels.

  • Do not interlace background graphics.

  • Use light colors so that images and text will float on the background.

Follow along to create a tile by using Photoshop:

  1. Open the file Web_Clouds.psd from the ch25 folder on the CD.

  2. Display the Layers palette. Choose Layer New Layer From Background.

  3. Name the new layer Clouds 1 .

    click to expand
  4. Drag the Clouds 1 layer to the New Layer icon to create a new duplicate layer. Name the layer Clouds 2 . Repeat the process two more times, naming the additional layers Clouds 3 and Clouds 4 .

    click to expand
  5. Choose Image Canvas Size, and increase the width and height of the canvas to 200 % (see Figure 25.10). Anchor the image in the upper-left corner of the canvas. Don t worry about the Canvas Extension Color. Click OK.

    click to expand
    Figure 25.10: Canvas Size dialog box

  6. Target the Clouds 2 layer. Choose the Move tool and drag the layer to the upper-right of the document.

  7. Choose Edit Transform Flip Horizontal.

  8. Target the Clouds 3 layer. Choose the Move tool and drag the layer to the lower-left of the document.

  9. Choose Edit Transform Flip Vertical.

  10. Target the Clouds 4 layer. Choose the Move tool and drag the layer to the lower-right of the document.

  11. Choose Edit Transform Flip Vertical, and then Edit Transform Flip Horizontal.

  12. Zoom in close to the document to ensure that the layers butt up against each other and that there is no space between them. If there is, choose the Move tool and nudge them into place with the arrow keys. The image should look like Figure 25.11.

    click to expand
    Figure 25.11: The seamless background tile

  13. From the Layer Options pull-down list, choose Merge Visible.

  14. Move the Opacity slider to 50%.

  15. Save the document as a JPEG by using the Save For Web feature. (See the section titled Saving for the Web later in this chapter.) When displayed on the browser, the background should look like Figure 25.12.

    click to expand
    Figure 25.12: The seamless background on a browser

Using ImageReady s Tile Maker

ImageReady has a built-in tile maker that can help smooth out some problems that you might encounter when creating continuous, or seamless, background images. One such problem is that if each tile s edge is slightly different, those edges will show where the tile repeats. The effect is somewhat disturbing !

To correct or avoid this problem:

  1. If Photoshop is running, click the Edit In icon in the Tool palette to open ImageReady. Open the file Tile.psd .

  2. Select Filter Other Tile Maker. The Tile Maker dialog box appears (see Figure 25.13).

    click to expand
    Figure 25.13: The Tile Maker dialog box

  3. Click the Blend Edges radio button. You can select the amount of pixels for blending; I ve left it at the default of 10%. I ve also left the Resize Tile To Fill Image option checked. This expands the file where necessary to make the blending as seamless as possible.

  4. Click OK.

  5. Optimize and save your file.

You can now view your file within an HTML page or import it into GoLive to begin designing your page. The result is a smoother, more attractive background (see Figure 25.14).

click to expand
Figure 25.14: The original image (left), and the image after the Tile Maker has been applied (right)

Creating Kaleidoscopic Tiles in ImageReady

While working to make your background tile seamless, you might have noticed the Kaleidoscope Tile option in the Tile Maker dialog box. This is a neat background effect with endless design possibilities.

To create a kaleidoscopic background:

  1. Open or create an image. You can start with the textured tile developed in the previous section.

  2. Choose Filter Other Tile Maker. When the Tile Maker dialog box appears, click the Kaleidoscope Tile option.

  3. Click OK to create your tile (see Figure 25.15).

    click to expand
    Figure 25.15: A kaleidoscopic tile

  4. After you are done with the kaleidoscope effect, you can blend the edges of the tile. Select the Tile Maker filter again and blend the edges of the image for smooth results (see Figure 25.16).

    click to expand
    Figure 25.16: The kaleidoscopic background tile on a browser

Note  

You can use a wide range of effects and source images before applying the kaleidoscope effect.




Photoshop CS Savvy
Photoshop CS Savvy
ISBN: 078214280X
EAN: 2147483647
Year: 2004
Pages: 355

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net