LESSON 1
Let's get started, shall we?
Resize for the Web
Most images that you'll be posting for homework (or on your personal sites) will need to resized before putting them up on the Web. We'd like to ask that you keep homework images below 600 pixels on the widest side.
To resize an image in Photoshop, go Image > Image Size (or Alt+Ctrl+I) - There is the first shortcut for your new cheatsheet! :)
In our first example, the image resolution is set at 180 ppi (pixels per inch) because the image was taken with a digital camera. Resolution doesn't affect the way our image views on the web these days so we don't have to worry about that.
Since we want our image to be no wider than 600 pixels on the widest side, we need to make the Pixel Dimensions of this image smaller. We'll change the width to 600. Notice that the height automatically changes?
The Resample Image box needs to be checked or you won't be able to resample it by changing the Pixel Dimensions so be sure that there is a checkmark in that box. Constrain Proportions will ensure that our images don't get out of whack. When we resize either width or height, the other will scale accordingly. Scale Styles isn't important for now because we have no styles to be scaled, but when we get to adding drop shadows in a later lesson, you'll want that style to scale along with your image.
Click OK to complete the resize.
Depending on where your image comes from (digital camera or one you created in Photoshop) the resolution will vary. Don't worry about that for your web image. You'll just have to change the Pixel Dimensions. Please remember to ensure that images you're posting for homework assignments are no wider than 600 pixels on the longest side. You may make them smaller if you like, but not too small...we want to be able to see the details of your work. :)
Always save a copy of your image in psd format before you resize so that you have a backup if you ever need it.
Save for Web
Now that we've got our image resized we want to use the Save for Web function to get it ready for posting.
First some basic information about the three basic file formats for displaying your images on the Web.
gif - Graphic Interchange Format
This image format type is generated specifically for computer use. Its resolution is usually very low (72 dpi, or that of your computer screen), making it undesirable for printing purposes. Resolution is limited to 8-bits, or 256 colours and may contain as few as 2 colors.
gif is especially suitable for images containing large areas of the same color. gif format files of simple images are often smaller than the same file would be if stored in jpg format, but gif format does not store photographic images as well as jpg. The compression method used for gif is lossless.
jpg - Joint Photographic Experts Group
jpg is widely used on the Internet for the display of photographs. jpg is a standardized image compression mechanism designed for compressing either full-color or grayscale photographic images, often for use on the Web. jpg compression is "lossy", meaning the higher the degree of compression, the more detail is lost from the image.
jpg is best used for photographs and images containing many colors. As long as you're careful with the amount of compression used, you can get good results. Don't use jpg for images containing large blocks of solid colors because with that type of image, even a small amount of compression can result in artifacts.
png - Portable Network Graphics
png is used for lossless compression and displaying images on the web. The advantages of png is that it supports images with millions of colors and produces background transparency without jagged edges. The disadvantages are that png images will not show up on older browsers and can be comparatively larger in file size than gif. gif files use a patented data compression algorithm; png is patent- and license-free.
png can be used on just about any type of image, but using this format on photographs in png-24 mode (required to get good photographic results) can result in extremely large file sizes. Saving screen captures and images containing few colors in png-8 format in Photoshop can result in very small files..
Before saving your image for posting to the web, always save it in psd format so that you have a copy to go back to if you want/need to do that later.
psd does NOT display on the web and the file sizes are much larger than gif, jpg, or png, so please do not upload psd files unless you're having trouble and we specifically ask you to so that.
To access the Save for Web dialog, go File > Save for Web (or Alt+Shift+Ctrl+S) - another shortcut for your cheatsheet
The preview on the left displays the original image, while the others display what your image will look like if saved using the current settings. Click on one of the other displays to activate it. When you change the settings, the active preview is updated.
I like to see 3 options so I use the 4-Up tab. You may prefer to use the 2-Up tab which will show you only the original and one version of an optimized image in the format you choose.
You can choose a modem speed by clicking on the little arrow just above the right hand corner of the right display box.
Continued...
