How to make a transparent background for a picture. How to create a PNG with transparency in Adobe Photoshop (CC and higher versions)? Creating a png file

To create a transparent PNG image using the free online service the site must first prepare an image. It is advisable to use images in PNG or GIF formats, since the JPEG format can introduce slight distortions into the image at the border of the color transition, which will prevent you from making a high-quality blank for the future watermark.

Then you need to paint over the area that should become invisible with some color, preferably absent from the rest of the image. This is necessary in order to clearly separate the visible and invisible parts of the image. If this is not done, it may turn out that that part of the image for which this is not desirable will become invisible. Below is an example of an image prepared for processing. The area in the image that will be made transparent is highlighted in red.

Then you should select the "Services" item in the main menu of the site and go to the sub-item "Create a transparent image in PNG format". On the page that opens, select the file we prepared earlier and click the “Next step” button.

The image will be uploaded to the server and on the next page we will be given the opportunity to use the mouse to select the color that needs to be made transparent.

By clicking the mouse in the right place in the image, we are taken to the image processing results page. Now you need to right-click on the processed image, select the “Save picture as...” menu item and save the resulting image to your computer.

Sometimes you need to upload an image containing transparent elements, through which the original background will be visible. In these cases, it would be convenient to download PNG images since they are capable of maintaining transparency.

In this article we will tell you how to make transparency in Photoshop.

Creating a file

The first step is to create a file. To do this, open Adobe Photoshop and in the "File" menu ( File) at the top of the page select “Create” ( New).

Then in the “New Document” window that appears ( New Document) create a file of the desired size, and make sure the document resolution is 72 pixels per inch ( since the file is intended for use on the web). And also that you selected the value “Transparent" ( Transparent) in the “Background Content” drop-down list ( Background Contents).

*Before you make a PNG with transparency in Photoshop, you need to clarify that in this example we are creating an image to upload as a background for the site, so the document size is set as follows: width 3000 pixels, height 1730 pixels, which are the recommended sizes for HD image downloads:

After you have set the parameters, click "OK" to open new document.

Then in the “Layers” panel ( Layers) make sure you are working on the transparent layer and not the background one:

Once you've completed your creation and are ready to save your transparent image, depending on the version of Photoshop you're using, from the File menu ( File) you can use one of the possible options:

Photoshop versions earlier than CC 2015:

Now we will tell you how to make a picture transparent in Photoshop, which came out before CC 2015. These versions use the "Save for Web" method ( Save for Web & Devices) to save and optimize PNG images for use on the web. To use this method, simply go to the "File" menu ( File), and then “Save for Web” ( Save for Web & Devices):

Then in the window that appears, select PNG-24 from the drop-down menu possible values, and then make sure that the “ Transparency ” options are selected ( Transparency) And " Convert to sRGB» ( Convert to sRGB). This confirms that the image will contain transparent background and its color mode will be converted to sRGB, the recommended color space for the web.

Fields " Image Size» ( Image Size) are automatically filled with the values ​​you specified when you created the file. But if you want to change the file size before saving, you can do it now.

Photoshop version CC 2015:

Before, how to make a photo transparent in Photoshop, you need to know that from version CC 2015 the option “Save for Web" ( Save for Web & Devices) in the "File" menu ( File) is marked Legacy. And replaced by a new option “Export" ( Export), which offers identical functionality with faster saving to a smaller file and to best quality. To use the "Export" option, click the "File" menu ( File), and then - " Export as» ( Export As).

Note: Adobe still offers a "Save for Web" option ( Save for Web & Devices) in Photoshop CC 2015, and it is accessible through the File > Export menu ( File > Export) or using the keyboard shortcut Command+Option+Shift+S (for Mac) or Ctrl+Alt+Shift+S (for PC):

Then in the window that appears, select PNG from the “Format” drop-down menu ( Format) and make sure the Transparency options are selected ( Transparency) And " Convert to sRGB» ( Convert to sRGB).

When you work on website design, you often have to deal with the fact that the found image, which would ideally suit your site, has a different background that it would be desirable to remove.

