Preparing any digital image readable by the Adobe Photoshop graphics editor, whether it be a PSD file, TIF image, or a "large" JPEG image, for publication on a website, forum, or in social networks, as well as for shipment by e-mail. In other words, jpeg for the Internet. It worked out in rhyme.
Of course, the image formats that Photoshop can read are hardly limited to these three. And what's nice, most can be converted to JPEG. Regardless of the original format, there are two ways to "japegize" in Photoshop. The opportunity to choose is doubly pleasant. Both paths are different. External differences are revealed to the naked eye, differences in purpose (“Which way to follow?”) I will highlight specifically.
In this tutorial, I will present two step-by-step instructions with the necessary theoretical “blotches”. It is designed to show you how best to save your virtual drawing, collage or photo in a 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 a skill, I have prepared the appropriate exercises. I suggest you complete them, and then publish your results in the comments to this lesson. Try out your skill in the "field conditions"!
First way
1 step
open 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 marked with the Latin letter “S” on the keyboard, or select “File” (“File”)> “Save As ...” (“Save As ...”) in the main menu. A dialog box titled "Save As" appears.
2 step
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 drop-down list "File type" I select the format "JPEG (*.JPG, *.JPEG, *.JPE)".
I leave the parameters below unchanged, making sure that the "standard" sRGB is specified and selected as the color profile embedded in the future JPEG image. If so, then go to the 4th step.
If another is specified instead of sRGB color profile, for example, ProPhotoRGB or AdobeRGB, before starting the procedure discussed in the lesson, I will convert the original image to the sRGB color space in order to display colors uniformly on most devices. I will do it in the following way.
3 step
I press the Esc key on the keyboard to close the Save As window.
I select in the main menu “Image” (“Image”)> “Mode” (“Mode”). If the “tick” is set opposite “8 bits\channel” (“8Bits\Channel”), then I select “16 bits\channel” (“16bits\Channel”). Increasing the color depth is desirable so that the conversion from one color profile to another goes smoothly. Visually, the change in color depth will hardly affect the original and final images.
Then I choose "Edit" > "Convert to Profile" from the main menu. A dialog box titled "Convert to Profile" appears.
In my case, the source color profile ("Source Space"), which 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 parameter "Tool" ("Engine") is set to "Adobe (ACE)", "Method (rendering)" ("Intent") - "Relative Colorimetric" ("Relative Colorimetric"), set There is no 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 inactive. If there is only one layer in the open image (when you open JPEGs or "simple" TIFs, it usually is), then Flatten Image to Preserve View is also disabled.
I click the “Finish” (“OK”) button. The Convert to Profile window disappears.
4 step
A new dialog box titled "JPEG Options" appears in the main program window. The "Quality" parameter allows you to set the ratio of the quality of the output image and the volume that the image will occupy in the computer's memory. Thus, the payment for reducing the volume is the degradation of the quality of the original image. The lower the Quality setting, the smaller the size of the JPEG image.
In this example, I will stop at a value of 6.
To evaluate the quality of the image before saving, I will check the box next to the “Preview” parameter.
5 step
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.
6 step
I click the OK button in the JPEG Options window and check the result.
I compare the volumes of the original PSD-drawing (~ 3000 Kb) and the final JPEG-picture (82 Kb). Thus, the JPEG file turned out to be about 36 times smaller than the original image with visually equal quality. Comfortable!
I draw your attention to the fact that the size of the final JPEG image remains the same, as in 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 marked with the Latin letter "S" on the keyboard, or select "File" > "Save for Web ..." ("Save for web…»).
A new dialog box with the same title will appear.
2 step
3 step
I set the value of the parameter "Quality" ("Quality") to the maximum.
4 step
I reduce the size of the image 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 latest one, then I'll forget about the restrictions.
AT 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 be automatically resized 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 fields-parameters "Width" and "Height" 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.
5 step
I check the box next to the “Optimized” parameter.
6 step
If I want to further reduce the size of the output image, then I reduce the value of the “Quality” parameter (“Quality”). I recommend sticking to values in the range of 45-90.
In this case, I'll choose a value of 75.
As a result, the average, with an Internet access speed of one megabit (1 Mbits), the download time of 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 tone transitions are quite smooth.
7 step
I check the box next to the “Convert to sRGB” option and select the “Monitor Color” value from the drop-down list below.
8 step
Finally, I check the box next to the "Embed Color Profile" option.
Actions on the 7th and 8th steps are desirable so that the future JPEG image is approximately the same displayed on various devices.
step 9
In the dialog box that appears with the title “Save Optimized As” (“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.
Close the original image. In the dialog box that appears asking you to save the changes, select "No" ("No").
The image obtained by the second method is convenient to use for publishing on the Internet. And the image obtained by the first method can be printed in addition to publishing on the Internet. In view of the fact that the size of the image did not change, it was not subjected to interpolation, which means that 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 you not only save several of your own photos in JPEG format, but also complete the exercises attached to this lesson. The latter cover the challenges you may face in photography.
Today we will talk about how to properly save and optimize an image in Photoshop and in what format it is better to do it. But right choice save format greatly affects the quality and appearance images, as well as the weight of the image in kilobytes. This is especially important for those who take into account traffic consumption. So, let's deal with jpg, gif and png in order.
1. In what formats to save pictures
After you have opened your favorite photo in Photoshop and somehow conjured over it or, in general, created a collage of your own production from scratch, you have to save this file on your computer. There are three most common formats for saving a file.
jpg format. Perhaps the most common format. Suitable for storing complex graphic images with many colors and shades and rich texture. That is, photos are best saved in this format. Among its disadvantages is that it does not support transparency and is very sensitive to red. 
gif format. This format is very good for saving files, with limited number colors. For example, text pages, tables, diagrams, logos, simple pictures. It turns out much clearer and weighs less. Plus, the format supports transparency and animation. However, the format is morally obsolete and is already inferior to the png format. 
png format. Similar to the previous format, but more advanced and more efficient in compressing pictures. In png, it is very convenient to save clipart on a transparent background. There are two formats png-8 (for simple pictures, supports 256 colors) and png-24 (for more complex images, supports colors well). 
2. Save using the "Save as ..." (Save as ...)
You can save the picture using the good old way through the menu "File" -\u003e "Save as ..." (Save as ...) or the key combination "Shift + Ctrl + S". In the drop-down menu, select the file format in which we want to save the file. (See the picture below) This method is used when the saved image will remain on your computer and is not intended for publication on the Internet. 
3. Save using the "Save for Web" (Save for Web ...)
If your picture is intended to be posted on the Internet, then it is better to use the "Save for Web" (Save for Web ...) function. With this method, the picture is better and better saved specifically for the Internet, and plus there are several convenient features. Select in the menu "File" -> "Save for Web ..." (Save for Web ...) or the key combination "Alt + Shift + Ctrl + S". A dialog box will open.
In order to save the image in jpg format, in the drop-down menu (1) select the JPEG format. We set the quality of preservation (2) from 75% to 95%. I always put 75%. Set, if necessary, the required dimensions of the image (3). The boxes on the left show the original image size (4) and the optimized image size (5). After that, click "Save". 
In order to save the picture in gif format, in the drop-down menu (1) select the GIF format. Select the number of colors to save (2). Set, if necessary, the required dimensions of the image (3). The boxes on the left show the original image size (4) and the optimized image size (5). After that, click "Save". 
In order to save the image in png format, in the drop-down menu (1) select the PNG-8 format. Select the number of colors to save (2). Set, if necessary, the required dimensions of the image (3). The boxes on the left show the original image size (4) and the optimized image size (5). Put a tick in the checkbox "Transparency" (6) so that the background is transparent. After that, click "Save". 
If it is not immediately clear in which mode to save, it is best to try all the save modes, determining by eye the combination of image quality and its weight that is optimal for you after optimization. In general, it is useful to experiment with the settings in order to understand how a particular function works.
09.11.2018 09.11.2018
When the work in Photoshop is ready, it must be saved.
Depending on what task you are saving the file for, you need to choose a format. In this article, we will look at how to save and which file format to choose.
In what format should the file be saved?
PSD. This is the standard Photoshop file format. In it, you save your file so that you can continue working at any time. In PSD format, you won't be able to show your friends (parents, girlfriend, etc.) the photo or graphics you drew. This format can only be opened with Photoshop.
JPG. The format is great for photographs and other graphics. Before saving in Photoshop, you can optimize the saved JPG file - this means you can adjust the quality of the image so that the file size suits you. The format opens on any computers and phones. Good decision to show photos to relatives, send graphics to work, save a background for the site, etc.
PNG. It is mainly used by designers for graphics on websites, online advertising (banners), graphics for mobile applications etc. The format is notable for supporting transparency in the image. If you need to save an object on a transparent background, save it as a PNG.
gif. This format is used if you want to save the animation. For example, animated banner, emoticon, short video or sticker. Remember all the well-known GIFs that are walking around the Internet - this is just that format.
How to save to PSD
Give the file a name and select PSD format(usually selected by default).
Be sure to check the checkbox Layers. Otherwise, everything will not be saved and there will be no benefit from such file saving.
How to save as JPG
- Execute the command File - Save.
- Choose format JPG.
After that, a window will appear where you can configure the parameters of the saved file.
Here you can adjust the quality of the photo by setting the value Quality from 1 to 12.
Check the checkbox of the preview option and you will see how the quality of the photo changes when you change the option Quality.
In addition, you can immediately see how much the file will weigh when you save it. The smaller the file, the faster you can send it over the Internet, the faster it will be loaded by another user. Remember that no one likes to wait a long time for uploading photos on the Internet, especially through a mobile phone.
A variation of the format is best left Progressive. Now we will not go into technical details, but this option is the best.
You need to adjust the quality when saving so that the image does not suffer much, while the file size is significantly reduced.
How to save as PNG
There is no need to save photos as PNG. Use this format if you need to save a high-quality image from transparent background.
A window with settings for the saved image will appear.
Choose PNG-24 format - it will be quality image with the smallest file weight and with all colors.
Check the box Transparency so that the image has a transparent background.
Options - interlaced and Embedded Profile must be removed, because This is an extra and unnecessary load on the file.
image with transparent background saved in photoshop How to save as GIF
Choose GIF format.
The GIF format seriously compresses the image in colors and, accordingly, in file weight. A maximum of 256 colors are available here.
Don't forget to check the box next to Transparency to have a transparent background if needed.
Adaptive the color model is the best when you want to save at maximum quality.
dithering I set it to 100%, in which case the gradient transitions are smoother.
If you have an animation in a GIF, then you can adjust its number of repetitions. Usually put many times to make the animation infinitely repeatable.
Now you know how to save in Photoshop using the most popular formats. Do you have any questions? I invite you to comment.
Adobe Photoshop is a popular multifunctional graphics editor. Many users face it, especially when processing photos and pictures. How to save a document in Photoshop? This is one of the main functions of the graphic editor. In the following, all possible methods saving pictures. The tips offered to your attention will greatly facilitate the process of working with Photoshop. They are easy to learn and put into practice.
Regular save
How to save a photo in Photoshop? The first option available in graphics editor, is the "Save" command. It is usually used when processing a previously opened document. During the execution of the command, the previously existing object will be replaced by the edited image.
- Open the photo and edit it to your liking.
- Click on the "File" button. It is located on the toolbar at the top of the screen.
- Click the "Save..." button.
Important: if the user has created a graphic document from scratch, after the actions taken, a save log will appear on the screen. Here you have to specify the name of the document, its storage format and the intended location on the computer.
"Save as..." option
The second way to save graphic files is to use the "Save As..." command. This technique is similar to the previously studied algorithm of actions. It features a variety of save options. The method is great for duplicating pictures.
- Click on "File" after editing the document.
- Select "Save As..." from the menu that appears.
- Specify the name of the saved document.
- Select a save format. It's in the "File Type" line.
- Specify where to save the graphic document.
- Click on "Save".
- Specify photo options. Usually, the image quality and format type are selected here. You can specify standard or improved optimization, or with a gradual improvement in image quality as it loads.
- Click on the "OK" button.
It is done. We learned another way to save documents through Photoshop. To quickly activate the option, you can press Ctrl + Shift + S.
With file close
- Go to the tab with the selected image.
- Move cursor to right upper corner tabs with the corresponding document.
- Click on the cross with the left mouse button.
- Agree to save the document by clicking on "Yes".
Important: If you click No, Photoshop will close without saving changes to the document. "Cancel" will return the user to the editor without any changes.
For Web resources
Often "Photoshop" is used when creating graphics for Web sites. It remains only to correctly save the document. What is needed for this?
- Select "File" - "Save for Web...".
- Specify the graphic set and save format.
- Set background options.
- Specify the image quality and size.
- Click on the "Finish" button.
Quick access to the option is carried out using the keyboard shortcut Alt + Shift + Ctrl + S.
Saving the background and picture without it
How to save a background in Photoshop? This is a fairly simple task. The thing is that the user can use any image as a background. It remains only to set it as the mentioned element of the picture.
Creating a background in Photoshop is done like this:
- Open or create a graphic document.
- Click on the "Add New Layer" button.
- Copy the image used as the background.
- Paste the picture on the created new layer.
Now it remains to make the necessary adjustments to the image, and then move the background layer to the very bottom.
How to save an image in Photoshop without background? To do this, you will need to create a .gif or .tiff document. It is preferable to work with the first option. To do this, you will have to activate the "Save for Web ..." option, and then in the save options put a checkmark next to "Transparent".
Hello, dear readers of the Start-Luck blog! In touch Andrey Zenkov and my practical advice on web design. Today we will talk about the same keys, without which your site will never open the door to the world of browser bookmarks (and it is so important for the user to mark favorite pages with an asterisk).
It will be, as you might have guessed, about images. Picking up a bright photo is only half the battle. After its processing, colorization, text overlay and other manipulations, the horizon is brewing new problem: how to save an image in photoshop?
Let's say you've created a website about pets and are eager to add an extensive photo gallery. Bach - and you can't imagine design without charming menu icons in the form of paw prints. And what about a section with funny animations that will cheer up the guests of the site?
With enthusiasm, you fit all the images to fit, save and ... see that the effort is in vain. Pixels completely kill the painstakingly created “paws”, and you can’t look at pictures in motion without tears. Photoshop automatically moves to the list of uninstall programs, and you make a promise to yourself to find a real craftsman. What for? You can do everything yourself, having learned the main secret that I always use.
The algorithm for saving images in optimal quality depends on their format. I do not want to go into details, talking about which are raster and which are vector. Moreover, you can change them in a couple of clicks. I already wrote about this in one of my articles, sharing with readers how to change image formats.
Analyzing the sites that the Internet is rich in, I noticed one interesting detail: all graphic elements are represented by only a few universal formats, while the existence of others is completely forgotten. What are they?
The main groups of images in web design
The graphic content of websites is conditionally divided into three categories.
Collages and photos
They are characterized by the JPG format - by the way, the most common on the web. These images are small in size, which allows you to use them in the design of the site without fear of slow page loading. For example, the same landscape saved in JPG and PNG differs significantly in weight:
Icons, buttons and banners
PNG is preferred for these design elements. It allows you to cut out an object and save the image without a background, using the site's "background" instead. I would also recommend this format for images that do not have a huge palette. For example, create a document in Photoshop and - the name of the site:
We save the image in two formats and compare the result:
Animation
GIF is designed to create animated images consisting of two or more layers. This can be done not only with Photoshop, but also. I would call this format the most capricious, because when saving it, it is difficult to achieve good quality. Luckily, I have a hack that will give you minimally pixelated animations. Intrigued? Read on!
Step-by-step instructions for saving images
Let's start with JPG: it's very easy to get a photo without loss of quality. To do this, click "File" - "Save As". If desired, you can use the key combination Shift + Ctrl + S:
In the window that appears, look for the drop-down list "File type" and select the line JPEG. It usually stands by default:
In the same drop-down list, you can also select the PNG line, thereby simplifying your task. However, I recommend saving images with transparent backgrounds differently.
Examine the window that opens. Your task is to make sure that the PNG-24 item is selected in the drop-down list, and that there are ticks next to the "Transparency" and "Interlaced" lines:
Please note: the last checkmark reduces the time it takes for the image to load on the site, but at the same time increases its weight. If this doesn't bother you, click Save. In the drop-down window, select the file path and press the treasured button again to get PNG image and put it on the site as soon as possible!
The animation is saved through the same menu item, but now you need to select the GIF option in the drop-down list. Great amount parameters and incomprehensible words can cause bewilderment or even fear. Not worth it! Just set the options I use:
Summing up
Working with graphics requires constant improvement of skills, without focusing on one or two directions. How to be? At one time, a real find for me was set of five mini-courses from the Photoshop Master project. From them I learned more than one byte useful information.
The material is presented in an accessible form and free of charge. This is a great alternative to studying at computer academies and spending many hours searching for the right lessons on the Internet.
That's all. Don't forget to subscribe to VKontakte group and blog updates for a weekly serving of fresh and useful articles.
Andrei Zenkov was with you. See you soon!