Photoshop CS2 save for web

I have been asked by a number of people to create a small tutorial on how to save an image for the web using Photoshop. This will simply be a basic and you will have to learn for yourself the exact settings you want to use and what file format suits you best.

Open your image in Photoshop.

This particular image is a ball point pen drawing by Mark Lee Howard one of my clients. The image is called "Let it Snow" and is scanned using a resolution of 200 and 1374px by 1068px so obviously it must be resized before I use it on the net.
Marks website is in the process of getting the great shopping cart from Avactis so he can begin selling his beautiful art online finally.



When I save an image for a large pop up on a web page I want it substantial enough for my visitor to be able to see detail well. I today usually resize or crop to between 400px and 550px high. With today's monitor and many older monitors this size fits almost full screen and is large enough to see good detail. I admit I am an image enthusiast. If a website has crumby images I will simply not stay. So if you are selling something be it product or yourself use good imagery ... it is well worth the effort. DO NOT succumb to anyone who tells you large images slow load time and your visitor will leave. That is rubbish. You are being told that by people who are not art minded and probably do not know how to make a beautiful site with fast loading (LARGE)images.

As an example back in 1996 I was displaying very large images of Boris Vallejo's as well as other well known artists work on my personal website. That website was filled with large images of all kinds. That was when we all suffered with 56K modems at best. The website had 60,000 visitors a month for years. Back then when load time was a concern the visitors still came by the truckload's.

The major part of my design business is for people who create art. I would be tossed out on my ear if they did not have great looking sites that displayed their work at its best. This is a start at how that is done.



First you are going to click image then image size and a new window will open.



I have entered the dimension I want for the height 500px in this case. Because I have the constrain proportions checked it automatically will set the width for the proper size. Notice I have changed my 200 resolution to 72 for a web image. When I am done finished with my settings I click ok and Photoshop will do the work.



I am now ready to save my image for the web. I do this by clicking file ... save for web and immediately a new window will open. You might want to further notice there is a keyboard shortcut you can use to shorten your work time provided you are inclined to learn it.



At this point you have quite a few options. You will have to delve into how Photoshop works to learn this part of it. I simply chose an optimized gif and clicked save.



A new box opens and allows you to save your image to the folder of your choice and give your image a name.

Good luck in Photoshop and I hope you found this tutorial helpful :)