color effects with alpha ch

Color Effects with Alpha Channel | 10Steps.SG - Photoshop and Flash t...

http://10steps.sg/photoshop/color-effects-with-alpha-cha

Home Articles Downloads Flash Interviews News Photoshop About Contact Submit

Advertise Here

Color Effects with Alpha Channel in Photoshop by Johnson on 31-08-2008

Preparations: We will need an image of a model, prefably a close-up on the face. I\u2019m using Keeley Hazell for this tutorial. All rights of these resources belong to their respective owners.

1 of 23



Step 1 - Setting Up Background: Create a document of size 750 by 550px and save it as example.psd. Fill the background with #E6D4A7.

Step 2 - Create Strip Pattern: Create a new document with 3 by 3px, then create a new layer above Background layer. Select Pencil tool with 1px and color # 000000 , paint 3 dots as shown on the left. Delete the Background layer. Press Ctrl+A and go to Edit > Define Pattern. Close this document w/o saving. In example.psd, create a new layer. Select Paint Bucket tool and fill in the pattern you created.

Step 3 - Transparent Rainbow: Create a new layer above the rest. Select the Gradient tool and choose Transparent Rainbow. Drag the gradient from top-left of the document diagonally across to the bottom-right.

2 of 23



Step 4 - Create a Color Frame: Select the rainbow gradient layer and go to Filter > Blur > Gaussian Blur. Set the radius to 250. Create a layer mask on this layer and fill the mask with #FFFFFF. Using Soft Brush tool of size 350px and color #000000, paint center of the mask as shown on left.

Step 5 - Selecting Image Channel: Open up your model image and drag it into example.psd using Move tool. Hide the rest of layers except for the model. Go to Channels tab and choose the brightess image out of the Red, Green and Blue (for mine is Red).

Step 6 - Create Alpha Channel: Ctrl+left click on the Red channel layer to load selection of those bright areas. Click on Create New Channel to generate an alpha channel and fill it with # FFFFFF. Using Soft Brush tool of size 100px and color #FFFFFF, paint away the grey background behind the model. Note: View animation on the left.

3 of 23



Step 7 - Gradient on Model: Ctrl+left click on the Alpha Channel to load selection. Go to Select > Inverse. Back to Layers tab and create a new layer. Fill the selection with any color. Right-click on the layer and choose Blending Options. Activate Gradient Ove rlay and choose the preset Yellow, Violet, Orange, Blue. Set its angle to -45 and scale to 150.

Step 8 - Enhancing the Colors: Duplicate the model layer and go to Filter > Blur > Gaussian Blur. Set its radius to 3px. Right-click on duplicated layer and choose Blending Options. Set the mode of Gradient Ove rlay to Hard Light.

Step 9 - Drawing Lines: Create a new layer and draw some white ve rtical lines of various sizes with Pencil tool. You will need to hold down the Shift key while drawing so your lines will be straight.

4 of 23



Step 10 - Fading Lines: Go to Edit > Transform > Rotate and set its value to 45. Using Soft Eraser tool of size 150px, fade the two ends of the lines. Repeat Step 9 and 10 if you need more lines on your model.

Optional: Add some texts to complete the design. That’s all! Hope you like this tutorial. Video tutorial is posted at Vimeo Click here to view the final image.

My Deviation: Added on 1st Sep 2008. I have some free time so decided to do another version of Keeley Hazell and push this coloring effects further by adding in more details. The basic techniques used are still as above . Click here to view the larger image at DeviantArt.

5 of 23



Digg submit

Kanye says... Posted on: 2/Sep/2008@10:11 pm I tryed but i can’t paint away the dark background on step 6, can you help me out ?

damir says... Posted on: 2/Sep/2008@11:23 pm

I don’t get the part with the alpha channels … if you can explain it a lil’ bit more? I always get the effe like the pic is inverted :S

Johnson says... Posted on: 2/Sep/2008@11:26 pm Hi Kanye, Thanks for your support to the tutorial. Did you manage to create an alpha channel as shown in the Step 6 diagram?

