Creating Images for the Web and Application Design - Advanced Adobe Photoshop CC - page 192

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 window.
4 To improve the image quality, change the JPEG setting to Very High. Preview the image directly in the
Save for Web window.
5 Click Save in the Save for Web window. In the dialog box that appears, navigate to the advps10lessons
folder.
6 Name the file advps1001_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 cre-
ating a website, you should save this image file into the appropriate site folder.
You are now back to your image in Photoshop. It is strongly recommend that you keep a copy of your
image in an uncompressed format such as the Photoshop native format (PSD). 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 advps10lessons folder. In the File Name text field, type ad-
vps1001_done . Choose the Photoshop (PSD) format, and click Save.
9 Choose File > Close to close the file.
Creating a transparency effect in a JPEG image
Transparency doesn't exist in the JPEG format, but you can simulate the transparency effect.
In following steps, you will use the Matting feature to match the background color of your web page and
then preview the image in your browser.
1 Choose File > Open. In the dialog box that appears, navigate to the advps10lessons folder, select the
image named advps1003.psd , and click Open. An image of a smoothie with a transparent background
appears.
When you save an image for the Web or for application design, file size is a big concern. Since this is
a photographic image, JPEG is the best format to use to keep the file size small. However, the web
page has a pale yellow background, and by default, the JPEG will appear with a white background.
The solution is to use the Matte control, which becomes available when you optimize this file.
2 Choose File > Save for Web. In the Save for Web window, choose JPEG Medium from the Preset
drop-down menu.
3 Selected the Optimized tab so that you see only the optimized file.
4 Click the Matte drop-down menu and choose Other. The Color Picker appears.
5 In the Hexadecimal text field (located to the right of the # sign), type FFFFCC ; then click OK. The
color appears immediately in the preview window.
6 Click the Preview button to preview the image in the browser with the new matte color applied.