Create a PNG file. How to convert images to a PNG format? Creating a new document

Sometimes you need to upload an image containing transparent elementsThrough which will peck the original background. In these cases, it would be convenient to download PNG images, as they are able to maintain transparency.

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

Creating a file.

The first step is to create a file. For this discover Adobe Photoshop. and in the "File" menu ( File) Top Page Select "Create" ( New).

Then in the new document "New Document" appeared ( New Document) Create a file of the desired size, and make sure that the permission of the document is 72 pixels per inch ( since the file is intended for use in web). And also that you have chosen the value "Transparent" ( Transparent) in the drop-down list "Content background" ( Background Contents.).

* Before making PNG with transparency in Photoshop, you need to clarify that in this example we create an image to download as a background for the site, so the size of the document is given as follows: Width 3000 pixels, the height of 1730 pixels, which is recommended for the sizes for Downloads HD images:

After you specified the parameter values, click "OK" to open new document.

Then in the "Layers" panel ( Layers.) Make sure that you work on a transparent layer, and not on the background:

After you have completed creating and ready to save transparent image, depending on the used versions Photoshop. , in the "File" menu ( File) You can use one of the possible options:

Photoshop version previously than CC 2015:

Now we will tell how to make transparency pictures in photoshopwhich 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 take advantage of this method, just go to the "File" menu ( File), and further - "Save for Web" ( Save for Web & Devices):

Then, in the window that appears, select PNG-24 from the drop-down menu of possible values, and then make sure 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, recommended color space for web.

Fields " Image size» ( Image Size) Automatically filled with the values \u200b\u200bthat 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 transparency photo in photoshop, you need to know that from the CC 2015 version option "Save for Web" ( Save for Web & Devices) In the "File" menu ( File) marked like Legacy (outdated). And replaced by the new Export option ( Export) which offers identical functionality with faster saving in the file smaller and B. best quality. To use the Export option, click the File menu ( File), and then - " Export as» ( Export as).

