Color Effects With Alpha CH

Color Effects with Alpha Channel | 10Steps.SG - Photoshop and Flash t... http://10steps.
sg/photoshop/color-effects-with-alpha-channel/
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’m using Keeley Hazell for
this tutorial.
All rights of these resources belong to their

respective owners.
1 of 23 1/11/2009 12:49 AM
Color Effects with Alpha Channel | 10Steps.SG - Photoshop and Flash t... http://10steps.sg/photoshop/color-effects-with-alpha-channel/
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 1/11/2009 12:49 AM
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 1/11/2009 12:49 AM
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 Overlay 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 Overlay to Hard
Light.
Step 9 - Drawing Lines:
Create a new layer and draw some white vertical

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 1/11/2009 12:49 AM
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 1/11/2009 12:49 AM
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...
I don’t get the part with the alpha channels … if you can explain it a lil’ bit more? I always get the effect
like the pic is inverted :S
Johnson says...
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...
6 of 23 1/11/2009 12:49 AM
I created an alpha channel, but like Kayne - I can’t seem to brush away the dark background. Any ideas?
Johnson says...
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 better
on that part.
Alan says...
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...
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...
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 the
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 preset
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 1/11/2009 12:49 AM
I am so sorry If I am beeing too anoying =/
Johnson says...
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 difference
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 preset
Yellow, Violet, Orange, Blue. Set its angle to -45 and scale to 150.
Alan says...
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...
Don’t mention it It does takes awhile to experiment here and there. Cheers.
nighthawk says...
can u convert this tut to vedio or flash tut…??
I’m trying but can’t get like final iamge…!!!
Johnson says...
I’m considering doing so already
8 of 23 1/11/2009 12:49 AM
NaldzGraphics says...
very nice tutorial.keep it up:)
Ronald
Johnson says...
Thanks Ronald. I love your site too!
egy says...
I give up :(, I have the same problem that Alan.

Could be the order of the layers? Or the opacity?
Thanks anyway.
Maddy says...
Ahh!
I get this:
http://i38.tinypic.com/o0vs6g.jpg
Johnson says...
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...
9 of 23 1/11/2009 12:49 AM
[...] ver tutorial [...]
Kathy says...
thank you for this great tutorial! i got a very good result!:))
egy says...
Finally I could do it, thanks again Johnson I will try another tutorial.
I´m sorry for my english is very poor
Johnson says...
Thanks Kathy
No prob egy, I’m glad you made it. Cheers!
Farbeffekt dank Alpha-Kanal says...

[...] 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 eines
[...]
Farbeffekt dank Alpha-Kanal – Photoshop-Weblog says...

[...] 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 eines
[...]
MANNY says...
10 of 23 1/11/2009 12:49 AM
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...
hi johnson: if you have the .psd file for this tutorial ? I’m trying but can’t get like final iamge…!!!
kelsey says...
I get stuck at Step 5, I don’t see a Channels tab anywhere. I have Photoshop Elements 6.0.
Johnson says...
Hi Kelsey, Sorry to inform that this tutorial is done in Photoshop CS3. I think version CS and above is fine
but not for Elements.
Video tutorial for this effect is added at Vimeo
miragana says...
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...
Hi . I really like this effect, have tried to reproduce it but with no success, is there a video tutorial for it
and if so where could I find it ?
11 of 23 1/11/2009 12:49 AM
Johnson says...
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...
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...
Thanks for the video tutorial, brilliant I’ve manage to do it, thanks again its fantastic.
Arika says...
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...
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, next I
created the alpha channel (image was still selected) but then I lost it.. I got a black alpha channel, then I
filled it with #FFFFF or did I do something wrong there, how do you fill it cause I just clicked on the black
square of the Alpha chan. and then just selected the white color but it definitely doesn’t look anything like
your example.. This is what I got..
http://i273.photobucket.com/albums/jj240/TaladarkieJJ/Other%20stuff/screenalphachannel.jpg
12 of 23 1/11/2009 12:49 AM
Help needed!
Johnson says...
Hi Arika, when you switch back to the layers tab, you will need to inverse the selection (Select > Inverse)
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...
Okay thanks, i’ll give it a try.. see if that works out..
Sandra says...
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 result:
http://i273.photobucket.com/albums/jj240/TaladarkieJJ/Creative%20work/heath-ledger-alpha-
coloring3.jpg
I’m pretty happy with the result
Johnson says...
Hi Sandra, congratulations!
45 Explosively Colorful Photoshop Effects - PSDTUTS says...

[...] 41. Color Effects with Alpha Channel [...]
13 of 23 1/11/2009 12:49 AM
PhotoShop » Blog Archive » 45 Explosively Colorful Photoshop Effects says...

45 Efeitos de cores explosivas para o Photoshop « Resistor Conspiracy says...

ultradmitrenko says...
i can`t “paint away the grey background behind the model”. where i should do it? on alpha channel? or
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...
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...
i`l tried, but there is no shadows…
http://img186.imageshack.us/img186/6092/53324395fx5.jpg
thanks anyway
14 of 23 1/11/2009 12:49 AM
Help with a book cover design - Graphic Design Forum and Web Design Forum says...
[...] Here’s an idea for manipulating the photo: Color Effects with Alpha Channel | 10Steps.SG -
Photoshop and Flash tutorials [...]
Steven says...
you should do this again but more in depth. i keep trying but can’t get it right. Or do a video maybe? It’d
help a lot.
Color Effects with Alpha Channel in photoshop. | GraphicTutorials.net - Photoshop and Design. says...
[...] continue [...]
Jay says...
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 i
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 1/11/2009 12:49 AM
- Jay
Photo News Today » Blog Archive » Color Effects with Alpha Channel says...
[...] Source and Read More: 10steps.sg [...]
I wallpapers di ottobre gratis per te | Creattivamente says...

