Website Design Tips - Hypergurl

Photoshop Website

This week I received an email from one of our visitors asking if I could add a tutorial to our blog explaining how to design a website with Photoshop. While the majority of webmasters use Photoshop for image manipulation, others use it as an editor to create their actual website HTML files.

The tutorial shown below demonstrates how to use Photoshop to create a website page. The graphic software used in this tutorial is Adobe Photoshop. This type of method is often refered to as a graphical approach. Firstly you start with creating an image in Photoshop of how you'd like your website to look. The tutorial will then show you how to slice the image and prepare each section for use in a HTML document. It then finishes with saving as both images and html.

If you find you like designing a website with Photoshop, click on the ImageReady icon which can be found on your toolbar.

ImageReady is specifically used for designing webpages, ie image slicing, rollover effects and HTML building. You can use it in the exact same method as shown in this tutorial, but it also has lots of other tools and addons.

Click the go arrow to start the tutorial showing how to turn a graphic into a webpage using Photoshop.