How to? Basic website design using Adobe Photoshop

Please note: This tutorial is for beginners. It’s a short vague guide to push you in the right direction. I believe “learn by seeing and doing” is the best approach.

Many developers struggle to use the basic tools in Adobe’s award winning software Photoshop when designing websites. It can help a lot to know some simple techniques and tools when building XHTML pages. You don’t have to use the very awful splicing function at all.

Let’s start with the idea of building a very simple design using a set colour palette and a set width. After these simple tips I will also supply a number of useful links to visit to help you further.

Let’s boot up Photoshop and start with a new blank file. Choose a preset width and height (I’m using 1024×768) and let’s get designing!

Initially we need a colour palette for inspiration. If you want help see Adobe’s Kuler application. It’s awesome. Once you have found your colour palette you can then download it (provided your registered and logged in) open it and your colours will jump straight into Photoshop (Window>Swatches)! How cool!

Pick your favourite background colour (I’m using #ff8548) and fill the background. Then create two guide lines 960 pixels apart (or any other distance apart) and place them in the center. (If your not sure how to do this simply download 960 Guides). We now have a simple layout. Next we need to setup our header and navigation.

It’s as easy as writing some text and placing it at the top of the page. Make sure you keep the margins your giving the text around the edges the same. You could do this by making small 10px x 10px boxes and using these as padding. You could also draw more guide lines by dragging them from the rulers around the page. (If you can’t see them tap Ctrl+R) Using rulers and guises to position all your elements on the page is the best way to keep everything aligned and tidy. This is a fundamental in website design.

You can also use Lorem Ipsum (dummy text) to help see how your layout looks on the page.

Stick to the colours in your colour palette and have a play. I drew up a quick dummy web page with some lorem ipsum, a title and a navigation bar. I also drew in some guides to position my content better and to keep everything tidier. If you would like to download this PSD file be my guest. Pull it apart and see what you like.

This simple design could be a the building blocks of your first website.

Check out the following links to help you further;

  1. Lorem Ipsum
  2. Adobe Kuler
  3. 960 Grid System
  4. Web Designer Wall
  5. Best Web Gallery
  6. CSS Based
  7. Pixel2Life Tutorials

6 thoughts on “How to? Basic website design using Adobe Photoshop”

  1. I run a small photo studio and i also work as a web designer and Adobe Photoshop has been the bread and butter of my job. Photoshop is really the best photo editing tool that i have ever used.

Comments are closed.