PhotoBiz, LLC Logo
  • WELCOME
  • WEBSITE BUILDER
  • SEO
  • CLIENT GALLERIES
  • FORMS
  • SERVICES
    • WE BUILD IT FOR YOU
    • SEO GO
    • CUSTOM WEBSITE DESIGN
    • LOGO DESIGN
    • DEDICATED ACCOUNT MANAGER
    • SOCIAL MEDIA MARKETING
    • COACHING
  • GROWTH HUB
  • CONTACT
MENU

How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?

Jun 3 2024 | By: PhotoBiz Knowledge Base

Share

How to Create a Transparent PNG Image in Photoshop

Overview

Transparent PNG images allow your website background to show through areas of an image that would otherwise appear white or solid. This is especially useful for logos, overlays, and design elements that need to blend seamlessly with your website design.

In this guide, you will learn how to create and export a transparent PNG image using Adobe Photoshop. By the end, you will have a properly formatted image ready to upload to your website.

STEP ONE

CREATE YOUR FILE IN PHOTOSHOP

Open Adobe Photoshop, then click File in the top menu and select New.

In the New Document window, enter your desired dimensions. For most PhotoBiz website backgrounds, we recommend:

  • Width: 3000 pixels
  • Height: 1730 pixels
  • Resolution: 72 pixels/inch (ppi)

Set the Background Contents option to Transparent. This ensures your image will not include a solid background.

Click Create to open your new document.

Photoshop interface showing new document setup with options for print, photo presets, and document dimensions.

After your document opens, check the Layers panel to confirm you are working on a transparent layer. A transparent background will appear as a gray and white checkerboard pattern.

Photoshop layers panel with an arrow pointing to the highlighted layer thumbnail.

STEP TWO

EXPORT YOUR IMAGE AS A TRANSPARENT PNG

Once your design is complete, click File, then select Export, and choose Export As.

In the Export window:

Select PNG from the Format dropdown menu.

Make sure the following options are enabled:

  • Transparency
  • Convert to sRGB

These settings ensure your image keeps its transparent background and displays correctly on the web.

Confirm that the image size matches your intended dimensions. You can adjust the size here if needed before exporting.

Click Export, then choose where to save your file on your computer.

FINAL STEP

UPLOAD YOUR IMAGE TO YOUR PHOTOBIZ WEBSITE

After exporting, your PNG file is ready to upload.

Log into your PhotoBiz account and upload the image anywhere images are supported, such as:

  • Website Builder backgrounds
  • Images Block
  • Banner Block
  • Logo uploads

Your transparent areas will now allow your website background color or design to show through.

Additional Options or Helpful Notes

  • PNG is the preferred file type for images that require transparency. JPG files do not support transparent backgrounds.
  • Using sRGB color mode ensures your colors display consistently across browsers and devices.
  • Large image files may affect page load speed. Optimize your file size when possible without reducing quality.
  • If your image does not appear transparent after upload, double-check that the Transparency option was enabled during export.

Need a transparent logo? 

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

Previous Post Next Post

Related Posts

How Can I Make My Logo Larger On My Website with Adobe Photoshop?

September 9, 2025

How do I save files for the web?

July 25, 2024

How To Create A Before & After Image Comparison Slider

May 15, 2025

How do I batch rename files with Adobe Bridge?

June 3, 2024

Need More Help?

CONTACT US

BUILDER

Website Builder Client Galleries Blog  

TOOLS

Ecommerce Scheduler Quotes & Invoices  

MARKETING

Email Marketing Forms Contacts SEO  

MORE

Account Settings Domain & Email Files PhotoBiz Growth Hub Blog Go To PhotoBiz.com  
Copyright © 2004 – 2026 PhotoBiz, LLC All rights reserved
Crafted by PhotoBiz
PhotoBiz, LLC Logo
CLOSE
  • WELCOME
  • WEBSITE BUILDER
  • SEO
  • CLIENT GALLERIES
  • FORMS
  • SERVICES
    • WE BUILD IT FOR YOU
    • SEO GO
    • CUSTOM WEBSITE DESIGN
    • LOGO DESIGN
    • DEDICATED ACCOUNT MANAGER
    • SOCIAL MEDIA MARKETING
    • COACHING
  • GROWTH HUB
  • CONTACT