Those who are new to Photoshop are probably wondering why it provides two types of saving their work - “Save As” and “Save for Web & Devices”? In addition, there is a whole list of graphic formats... This will be discussed below.
Let's first touch on graphic formats. Let's look at the most common of them and for what situations they are best suited.
PSD (Photoshop Document)
PSD is Photoshop’s proprietary format, its business card. It is simply comprehensively developed, since it: supports the “layered” structure of finished or not quite graphic works, clipping paths, information about channels and changes made in them without loss of quality during repeated resaving.
As a rule, this format is chosen if the work is not yet finished, or if you want to save the sequence of operations performed, individual elements located on layers, effects, etc. However, the size of such a file is much larger than a similar picture, but saved in “jpg”. We will talk about it further...
JPG (JPEG, Joint Photographic Experts Group)
The most common and popular image format. I’m not afraid to say, but most of all users of photographic equipment remain in it, starting from simple amateurs and continuing with “advanced” amateurs. Pros also use it, but mainly only at the final stage of creating a photograph, after their photograph has been repeatedly transferred from one place to another at all stages of processing. graphic format to another. Pictures in jpg format also have absolute superiority on the World Wide Web.
Regarding this format, I would recommend the following. If you are saving a photograph, which also has a bright color palette, then feel free to choose “jpg”. Just remember that “jpg” has nothing to do with layers, in addition, with further resaving of the image, its quality will gradually deteriorate, due to the fact that from time to time the compression algorithm provided in it will constantly “clean up” the image from the existing colors. Once you save the final image as a “jpg”, do not edit it again.
The quality of the image in the jpg format is controlled, and in close connection with the “weight” of the image. The higher the compression percentage you apply, the more colors will be removed from the image, which in turn will significantly reduce the size of the saved image. The race to save space on the disk does not go unnoticed and the image loses its attractiveness - noise appears, especially at the boundaries of color transitions, small details (flying hair, thin lines, etc.)
GIF (Graphics Interchange Format)
This format is convenient in cases where you are working with a file with a non-critical color scheme, i.e. We are talking about 256 colors. In the case of "gif", I would recommend using it for images in which the drawn elements are presented primarily in one color, without gradient halftones (black, green, blue, pink, etc.). True, you will not lose anything if you save your image in the 8-bit “png” format, but we will talk about it below. "gif" also supports transparency, but again, it is not intended for saving layers. Together with that this format is the only tool for creating graphic animation.
PNG (Portable network graphics)
There are two options for saving in the “png” format - in 8-bit and 24-bit format. This operation is carried out through the menu File>Save for Web & Devices...
Briefly about each option.
“png (8 bit)”, like “gif”, distinguishes only 256 colors, which already makes it the most unattractive means for saving photos. 8-bit “png” is optimal in cases with pictures with gradient transitions, since the algorithm provided in this format compression is more loyal to shades.Like “gif”, 8-bit “png” supports transparency, but is no longer suitable for creating animated images.
"png (24 bit)" compared to the 8-bit version, as well as "jpg" and "gif" has one important advantage - it is the only one that can maintain translucency, that is, if "gif" and "png (8 bit) " are capable of only two transparency values - transparent/opaque, then the 24-bit version provides much large quantity intermediate values. This quality is mainly in demand in the field of web design. You are unlikely to need it in everyday work with images.
And one more thing.. All of the listed formats, with the exception of “psd”, can be opened in any standard image viewer, and also uploaded to the Internet without any problems.
And now a few words about the saving methods offered in Photoshop. So, File>Save As... To save in “psd” only this method is provided, in the same way you can save in “gif”, “jpg” and “png (24 bit)", but it is advisable to resort to this type of saving only in cases , when the size of the final image is not important to you.
The saving method via the File>Save for Web & Devices... menu, in turn, is not suitable for the “psd” format, but with other formats this operation goes like clockwork. The main advantage in this case is the possibility of very fine tuning quality of the output image, and hence control of file size. Also convenient is the option to preview the result of saving an image while still selecting the optimal compression parameters. And what's more important with the gif format - the File>Save for Web & Devices saving method... you can save an animated gif!
Instructions
A beginner should not delve too deeply into the theory, but you should definitely know that JPEG is a format with a compression algorithm. A file of this format can have different extensions, for example? .jpeg, .jfif, .jpg, .JPG, or .JPE. It is very convenient because it takes up much less space than a similar image in TIFF or BMP format. Unlike the latter, it has less information about the image. This may not be too noticeable when viewing the original file on a monitor, but when the photo is printed in a laboratory or processed, the result may be of lower quality than formats with complete information.
The way you save JPEGs depends greatly on your needs. Before saving the picture, decide whether you will process it, print it on photo paper, or whether you just need to post the picture on a page on the Internet.
For subsequent processing or printing in the darkroom, save the image at its maximum quality and size. When saving the image you are looking for, open the File menu and select Save as. Select the directory where the file will be saved. Enter the name in the first line, and select the JPEG format in the second line and click the Save button. If you have manipulated the file, a dialog box will pop up in front of you to select the quality of the saved image. You should select the maximum quality using the slider or the corresponding number 12. Confirm your choice by clicking Ok. If you have not manipulated the image, then after saving it, the dialog box for selecting JPEG quality will not open.
When saving a photo for publication on the Internet, modern resources themselves can change the size and quality of the downloaded JPEG. However, in some cases you have to do this yourself. Before saving the picture, change its size by going to the Image menu and selecting Image size. Make sure the Constrain Proportions box is checked. Select a unit of measurement that is convenient for you: centimeters, pixels, inches or millimeters, enter the required value of one of the sides in numbers and click Ok (in most cases, images from 800 to 1500 pixels on the larger side are used for web pages). Save the result, but select a lower quality. With values ranging from 8 to 10 and a small image size, visual differences from the original size are minimal, but the file size is significantly reduced.
also in Adobe Photoshop There is a special module for optimizing and saving images for web pages, which may be more convenient. From the File menu, select Save for Web. In the dialog box that opens, you will be presented with a window for viewing the saved image and several settings options. Select the 4-up or 2-up tab. The program will present you with four or two possible options for the optimized image. To save the appropriate one, just click on the picture and click Save. If you are not completely satisfied with the options, then first use the tools located to the right of the image.
Preparation of any digital image readable graphic editor Adobe Photoshop, be it a PSD file, TIF image or “large” JPEG image, for publication on a website, forum or in social networks, as well as for shipment by e-mail. In other words, "japeg" for the Internet. It worked out in rhyme.
Of course, the image formats that Photoshop can read are hardly limited to the three mentioned above. And what’s nice is that most can be converted to JPEG. Regardless of the source format, there are two ways to "japegize" Photoshop. The opportunity to choose is doubly pleasant. Both ways are different. External differences are detectable with the naked eye; I will specifically highlight the differences in purpose (“Which path to follow?”).
In this tutorial I will introduce two step by step instructions with the necessary theoretical inclusions. It is designed to show you how to optimally save your virtual drawing, collage or photograph in the widely used JPEG format. The latter is most effective for images with smooth color transitions.
To consolidate and expand the acquired knowledge, as well as to develop skills, I have prepared appropriate exercises. I suggest you complete them and then publish your results in the comments to this lesson. Test your skill in the field!
First way
1 step
I open the original image in Photoshop. In my case, this is a file called “Example.psd” containing a drawn ball.
I press the key combination “Ctrl”, “Shift” and the key designated by the Latin letter “S” on the keyboard, or select “File” > “Save As...” from the main menu. A dialog box titled “Save As” appears.
Step 2
I choose the location of the future JPEG image. In the “File name” field, enter a new name for the image, if necessary. In the “File type” drop-down list, select the “JPEG (*.JPG, *.JPEG, *.JPE)” format.
I leave the parameters below unchanged, making sure that “standard” sRGB is specified and selected as the color profile embedded in the future JPEG image. If this is the case, then I move on to step 4.
If a different color profile is specified instead of sRGB, such as ProPhotoRGB or AdobeRGB, I will convert the source image to the sRGB color space before starting this tutorial to ensure colors appear consistently across most devices. I'll do it this way.
Step 3
I press the “Esc” key on my keyboard to close the “Save As” window.
I select “Image” > “Mode” from the main menu. If the checkbox is checked opposite “8 bits\channel” (“8Bits\Channel”), then select “16 bits\channel” (“16bits\Channel”). Increasing the color depth is desirable so that conversion from one color profile to another occurs accurately. Visually, changes in color depth are unlikely to be reflected in the original and final images.
Then I select “Edit” > “Convert to Profile” from the main menu. A dialog box appears with the title Convert to Profile.
In my case, the original color profile (“Source Space”) that describes the colors in the drawing is called “Adobe RGB (1998)”. I select the value “sRGB IEC61966-2.1” in the “Destination Space” drop-down list. I check the conversion parameters - they are located below: the “Tool” (“Engine”) parameter is set to “Adobe (ACE)”, “Method (rendering)” (“Intent”) - “Relative Colorimetric”, set There is a check mark next to the “Use Black Point Compensation” option; there is no check mark next to the “Flatten Image to Preserve Appearance” option.
If you increased the color depth (I did this a little earlier), then the “Use Dither” option will be grayed out. If there is only one layer in the open image (when you open JPEG images or “simple” TIF images, this is usually the case), then the “Flatten Image to Maintain Appearance” option is also greyed out.
I click the “Done” (“OK”) button. The Convert to Profile window disappears.
Step 4
A new dialog box with the title “JPEG Options” appears in the main program window. The “Quality” parameter allows you to set the ratio between the quality of the output image and the amount of space that the image will occupy in the computer’s memory. Thus, the price for reducing volume is the degradation of the quality of the original image. How less value“Quality” parameter, the smaller the size of the JPEG image.
In the example under consideration, I will focus on a value of 6.
To evaluate the quality of the image before saving, I’ll check the box next to the “Preview” parameter.
Step 5
I will set the value of the second parameter - “Format Options” - equal to “Standard Optimized” (“Baseline Optimized”). The volume of the future JPEG image has decreased, but the image quality remains the same.
Step 6
I click the “Done” (“OK”) button in the “JPEG Options” window and check the result.
I compare the volumes of the original PSD image (~ 3000 Kb) and the final JPEG image (82 Kb). Thus, the JPEG file turned out to be approximately 36 times smaller than the original image with visually equal quality. Comfortable!
Please note that the size of the final JPEG image remains the same as the original PSD image, it is 2480 pixels × 2480 pixels.
Second way
1 step
I open the original image in Photoshop.
I press the key combination “Ctrl”, “Alt”, “Shift” and the key designated by the Latin letter “S” on the keyboard, or select “File”> “Save for Web...” from the main menu.
A new dialog box with the title of the same name will appear.
Step 2
Step 3
I set the “Quality” parameter to maximum.
Step 4
I reduce the image size using the “Image Size” parameter.
This is an optional operation, but it helps to significantly reduce the size of the future JPEG image, most often with minimal loss in quality. On the one hand, reducing the size will lead to a natural decrease in volume and, on the other hand, to a decrease in detail. The latter, in turn, limits my ability to print the final JPEG image. If I don't plan to print the last one, I'll forget about the restrictions.
In this example, I enter the value 600 in the “Width” field. The value in the “Height” field will automatically change. Also, the size of the output image will automatically change relative to the size of the original image, specified in the “Percent” field. Changes occur automatically and the “Percentage” field is in an active state if the “Width” and “Height” parameter fields are connected, as evidenced by the corresponding icon located to the right of the named fields.
In the preview window on the left I will evaluate the size and quality of the image. And I can find out the approximate volume of the latter by the number indicated, usually in kilobytes (Kb) or megabytes (Mb) under the left corner of the window.
Step 5
I check the box next to the “Optimized” option.
Step 6
If I want to further reduce the volume of the output image, then I reduce the value of the “Quality” parameter. I recommend sticking to values between 45-90.
IN in this case I'll choose a value of 75.
As a result, on average, with an Internet access speed of one megabit (1 Mbits), the time it takes to download my drawing from the Internet will be one second. It is indicated under the volume value of the future JPEG image.
At the same time, visually the picture turned out to be of quite acceptable quality, the tonal transitions are quite smooth.
Step 7
I check the box next to “Convert to sRGB” and select “Monitor Color” from the drop-down list below.
Step 8
Finally, I check the box next to the “Embed Color Profile” option.
Actions in the 7th and 8th steps are desirable so that the future JPEG image is displayed approximately equally on different devices.
Step 9
In the dialog box that appears with the title “Save Optimized As,” I select the location of the JPEG image and set its name, if necessary. I click the “Save” button in the active window. Both windows disappear. Now I can evaluate the result.
I close the original image. In the dialog box that appears asking you to save changes, select “No”.
The image obtained by the second method can be conveniently used for publication on the Internet. And the image obtained by the first method can, in addition to publication on the Internet, be printed. Since the size of the image did not change, it was not subject to interpolation, which means its quality is a priori higher than the quality of the image obtained by the second method.
I will tell you more about interpolation and its impact on the degradation of digital image quality in the lesson “What is interpolation?”
To consolidate the acquired knowledge, I suggest that you not only save several of your own photographs in JPEG format, but also complete the exercises attached to this lesson. The latter cover the challenges you may encounter in your photography career.
I welcome you again to the expanses of my blog, dear readers and visitors. Today we will learn how to save an image in Photoshop for different situations. We will learn how to save images to transparent background, without loss of quality, animation and much more. Many are probably already thinking: “What the hell? When will we start doing normal Photoshop, and not all sorts of little things.” I'll answer you. Don't rush ahead of the locomotive. Learn the theory and basics first, and only then the most interesting part will come. Go in order and everything will be cool. Moreover, there are some nuances here, from the format of the picture to the size.
Normal saving
To save your document, or more precisely, pictures, you need to go to Top Menu and click where? That's right, you need to click on "File". And in the menu that opens, select “Save As”. There are several basic formats in which it is recommended to save. We looked at them in more detail. I’ll briefly tell you which formats are best for saving images for what purposes.
And, by the way, when you save the picture in JPG format, a window will pop up asking you to select the quality. I usually give it an 8 for regular photos. In principle, the quality above is not particularly distinguishable. The type of format doesn’t play a special role, at least you won’t notice anything. You can install the basic optimized one, then the final image will take up a little less space.
If the image involves working with a more precise drawing, where some important details are shown, then set it to the full 12, since this determines how the quality will change when the picture is enlarged. If this is an ordinary picture, where accuracy and quality do not play a special role, then you should not put more than 8.
What formats are best to save images in?
Let's briefly look at the most popular image formats, which are used for different purposes.
- If your project is not finished yet, then save it in the format PSD. All your progress, transparency, all layers, and so on will be preserved. And by the way, if the project is not just some one-day project, but something larger, then it is better to always keep a copy in PSD. I always keep picture templates that I insert into the announcement of the article, since the topic is the same. The picture inside and the title just change.
- If you have finished your project and want to save your final result (for example, you processed a photo or made a collage), then save it in JPG (JPEG). Best for photography. In the vast majority of cases, we will save there.
- If you have done animation (for example, animated banners), then only GIF, since only it can consist of several images simultaneously. But despite the huge plus, this extension also has a big minus. The fact is that it is not capable of saving pictures with more than 256 colors. And this, as you probably already guessed, is very small, considering that a regular JPG photo can contain more than 16 million colors. Can you smell the difference? But for low-color animated banners, this will be what you need.
- If your image has a transparent background, i.e. in the picture there is only a certain object without white background(or) then your format is PNG. The fact is that if you save any picture with a transparent background in Photoshop with JPG extension, then it will simply be filled with white. And when you subsequently insert the image into the editor, there will no longer be any transparency.
- If you want to save a picture in Photoshop without losing quality, then it is best to do it in the format TIFF. This is where the entire color palette and pixels are saved. This format is used for printing when printing raster images just so because the quality is not lame. The only downside is that it takes up an indecent amount of space on your hard drive.
- And of course, it was impossible not to mention that Photoshop is capable of creating graphics in the format PDF, which will allow you to open it not as an image, but as a document.
I would also like to note that GIF, like PNG, supports background transparency, but unlike the latter, it does not support translucency. Either everything or nothing.
Of course, you can see many other extensions here, but trust me, they are not worth your attention.
Saving for Web
In addition to the usual file export, you can save the image for posting on the Internet. With this method, it will be more optimized for the Internet, which will speed up its opening and generally be more convenient. So if you want to insert pictures onto the site, it is better to first save them for the Internet.
And if you want to save a picture in Photoshop with a transparent background for the Web, then select the PNG-24 format. Be sure to make sure that the Transparency option is checked, otherwise your image will have a white background that will replace all the emptiness. As you already know, the PNG extension can work without a background.
It doesn’t take much effort to save the animation either. Just choose a format save GIF and if necessary, put in full color, i.e. all 256 colors if you think you need it. You don’t need to touch the rest of the settings; leave everything without dezering so as not to take up extra space.
Before saving, you can see for yourself how it was and what happened for comparison. This is a very convenient thing, because you can play with the sliders and settings and see for yourself in real time how much the photo quality will change, and which settings are the most optimal. Select the 2 options tab and then you will see the original and optimized image at the same time.
Try to do all the manipulations from start to finish yourself. It's very simple. Also, do this for each of your appointments.
Well, if you want to study Photoshop in more detail, I can offer you wonderful video course, thanks to which you will learn Photoshop in a couple of weeks. Believe me, it is not difficult at all if you devote 1-2 hours a day to the program. All lessons are in video format and are designed for beginners, so you won’t be uncomfortable and you’ll understand everything the first time. Believe me, this is a really worthwhile course!
Well, this concludes our lesson today. I am very glad if this article was useful to you. By the way, if you want to receive updates on my blog, be sure to subscribe, and then you will be aware of the latest news, competitions and simply useful lessons for you. Good luck and see you in the next articles. Bye bye.
Best regards, Dmitry Kostin
After completing all operations on the image (photo), you must save it to your HDD, choosing a location, format and giving a name.
Today we’ll talk about how to save finished works in Photoshop.
The first thing you need to decide on before you start the saving procedure is the format.
There are only three common formats. This JPEG, PNG And GIF.
Let's start with JPEG. This format is universal and suitable for saving any photographs and images that do not have a transparent background.
A special feature of the format is that upon subsequent opening and editing, so-called "JPEG artifacts", the cause of which is the loss of a certain number of pixels of intermediate shades.
It follows from this that this format is suitable for those images that will be used “as is”, that is, they will no longer be edited by you.
Unlike the previous format, PNG when re-edited (used in other works) it does not lose quality (almost).
The last representative of the formats for today is GIF. In terms of quality, this is the worst format, as it has a limit on the number of colors.
Let's practice a little.
To call the save function, you need to go to the menu "File" and find the item "Save as", or use hotkeys CTRL+SHIFT+S.
This is a universal procedure for all formats except GIF.
Substrate
As we already know, the format JPEG does not support transparency, so when saving objects on a transparent background, Photoshop suggests replacing transparency with some color. The default is white.
Image Options
The picture quality is set here.
Type of format
Basic (standard) displays the image on the screen line by line, that is, in the usual way.
Basic optimized uses the Huffman algorithm for compression. I won’t explain what this is, look for it yourself on the Internet, it’s not relevant to the lesson. I will only say that in our case this will allow us to slightly reduce the file size, which is not really relevant today.
Progressive allows you to improve the quality of an image step by step as it loads on a web page.
In practice, the first and third varieties are most often used. If it’s not entirely clear what this whole kitchen is for, choose Basic (“standard”).
Save as PNG
When saving in this format, a window with settings is also displayed.
Compression
This setting allows you to significantly compress the final PNG file without loss of quality. In the screenshot, compression is configured.
In the pictures below you can see the degree of compression. First screenshot from compressed image, the second - with uncompressed.
As you can see, the difference is significant, so it makes sense to check the box next to "Smallest/slowest".
Interlaced
Settings "Remove selection" allows you to show a file on a web page only after it has completely downloaded, and "Interlaced" displays an image with a gradual improvement in quality.
I use the settings as in the first screenshot.
Save as GIF
To save a file (animation) in the format GIF necessary on the menu "File" select item "Save for Web".
There is no need to change anything in the settings window that opens, as they are optimal. The only point is that when saving the animation, you need to set the number of playback repetitions.
I hope that after studying this lesson, you have gained the most complete idea about saving images in Photoshop.