Building a Website with Photoshop 7 - Part One, the Photoshop Imageready Connection

How it Works: One of the best features of Photoshop 7 is the ability to conceptualize, design and execute a websites from scratch. Photoshop 7 in conjunction with Imageready is arguably one of the most elegant software combination for efficiently producing beautiful websites. While it's true that these 2 software are just as effectively integrated in the later Adobe Creative Suite lines, the down-side is that from Photoshop CS1 to CS3, Adobe has consistently upped the memory ante in both hard disk space requirements and in terms of RAM use. The venerable Photoshop 7 is forever slim, speedy, efficient and reliable. Surprisingly, this sweet union was dismantled by Adobe, when Imageready was unbundled from the latest version of Photoshop CS3! Adobe's official line is that the features of Imageready is merged into CS3, but where I sit, I think Adobe is taking step backwards with this move!

Photoshop 7 and Imageready are 2 separate programs that can be toggled back and forth via a button below the tool bar. This physical separation acknowledges the intellectual difference between designing an artistic website and creating functional html code. Keeping Photoshop and Imageready separate allows you to seamlessly concentrate on two very different thought processes. It's probably more effective for me to demonstrate the effectiveness of building a website using the Photoshop 7/Imageready tag team than to verbally describe it.

First, you need to decide on the dimensions of your website. Today, most computer user's have monitors that are at least 1024x768 pixels in screen dimension. To account for all the tool bars you should design your website at 915x352. I've set up a sample website just to take you through the process.

Websites today are of a different size, shape and configuration but the majority fall under some flavor of this common configuration:

Header, Navigation bar and content. They sometimes have a footer at the bottom. There is a very specific reason why websites are configured this way. There have been scientific research done to track how people quickly skim over a website before they decide to spend time on a it. Researchers has found that the upper left quadrant is considered the sweet spot that receives the most attention. That's why all the content of significance is clustered in that upper corner. There is an area called the "fold" which is the bottom of your monitor. Most web developers prefer to put all the content of significance above the fold.

Once you've designed a website to your liking, you should scroll down to the toolbar and click on the Imageready button. This is where the fun begins!

You are now going to jump over to Imageready to start your web magic. First scroll up to the preferences button. You want to set up where all your slices are going to go. Go to File/Output Settings/Save Files. You'll find a checkbox that says, "Put Images in Folder:" the default name of the folder being "Images". This tells you that when Imageready slices your artwork it will put it in a fiolder called "Images" or whatever you specify.

Next go to Windows/Optimize, this is the optimize panel. The optimize window is very important because you can specify which file format to save your slices for maximum image quality while making the files size as small as possible. Look at the illustration above, For demonstration purposes I set the .jpg compression to 20 which is very low. You can see the problem with artifacting. You should set your image to the highest quality possible while keeping in mind that you need to keep the file size sufficiently small to accomodate for quick downloading time. The .jpg file format as a rule is an image compression which is very good for photos and illustrations while .gif is good for typography and the .png format is good if you have an image with a transparent background.

After you are happy with how you have optimized all your slices now all you have to do is click on the "Save Optimized" button under the file menu. Just remember where you put the file. You should go to the file where you saved all your slices and the html file and viola, there is your website. The look of the website is great because you spent a lot of time designing t9 in Photoshop 7 and Imageready lets you slice the image to develop your website without having written a line of html code! I've included a miniature version of the website on this article so you can have an idea of the final result. If you want native files to play with you ca click on this link, www.photoshop-how-to.com/sample-website.zip