How to Build a Website Using Photoshop

By Henri Bauholz

  • Overview

    Photoshop is a valuable software program for creating photographic files that are suitable for use on the web. Many web users are very aware of the creative possibilities that Photoshop offers in this area of preparing photographs for website spaces. However, lesser known is the role that a Photoshop program can add to straight out graphic design. Instead of using this popular program to prepare photographs for web use, one might consider using Photoshop to make non-photographic color-space designs that can be used as background material or just for creating abstract artwork, which can be displayed on a web page. Follow these instructions and learn how to use Photoshop in many ways, besides preparing photographs.
    • Step 1

      Learn to use the "Save For Web" command in Photoshop. This function is located under the "File" heading at the top of the toolbar. This task converts all images to 72 pixels, so the image can be used on the web. This command also has the ability to re-size images. Most photographs that are displayed on your web page can be prepared by using this command. You will also want to place any graphics through the "Save For Web" command, for here, you can convert the images to J-pegs of GIF files.
    • Step 2

      Go to the "File" heading just as in Step 1, but this time you will want to open the "New" command. Here you will select the size, resolution and type of background, for your piece of graphic design. Size will depend on planned use. Resolution will be 72 pixels for the final web image, but you might want to make the original in a higher resolution, especially if you have a print market for the artwork. For a background for a heading you might choose the size of 800 X 100 pixels. Leave the background setting on "White" so you can add color.


    • Step 3

      Add color by selecting your color hue and then going to the "Fill" or "Gradient " task on the toolbar. If you are using the "Fill" command, you can use the color in the first box (foreground color)at the bottom of the toolbar. For the gradient command you will use a secondary color, as well. Choose the second color and then select it for the second square (background color) box at the bottom of the vertical toolbar. Now place the color in the "New" box with the mouse. Also use the mouse to determine the direction the change in color will go. A little bit of experimentation will help you understand the process.
    • Step 4

      Add texture to your box by going to the "Filter" heading on the top toolbar and open the drop-down box. Click on the "Texture" heading and go to the "Grain" choice. Open the box and you will find that you have three choices to make. They are "Intensity," "Contrast" and "Grain Type." Next hit "OK" and enjoy your creation. Pictured above is a textured background with text added. The "Filter" heading offers quite a lot of possible modifications to your square box that will become a section of background. Take some time and explore the many possibilities.
    • Step 5

      For an optional step, add text to the background creation. You can do this in Photoshop, but it is better to wait and place the text against the background using the HTML or CSS code. If you use Photoshop, you cannot change the text after the images are posted.
    • Skill: Challenging
    • Tip: You can create backgrounds in Photoshop to be used in lots of places. These include the body, headings, divisions (listed as div) and class attributes.
    • Tip: A whole page can be created using Photoshop and then displayed with HTML. However the portion created in Photoshop is fixed.
    • Warning:
    • Photoshop is best used in smaller places. Creating a whole page in Photoshop is a static operation, which can not be changed once it is displayed on line. It can be only replaced.

    © High Speed Ventures 2011