How to Make a Website With Photoshop

Few programs offer as much versatility when it comes to designing a website as Adobe Photoshop, which is why the program is used by graphic designers around the world for this very purpose. The software is complicated and options for graphics are many; you won’t learn the ins and outs of Photoshop in a day. However, with practice and experimentation, you’ll find that Photoshop becomes an invaluable tool when it comes to making a website.


  1. Open up a new file in Photoshop.
  2. Use Photoshop’s many design options, visible as buttons to the left and right of your document, to design your website. Use the program’s many shape tools (such as the Rectangle Tool, the Polygon Tool and the Ellipse Tool) to create page or menu backgrounds or highlights for photos or text. Speaking of text, Photoshop typically includes hundreds of fonts, each able to be manipulated in various ways using the Character Palette. Color can be managed using the Color Palette, and further manipulated through Photoshop’s Color Balance, Brightness and Contrast, and Levels options. In short, there are countless options when it comes to designing your site.
  3. Save the design as a Photoshop document.
  4. Save the design—again. This time save it under a different name. You should now have two identical documents under different names. The first is your backup document. Close it now, so that only your second document is open.
  5. Click on “Layers,” then select “Flatten Image” from the drop-down menu. Each component of your document in Photoshop is arranged as a layer; flattening the image will combine all layers into one—a necessary step before cutting up your design to make it practical for a website.
  6. Click on the background color (on the bottom left) and select a color that clashes obviously with your design (for example, if your design is light blue and white, you might select a dark green). The reason will become clear in Step 7.
  7. Use the Rectangular Marquee Tool (on the left) to select a part of your design to “cut” as you plan on arranging it in HTML. Copy this, press delete (the piece will be replaced by the background color you selected in Step 6), then select “File” and “New.” Press Enter. A new document will open up that is exactly the same size as the selection you just copied. Paste into this new document.
  8. Click on “File,” then “Save for Web & Devices” to save the piece as a gif file. Gifs load more quickly than other file types, even jpegs, and are therefore optimal for website graphics.
  9. Repeat steps 7 and 8 with the rest of your design, keeping in mind that if you want your text to be selectable online, you’ll have to insert the actual text into your HTML code rather than a graphic with text on it. Use the clashing background color as a guide to what has been copied and pasted already, thereby preserving exactly the proper size of each piece. Upload your design, piece by piece, onto your website’s server.