How to Build a Website in Photoshop

By Jacqueline Thomas

  • Overview

    Adobe Photoshop isn't just for airbrushing photos. Most web designers draw websites in Photoshop, because the program is highly adaptable. It allows the designer to translate his idea into a visible medium. You too can learn to to build a website in Photoshop from scratch, just like the professionals do.
    How to Build a Website in Photoshop
  • The Basics

    • Step 1

      Decide on a visual theme for your website. This example uses an African-savannah theme. Find a high-quality, high-resolution photo from a site like Flickr. (See Resources.)
    • Step 2

      Download a font for your logo. The font used for this tutorial is Birth of a Hero, and can be found on DaFont.com in Resources.
  • Step 3

    Download two different Photoshop brushes. The first brush will be a grasslands brush, and is found at Brusheezy. The second brush is a bee brush, and is found at DeviantArt.
  • Step 4

    Unzip and install brushes. After initially saving the brushes, unzip the grasslands brush, and install into Program Files\ Adobe\ PhotoShop\ Presets\ Brushes. Copy and paste the bee brush into the same "Brushes" folder.
  • Step 5

    Open Photoshop and create a new document. Name it "Home" and set the resolution to 960 by 1200, at 72 dpi.
  • Step 6

    Create a new layer and delete the background layer. To create a new layer, select the layer icon in the "Layer" box. To delete the background layer, click on the trash can in the "Layer" box. This will create a transparent layer.
  • Step 7

    Click the fill icon from the toolbar, or type the letter "G" on your keyboard. Press and hold the fill icon to select the paint bucket. Click on the document to fill with the color black.
  • Step 8

    Go to "File>Open" and select the downloaded image from Flickr (from Step 1). Go to "Edit>Resize" to change the image's dimensions to 1600 by 1200. Then hit "Ctrl + A" on your keyboard to select the image, and then "Ctrl" + "C" to copy the image.
  • Step 9

    Go to "Window>Home" to return to the original "Home" document. Now add a new layer and press "Ctrl" + "V" on your keyboard to paste the copied image into this document.
  • Step 10

    Save your work. It's best to save the master as a Photoshop file, in case you need to make changes to the different layers. Saving as a .jpg will flatten all layers into one static image.


  • Building Guides

    • Step 1

      Lock all the layers you've worked on so far. Now create a new layer.
    • Step 2

      Turn on the ruler (if it's not already on) by clicking "Ctrl" + "R."
    • Step 3

      Create guides for your image. Click on the ruler, and continue holding your mouse button until you arrive at the spot where you want the guide to go. Guides can be vertical or horizontal. You are creating guides from where the blocks of content will eventually sit.
    • Step 4

      Select the rounded rectangle tool from the toolbar and draw six rectangles. The rectangles will automatically snap to the guide grids.
    • Step 5

      Hide guides by going to "View>Show>Guides," or pressing "Ctrl" +" ;" on your keyboard.
  • Visual Detail

    • Step 1

      Right-click the last layer you created in the layer box. Go to "Blending Options." Select "Drop Shadow" and change the blend mode to "multiply" at 50 percent opacity. Go to "Inner Shadow" and change the angle to -122 percent. Make sure "Global Light" is selected.
    • Step 2

      Create a logo. First create a new layer, then select the text tool from the toolbar. Type in your website's name. Use the font Birth of A Hero, at 72-point size. After positioning the text in the top rectangle, right-click the layer and go to "Blending Options." Select "Bevel / Emboss," and also "Drop Shadow." For this specific logo, a pearl clip art is used that can be found on the stock site StockXchng.
    • Step 3

      Unhide the guides by pressing "Ctrl" + ";" again. Create headers for each of your content-ready rectangles. Having the guide will help you place the text correctly inside the rectangles.
    • Step 4

      Create navigation. Create a new layer, then select the rectangle tool again. Create boxes that are an equal distance apart, using the ruler to help you measure. After creating four boxes, go to "Blending Options" and select "Inner Shadow."
    • Step 5

      Create text for the navigation. Select the color #5f9adf for the text. Type "Home," "About Me," "Tutorials" and "Contact." Next, go to "Blending Options," select "Inner Glow" and change the color to #949434.
  • Finishing Up

    • Step 1

      Create a new layer. Select the "Brushes" tab from the top right hand of the screen. Scroll down and select the bees brush collection. Find three different bee brushes. Change the diameter of the brush to 66px.
    • Step 2

      Before painting with the brush, change the color in the toolbar to #503207. Click the brush once to create one bee. Place it on top of the rectangles to lend an interactive look. Next, go to the "Blending Options" of the layer and select "Drop Shadow" and "Outer Glow."
    • Step 3

      Go back to "Brushes" and select the grasslands brush. Change the color to #7c980e. Paint the grass so that it obscures the edges of the bottom rectangles. Create an outer glow with the color #335001.
    • Skill: Moderately Challenging
    • Tip: Web design takes a lot of trial and error. Don't be discouraged; continue working at it.
    • Warning:
    • Only use photos carrying the "Free to Remix" badge from Creative Commons.

    © High Speed Ventures 2011