Optimization with "Save for Web" in Photoshop CS

[Zeppelin]

I recently started with the Photoshop, before that I have done small things in Adobe ImageReady. But, I came to know that Photoshop is much better than ImageReady, so I jumped on Photoshop. The most famous of the applications of Adobe software house dedicated to graphics, in every edition has made many advances in the field of digital manipulation of images and in all the various facets of the sector, including in recent years, that of web. Now I am having doubts with the Save for Web option that is present in Photoshop CS. Since, you members explain in simple language with proper information, I thought to take some help from you members. Please provide some notes about the optimization with "Save for Web" in Photoshop CS. I am sure that you have got the point that I want to know. So please co-operate and send some notes as soon as possible. Also let me tell you that I am not having much knowledge about the Photoshop CS, so considering me as noob, sent some replies in details.

[wllwnn]

It is clear that designing images for the Internet, more specifically for a site, not only about graphic design, layout and images that contain, but all operations useful to ensure that these visuals are accessible both in terms of weight, download speed, both in terms of aesthetics: the latter process, called optimization is conceptually the search for a happy medium between content accessibility and pleasantness. With Photoshop CS just does not have the ability to create images and graphics, but also convenience and time savings for implementing the web pages, optimization tools and rescue structures of graphics combined with HTML / XHTML or CSS. You should also know about how to achieve a complete set of images and a flexible layout the pages. You should also learn how to design the structure graphics with web publishing tools to put in position of Photoshop CS and ImageReady CS.

[tomstonsils]

Photoshop CS, like its earlier versions, allows us to save our images in a large quantity of sizes, for all possible uses. The image formats used and recognized by most browsers are clear GIF, JPEG, PNG (ping ), and these are the special features that bind them to certain situations where you choose to use them. Photoshop CS can save to these formats simply by using the Save command, but for our needs for web publishing will use the Save for Web interface (SHIFT + CTRL + ALT + S). By optimizing the graphics need to be clear about the purpose of the image within the page. You must be able to decide which files will be more compression such as a thumbnail (small picture), or which requires more attention to quality, like a photograph.

[BlackSunReyes]

Photoshop make this task easier by constantly monitoring weight and download times for updating any changes to the file being processed. Next to "Default" in the "Save for Web" (ctrl + alt + shift + s), we find the right of the drop-down menu icon with a small triangular arrow, click on get some functions for optimization. You can:

• save the configuration optimization of a .irs file , will become part of the menu items "Default"
• cancel the configuration,
• choose the weight in kb of the file. Photoshop will adjust the technical prescriptions of compression and size to the size chosen,
• update displays thumbnail image;
• Manage links between sections, while saving optimized sections connected to each other have the same configuration. Once linked, the sections together change color of the frame number and the mark;
• Configure options for saving for the web and save them. We will deal with this interface in full in the section on design layout.

[Chingum]

I think that looking at figure and explanation, you will definitely get an idea about it. Let's examine the tools of the interface:

• AREA A: Click on the various options allows us to see our image in its original version, the optimized version, in two or four versions of tablets in different ways. By choosing one of the options described in Area C appear all the details of the type of compression applied. To make changes to the compression section and choice just click to activate it.
  
• AREA B: A bar of tools that aid in navigation of the image. With the hand can move the image by clicking and dragging the pointer. Slice Select tool allows you to interact with sections of the image, if any, and select them for information on each individual area sections.
  
• AREA C: has a status bar with information about the image, when displaying two or four cases of compression, the bar appears for each of them. The information are: image size, weight, average download time at 28.8 kbps, the percentage of dithering, compression algorithm.
  
• AREA D: The display image compression format with the current.
  
• SECTOR E: has the buttons 'Save', 'Reset' and 'Cancel'. With the Save button to save the image to the desired setting, with Restore can undo the changes and return to the recommended compression from Photoshop CS. Remember the key is to return to the main area of work in Photoshop while maintaining the compression settings in memory and be repeated the next time a "Save for Web". At the bottom of the interface we find the Edit in ImageReady button that allows you to continue the optimization on ImageReady CS.
  
• SECTOR F: this area is the heart of the panel "Save for Web".
  
• SECTOR G: There are folders 'Color Table' and 'Image Size', the latter has the same functions of the form that are in the main Photoshop menu under the Image> Image Size. "Color Table" is activated, however, when we select as GIF or PNG-8 and has features aimed at the management of the colors that we will discover along with the compression algorithms.
  
• SECTOR H: it has various functions: zoom ratio, color information system (by rolling the pointer over the image we have a continuous update of the RGB color values that we meet with the mouse, the value of alpha channel, and the hexadecimal value ' color index).