And so, open our picture in Photoshop.

1. The first thing you need to do is create a work area for the image with a transparent background. For this:
- in the layers window, double-click on our layer (with the lock)
- In the window that appears, click OK

The lock should disappear

If the background is plain:
Select the tool " Magic wand"is a very flexible tool for highlighting the desired area. Our task is to highlight the entire background except the picture. To do this, adjust the settings of the magic wand (parameter admission) until we get the desired result. We also use the Shift key to select an area in addition to the already selected one. Press Del and the selected area is deleted.

If the background is multi-colored:
We use the tool " Quick selection". Here our task is to highlight not the background, but the object itself, which should remain. Click until the desired area is highlighted. If too much is highlighted, hold down Alt and minus the area. You can view the result by pressing the Q key.
When the selection is ready, copy it with Ctrl+C. Create a new document with a transparent background (Ctrl+N) and paste the object Ctrl+V into it.

3 . If there is something extra left in the picture, use the “ Eraser“, just erase the extra background.

4 . Save the image for the Web (Alt+Shift+Ctrl+S) and select the GIF or PNG format (in others, our transparent background will turn into white).

Useful video on the topic:

Difference PNG format from other graphics formats is that transparent or partially transparent parts of the image remain transparent when saved. When saving files in a different format, this transparency may be lost. To create and, most importantly, save a PNG file, you need to consider several points.

Instructions

  • Much depends on what graphic editor you are working in. The simplest programs, such as the standard one Paint editor, do not support transparency in principle. More functional programs Paint.net, CorelDraw, Adobe Photoshop (and similar ones) allow you to adjust the transparency of images and support working with layers.
  • To adjust the transparency (partial transparency) of an image or any part of it, create new layers and use your editor's tools to adjust how the layers appear. Depending on your editor, you may have to merge all layers before saving.
  • To save the image as you see it in the editor, select File from the top menu bar. From the drop-down menu, select the “Save as” command. In the dialog box that opens, specify the directory to save the file; in the “File name” field, enter the name under which you want to save the file. In the “File type” (Format) field, select the value PNG(*.PNG) from the drop-down list and click on the “Save” button.
  • If merging layers leads to loss of transparency, either save the image without merging the layers, or install a tool in your editor that allows you to export layers in .png format without losing transparency (for example, in Adobe Photoshop this cannot be achieved with standard tools, so as there is no extension .png in the list of formats).
  • Download the corresponding script from the Internet. Set a transparent layer as the background, and place the main image on another layer. Select the “File” item in the top menu bar, the “Scripts” item in the expanded menu and the “Export Layers to File” command.
  • In the dialog box that opens, select the directory to save the layers, check the box next to Fast Mode (Don't remove hidden layers), select the .png format in the "File type" field and click the "Run" button. This action will means that you will have two files saved: one “empty”, the other will contain an image with your transparency settings.
  • Sometimes it becomes necessary to change a picture by making its background transparent. Sometimes you come across a picture, but its background doesn’t suit your site, and you want to make it transparent. Of course, if you have Photoshop and know how to work with it, you can do it there too. But there is an easier way, so to speak, “for dummies.”

    One day while surfing the Internet, I came across an article about the Pixlr Photo Editor. By the way, this is not ordinary graphics editor, and an online editor. Here is the link to it - http://pixlr.com/editor/.

    It is this program that will help us make a picture with a transparent background in PNG format.

    For example, we have this image:

    I want to remove the black background from it and make it transparent.

    To do this, go to the program, select the “Open image from computer” item and load the desired image. Immediately change the program language to Russian (menu Language-> Russian language).

    On the right in the “Layers” window you will see a thumbnail of the picture and a block. Double-click on the block (a “bird” should appear in the box). This way you remove the blocking from the background.

    After that, select the “Magic Wand” tool (on the left of the toolbar), bring it to the background of the picture and click the mouse. The background will be highlighted with a dotted line. Delete key destroy the background.

    Here's what I got:

    Instructions