Design Your Web Site in Photoshop

Hostway Marketing, June 30, 2009 POSTED IN:Web Design TAGGED: , , ,

By Hostway

The Web is a visual medium, and people are likely to notice your design before anything else. So, if you’re a beginner designing your own Web site, you’ll need the right tools to create a quality end-product.

The most common way to design and code a Web site for professionals and amateurs alike is to build a template in Adobe Photoshop, then pull it into Dreamweaver for coding, text and images.

Getting Started with Photoshop

Photoshop is a complicated graphics editing program. It might seem intimidating at first, but once you know how to use it, you’ll have the ability to manipulate images in countless ways. If you’re completely new to the program, take some time to become familiar with some of the tools and features before you attempt to design your Web site. A good way to orient yourself is to open your digital photos in Photoshop and play around with finishing them.


For a structured lesson in how to use Photoshop to design a Web site, check out these helpful tutorials:

Once you have a design for your Web site, Photoshop has a slicing tool you can use to prepare your design for the Web. Slicing is simply dividing up your large image into a set of smaller images and saving them separately so you can make different parts of the image clickable. Learn more about slicing with this tutorial.

Open Source Alternative

While Photoshop is the industry standard for graphics editing software, some users feel that it’s too complicated, expensive and loaded with features most people rarely use. If you’re looking for a free alternative, take a look at GNU image manipulation program (GIMP).

GIMP is generally considered the open source equivalent of Photoshop and can do many of the same things. Here’s a tutorial on how to create a Web site template using this program.