Alan says... Posted on: 3/Sep/2008@2:42 am

I can’t do the stop 6. When I create the new channel I get a new black layer. What am I supossed to do =/

Mark says... Posted on: 3/Sep/2008@4:01 am

6 of 23



I created an alpha channel, but like Kayne - I can’t seem to brush away the dark background. Any idea

Johnson says... Posted on: 3/Sep/2008@8:27 am

Hi all, Thanks for trying out the effect. I’ve replaced the diagram for Step 6 with a flash animation. Hope it can help everyone understand bet on that part.

Alan says... Posted on: 3/Sep/2008@9:37 am Johnson this is the problem I’ve got: When I create the alpha channel, all I get is this http://img526.imageshack.us/img526/7695/livbs0.jpg I don’t know how to go on after this =/

Johnson says... Posted on: 3/Sep/2008@9:50 am Hi Alan, Thanks for helping me understand the problem. I can see from your screenshot that your alpha channel is created with White Background. In this case, fill your selection on the Alpha Channel layer (shown in your screenshot) with Black. You should be getting something that looks like a negative. Clear all selections on that layer and go to Image> Adjustments> Invert.

Alan says... Posted on: 3/Sep/2008@10:05 am Well. I came through it. Now my problem is on step 7:

Ctrl+left click on the Alpha Channel to load selection. Back to Layers tab and create a new layer. Fill t selection with any color. http://img526.imageshack.us/img526/4599/junto1xv5.jpg (this is what I get)

Right-click on the layer and choose Blending Options. Activate Gradient Overlay and choose the prese Yellow, Violet, Orange, Blue. Set its angle to -45 and scale to 150. http://img522.imageshack.us/img522/7392/junto2wl7.jpg (and after that, this is what I get)

7 of 23



I am so sorry If I am beeing too anoying =/


No worries at all, Alan I’m glad you went through the efforts to capture these screenshots. I’m not sure if there is any differen between the versions of Photoshop. I’m using CS3 here. Actually you are pretty close to getting the effect. See if the steps below helps: Ctrl+left click on the Alpha Channel to load selection. Go to Select> Inverse. Back to Layers tab and create a new layer. Fill the selection with any color on that layer.

Right-click on the layer and choose Blending Options. Activate Gradient Overlay and choose the prese Yellow, Violet, Orange, Blue. Set its angle to -45 and scale to 150.

Alan says... Posted on: 3/Sep/2008@8:00 pm My problem is that I never get something like this http://10steps.sg/wp-content/uploads/photo9/8.jpg Thanks for the replies =)

Johnson says... Posted on: 3/Sep/2008@9:09 pm Don’t mention it It does takes awhile to experiment here and there. Cheers.

nighthawk says... Posted on: 4/Sep/2008@6:45 am can u convert this tut to vedio or flash tut…?? I’m trying but can’t get like final iamge…!!!

Johnson says... Posted on: 4/Sep/2008@8:24 am I’m considering doing so already

8 of 23



NaldzGraphics says... Posted on: 4/Sep/2008@9:22 am very nice tutorial.keep it up:) Ronald

Johnson says... Posted on: 4/Sep/2008@9:31 am Thanks Ronald. I love your site too!

egy says... Posted on: 4/Sep/2008@12:33 pm I give up :(, I have the same problem that Alan. Could be the order of the layers? Or the opacity? Thanks anyway.

Maddy says... Posted on: 4/Sep/2008@10:15 pm Ahh! I get this: http://i38.tinypic.com/o0vs6g.jpg

Johnson says... Posted on: 4/Sep/2008@11:40 pm Thanks Maddy for highlighting this error in my writings. I missed out a line (Go to Select > Inverse) in Step 7. Very sorry for those who went through the tutorial earlier. I’ve amended the texts at Step 7 and followed up with an animation. Hope that will help. Thanks!

Ateneu Popular » Blog Archive » Tutorial. Efectos de color con el canal alfa says... Posted on: 5/Sep/2008@7:20 pm

9 of 23



[...] ver tutorial [...]

Kathy says... Posted on: 6/Sep/2008@2:20 am thank you for this great tutorial! i got a very good result!:))

egy says... Posted on: 6/Sep/2008@3:42 am Finally I could do it, thanks again Johnson I will try another tutorial. I´m sorry for my english is very poor

Johnson says... Posted on: 6/Sep/2008@8:28 am Thanks Kathy No prob egy, I’m glad you made it. Cheers!

Farbeffekt dank Alpha-Kanal says... Posted on: 10/Sep/2008@6:06 am

[...] können auch für interessante Farbeffekte sorgen, wie etwa im Tutorial Color Effects with Alpha Channel beschrieben. Da wird ein Farbkanal kopiert, eingefügt und so bearbeitet, dass nur der Kopf e [...]

Farbeffekt dank Alpha-Kanal – Photoshop-Weblog says... Posted on: 10/Sep/2008@6:55 am

[...] können auch für interessante Farbeffekte sorgen, wie etwa im Tutorial Color Effects with Alpha Channel beschrieben. Da wird ein Farbkanal kopiert, eingefügt und so bearbeitet, dass nur der Kopf e [...]

MANNY says... Posted on: 12/Sep/2008@10:39 pm 10 of 23



hi johnson: i really love this effect and i really want to be able to do it. i’m usually pretty good at figuring out things but i’m having a lot of trouble with step #2. i didn’t think i’d have trouble so early in the tutorial but i did. hopefully i can figure out all the rest. thanks manny wonderful tutorial by the way

tommy says... Posted on: 13/Sep/2008@6:12 pm hi johnson: if you have the .psd file for this tutorial ? I’m trying but can’t get like final iamge…!!!

kelsey says... Posted on: 16/Sep/2008@2:46 am I get stuck at Step 5, I don’t see a Channels tab anywhere. I have Photoshop Elements 6.0.


Hi Kelsey, Sorry to inform that this tutorial is done in Photoshop CS3. I think version CS and above is fi but not for Elements. Video tutorial for this effect is added at Vimeo

miragana says... Posted on: 18/Sep/2008@9:04 am Good day! It is very informative and has a very good quality in it. I like it… Thank you very much for your time.

Rick says... Posted on: 19/Sep/2008@4:39 am Hi . I really like this effect, have tried to reproduce it but with no success, is there a video tutorial for and if so where could I find it ?

11 of 23



Johnson says... Posted on: 19/Sep/2008@8:32 am Hi Rick, you can find the video here. I’ve been trying to find out a good way to add VimeoRSS on the side bar. So it will be more visible to everyone.

monkey says... Posted on: 19/Sep/2008@11:39 am

after a few tries i was finally able to do it..not as good though..i love this style..great tut..couldve been more specific in some parts though..but still great..^^

Rick says... Posted on: 20/Sep/2008@5:05 am Thanks for the video tutorial, brilliant I’ve manage to do it, thanks again its fantastic.

Arika says... Posted on: 21/Sep/2008@7:46 am

I get through everything to step 6, then I get to step 7 where you go back to the layers tab and it looks NOTHING like it’s supposed to…it goes back to color and looks like this after the grandient overlay: http://i38.tinypic.com/2v27h3b.jpg obviously its wrong and i have no idea whats going on.

Sandra says... Posted on: 21/Sep/2008@9:05 am

Well i’m stuck at step 6.. I selected the brightest image (also red here), then I did cntrl+left mouse click to select those areas, n created the alpha channel (image was still selected) but then I lost it.. I got a black alpha channel, the filled it with #FFFFF or did I do something wrong there, how do you fill it cause I just clicked on the b square of the Alpha chan. and then just selected the white color but it definitely doesn’t look anything your example.. This is what I got.. http://i273.photobucket.com/albums/jj240/TaladarkieJJ/Other%20stuff/screenalphachannel.jpg

12 of 23



Help needed!

Johnson says... Posted on: 21/Sep/2008@6:22 pm

Hi Arika, when you switch back to the layers tab, you will need to inverse the selection (Select > Inve before you fill the color Hi Sandra, yup you did right actually. Or you can also try dragging the Red Channel layer to hit the Create New Channel button so you will get a new channel call Red Copy. Then paint away the background with white. This is equivalent to Step 6.

Sandra says... Posted on: 21/Sep/2008@11:51 pm Okay thanks, i’ll give it a try.. see if that works out..

Sandra says... Posted on: 22/Sep/2008@3:33 am

Okay, so I dragged the red channel to the create new channel button and then I got a red copy channel, I painted the background white like you said.. Then I did Cntrl+left mouse click to load the areas.. So far all good, then select > inverse and then I went back to the layers tab, only the original white background of the image was still there.. I created a new layer, filled it with a color I liked and did the gradient overlay thingie.. I have no idea what went wrong with the background.. Anyway I tried something different, I hid the original image layer and THEN i got something similar to your example.. So I skipped step 8, the enhancing of the colors, it wouldn’t do any good cause I hid the original image and this is the final res http://i273.photobucket.com/albums/jj240/TaladarkieJJ/Creative%20work/heath-ledger-alphacoloring3.jpg I’m pretty happy with the result

Johnson says... Posted on: 22/Sep/2008@7:47 am Hi Sandra, congratulations!

45 Explosively Colorful Photoshop Effects - PSDTUTS says... Posted on: 22/Sep/2008@12:16 pm [...] 41. Color Effects with Alpha Channel [...] 13 of 23



PhotoShop » Blog Archive » 45 Explosively Colorful Photoshop Effects says... Posted on: 22/Sep/2008@2:54 pm [...] 41. Color Effects with Alpha Channel [...]

45 Efeitos de cores explosivas para o Photoshop « Resistor Conspiracy says... Posted on: 22/Sep/2008@9:53 pm [...] 41. Color Effects with Alpha Channel [...]

ultradmitrenko says... Posted on: 23/Sep/2008@6:39 pm

i can`t “paint away the grey background behind the model”. where i should do it? on alpha channel? o red channel? or whole rgb? or i should create a multichannel document before? all i get is this http://img216.imageshack.us/img216/3500/69242609wh3.jpg it`s driving me mad!

Johnson says... Posted on: 23/Sep/2008@6:44 pm Hi ultradmitrenko, Seems like you have got it all correct. You just need to hide your layer 3 by clicking on the Eye icon besides it

ultradmitrenko says... Posted on: 23/Sep/2008@7:02 pm i`l tried, but there is no shadows… http://img186.imageshack.us/img186/6092/53324395fx5.jpg thanks anyway

14 of 23



Help with a book cover design - Graphic Design Forum and Web Design Forum says... Posted on: 24/Sep/2008@11:06 pm [...] Here’s an idea for manipulating the photo: Color Effects with Alpha Channel | 10Steps.SG Photoshop and Flash tutorials [...]

Steven says... Posted on: 27/Sep/2008@10:38 am

you should do this again but more in depth. i keep trying but can’t get it right. Or do a video maybe? I help a lot.

Color Effects with Alpha Channel in photoshop. | GraphicTutorials.net - Photoshop and Design. says... Posted on: 27/Sep/2008@6:21 pm [...] continue [...]

Jay says... Posted on: 29/Sep/2008@7:55 pm Hey Johnson, I’ve been having trouble with creating the alpha channel in step 6. “Ctrl+left click on the Red channel layer to load selection of those bright areas. Click on Create New Channel to generate an alpha channel and fill it with #FFFFFF. Using Soft Brush tool of size 100px and color #FFFFFF, paint away the grey background behind the model.”

I get up to ctrl left click on the red channel and the selection is loaded then i create a new channel and have trouble from there. 1) I am unsure on how to fill this with white 2) it says no pixels were selected. It all goes from there… I was hoping if it were okay if i had a step by step on this section for dummies *blushes* i kinda had trouble with the video tutorial on this section. Thank you so much for your time, I love your tutorial! Please continue to make more like this one

15 of 23



- Jay

Photo News Today » Blog Archive » Color Effects with Alpha Channel says... Posted on: 30/Sep/2008@3:02 am [...] Source and Read More: 10steps.sg [...]

I wallpapers di ottobre gratis per te | Creattivamente says... Posted on: 30/Sep/2008@7:05 pm [...] Scarica il wallpaper Rose, o guarda come lo abbiamo creato. [...]

Helmut says... Posted on: 5/Oct/2008@9:57 pm I saw this effect 2 month ago, on Corey Barker´s website

b says... Posted on: 7/Oct/2008@10:46 pm could u plz make one 4 me.. *wink* i cant get it right doing it myself

xxxtim ;]] says... Posted on: 13/Oct/2008@5:16 am okkk im stuck on step 6 like everyone else. this is what i got so far http://i33.photobucket.com/albums/d78/pigkrew/Picture3.png

sumti says... Posted on: 15/Oct/2008@4:00 pm here is my attempt to replicate the effect http://sumit270.deviantart.com/art/Color-Effects-Alpha-Channel-100793105

16 of 23



Johnson says... Posted on: 15/Oct/2008@4:12 pm Great work Sumti! Thanks for supporting this tut.

sumti says... Posted on: 15/Oct/2008@7:30 pm

my pleasure, i wonder if you could do a tut on hair selection using channel, i really wanted to learn tha

Johnson says... Posted on: 16/Oct/2008@11:01 am Great idea! Let me work something on that

olivia says... Posted on: 16/Oct/2008@12:05 pm

hello johnson. i am having trouble with steps six too. and i dont really know from ur video as it is not fi screen. mind explaining?

Johnson says... Posted on: 16/Oct/2008@2:50 pm Hey Olivia, or how about trying this way Go to Channels tab, click and drag the Red Channel layer to hit the Create New Channel button at the bottom of the panel. You should see a new channel layer named Red Copy appearing. Then get the Brush tool and paint the surroundings in #FFFFFF. You can carry on to Step 7 from here

passerby says... Posted on: 19/Oct/2008@11:36 am ehs how to fill the page with colour uh?

17 of 23



Santiago says... Posted on: 24/Oct/2008@12:26 pm this is another one I just finished! Im starting to feel really proud of myself =P hehehe, once again thanks for a great tutorial!! |*||

willie says... Posted on: 27/Oct/2008@4:44 pm haha, wow. this tut is… confusing to say the least. my outcome was pretty shitty. http://i36.tinypic.com/x5qntv.jpg

Kristy says... Posted on: 30/Oct/2008@8:31 am I got lost at step 5… will you help me? I moved the picture… but after that, it doesn’t look like yours…

Bill Gates says... Posted on: 4/Nov/2008@11:31 pm This tutorial is not rily clear to me.. tsk tsk tsk.. “F”

Crystal says... Posted on: 4/Nov/2008@11:59 pm Loved this tutorial!! Thanks for the tips!

Ritu chauhan says... Posted on: 10/Nov/2008@11:26 pm

18 of 23



it is very nice pic..i really want to see my pic on ur chennel or ur webside.. i hope u to like my pic.. with regards ritu

Johnson says... Posted on: 11/Nov/2008@12:02 am Thanks guys! Woah… Bill Gates was here before

Emily says... Posted on: 17/Nov/2008@3:36 am

Just like some other people im as well stuck on step 6, i cant seem to make the black go away after ive done everything else, and i will also show you a screen shot, because im totally stuck ahha! Thank you! This is a great tutorial! If only i could figure it out ahha!

Emily says... Posted on: 17/Nov/2008@3:37 am Hahaha woops; heres the right link .. http://i38.tinypic.com/2utrgy9.jpg

Johnson says... Posted on: 17/Nov/2008@7:59 am When you reach this part, you can try filling up Hi Emily, you are doing correctly from the screenshot the selection with white by using either Paint Bucket tool or pressing Alt+Backspace (if your foreground is set to #FFFFFF)

Triet says... Posted on: 22/Nov/2008@8:28 am Nice effect…this is wut i got: http://i232.photobucket.com/albums/ee60/xox_what_the_heo_xox/girls_colors.jpg

19 of 23



Triet says... Posted on: 22/Nov/2008@8:29 am btw thank you for this awesome tutorial

Johnson says... Posted on: 22/Nov/2008@9:59 am Great work Triet! Nice picture you’ve there

einA says... Posted on: 28/Nov/2008@7:30 am Hi Johnson, I’ve tried to follow this tutorial, but in step 6 I’ve understanding problems sorry … I would prefer, if you could write me a mail … and sorry for my bad english thx

Johnson says... Posted on: 28/Nov/2008@8:08 am Let’s chat in email then

AdamZP says... Posted on: 28/Nov/2008@5:10 pm гляди! Я ржал - http://ibigdan.livejournal.com/4243319.html - тема дня :)) Фото на тему кризиса.. да, и спасибо за пост) добавил в избранное

Camilla says... Posted on: 17/Dec/2008@10:47 pm 20 of 23



Hi! great tutorial but in mi case my brightness image is the blue channel

Camilla says... Posted on: 17/Dec/2008@10:47 pm Hi! great tutorial but in my case my brightness image is the blue channel ¿?

Michaela says... Posted on: 23/Dec/2008@12:26 am Hi there!! awesome tut and I got through kinda well, until step 7… yeah, in ur picture the striped background comes back, but i only see my model with the gradient on and a completely white background. i have 4 layers by now… do u know what i did wrong?

Erica says... Posted on: 10/Jan/2009@7:58 pm Great tutorial and final work….but i’m having problems getting there. I think i’m stuck on step 7. I’m having problems with the color preset and angle options. I have CS4 and don’t have those options. Any suggestions? Name (required) Mail (will not be published) (required) Website

21 of 23


Share your works on 10Steps.SG here!

22 of 23




Erica: Great tutorial and final work….but i’m having problems getting there. I think i’m stuck on... sadhu: haiya… i like row 7 last one but is broken link… thanks for sharing… hehe… sadhu: wa.. this is pretty nice… Johnson: I think I know hahaha Muffenz: I love all of your tutorials! First steps Designer : reinstaling photoshop?… well…… you might understand what I mean.. lol FlangouS: thanx m8 I’l check it out Ronald Bien: Thumbs Up as always=) keep em coming john erin: I really like this, a good way to make 3-d text without using a high tech program Johnson: Thanks so much!

Beauty product reviews and giveaways! StreamNet TV. Watch world wide TV for free. Free Music computer consultants orange county House and Office cleaning

Thanks Everyone for the Supports 10Steps.SG on Web2.0 Sites Results for FlashEff Premium Contest Interview - Axeraider70 Decorate Your Own Hello Kitty Car Creating your own Fairytale Scene Designing with 3D Render Pack 33 Digital Painting Tutorials Create a 3D Flowery Text Effect Color Effects with Alpha Channel 110 Creative Advertisement for Inspiration Create a Face Shattering Effect Creating a Smoke Fading Effect Making of Fiery Planets Collision Creating a Nuclear Explosion Effect Wooden Text Effect in Photoshop Free-Brushes.com: Photoshop Brushes lleitmotif.Net: Fashion Conscience MindGems: Find Duplicate Images Presidia Creative: A Creative Media Community SherifAbdou: A Rohin and Sherif Production Tutorials Expert: Unleash Your Creativity Web Hosting Search: Find a good hosting provider © 2008 - 10Steps.SG. All Rights Reserved.

23 of 23

color effects with alpha ch

Recommend Documents