[...] 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...
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...
here is my attempt to replicate the effect

http://sumit270.deviantart.com/art/Color-Effects-Alpha-Channel-100793105
16 of 23 1/11/2009 12:49 AM
Johnson says...
Great work Sumti!

Thanks for supporting this tut.
sumti says...
my pleasure, i wonder if you could do a tut on hair selection using channel, i really wanted to learn that..
Johnson says...
Great idea! Let me work something on that
olivia says...
hello johnson. i am having trouble with steps six too. and i dont really know from ur video as it is not fit
screen. mind explaining?
Johnson says...
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...
ehs how to fill the page with colour uh?
17 of 23 1/11/2009 12:49 AM
Santiago says...
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...
haha, wow. this tut is… confusing to say the least. my outcome was pretty shitty.
http://i36.tinypic.com/x5qntv.jpg
Kristy says...
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...
Loved this tutorial!! Thanks for the tips!
Ritu chauhan says...

18 of 23 1/11/2009 12:49 AM
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...
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...
Hahaha woops; heres the right link ..
http://i38.tinypic.com/2utrgy9.jpg
Johnson says...
Hi Emily, you are doing correctly from the screenshot When you reach this part, you can try filling up
the selection with white by using either Paint Bucket tool or pressing Alt+Backspace (if your foreground
is set to #FFFFFF)
Triet says...
Nice effect…this is wut i got:

http://i232.photobucket.com/albums/ee60/xox_what_the_heo_xox/girls_colors.jpg
19 of 23 1/11/2009 12:49 AM
Triet says...
btw thank you for this awesome tutorial
Johnson says...
Great work Triet!

Nice picture you’ve there
einA says...
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...
Let’s chat in email then
AdamZP says...
гляди! Я ржал - http://ibigdan.livejournal.com/4243319.html - тема дня :))

Фото на тему кризиса..
да, и спасибо за пост) добавил в избранное
Camilla says...
Posted on: 17/Dec/2008@10:47 pm
20 of 23 1/11/2009 12:49 AM
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 1/11/2009 12:49 AM
Share your works on 10Steps.SG here!
22 of 23 1/11/2009 12:49 AM
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 1/11/2009 12:49 AM

Color Effects With Alpha CH

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Color Effects With Alpha CH

Enviado por

Direitos autorais:

Formatos disponíveis

Color Effects with Alpha Channel | 10Steps.SG - Photoshop and Flash t... http://10steps.

Color Effects with Alpha Channel

We will need an image of a model, prefably a

All rights of these resources belong to their

Step 1 - Setting Up Background:

Create a document of size 750 by 550px and save it

Fill the background with #E6D4A7.

Step 2 - Create Strip Pattern:

Create a new document with 3 by 3px, then create a

Select Pencil tool with 1px and color #000000,

In example.psd, create a new layer. Select Paint

Step 3 - Transparent Rainbow:

Create a new layer above the rest. Select the

Drag the gradient from top-left of the document

Step 4 - Create a Color Frame:

Select the rainbow gradient layer and go to Filter >

Create a layer mask on this layer and fill the mask

Step 5 - Selecting Image Channel:

Open up your model image and drag it into

Hide the rest of layers except for the model. Go to

Step 6 - Create Alpha Channel:

Ctrl+left click on the Red channel layer to load

Using Soft Brush tool of size 100px and color

Note: View animation on the left.

Step 7 - Gradient on Model:

Ctrl+left click on the Alpha Channel to load

Right-click on the layer and choose Blending

Step 8 - Enhancing the Colors:

Duplicate the model layer and go to Filter > Blur >

Right-click on duplicated layer and choose Blending

Step 9 - Drawing Lines:

Create a new layer and draw some white vertical

You will need to hold down the Shift key while

Step 10 - Fading Lines:

Go to Edit > Transform > Rotate and set its value to

Using Soft Eraser tool of size 150px, fade the two

Repeat Step 9 and 10 if you need more lines on your

Add some texts to complete the design. That’s all!

Video tutorial is posted at Vimeo

Click here to view the final image.

Added on 1st Sep 2008.

I have some free time so decided to do another

The basic techniques used are still as above.

Click here to view the larger image at DeviantArt.

Johnson this is the problem I’ve got:

I don’t know how to go on after this =/

Hi Alan, Thanks for helping me understand the problem.

Clear all selections on that layer and go to Image> Adjustments> Invert.

Well. I came through it. Now my problem is on step 7:

http://img526.imageshack.us/img526/4599/junto1xv5.jpg (this is what I get)

http://img522.imageshack.us/img522/7392/junto2wl7.jpg (and after that, this is what I get)

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

No worries at all, Alan

My problem is that I never get something like this http://10steps.sg/wp-content/uploads/photo9/8.jpg

Thanks for the replies =)

can u convert this tut to vedio or flash tut…??

I’m trying but can’t get like final iamge…!!!

I’m considering doing so already

very nice tutorial.keep it up:)

Thanks Ronald. I love your site too!

I give up :(, I have the same problem that Alan.

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

I´m sorry for my english is very poor