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

Chapter 7. Creating a Web Page from a Ph... > Taking a Wire Frame to a Finished De...

Taking a Wire Frame to a Finished Design

With a complete wire frame, follow these steps to create your page layout:

  1. Launch Photoshop.

  2. Open your wire frame file.

  3. Choose your color scheme.

    When choosing colors for the Web site, check to see whether the organization has already chosen colors for its communications. If so, ask for the RGB or hexadecimal codes for the colors to ensure that you use the correct ones. Book IV, Chapter 1 has more details about the different types of colors and why you need RGB or hexadecimal colors instead of CMYK.

    Some designers advise you to use the Photoshop Eyedropper tool to get the colors from a CMYK document, but this is not a good way of getting the colors. It can be unreliable, and the resulting colors can be incorrect.

    If no set of graphics standards exists or if the site you're designing needs a unique look, you have to choose the colors yourself. If you need information about choosing a good color scheme, refer to Book II, Chapter 4. You can also make a custom palette (see Figure 7-1 ), a process that is explained further in the “Managing colors with customer palettes” sidebar.

    Figure 7-1: Create a custom palette to make the production process easier.

  4. Create place holder elements to fill in your layout.

    To create the text elements, you use the Text tool.

    1. With the Text tool (the one that looks like a capital T in the tool bar) selected, click anywhere in the work area window.

      Notice that Photoshop automatically creates a text layer for your new text.

    2. Select a font and color by using the context‐sensitive menu that appears at the top of the screen, under the default Photoshop menu bar.

      See Figure 7-2 for an example of the menu.

      Figure 7-2: The Text tool menu appears when you select the Text tool or when you double‐click an existing text layer to edit.

    3. Select a color from your custom palette by clicking the color chip in the Text menu and then clicking a swatch in your custom palette window.

    4. Click the spot in the work area where you want your text. Type the text.

      You can edit, move, and change the text later, so don't worry if it's not perfect. If you know what some of your headings are, use that text. If not, use something like Example Header so everyone understands that the text is just for example, not the finished content.

      Figure 7-3 shows the color swatches (from Step c), as well as typed text.

      Figure 7-3: Using the custom swatches to change the color of the text.

    5. Create headings of at least three sizes for primary, secondary, and tertiary headings. You will also want to apply colors, underlines, or any other special treatments you would like to apply to your headings.

      Make sure that the priority of the headings is clear — Heading 1 should look more prominent than Heading 2, which is more prominent than Heading 3, and so on.

    6. Create a fake paragraph with a font that is clear and easy to read.

      Verdana is a good font to use for Web content. At this stage, just type some nonsense so that you can see what the paragraphs will look like within your final design. Place a few of them into your design. Make sure you also place headings into the layout, too (as discussed in Step e). Doing so gives you an idea of how everything will look together. The point is to make this version of your design look more like the finished product.

    7. Create place holder buttons by using the rectangle tool to draw the shapes.

      Click the small black triangle in the Rectangle tool's area to see other shape tools. Use the Line tool to create borders for your buttons. You can start applying the text to these if you know what that text will be. After you make the button shapes, double‐click the layer that Photoshop made when you created the rectangle to launch the Layer Effects dialog box. Here you can apply drop shadows, gradients, patterns, and many other effects. Click the name of an effect to open the options for that effect.

      It's easier to create a whole navigation bar with just one rectangle, and then break it up into buttons visually with the Line tool. This way, you have only one rectangle to contend with when it comes to lining things up, changing effects, or adjusting colors.

    8. Create footer text.

      With footer text, you'll want to make it small and discreet — the text will include things like copyright information and contact information. It's important information but shouldn't overpower the rest of the page.

    9. Create banner text.

      Banner text should make a big impression. This text is going to be the name of your site, and it's part of your brand. This text must be more eye‐catching than other text on the page.

Managing colors with custom palettes

A custom palette isn't necessary, but it can certainly make things easier. It allows you to keep colors consistent throughout the project. You can also e‐mail the file to other members of the team so they can match the colors.

To make a custom palette, follow these steps:

  1. Create a layer.

  2. Make boxes with the colors in your color scheme.

  3. Choose File⇨Save for Web

  4. In the color table palette, open the Color Palette menu (by clicking the twirl‐out menu — the small black triangle icon at the upper‐right of the palette).

    Figure 7-1 shows you where to find the palette and menu selection.

  5. Select Save Color Table from the pop‐up menu.

    Photoshop saves it to the Adobe Presets folder called Optimized Colors, by default. You can save the file to your Production Files folder so that it stays with the project, even after you back up the files for storage.

  6. Name your file something that is easy to identify.

    Using the project's name will help keep things tidy.

Load the custom palette by following these steps:

  1. In Photoshop, open the Swatches palette (Window⇨Swatches).

  2. In the swatches pop‐up menu, found when you click the small black triangle in the upper right of the swatches palette, choose Replace Swatches.

  3. Select your palette and click Open.

    Note:Replace Swatches removes the current palette and replaces it with your custom one. If you choose Append instead of Replace Swatches, your custom palette is appended to the end of the list of swatches already available in the swatch palette.

    You can bring the default palette back by selecting the twirl‐out menu and choosing Reset Swatches — or you can replace it with another palette the same way you loaded your custom swatches.



Not a subscriber?

Start A Free Trial

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