Alpha-Level question

Posted on 2007-08-02
Last Modified: 2008-03-06

I have a problem, the following:

I have a picture which lookes like this:

how can I extract the color Red, so that I have a semi-transparent file (with alpha), which, when I would put it on a red image, would give the original image?

So I could put it on a green image and it would give the same style...

Is it possible?

Question by:Ruttensoft
    LVL 14

    Expert Comment

    You could creat a GIF image and set red as the transparent color.
    LVL 26

    Accepted Solution

    I couldn't find a good tutorial so I had to make one for you.

    1)  To make a bar like the one that you linked to, start by opening a new file in Photoshop and paste the sample image on a new layer and name the layer sample.

    Then, go back to the Background layer and draw marquee a rectangle the same size as the sample. Fill it with red. Keep the marquee active throughout this tutorial.

    Example for step 1)

    2) Create a new layer just above the Background layer.

    Set your color palette to black and white (by pressing the letter D) Select a large soft paint brush. (I used a 400 pixel brush with the hardness set to 0 and the Opacity set to 20%)

    Making sure that you still have a marquee drawn around the lower bar, drag the brush from the far left side to the point indicated in example 2. (you may want to use several strokes to build up this fade)

    Example 2)

    3)  Now do the same to the other side dragging the paint brush to the spot indicated (again, you might want to build up using overlapping strokes)

    Example for step 3)

    4) Make another layer to hold the white reflection that you are about to make.
    With the marquee tool, draw a box at the top of the bar that reaches all the way across the bar and about a third of the way down.

    Reverse your foreground and background colors my pressing the letter X. Select the gradient tool, click on the gradient selector (circled in the next example) and select the foreground to transparent method from the swatches. Press OK.

    Example 4)

    5) Drag the gradient tool down from the top of the bar to just past the bottom of the marquee as indicated in example 5)

    Example 5)

    6) You should have an image similar to example 6(

    Example 6)

    7) If you turn off the background layer and the sample layer, you will see what your overlay image will look like.

    Example 7)

    8) Turn all of the layers back on. Make the Background layer active and call up the hue/ saturation dialog palette. With the preview box checked, move the hue slider back and forth to see what your new overlay will look like over different colors>

    Example 8)

    9) Once you are satisfied with the look, draw a marquee around the bottom bar.
    Turn the sample layer and the Background layer off,
    Select Image > Crop
    Save your image as a png format image.

    This image will have the transparency preserved so that it can be used over whatever color bar that you want.

    Good luck, and have fun.
    David B
    LVL 4

    Expert Comment

    Try different blending modes till you find one that drops the red out and leaves just the shading.  Save as png and start overlaying.
    LVL 26

    Expert Comment

    by:David Brugge
    Since this question was put in the Visual Basic NET zone I assumed that Ruttensoft would be stacking the images in an application window without the benefit of blend modes.
    As for building a GIF, this is limited to index colors. GIFs support transparency, but only one shade of red could be transparent. Alpha transparency means that the transparency itself can fade.

    Author Comment

    just genious

    Featured Post

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    1.0 - Introduction Converting Visual Basic 6.0 (VB6) to Visual Basic 2008+ (VB.NET). If ever there was a subject full of murkiness and bad decisions, it is this one!   The first problem seems to be that people considering this task of converting…
    Read about why website design really matters in today's demanding market.
    This video will demonstrate how to find the puppet warp tool from the edit menu and where to put the points to edit.
    In this tutorial viewers will learn how to create a postcard text effect in Photoshop and get an introduction to Layer masks Use magic wand to select the "inner" part of the letters: Create a new layer and fill the selected area with black: Go back …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now