INTRODUCTION ABOUT THE THINGS
In this
lesson, you’ll learn how to optimize images so they have a small file size and
still look great in a viewer’s browser. By learning about the different image
formats and the features they offer, you will be able to export files that
contain accurate colors and partial or full transparency. You’ll learn about
image slicing and how it allows you to choose different formats for different
parts of a single image so the final result both looks great and downloads
quickly
GET the 65$ only signin in Only using this link:
https://www.bluehost.com/track/bhaiyaji/
LET'S START
Starting up You will work with several files from the
web05lessons folder in this lesson. Make sure you have loaded the web lessons
folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.
The examples throughout this lesson use Adobe Photoshop, but
there are other applications you can use for cropping, scaling, saving, and
retouching images. The following links contain free software and resources that
can help you do most tasks in this lesson:
GIMP
Adobe Photoshop (free trial version
Windows Live Photo Gallery
Picasa (photo-editing application from Google)
http://picasa.google.com/
Optimizing
graphics for the web
Optimizing refers to the preparation of images for use on
the web. The goal of optimization is to reduce the file size of the image for
faster downloading, without compromising the quality of the image. Ultimately,
you may have to reduce the quality of your images so they are small enough to
be downloaded and viewed quickly; in many cases, it is more important to have a
speedy download than to make the user wait for beautiful (but large) image fi
les. Before you start adjusting the file size of your images, you should have a
general idea of how you will use them, and how big they will be.
Resizing
the image
Many web designers
mistakenly believe that if an image has a resolution of 72 dpi (dots per inch),
it’s ready for the web. However, the total pixel dimensions of the image are
much more important.
This example uses Adobe Photoshop, and the image is ready to
be resized. In your workflow all
retouching, adjustments, and other editing must be completed before you begin
optimizing an image for the web.
1 In Adobe Photoshop, choose File > Open. Navigate to the
web05lessons folder and open the file named web0501.jpg. An image of several
people enjoying smoothies appears.
The designer has
planned well and knows the approximate size that this image will be on the web
page. You will now open the rough comp that the designer created to plan the
size of the image within the page.
2 Keep the file
web0501.jpg open, and choose File > Open. In the dialog box that appears,
navigate to the web05lessons folder.
3 Locate the image named web0502.jpg and click Open. The
rough comp appears. (The designer created this document using the SketchFlow
feature in the Microsoft Expression Blend application.)
The designer has decided that the final web page will be
approximately 800 pixels wide. For more information, see the following sidebar,
“Images and Browser Window Size.” The images you will work on are represented
by the two solid squares on the right.
In this case, you have a mock-up that helps to determine the
size of the final images. Even if you do not have a mock-up prepared, before
optimizing your images, you should know the approximate size of your final
images based on the final size of the web page.
At this point, you can determine the approximate size of the
optimized images. In this example you will use the grid feature, separated into
percentages, to help you determine the size of the images.
4 With web0502.jpg
open, choose View > Show > Grid. A grid appears in the image area. You
will now adjust the grid size.
5 Choose Edit >
Preferences > Guides, Grids & Slices (Windows), or choose Photoshop >
Preferences > Guides, Grids & Slices (Mac OS).
6 In the Grid section
of the Guides, Grids & Slices dialog box, type 100 in the Gridline Every
text box and choose percent from the drop-down menu.
7 In the Subdivisions text box, type 8 and click OK. Each of
the eight grid subdivisions represents 100 pixels; you can use this value to
determine the size you want to optimize your image to.
Adjusting
the image size
By looking at the
grid on your mock-up, you can see the images on the right occupy more than two
grid divisions in both width and height, which means that this image is
approximately 225 pixels wide by 150 pixels high.
You will now optimize this image to fit the allotted space;
first, you’ll check the file size of this
image.
1 Return to the web0501.jpg file and select Image > Image
Size. The Image Size dialog box appears, indicating that this file is 849 by
565 pixels.
Remember that the top part of this dialog box is for
on-screen resizing and the bottom part is for resizing an image for printing.
On-screen images cannot accommodate more dots per inch in the same space; they
occupy space on the monitor based on their pixel count. This particular image
would use about 90 percent of a browser window as calculated from the pixel
dimensions, not from the resolution. In the following steps, you will only
consider pixel dimensions.
2 After looking at the pixel information in the Image Size
dialog box, click Cancel. Since you must determine a specific c width and
height, you will use the Crop tool.
3 Click the Crop tool (
) to select it in the Tools panel.
4 In the Options bar, type 225px in
the Width text box and 150px in the Height text box.
5 With the Crop tool still selected, click and drag the
image to select the area you want to include in the final image. Notice that
you cannot control the proportions of your crop; you are forced to use the same
proportions as the pixel amounts you entered.
6 Once you determine the crop area, press Return or Enter,
or click the check mark icon ( ) in the
upper-right corner of the Options bar.
7 Choose Image > Image Size; in the Image Size dialog
box, you see that the image area is now cropped to the required dimensions.
Applying
the Unsharp Mask filter to an image
We strongly recommend that you sharpen an image after you
resize an it Photoshop because it can become blurry. The Unsharp Mask filter is
a great tool for sharpening images. The following figure shows the image before
and after you apply the filter. The Unsharp Mask feature sharpens the image
based on levels of contrast, while keeping the areas that don’t have
contrasting pixels smooth.
Follow these steps to apply the Unsharp Mask filter:
1 Choose View >
Actual Pixels or double-click the Zoom tool ( ). When you’re using a filter,
you should view your image at its actual size to see the results more clearly.
2 Choose Filter > Sharpen > Unsharp Mask. The Unsharp
Mask dialog box displays three options:
• Amount: The Amount value ranges from 0 to 500. The amount
you choose depends upon the subject matter. For example, you can sharpen a car
or appliance at 300 or 400, but with a portrait, every wrinkle, mole, or hair
will become more defined. If you are unsure about the value to use, start with
150 and gradually increase the amount until you find a value that looks good.
• Radius: The Unsharp Mask filter creates a halo around the
areas that have enough contrast to be considered an edge. For print images, you
can use a value between 1 and 2, but if you’re creating a billboard or poster,
increase the size.
• Threshold: The Threshold value is the most important one
in the Unsharp Mask dialog box because it determines the parts of the image
that should be sharpened. This value can range from 0 to 255. Apply too much,
and no sharpening appears; apply too little, and the image becomes grainy.
For example, if you leave it at zero, noise appears throughout the image, much like
the grain you see in high-speed film. A value of 10 causes the filter to apply
when the pixels are ten shades or more away from each other. Start with a value
of 10, and gradually increase it until you find a value that works well.
3 For this exercise, set the Amount to 250, Radius to 1, and
Threshold to 10.
4 Click OK to apply the filter. The image is sharpened. 5
Choose File > Save; keep the file open for the next part of this lesson.
In some images, stray colored pixels may appear after you
apply the Unsharp Mask filter. If this occurs in your image, choose Edit >
Fade Unsharp Mask immediately after applying the Unsharp Mask filter. In the
Fade dialog box, select the Luminosity blend mode from the Mode drop-down list
and then click OK. This step applies the Unsharp Mask filter to the grays in
the image only, thereby eliminating sharpening of colored pixels.
Selecting
the best image format
When saving an image that you will use on the web, you need
to consider two factors: the quality and size of the image file. When you are
saving a file, you must find a balance between the quality you want and the
download speed your viewers demand.
In this section, you
will look at different file formats and decide on a format for the picture you
just resized; the following example uses the Save for web & Devices feature
in Adobe Photoshop
Choosing
the right file format
The most popular
formats for web images are JPEG, PNG, and GIF. Each one of these formats has
benefits and drawbacks, as shown in the following table.
Choosing
the best file format for your image
Throughout this
lesson, you will have the opportunity to save images in each of the major fi le
formats: JPEG, PNG, and GIF. You will also see the differences between the
formats and when to use each.
Saving images as JPEGs
The JPEG file format helps you keep the file size down, but
some loss in image quality occurs when you save the image file. Since the JPEG
format supports anti-aliasing, we recommend it for photographic images and
illustrations with a lot of gradients; anti-aliasing is a technique used in
computer graphics that helps smooth out the naturally jagged edges of objects
such as text or any area where a transition in tonal values is needed. When
saving an image as a JPEG, you can also choose varying levels of quality.
Choosing the quality of a JPEG
In the following steps, you will complete the optimization
process by saving your image as a JPEG.
1 With web0501.jpg still open, choose File > Save for Web
& Devices. The Save for Web & Devices window appears.
The Save for Web & Devices window allows you to preview
changes that you make in the settings, such as file type and size. The section
in the upper-right corner of the window is where you determine the file format
and file compression settings. In this example, JPEG is selected.
Above the Format drop-down menu is the Preset drop-down menu.
This menu contains pre-configured settings for many file formats; later in this
lesson you will learn how to store your own presets here.
In the upper-left
corner is a toolbar with tools you can use to select sections (or slices) of an
image, zoom into, and sample colors from an image.
The large preview
window allows you to compare different file formats and compression settings.
You can compare up to four file formats and see the approximate download times
and file sizes.
2 Select the 2-Up tab
at the top of the preview window.
3 Click to select the
second image preview to assign settings. From the Preset drop-down menu, select
JPEG High. Note that the image preview shows an image of the file in that
format and displays information about the JPEG settings in the lower-left
corner
Since most viewers are not willing to wait for a download,
this file size might be too large for the viewer. You will lower the image
quality in the following steps to reduce the file size.
4 Click the Compression drop-down menu located below the
Format drop-down menu and choose Medium; note that the settings change along
with the download information. The JPEG image format uses lossy compression to
save a file. Lossy means that the image is compressed by discarding part of the
data in the file.
5 Click the Compression drop-down menu and choose Low. The
visual quality changes and the download time decreases.
For this example, the Low quality is too low and the
download time for Medium quality is too long. Toggle between the two settings
to see that the Quality text box indicates that Low is set to 10 and Medium is
set to 30. These presets are helpful, but you can manually adjust the settings.
6 Click Quality to display the Quality slider and drag it to
the right, increasing the value to 20.
Previewing your image
The Save for Web & Devices window allows you to preview an image file in a browser before saving it. You must first ensure that a browser can be recognized from this window.
1 Click the Preview the Optimized Image in a Browser button ( ) and choose Edit List.
To choose a web browser click on the Preview the Optimized Image in a Browser button.
2 When the browser window appears, click Add. In the dialog box that appears, navigate to C:\Program Files (Windows) or Macintosh HD\Applications (Mac OS) and locate the browser in which you want to preview your images; click Open and then click OK in the browser window.
3 Click the Preview button to view your image in the browser. If you want to change the quality, close the browser window and return to the Save for Web & Devices window.
4 If you want a better image quality, change the JPEG setting to Very High. Preview the image directly in the Save for Web & Devices window.
5 Click Save in the Save for Web & Devices window. In the dialog box that appears, navigate to the web05lessons folder.
6 Name the file web0501_optimized, and make sure that Images only is selected in the Format drop-down menu.
7 Make sure Settings are configured to Default Settings, and then click Save. Remember that when creating a website, you should save this image file into the appropriate site folder. You are now back to your image in Photoshop. We strongly recommend that you keep a copy of your image in an uncompressed format. If you have Photoshop, save this file as a PSD image. If you do not have Photoshop, save as a TIFF or PNG file. Avoid saving a file multiple times as a JPEG, because the quality is reduced every time you save your file in this lossy format.
8 Choose File > Save As and navigate to the web05lessons folder. In the File Name text box, type WEB0501_done. Choose the Photoshop (PSD) format, and click Save.
9 Choose File > Close to close the file.
Saving your settings
You can store your customized settings for future use. through the Optimize Panel menu in the upper-right corner of the Optimize section of the Save for Web & Devices window.Follow these steps to store your settings:
1 With the Save for Web & Devices window still open, click the Optimize Panel menu in the upper-right corner of the Optimize section, and select Save Settings. The Save Optimization Settings dialog box appears.
2 In the Save As text box, type JPEG_ff ff cc, and then click Save. You now can select these settings from the Preset drop-down menu at the top of the Optimize window.
Now that you have saved your settings, you will save your optimized image file.
3 In the Save for Web & Devices window, click Save. In the dialog box that appears, navigate to the web05lessons folder and in the File Name text box, type web0503_optimized. Ensure that the Format menu is set to Images Only and that the Settings menu is set to Default Settings.
Saving images as GIFs
GIF is a popular web format that has some limitations in terms of color and appearance. This file format is lossless, so the clarity of the image is not compromised by GIF compression. You can compress the file size of a GIF by reducing the image’s pixel dimensions and the number of indexed colors that it uses, which makes GIF the best format for images with a lot of solid colors, such as logos and illustrations. The compression algorithms for GIF files work best on large spans of color, thereby reducing the file size when optimized. However, a photographic image or an illustration with a lot of tonal values will result in a much larger file size than a same-sized image with solid colors.
When saving as a GIF, your image file can contain up to 256 indexed colors, but you should reduce the number of colors to the minimum. You can reduce an image to four colors, but it requires testing to find the best-looking file with the smallest file size. You can animate GIF files and include transparent pixels to blend the image with different colored backgrounds. The pixels in a GIF image must be fully transparent or fully opaque, so you cannot fade the transparency as with a PNG image, which is discussed later in this lesson.
In the following steps, you will open an image that contains multiple shades of solid color, and you will save it with a transparent background. You will then animate the image
1 Choose File > Open. In the dialog box that appears, browse to the web05lessons folder and open the file named web0504.psd. A colorful logo appears.
2 Select the Magic Eraser tool ( ), which is hidden under the Eraser tool ( ) in the Tools panel.
3 In the Options bar at the top of the window, confirm that the number 32 is in the Tolerance text box. Also, make sure that the Contiguous option is checked. Tolerance determines how much of a selected pixel color is deleted when you use the Magic Eraser tool: the higher the value, the more shades of that color are deleted. The lower the value, the fewer shades of that color is deleted. Selecting the Contiguous option ensures that only touching pixels are deleted to transparency
4 Click the White background. The Background layer converts to Layer 0 and the background becomes transparent.
5 Choose File > Save as, and in the dialog box that appears, navigate to the web05lessons folder. Name the file web0504_work, and keep it in the Photoshop .psd format. Click Save. Keep the file open for the next part of this lesson.
Using the color table
By selecting GIF 64 No Dither, you have indicated that you want to use 64 colors in your optimized image. Note that the color table in the optimization section displays a table of these indexed colors.
You can delete, change, or lock the colors in this table to preserve the look of your image. In this section, you will learn to lock critical colors to make sure important colors are not deleted when you reduce the number of colors in the table.
1 With the image still open in the Save for Web & Devices window, select the Eyedropper tool ( )and click the orange color surrounding the text in the optimized GIF preview of the image. The Eyedropper samples the color and selects that color in the color table to the right. This tool is useful when you need to ensure that a specific color appears as close as possible to the print color. For example, the logo for this exercise might be for a company where the branding department wants to ensure the specific orange used appears as close as possible to the print color
2 Locate the selected color in the color table and double-click it to open the Color Picker. You can use the Color Picker to enter a new value for the selected color.
In the Color Picker window, you can specify colors in any color space; for example, you could choose an RGB or Hexadecimal value. For this lesson, you will closely match a Pantone color a client has provided to you.
3 Click the Color Libraries button to open the Color Libraries window. The Pantone solid coated library is selected by default. Each color in this library represents a specific Pantone color on coated paper. The color is automatically matched with the most similar Pantone color.
4 In this example, the client has specified that the orange should match PMS 173. Click the color value Pantone 173 C, and then click OK. The color changes to match the value of PMS 173 and has a white square icon in the lower-right corner with a diagonal line through it. This indicates that the color is locked and has been mapped to a color other than the original. You will now lock additional colors.
5 Click any color in the color table, and then click the padlock icon ( ) at the bottom of the color table. For this part of the exercise, select four additional colors you would like to retain in this image, and lock them as instructed in the previous steps.
You will now reduce the number of color values in the optimized image even further.
6 From the Colors drop-down menu, choose 8. This is a significant reduction in the number of colors, and although your important colors are locked and the file size has been reduced, the image quality is poor. So you will need to increase the number of colors used to improve the quality.
7 Using the Colors drop-down menu, increase the number to 32. Keep this window open for the next part of the lesson.
Saving as a PNG
Some characteristics, such as the ability to display variable levels of transparency, are uniquely supported by the PNG format, but you cannot reduce the file size such as you can with JPEG and GIF formats. You can use the PNG format to benefit from its unique characteristics more than for a need to reduce file size. In the following steps, you will create a navigation bar.
1 Choose File > Open, and in the Open dialog box, select the file named web0506.psd. You will use this image at the top of a web page.
2 Choose Window > Layers. The Layers panel appears with three layers already created. You will first group these layers, and then apply a mask to all three layers to allow the image to fade from 100-percent to 0-percent opacity
3 Select the bottom layer (base image) and Shift + click the top layer (Get Healthy). All three layers are now selected.
4 From the Layers panel menu, choose New Group from Layers. The New Group from Layers dialog box appears. Type banner in the Name text box, and then click OK.
5 Click the Add Layer Mask button at the bottom of the Layers panel. A mask is added to the entire group of layers you created
6 Select the Gradient tool ( ) from the Tools panel and press D. This restores the foreground and background colors to their defaults (black and white).
7 Click the Gradient Picker in the Options bar and make sure you have the Foreground to Background gradient selected.
8 Using the Gradient tool, click and drag from the right side of the image to the left, and release the mouse when you reach the y in the word Healthy.
By creating a mask for the group and applying a gradient to it, you have created a gradient mask that fades the banner layers to 0-percent opacity.
9 Choose File > Save for Web & Devices. When the Save for Web & Devices window appears, choose PNG-24 from the Preset drop-down menu. PNG-24 supports varying levels of transparency in the image
10 Click the Preview button at the bottom of the Save for Web & Devices window to see a preview of your PNG file in a browser.
11 Once you have previewed your image, close the browser window and return to the Save for Web & Devices window.
12 Click Save. In the dialog box that appears, browse to the web05lessons folder, name the file web0506_banner.png, and click Save. Choose File > Close to close the file.
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 Comments:
Post a Comment
Please do not add any spam link in comment box.