Great web images can really aid in the overall appearance and design of websites. Unfortunately, web images are also one of the most common flaws of a website as well. Even if a web image looks great, if it’s too large it can cause a web page to load slowly.
Sometimes, large web images will even cause your computer to time out, which means your computer has given up loading a web image and instead leaves a blank spot where the image should be.
The best way to prevent this problem is to use smaller images (which in turn, have smaller file sizes).
One of the nice features added to Photoshop in recent years is the Slice tool (located on the right of the toolbox, third from the top).
| Note | In older versions, the Slice tool is only available in ImageReady, a companion program that is loaded with Photoshop. However, with version CS2, you can find many of ImageReady’s best tools available directly in Photoshop. The Slice tool is one such tool. |
The Slice tool allows you to “slice” an image into smaller parts, resulting in faster loads when viewed through a web browser.
This isn’t to say you want to slice your images into a million pieces. Rather, look at your image and slice it into two, three, or four key parts (try not to slice your images into more than four slices if possible).
Planning for Slicing Layout
Slices determine how your images display within your web pages. After you make your slices, you save them for the web (you’ll do all these steps in a moment). Your slices are then put into HTML(Hypertext Markup Language) format, which is the format of web pages.
Photoshop organizes your slices into tables with a border and line size of 0. A border and line size of 0 will hide any evidence of tables to visitors. All they see is the image, pieced together seamlessly.
When slicing images for the web, it’s important to determine how you want your images to display within a web page. A good idea is to break your slices into key areas:
- Header
- Contents
- Footer
Using Photoshop’s Slice Tool
- Select the Slice tool from the toolbox. Notice how a border surrounds the image and a gray box displays in the top-left corner. This gray box displays the number 01 with an icon beside it, as shown in figure below.
This number (and the icon beside it) represents an auto-slice, which Photoshop automatically generates. Think of your slices as tables. Right now, your table only consists of one column and one row. This is because right now you only have one slice.Let’s continue to slice up our image and see what happens. - Use the Slice tool to draw around the right side of your title bar, but don’t go to the bottom of your image. Make the bottom of your slice toward the bottom of the Bing_webheader.psd image, as shown in figure below.
- Let’s create one more slice. With the Slice tool, draw a slice below the bottom of the navigation bar, as shown in figure below. This is an additional area you can use if you want to put content such as a footer on your web page.
Saving for the World Wide Web
After you’ve sliced your image, it’s time to convert it into a web page.
- Go to the menu bar and select File ▶Save for Web. The Save For Web dialog box displays, as shown in figure below.
Photoshop’s Save For Web dialog box provides a ton of useful options for web designers, such as displaying the final file sizes for your web page and providing compression options and approximate loading times for your web page.
Which Graphic Format Is Best for Web Pages?
There are four file formats from which you can choose to save the images for your web pages — JPEG, GIF, PNG 24, and PNG 8. So, which graphic format is best for your web pages? This is a topic that many web developers debate. Let’s take a look at the options.
- JPEG: The most commonly used and most widely supported image format around. So does that mean it’s the best to use? Not necessarily.The JPEG format supports 24-bit color, which means it can have up to 16 million colors. Thus, JPEG preserves a lot of variations in color. Unfortunately, JPEG has a crummy compression technique, which means that whenever you save to JPEG, some image detail gets chewed up.
- PNG: This format is a newer version of GIF. There are two types of PNG compression: PNG-8 and PNG-24. PNG-8 is similar to the GIF format. It supports 256 colors, but is usually slightly smaller in file size than images saved in the GIF format. PNG-24 is similar to JPEG. PNG-24 allows for 24-bit compression, meaning it supports 16 million colors. Images saved in the PNG-24 format are slightly smaller than images saved in the JPEG format.
Now that you have an idea of the basic image formats you can use, which one is best? I would suggest saving your web images as JPEG. I find it provides the best quality and file size for the World Wide Web.
- In the Save For Web dialog box, perform the following:
- Change the file format (the first drop-down field on the right side of the screen) to JPEG.You can experiment with these settings as you work with your web images. I’ve found that these settings provide smooth gradients while keeping your file sizes small.
- Press the Save button. A Save Optimized As dialog box displays, as shown in figure below.
-
Name your file bing_home.html, and change the Save as type text box to HTML and Images. Then, navigate to where you wish to save this file.
Congratulations — you’ve just created your first web page. If you go to the place where you saved this file and open it, you’ll see it open in your default web browser, as displayed in figure below. Although your graphics are sliced up, you can’t tell in a web browser.
In this tutorial:
No comments:
Post a Comment