• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Ensuring Visual Appeal > Creating a new prototype

Creating a new prototype

Using Photoshop CS2 (or another graphics program of your choice), create a design prototype. Remember to keep the same basic layout as your current design. This is just a facelift, not a redesign. Everything will stay in the same place. Only the graphics and colors will change. Experiment with your new colors. The following steps get you started.

To create a template to work from:

  1. Open your current Web site in a browser.

  2. Take a screen shot of it.

    On a Windows‐based PC:

    1. Press the Print Screen key.

    2. Open Photoshop and choose File⇨New Document⇨OK.

      Photoshop defaults to the same size as your screen capture.

    3. Place your cursor in the new document window and press Ctrl+V to paste the screen capture into the new document.

    On the Mac, use Grab:

    1. Choose Capture⇨Window.

    2. From the dialog box, select Choose Window.

    3. Click the browser window your current Web site is in.

    4. Save the file.

    5. Quit Grab.

    6. In Photoshop, open the screen shot file.

  3. Copy content areas of your page to use as place holders with the rectangular Marquee tool. (See Figure 4-14 .) Draw a box around a block of text and then press Ctrl+J (Windows) or ⌘+J (Mac) to make a copy of the block on a new layer but in the same place as the original.

    Figure 4-14: Use the Rectangular Marquee tool to copy content areas of your page.

    Repeat for all blocks of text.

  4. Create page layout elements with the Rectangle tool. (See Figure 4-15 .) Draw Rectangles over the banner, navigation areas, and each content block area, making sure you match the size of the elements.

    Figure 4-15: Use the Rectangle tool to draw the elements of your page.

  5. Apply the new color scheme to your page elements:

    1. With the Move tool, select the layer that contains the rectangle you're changing.

    2. With the layer selected, double‐click the layer — but not on the name or icons.

      The Layer Style palette opens; see Figure 4-16 .

      Figure 4-16: Select the layer and launch the layer style.

    3. Select the Color Overlay check box at the lower left of the palette.

      The Color Overlay dialog box appears.

    4. Click the colored rectangle next to the Blend Mode menu.

      The Color picker appears.

    5. Click in the window to select a color — drag the arrows next to the rainbow‐colored window to select different colors; see Figure 4-17 .

      Figure 4-17: Select the Only Web Colors check box if you want only Web‐safe colors to be displayed.

    6. Click OK.

    7. Adjust the Opacity or Blend mode, if desired.

      Opacity affects how transparent the color is. 100% is completely opaque; 0% is completely transparent. Blend modes affect how the element reacts to other layers and elements. Experiment with Blend modes to achieve different looks.

  6. Create a new banner, buttons, and other functional graphics.

    1. In your old Web site, rename your Images folder by adding old to the name. (For example, change the name of the Images folder to ImagesOld, or something similar.)

      By doing this, you have copies of the old images to refer to or revert to if you need them.

    2. Create a new Images folder with the same name as the original.

      This is where your new graphics go. Book IV, Chapter 3 covers making the graphics you need in a project like this.

    As you work, make sure you create graphics that are the same size as your existing ones. If you change sizes, you need to adjust your existing layout accordingly.

    Name the new graphics the same names as the old graphics and place them in the new Images folder. If you don't, the graphics won't appear on your pages because the HTML code will be trying to place graphics with the old name and location information. It is important to replace those old name and location graphics with new ones that are named exactly the same thing and are in the same folder where the original graphics were. If you don't, you'll have to manually change the file names and locations in your HTML files.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint