Optimization is the process of adjusting the display quality and file size images for use on the Web or other online media. Adobe Photoshop and Adobe ImageReady gives you control the effective range for compressing the image file size while optimizing the quality of online viewing.
There are two methods to optimize the image:
* For basic optimization, Photoshop Save As command lets you save images as GIF, JPEG, PNG, or WBMP file. Depending on the file format, you can specify the image quality, background transparency or matting, color display, and the download method. However, all features of the Web - such as slices, links, animations, and rollovers - that you have added to the file is not preserved.
For more information about using the Save As command to save images as GIF, JPEG, or PNG, see figure Savings.
* For proper optimization, you can use the optimization features in Photoshop or ImageReady optimized to view the image in different file formats and with different file attributes. You can see multiple versions of an image simultaneously and modify optimization settings as you see the pictures to select the best combination of settings for your needs. You can also specify the transparency and matting, select options to control dithering, and resize the image to specific pixel dimensions or a certain percentage of its original size.
When you save the optimized file using the Save for Web (Photoshop) or Save Optimized (ImageReady) command, you can choose to generate an HTML file for the image. This file contains all the information required to display your images in your web browser.
Save for Web (Photoshop) or Save Optimized (ImageReady) command that is specifically designed to provide a set of more powerful and intuitive than the option to save the image file for use on the Web. This includes a fine sensitivity and image file sizes of color palettes that are not available from the Save As command. When creating graphics for Web use, Save for Web / Save Optimized command is recommended.
Many Web sites contain rollover buttons, buttons that change when you mouse over or select them. Different display mode called state rollover buttons. You can design and state rollover buttons using layers in Photoshop. You can enter the elements that any changes on their own layer and preview them using Photoshop Layers palette. When you are satisfied with the design, you create a slice for the button. Alert slice regions triggered by the mouse to display different countries. You then edit the button in ImageReady ® to determine the content of the rollover state. Using the Web Content palette and Layers palette together, you create a country and then see by turning layers on or off.
1. In Photoshop, create a button image, text, and content of each country's key rollover. Save rollover content of different countries from those normally used in a separate layer. State rollover layer can add buttons or use under normal circumstances are not normal circumstances layer. For example, if you want to add a circle next to the button when the user mouse over it, creating a loop on a separate layer. You do not need to duplicate the button itself.
2. In the Layers palette, select the layer which is the normal state button. Then, choose Layer> New Layer Based Slice. Photoshop creates an outline of the slice layer on the button. slice determine the region triggered by the mouse to activate the rollover state.
3. Save the file, and select File> Edit in ImageReady. ImageReady application opens and displays the image.
4. Click the Layers tab and the Web Content tab to bring the palette to the front or, if the palette is not open, choose Window> Layers, and then Window> Web Content.
5. In the Web Content palette, select the Normal state. Then in the Layers palette, make sure the correct layers visible and hidden for this country. Click the Eye icon eye icon to hide the layer or the empty eye column to show the layers.
6. In the Web Content palette, select the slice is created for the button. Then, click the Create Rollover State New button at the bottom of the palette. insert Photoshop's More countries under the slice. During the state occurs when a user positions the mouse over the button.
7. With more countries selected in the Web Content palette, click the Eye icon eye icon or a blank column next to the eye in the layers palette that you want to hide or show to this country.
Important: Before you make any changes in the layer buttons, always make sure you have the correct country is selected rollover on the Web Content palette.
8. If you want to add additional states for this button, such as Down state (the state when the user presses the mouse button) or country of choice, repeat steps 6 and 7.
Note: If you want to change the state of Photoshop to create different circumstances (eg, from Down to Chosen), select countries, and select Options from the menu Rollover Country Content palette. Then, select the country you want, and click OK.
9. To preview the rollover state, select the Preview button Documents button in the toolbox, and move the mouse over the button. If you are making other countries, they also try to activate (like pressing the mouse button or clicking). Choose Image Document again to turn off preview mode.
10. When you are satisfied with the button, save the file. It is important to first save the file using Photoshop format. Photoshop formats retain all the key components and allows you to make changes later if necessary. Once you have saved as a PSD file, you can combine the key to another file or optimize Photoshop for use in Web pages.
Some tips for how to iconHow web thumbnail gallery image:
Create a Web page gallery of image thumbnails that link to larger versions.
1. Choose File> Browse to open the File Browser.
2. In the Folder palette of the File browser, click the folder containing the photo you want to include on your webpage. Photoshop ® displays thumbnail versions of images in the order they would appear in the gallery.
3. To rearrange the order of the image, drag the thumbnail image to your desired location. As you drag, a black band appears between the images to show where the picture will be inserted.
4. If you want to include only some of the images in your gallery, select thumbnail of picture you want to include. Shift-click to select the images adjacent. Ctrl-click (Windows) or Command-click (Mac OS) to select additional images.
5. On the menu bar at the top of the File Browser window, select Automatic> Web Photo Gallery.
6. Site area of the Web Photo Gallery dialog box, select Layout from the menu style. A preview of the selected style gallery will appear on the right side of the dialog box.
7. In the area of Source Photo, click the Destination button and find the folder where you want to save the file galleries. Then, click OK.
8. In the Options area, select Banner from the Options menu. Highlight the Site Name field, and type a name for the site.
9. To adjust other elements of the gallery, such as the size of thumbnails or images that are connected, select another option from the Options menu, and change settings accordingly.
10. When you are satisfied with the settings, click OK. Gallery pages and Photoshop to create a separate page for each image in the gallery.
Related topics in Photoshop Help:
You use the Web Photo Gallery command to automatically generate a Web photo gallery from the series of pictures. A Web photo gallery is a Web site that has a home page with thumbnail images and gallery pages with full-size picture. Each page contains a link that allows visitors to navigate your site. For example, when a visitor clicks on a thumbnail image in home page, gallery page with a load full size image related.
Photoshop provides a variety of styles for your gallery, you can choose to use the Web Photo Gallery command. If you are an advanced user who has knowledge of HTML, you can also customize the style by editing a set of HTML template files or create new styles.
Each template to style the gallery comes with different options. If you use style presets, several options may be dimmed or not available in certain styles. (See Customizing and creating Web photo gallery styles (Photoshop).)
To create a Web photo gallery:
Tip iconWhen create a gallery of images in the file browser, your image will be presented in the order they appear in the file browser. If you prefer to see a different order, change the order of the file browser, then select Web Photo Gallery.
1. Select the file or folder you want to use the file browser.
2. Choose File> Auto> Web Photo Gallery.
3. Under Site, do the following:
* Choose a style for the gallery Styles from the pop-up menu. A preview of the home page for the chosen style appears in the dialog box.
* Enter the email address you want to appear as a contact for the gallery.
* Select the extension for files that are generated from the Extension pop-up menu.
4. Photo source below, do the following:
* In the Use pop-up menu, select Folder or Image option from the Web Browser.
* If you select the folder, click Browse (Windows) or Choose (Mac OS). Then select the folder containing the photos you want displayed in the gallery, and click OK (Windows) or Choose (Mac OS). Your folder name appears in the dialog box next to the Browse / Select button. Then check Include All Subfolders to include the images in any subfolders of the selected folder.
* Click Destination, select the destination folder you want to contain images and HTML pages for the gallery, and click OK (Windows) or Choose (Mac OS).
5. To set general options for the photo gallery, select the General Options from the pop-ups. Then do the following:
* Select the extension for the files (htm, html ..).
* Check Use UTF 8 encoding for URLs if you want that encoding.
* Check the Add Attribute Width and Height for the images to increase download speeds.
* Check the Preserve All Metadata for maintaining metadata info.
6. To set options for the banner that appears on every page in the gallery, select Options Banner from the pop-up menu. Then do the following:
* For Site Name, enter the gallery title.
* For a photographer, enter the name of the person or organization who deserve credit for the photos in the gallery.
* For Contact Info, enter the contact information for galleries, such as phone number or business address.
* To date, enter the date you want it to appear on every page of the gallery. By default, Photoshop uses the current date.
7. If available, to Font and Font Size, select the option for banner text.
8. To set options for the gallery pages, choose Large Images from the Options pop-up menu. Then do the following:
* To have Photoshop resize the source images for placement on the gallery pages, select Resize Images. Then select the option to resize the image from the pop-up menu or enter the size in pixels. To Limit, select the dimensions of the picture you want as long as the size limit. For JPEG Quality, select the option from the pop-up window, enter a value between 0 and 12, or drag the slider. A higher value results in image quality is better, but a larger file size.
* For Border Size, enter the width of the border around the image in pixels.
* For Title Use, specify the option to display information on the description below each picture. Select the file name to display the file name, or select Description, Credits, Title, and Copyright to display text descriptions taken from the File Info dialog box. For more information, see Adding file information (Photoshop).
* For Font and Font Size, select the option for the caption text.
9. To set options for the home page, select Options Thumbnails from the pop-up menu. Then do the following:
* For Size, select the option for the thumbnail size from the pop-up menu or enter a value in pixels the width of each thumbnail.
* For the Columns and Rows, enter the number of columns and rows you want to use to display the thumbnail on the home page. This option does not apply to galleries that use the Horizontal Frame Style or Vertical Frame Style.
* For Border Size, enter the width of the border around each thumbnail in pixels.
* To check whether Filename Title, Description, Credit, Title or Copyrights.
* For Font and Font Size, select the option for the caption text.
10. To set options for colors of elements in the gallery, choose Customize from the Color Options pop-up menu. To change the color of a particular element, click the color swatch, and then select a new color using the Color Picker. Background option lets you change the background color of each page. Banner option lets you change the background color of the banner.
11. To set options for displaying the text to appear on each image as an antitheft deterrent, select Security Options from the pop-up menu. Then do the following:
* To Fill, select Custom Text to enter customized text. Select Name, Description, Credits, Title, or Copyright to display text drawn from the File Info dialog box. For more information, see Adding file information (Photoshop).
* Determine the font, color and text alignment options. To place text in the image on the angle, choose the rotation option.
Photoshop places the following HTML and JPEG files in your destination folder:
* A home page for your gallery named index.htm or index.html depending on the choice of Extension. Open this file in a Web browser to view your gallery.
* Images JPEG images in a subfolder.
* HTML pages pages in subfolders.
* Thumbnail images in the JPEG thumbnails subfolder.
People who study hard and are diligent in asking why a better person than the person who knowingly but did not know.
Viewing topics, Adobe provides complete documentation in the help system accessible to HTML-based. Help system includes information on all application tools, commands, and features for Windows and Mac OS systems.
Using windows help
The help window is divided into two frames: Navigation frame on the left and right frame topics. In order to Navigation, click one of the following links are underlined:
* Help Use to return to this introduction.
* To see the help table of contents.
* Index to view index of help.
* Site Map to see all the titles and the index of Help topics in a single list.
* Search to find topics that contain specific text.
To display the help topic within the framework of topics, click on the link in the Navigation frame. For example, click the link in the table of contents to display the appropriate topic.
To resize the frame, drag the vertical border between them.
Navigating in the help topic
Click the following link which is underlined in order to browse Help Topics:
* Prior to display the previous topic in Help.
* Next to display the next topic.
* Top to jump from the bottom to the top of a topic.
* Cross-references to other topics to display the referenced topic. topic links
* Parent at the top and bottom of the topic moved into the hierarchy of help topics.
* Related subtopics in the list at the end of the topic.
How to Use Content
Contents contains links to all the chapter headings in Help.
To search for topics with content:
1. Contents Click on the Navigation frame.
Chapter titles appear within a frame link Navigation.
2. Click on a title in the Navigation frame.
Related topics arise in the context of topics with links to all relevant subtopics.
3. To display the clicks, its subtopic links.
Tips
* To scan both levels in the Help topic, click the chapter title in the contents one by one. Every time you click on the title in the content, the subtopics that appear in the frame topics.
"To see a list of all help topics, use the Site Map.
Using index
Index entries containing the keyword followed by a link to the topic where the entry was discussed.
To search for topics by using the Index:
1. Index Click on the Navigation frame.
Letters of the alphabet appears at the top of the Navigation frame.
2. Click on a letter in the alphabet.
Entries for the letter that appears below the alphabet, followed by a link number for each occurrence of an entry in the Help.
3. To display a topic for this entry, click on one link at the end of the entry numbers.
Tips
* If you use Internet Explorer or Netscape 6, you can display the title of the link by pointing to the target (without clicking) on the numbered links. The title appears below the pointer.
* Entries that appear in more than one topic has a link doubles.
Using Sitemaps, Site Map contains links to all topics in the Help and all entries in the Index.
To search for topics by using the Site Map:
1. Site Map Click on the Navigation frame.
Site map appears in the Navigation frame.
2. Site Map Scroll until you see the title of a topic of interest or index entry.
3. To display a topic, click the title or the link at the end of the entry index number.
Tips
Using the browser's Find command, you can search for text in all the headings or index entries in the Site Map. To do this, click on the frame, Navigation, and then use the browser Find command to search for text on the current page. If your browser to find text, scrolls to display the Site Map. You can then click the link to view the topic.
Using Advanced Search, Use Search to find all topics that contain certain words.
To use the search, you need Javascript enabled in your web browser. If the link does not appear in order to search for Navigation, check your browser settings.
To search using Search topics:
1. Click Search on the Navigation frame.
Search text boxes and buttons appear in the Navigation frame.
2. Type the word you want to find and click Search.
Links to topics that contain the search words appear in the Navigation frame. The topics most likely to contain the information you want on the top of the list.
3. To display a topic, click the title in the search results.
Search details
* If you type more than one word separated by a space, the results cover topics that include all the words you typed. For example, if you type "Adobe Photoshop," includes the results of which contain both the topic "Adobe" and "Photoshop" anywhere in the title or content of the body.
* This feature does not search-derived words. For example, if you search for "image" search will not match the "image" or "imaging." Also, if you search for "image" search will not match "image."
* Not case-sensitive, so "Photoshop" is the same as "photoshop."
* Which includes the game in their title ranked higher in search results. Total body content also matches the topic ranking.
* Search feature to ignore all punctuation characters except periods in words and underscore.
Stop words
Filter search feature (and ignore) the words you type very common in the Search text box. Often called stop words, common words usually do not improving search results. Examples of stop words include "," "the," "as," and "when." In addition, the search feature and ignore the one-two-character words (except the two-character words including digits).
For example, if you type "work with color management" in the text box, the search does not include the word "with" and displays a page that contains the "work," "color," and "management."
Web browser requirements, help systems using frames and JavaScript to display a topic. If you can not see or navigate within a topic, make sure that your web browser meets the minimum requirements.
To see Help with care:
* Use Netscape Communicator 4.75 and later or Internet Explorer 5.0 and later on the Mac OS and Windows.
* Create JavaScript enabled.
* Setting your browser to always accept cookies.
* JavaScript does not work reliably when viewing in Netscape Communicator Chinese, Japanese, or Korean pages. If you have problems, use Internet Explorer.
* If your browser on a Macintosh running out of memory, increase the preferred memory size of the browser.
* If the text difficult to read because it is too small, increase the browser's default font size.
* To use different fonts for help text, change the browser's default font.
How to Access Help feature
HTML-based help system is accessible online providing easy navigation, as well as easy reading using third-party readers compatible with Windows. Here is a Help feature that makes it accessible to the public and vision-motion-challenged:
* Alternative text for images. All images on Assistance to include alternate text.
* All links provide context. All links including information about the target of a link (usually the title of this topic). In the index, this information is encoded in the TITLE attribute of links, some screen readers using text links instead.
* All information conveyed with color is available without color. For example, all links are blue and underlined.
* Standard tags representing the hierarchy of information. Topics to be formatted using standard HTML tags (eg, H1, H2, and H3) that shows the hierarchy of information.
* Style sheets control formatting. Topics that do not contain embedded font tags. The system must help the functional if you use your own style sheet or change the font size and style you are using a browser.
* High Contrast between foreground and background colors. Black text on white background give high contrast display.
* Site Map. All topics in Help appears on the Site Map.
* All frames include a meaningful title. Screen readers use a title to provide context.
0