Note: Adobe still offers the "Save for Web" option ( Save for Web & Devices) In Photoshop CC 2015, and it is available through the File\u003e Export menu ( File\u003e Export.) or when using the Command + Option + SHIFT + S key combination (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 that the "Transparency" options are selected ( Transparency.) and " Convert to srgb.» ( Convert to srgb.).

Sometimes there is a need to change the drawing by making a transparent background in it. It happens a picture, but the background does not suit your site, and I want to make it transparent. Clearly, if there is a photoshop and know how to work on it - you can do it there. But there is a simpler way, so to speak, "for dummies."

Once Surfing on the Internet, I came across an article about graphic editor Pixlr Photo Editor. By the way, this is not an ordinary graphic editor, but an online editor. Here is a 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.

We have, for example, such image:

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

To do this, go into the program, select the "Open Image From Computer" item (Open the image from the computer) and load the desired picture. Immediately change the program language into Russian (Language-\u003e Russian menu).

On the right in the "Layers" window you will see a thumbnail of the picture and a block. Click the mouse twice along the block (the "bird" in the square) should appear. So you remove blocking from the background.

After that, choose the "Magic Wand" tool (on the left in the toolbar), take it to the background of the pattern and click the mouse. Background stand out dotted line. The Delete key destroys the background.

That's what I did:

The difference of PNG format from other formats for the graph is that transparent or partially transparent parts of the image while maintaining and remain transparent. When saving files in another format, this transparency may be lost. To create and, most importantly, save the PNG file, you must consider several points.

Instruction

  • Much depends on what graphic editor you work. Simplest programs, such as the standard Paint editor, in principle do not support transparency. More functional programs of Paint.Net, CorelDRAW, Adobe Photoshop (and similar to them) allow you to customize the transparency of images and maintain work with layers.
  • To configure the transparency (partial transparency) of an image or any part of it, create new layers and use your editor tools to set up the layer display. Depending on the characteristics of the editor, you may have to combine all layers before saving.
  • To save the image in the form in which you see it in the editor, select File (File) in the top line menu. From the drop-down menu, select "Save As". In the dialog box that opens, specify the directory to save the file, in the File Name field (File Name), enter the name under which you want to save the file. In the File Type field (Format) from the drop-down list, select the PNG (*. PNG) value and click on the Save button (Save).
  • In the event that the combination of the layers leads to the loss of transparency, or save the image, without merging the layers, or install a tool for your editor to allow exporting layers in format.png without loss of transparency (for example, in Adobe Photoshop, the standard tools will not achieve this As in the format list there is no expansion .PNG).
  • Download the appropriate script from the Internet. As a background, install a transparent layer, and lay the main image on the other layer. Select the "File" item in the top line menu, in the expanded menu - the Scripts item (Scripts) and the Export Layers to File command.
  • In the dialog box that opens, select the Directory to save the layers, set the marker in the field opposite the inscription Fast Mode (DON "T Remove Hidden Layers), in the File Type field, select Format.png and click the" Run "button. This action It will lead to the fact that you will have two files: one "empty", in the other there will be an image with your transparency settings.

    • If you need to edit a file in PNG format, many are in a hurry to download Photoshop, which not only extends to a fee basis, but also quite demanding to computer resources. Not all old PCs are able to work with this application. In such cases, various online editors come to the rescue, allowing to change the size, scale, compress and extend numerous other operations with files.

    Today we will look at the most functional and stable sites that allow you to work with images in PNG format. The advantages of such online services can be attributed to what they are not demanding to the resources of your computer, since all manipulations with files are manufactured using cloud technologies.

    Online editors do not need to install on PC - this significantly reduces the likelihood of catching the virus.

    Method 1: Online Image Editor

    The most functional and stable service that does not bother with obsessive advertising users. Suitable for the implementation of any manipulations with pNG images, absolutely undemanding to the resources of your computer, can be run on mobile devices.

    By the cons of the service include the absence of Russian language, however, with long use, this deficiency becomes a minority.


    The site does not require registration, deal with the service is easy, even if you do not know english. Do not be afraid to experiment if something goes wrong, you can always cancel this by pressing just one button.

    Method 2: Photoshop online

    Developers are positioning their service as online photoshop. The editor functionality is really similar to the world-famous application, it supports working with pictures in different formats, including PNG. If you have ever worked with photoshop, understand the resource functionality will be easy.

    The only but rather significant drawback of the site is constant hang, especially if the work is carried out with large images.


    When performing simple manipulations, working with the service is convenient and comfortable. If necessary big file, It is advisable to download and install on a special PC softwareor stock patience and prepare for constant site freezes.

    Method 3: Fotor

    Convenient, functional, and the mainly free site for working with images in PNG Fotor format allows you to trim, rotate, add effects to use other tools. The functionality of the resource was checked on files of different sizes, there were no problems at the same time. The site is translated into Russian, you can select another editor interface language in the settings if necessary.

    Access to additional features is provided to users only after purchasing a Pro account.


    Fotor is a powerful tool for working with PNG: In addition to the set of basic functions, it contains many additional effects that will delight even the most demanding user.

    Online photo edits are easy to work, they do not require installation on a computer, due to which access to them can be obtained even with mobile device. What editor to use, solve only you.

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

    And so, we open our picture in Photoshop.

    1. The first thing to be done is to create a workspace with a transparent background from the pictures. For this:
    - In the layer window, click twice on our layer (with a lock)
    - in an obeyed window click OK

    The lock must disappear

    If the background is monophonic:
    Choose the tool " Magic wand"This is a very flexible tool for allocating the desired area. Our task is to highlight the entire background, except for the drawing. To do this, customize the settings of the magic wand (parameter tolerance) until we get the desired result. We also use the SHIFT key to highlight the area besides the already dedicated. Press DEL and the selected treat is removed.

    If the background is multicolored:
    Use the tool " Fast allocation". Here our task is not to highlight the background, but the object itself, which should remain. Click until the desired area is selected. If it is overwhelmed, clamp Alt and minus it treats. You can see the result of the Q key.
    When the selection is ready, copy its Ctrl + c. Create a new document with a transparent background (Ctrl + N) and insert the Ctrl + V object there.

    3 . If something is superfluous in the figure, we use the tool " Eraser"Just stand up excess background.

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

    Useful video in the topic: