Skip navigation
BobnNC
BobnNC Calculating status...
Currently Being Moderated

How to reveal the background layer through a cut-out?

Apr 14, 2012 8:42 AM

How can I cut out a shape from my PS image to expose the background layer?  I will "Save for Web" with a transparent background.

The shape will be a rectangle, and a text layer will later be added to display within the rectangle.

 

My goal is to use the PS image as part of a Web page, allowing the Web page background to show through the rectangle which surrounds the text.

Hope this explanation makes sense.

thanks!

710 Views   5 Replies   Latest reply: BobnNC, Apr 14, 2012 4:02 PM
 
Replies
  • c.pfaffenbichler
    Currently Being Moderated
    1. c.pfaffenbichler,
    Apr 14, 2012 8:47 AM   in reply to BobnNC
    Report

    Hope this explanation makes sense.

    Maybe not fully.

    Are you asking about the techniqual aspect in Photoshop (Layer Masks or other) or web-suitable file formats that support transparency (png for example)?

     
    |
    Mark as:
  • Curt Y
    Currently Being Moderated
    2. Curt Y,
    Apr 14, 2012 8:55 AM   in reply to BobnNC
    Report

    Think a PNG will support transparency, but not layers.  To have layers you may have to use a TIFF, but then it may be too big for the web.

     

    Som bottom line you may have to choose your design carefully.

     
    |
    Mark as:
  • BobnNC
    Currently Being Moderated
    3. BobnNC,
    Apr 14, 2012 9:18 AM   in reply to c.pfaffenbichler
    Report

    Yes, I am asking about any PS techniques which would allow me to accomplish the effect I'm after.

    I was planning to save the final image as a PNG with transparent background.

     
    |
    Mark as:
  • Noel Carboni
    20,966 posts
    Dec 23, 2006
    Currently Being Moderated
    4. Noel Carboni,
    Apr 14, 2012 9:27 AM   in reply to BobnNC
    Report

    Sounds like what you want to do is what countless others do - nothing special.

     

    In Photoshop, put what you want to show on a layer (not Background), make it partially transparent (either with an erase operation or hiding parts of it with a mask), make sure no Background layer is showing (you'll see the checkerboard through the transparent parts), and save the work product as a PNG (or possibly a GIF, but PNG offers partial transparency).

     

    You'll also want to save your design as a master PSD of course, so you can edit the master file

     

    This page might give you some food for thought...

     

    http://Noel.ProDigitalSoftware.com/temp/TransparencyTest/TransparencyT est2.html

     

    -Noel

     
    |
    Mark as:
  • BobnNC
    Currently Being Moderated
    5. BobnNC,
    Apr 14, 2012 4:02 PM   in reply to Noel Carboni
    Report

    Thanks for your reply.  I am somewhat new to Photoshop, and thought it might require some complicated masking. This answer got me to realize that an easier approach might work, and it did.  Your test page is pretty cool...

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points