You are here: irt.org | Articles | Graphics | Photoshop - Graphics Workshop #2 [ previous next ]
Published on: Friday 31st July 1998 By: Josh Sahrmann
Adobe Photoshop has been for a long time the number one graphic design program for both Macintosh and Windows. It was when the internet started to take off that Photoshop became an even more useful/powerful tool. As a web developer for both web applications and web pages I find myself doing my graphics in two programs, Photoshop and GraphicConverter. Photoshop allows me to do the creation of the graphics but there are times when I need to quickly edit a pixel or two and GraphicConverter is better at this.
Photoshop offers a number of features such as multiple formats such as .gif, .jpg, .bmp and a number of other formats which offer different things. Photoshop also allows you to create multiple layers which enable you to be more creative with your imagination and your image. Any problems with 3.0 or 4.0 have been fixed in what is being called Adobe's best update. Photoshop 5.0 has more features for the graphic designer and allows unlimited undos. The examples I'll be showing will be done in Photoshop 4.0 because I haven't had the chance to go out and buy the new version.
Picking your format is going to become one of your more important decisions when designing art. For web sites I normally end up picking .jpg because its more robust and its the first one that comes up on my format list (You shouldn't normally pick the first thing on your format list unless your just playing around).
Why resize? This can become very helpful if you are showing screen shots. For example if you don't want to have large images slowing down the download time, so you can resize the image and save it as as image.1S.jpg. This will allow visitors to see image.1S.jpg very quickly and then if they wish they can click on a link linking to the larger image.1L.jpb (the S is for small and the L is for large).
So for today lets start by resizing a larger image into a smaller image that will download faster. To accomplish this you will need to find an image that you would like to make smaller. Once you've fond this image the best way I find to resize your image is to select Image Size... under the Image menu.
Once you've selected this option a new window will appear titled Image Size. Its at this point when you can resize your image to the height and width you'd like. Also keep in mind you have two options in size formatting. You can pick pixels or percentages.
If you look down farther you will see another set of information labeled Width, Height and Resolution. This is the more important part because this changes the size of your image. For example you could make your width 6.876 and your height 3.167 (in inches). To the right of these numbers are again pulldown menus which you can choose the format of your viewing (inches, cm, pointers and so on).
For now I'm going to change the width from 6.876 to 5.876. As you can tell Photoshop adjusts the bottom to match your top settings as best as possible. This will allow for an even shaped image. Next hit "OK" and your image should resize into the width and height you entered.
So now you've just decreased download time for your viewers and you've learned how to decrease the size of an image. The next step is to save this image in a format which you want. To do so pull down the File menu and hit Save As.... A window should appear asking what name you want to save it as. Type in your image name but don't hit OK. Once you've typed in the name of the file look below the input box.
You should see a pull down menu listing formats such as .jpg, .gif and a number of other formats. At this point you need to decide which format you choose from. In a future article we will talk about using .gif for transparent images. If your image is transparent then I would choose .gif. If its just a regular image being shown on your web site then choose .jpg. .gif can be used for both transparent images and for animated images.
Once you have saved your image you are ready to get started on new more creative images. Hopefully we will cover further topics in future articles.
If you are interested in buying Adobe Photoshop, you can order it now (US only) at a discount price direct from software.net. Just click on a link below and you'll be taken to an appropriate order page:
Adobe Photoshop 5.0 Full version (Win 95/NT)
Adobe Photoshop 5.0 Full version (Macintosh)
Adobe Photoshop 5.0 Upgrade (Win 95/NT)
Adobe Photoshop 5.0 Upgrade (Macintosh)
Photoshop - Graphics Workshop #1