Sometimes you need to load an image containing transparent elements through which the original background will show through. In these cases, it would be convenient to load PNG images as they are capable of maintaining transparency.
In this article we will tell you how to make transparency in Photoshop.
File creation
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 the file size you want, and make sure the document resolution is 72 pixels per inch ( since the file is for web use). And also that you have selected the value "Transparent" ( Transparent) in the drop-down list "Background content" ( Background Contents).
* Before making 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 uploads:
Once you have specified the parameter values, click OK to open a new document.
Then in the Layers panel ( Layers) make sure you are working on a transparent layer and not on the background:
Once you've finished creating and are ready to save the transparent image, depending on the version of Photoshop you are using, go to 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 Photoshopwhich came out earlier than CC 2015. These versions use the Save For Web ( 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 of possible values, and then make sure that the "Transparency" ( Transparency) and " Convert to sRGB» ( Convert to sRGB). This confirms that the image will contain a transparent background and its color mode will be converted to sRGB, the recommended color space for the web.
The fields " Image size» ( Image Size) are automatically populated with the values \u200b\u200byou specified when you created the file. But if you want to resize the file before saving, you can do so now.
Photoshop CC 2015 version:
Before, how to make a photo transparent in Photoshop, you need to know that as of CC 2015, the Save For Web ( Save for Web & Devices) in the File menu ( File) is marked as Legacy. And replaced with a new option "Export" ( Export), which offers identical functionality with faster saving in a smaller file size and better 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 ( Save for Web & Devices) in Photoshop CC 2015, and it's available through the File\u003e Export ( File\u003e 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 Transparency is selected ( Transparency) and " Convert to sRGB» ( Convert to sRGB).
The most common problem that users cannot open this file is an incorrectly assigned program. To fix this in Windows you need to right-click on the file, in the context menu, point to the "Open with" item, and select the "Select program ..." item in the drop-down menu. As a result, you will see a list of installed programs on your computer, and you can choose the appropriate one. We also recommend that you check the box next to "Use this app for all PNG files".
Another problem that our users also encounter quite often is that the PNG file is corrupted. This situation can arise in many cases. For example: the file was downloaded incompletely as a result of a server error, the file was damaged initially, etc. To fix this problem, use one of the recommendations:
- Try to find the desired file in another source on the Internet. You may be lucky enough to find a more suitable version. Google search example: "File filetype: PNG". Just replace the word "file" with the name you want;
- Ask to send you the original file again, it may have been damaged in transit;
The PNG image format is one of the most popular and offers users to store compressed images without losing their quality. PNG is most used for graphic editing or on the Internet. Next, we will look at several simple ways by which you can open a file of this format on your computer.
There are several different methods for opening PNG files for viewing and editing. You just need to follow the instructions below and it will not be difficult to open the image.
Method 1: Image Viewers
On the Internet, there are many graphic editors and special software for viewing and editing images. They provide users with a large number of functions and tools, which makes the process of working with pictures as comfortable as possible. Let's consider the process of opening a PNG image using the example of the GIMP program:
If the GIMP for some reason does not suit you, we suggest that you familiarize yourself with the full list of programs for viewing images in our article at the link below. There you will definitely find something suitable.
In the case when it is required to perform various manipulations with an open image, use special graphic editors with advanced functionality and a large number of different tools. You can find out more about them in our article at the link below.
Method 2: Standard Windows tool
All versions of the Windows operating system have a built-in image viewer. It can also be used to open PNG files. Let's take a closer look at this process:
If you need all PNG images to open through the standard Windows photo viewer, follow these steps:
Now, by default, all PNG files will open with the standard photo viewer. To change the program to open, just follow the same steps by choosing a different software.
In this article, we looked in detail at the simple ways to open PNG images. As you can see, there is nothing complicated in this process, and everything is done in literally a few steps.
If there is a computer installed antivirus software can scan all files on the computer, as well as each file separately... You can scan any file by right-clicking on the file and selecting the appropriate option to scan the file for viruses.
For example, in this figure, my-file.png file, then you need to right-click on this file, and select the option from the file menu "Scan with AVG"... Selecting this option will open AVG Antivirus, which will scan this file for viruses.
Sometimes an error can result from incorrect software installation, which may be due to a problem encountered during the installation process. It may interfere with your operating system link your PNG file to the correct application softwareinfluencing the so-called "File extension associations".
Sometimes simple reinstalling Adobe Illustrator CC might solve your problem by correctly linking PNG with Adobe Illustrator CC. In other cases, problems with file associations can result from bad software programming developer, and you may need to contact the developer for further assistance.
Advice: Try updating Adobe Illustrator CC to the latest version to ensure you have the latest patches and updates.
It may seem too obvious, but often the PNG file itself may be causing the problem... If you received a file via an email attachment or downloaded it from a website and the download process was interrupted (for example, a power outage or other reason), the file may be damaged... If possible, try to get a fresh copy of the PNG file and try opening it again.
Caution: A damaged file can cause collateral damage to previous or pre-existing malware on your PC, so it is very important that you have an updated antivirus running on your PC at all times.
If your file is PNG related to the hardware on your computerto open the file you may need update device driversrelated to this equipment.
This problem usually associated with types of media filesthat depend on the successful opening of hardware inside the computer, for example sound card or video card... For example, if you are trying to open an audio file but cannot open it, you may need to update sound card drivers.
Advice: If you get sYS file related error message, the problem could probably be related to corrupted or outdated device driversthat need to be updated. This process can be facilitated by using driver update software such as DriverDoc.
If the steps did not solve the problemand you are still having trouble opening PNG files, it might be related to lack of available system resources... Some versions of PNG files may require a significant amount of resources (e.g. memory / RAM, processing power) to open properly on your computer. This problem occurs quite often if you are using fairly old computer hardware and at the same time a much newer operating system.
This problem can occur when the computer has a hard time completing a task, as the operating system (and other services running in the background) can consume too many resources to open PNG file... Try closing all applications on your PC before opening Portable Network Graphics. By freeing up all the available resources on your computer, you will provide a better environment for trying to open the PNG file.
If you completed all the steps aboveand your PNG file still won't open, you may need to do equipment upgrade... In most cases, even with older hardware versions, the processing power may still be more than adequate for most custom applications (unless you're doing a lot of CPU-intensive work like 3D rendering, financial / scientific modeling, or heavy multimedia work) ... In this way, it is likely that your computer does not have enough memory(more commonly called "RAM", or random access memory) to perform the task of opening a file.
David
Why is the uploaded PNG not displaying transparency in Photoshop?
I tried to download photos / pictures from the internet and edit them, but whenever I do this, the transparent background turns white. I've tried copy / paste, which never works. I tried to download as PNG and open it in Photoshop, which sometimes works but usually doesn't. I tried to download it, copy the preview and paste it into Photoshop, but that doesn't work either. All images are transparent in my browser (I am using chrome), but when I load them, they often do not retain their transparency. I know there is a post on this, but none of the answers helped. I'm on a Mac.
The first photo shows the image on Chrome, with a transparent background. The second is in Photoshop, with a white background.
In Google Images settings, before searching, I change the background to "transparent", that is, all images obtained as a result of the search have a transparent background. When looking for specially transparent images and seeing a checkered background, I'm sure the images are transparent. Also, it is PNG, which always has a transparent background. If it was a JPEG, it would have a white background.
user287001
This case is interesting. Give us a screenshot of one transparent image in your Chrome, and be very careful and detailed how you made sure it was transparent in Chrome, but not after loading.
Billy Kerr
Not all PNG images have transparency. It depends on how the image was saved. Do you have a direct URL to the original PNG image so we can check it out?
Billy Kerr
OK. I'm going to add an answer now.
Answers
Billy Kerr
Note that in recent versions of Photoshop CC, the Artboards option is enabled by default, which does not display the transparency grid at all. You need to exit Artboard mode to see transparency again. I don't know why Adobe made this the default.
Billy Kerr
@Dai - The default Artboard setting is only applied if you start with one of the templates in the Web or Mobile sections when creating a new document. For other document types, the Artboard option is disabled by default. Opening PNG is also not the default for artboards, at least in PS CC 2017. My screenshot was in CS4, but CC has the same behavior when opening PNGs.