How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?
Leave this field empty
Thursday, July 28, 2016 12:01PM
By PhotoBiz Knowledge Base
Pin It

Occasionally, you will want to upload an image that contains transparent elements that will allow your original background color to show through. An example would be if you have a text logo that you want to have take on the background color you have set for your website, or if you have a patterned element that you want integrated with your current site background color. In these cases, it would be useful to upload a PNG image, since PNG images are able to retain transparency.

In this article, we will learn how to create a PNG file sized to the recommended HD image dimensions for PhotoBiz backgrounds in Adobe Photoshop version CC or higher.


STEP 1: CREATE YOUR FILE

The first step is to create your file. To do so, open Adobe Photoshop, and from the FILE menu at the top of the page, select NEW.

Next, from the NEW DOCUMENT window that appears, create your file at the size dimensions you prefer, and make sure you have the document resolution set to 72ppi, (since you are using the file for web use) and make sure that you have selected TRANSPARENT within the Background Contents selection drop-down menu.

Note: In this example, we're creating an image to upload as a background for a PhotoBiz website, so the document size is set to 3000 pixels wide, 1730 pixels high, which are the dimensions we recommend for uploading HD images to your site.

When you have entered the settings, click OK to open your new document.

Next, from the LAYERS palette, make sure you are working on a transparent layer, and not a solid background layer.


STEP 2: SAVE YOUR TRANSPARENT IMAGE

Once you are finished creating and are ready to save your transparent image, from the FILE menu, depending on your version of Photoshop you may have one of two options: 

1. Photoshop Versions Pre-CC 2015: 
Versions of Photoshop that were released prior to version CC 2015 utilize the SAVE FOR WEB & DEVICES method for saving and optimizing PNG images for web use. To use this method, simply click on the FILE menu, and then click on SAVE FOR WEB & DEVICES.

Next, from the window that appears, select PNG-24 from the PRESET drop down menu, then ensure that the TRANSPARENCY and CONVERT TO sRGB options are selected. This confirms that your image will maintain a transparent background and that it’s color mode will be converted to sRGB, which is the recommended color space for web use.

The Image Size options should automatically be populated with the dimensions you set up when creating your file, however if you would like to resize your file before saving, you may do so in this area.

To save, simply click the SAVE button at the bottom of the window. You can then upload your saved file to your PhotoBiz website.

2. Photoshop Version CC 2015:
Since the release of Photoshop CC 2015, the Save for Web & Devices option within the File Menu has been labeled a “Legacy” feature and replaced with a new EXPORT workflow that offers identical functionality with a faster save and generally smaller file sizes and better quality. To use the Export workflow, simply click on the FILE menu, then click on EXPORT, and then EXPORT AS... 

Note: Adobe also still offers the Save for Web & Devices option for Photoshop CC 2015 users, and it is accessible either under the File > Export menu, or by using the keyboard shortcut Command+Option+Shift+S (Mac) or Control+Alt+Shift+S (PC).

Next, from the window that appears, select PNG from the Format drop down menu, and ensure that the TRANSPARENCY and the CONVERT TO sRGB options are selected. 

The image dimensions you set up when you created your file should automatically be populated in the Image Size and Canvas Size areas, however if you would like to change these options before saving your file, you may do so.

When you're done, simply click EXPORT ALL.

Once you have saved your image, you can then upload it to your PhotoBiz website.

 


If you are in need of a LOGO DESIGN, PhotoBiz also offers a Logo Design Service where our designers will create one for you.

Tags: Files
Leave a comment:
1 Comment
Vaibhav koli - Nice