Color Effects With Alpha Channel

9/24/2010 Color Effects with Alpha Channel | 10St…
About 10Steps.SG Community Link Feed Copyright and Usage Send a Message
Articles » Contests Freebies » Freelance Inspirations » News Roundups » Tutorials » Videos
S 24
2 Share
Color Effects with Alpha Channel

Advertise Here
Preparations:
We w ill 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 ow ners.
Search
Subscribe for Full RSS Feeds

Step 1 – Setting Up Background:
Subscribe for Email RSS
Create a document of size 750 by 550px and
save it as example.psd.
Follow us on Twitter
Fill the background w ith #E6D4A7.
10steps.sg/…/color-effects-with-alpha-… 1/25
Step 2 – Create Strip Pattern:
Create a new document w ith 3 by 3px, then
create a new layer above Background layer.
Select Pencil tool w ith 1px and color #000000,

paint 3 dots as show n 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.
Join our Flickr Group
Step 3 – Transparent Rainbow:

Create a new layer above the rest. Select the
Advertise Here
Gradient tool and choose Transparent Rainbow .
Drag the gradient from top-left of the document

diagonally across to the bottom-right.
How To Give Your Photos A Lomo Effect

[Photoshop Tutorial]
Obviously, you’re pretty much into lomo yes? Then

you’ve come to the right site. This Photoshop tutorial
Step 4 – Create a Color Frame: w ill help you get that lomo effect even w ithout a lomo
camera. Your cheaper alternati...
Select the rainbow gradient layer and go to Filter
> Blur > Gaussian Blur. Set the radius to 250.
Ingenious Collection of Camera Toss
Create a layer mask on this layer and fill the
mask w ith #FFFFFF. Using Soft Brush tool of
Photography
size 350px and color #000000, paint center of The most risky field of Kinetic photography is that of
the mask as show n on left. camera tossing, in w hich the photographer literally
throw s their equipment into the air in hopes of
producing an artistic looking image. Many...
Future Design Thinking: I’m on a Boat! I’m in a

Storm!
This second article my series, last time w e discussed

the w ays of floating in business of Graphic Design is
by using the Elements and Principles of Design.
Step 5 – Selecting Image Channel:
Open up your model image and drag it into
example.psd using Move tool. 102 Proven Social Media Headline Formulas
List
Hide the rest of layers except for the model. Go
to Channels tab and choose the brightess image The headline for the blog Post play a major role to
out of the Red, Green and Blue (for mine is Red). attract the readers. If the face is not attractive your
piece of w riting w ill not fascinate to the reader
60 Excellent Adobe Illustrator Icon & Logo

Design Tutorials
In my opinion logo design domain is the most spread

after that w ebsite design. Logo designs are very
important for a company because they represent the
business image. Logos must reflect very w ell ...
Step 6 – Create Alpha Channel:
Submit your News
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 w ith #FFFFFF.
Using Soft Brush tool of size 100px and color

#FFFFFF, paint aw ay the grey background
behind the model.
Note: View animation on the left.
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
w ith 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 w hite
vertical lines of various sizes w ith Pencil tool.
You w ill need to hold dow n the Shift key w hile

draw ing so your lines w ill be straight.
Step 10 – Fading Lines:
Go to Edit > Transform > Rotate and set its value
to 45.
Using Soft Eraser tool of size 150px, fade the

tw o 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.
I am Johnson Koh, a graphic and web designer in Singapore. Founded 10Steps.SG with the
purpose to share my experiments and interesting design news. Follow me on Twitter here.
Enter your email here

Subscribe to Email RSS
Other Design Articles You May Find Interesting
The Best Vectors On Digital Artworks Worth Welcome To The World Super-Easy Site That
The Web Your Attention! Of Vector Art! Lets You Fix Images
30 Highly Beautiful You Have Never Seen The Best Green Web Very Unique Superhero
Packaging Designs So Many Stunning Designs Art
Vectors
168 Comments | Write a Comment
Dhei Rind says:

September 16, 2010 at 8:30 pm
thanks tutorial
I can do it after repeated a few times

part6 brush to remove the toll on the face to white
brus do not remember the eyes nose mouth can look perfect for
Reply
Goran says:
September 4, 2010 at 6:11 am
You can call me stupid if you want, but i dont get the step with this damn alpha channel.
Tried already with two pictures, it gets black and doesnt react like in the video.
Would be grateful for help, otherwise i will have to take a look at this some other day.
Greeting
Reply
Benni says:
Hey dude nice tutorial.. i didnt have problems and its a nice effect.. but PLS can u send me
the pattern that is over the font in your deviation (the last pic).. THANKS
Reply
ivan says:
August 19, 2010 at 9:37 pm
i dont get 6th part.. im confuse.
Reply
Peter Christensen says:

August 18, 2010 at 4:48 am
i was just wondering where do i get the GRADIENTS you use, because i don’t have the
rainbow you use, i have another one
ooh and i use Photoshop CS3
Reply
RYT says:
August 2, 2010 at 12:51 am
hey there, thanks for ur tutor

finally I made it, thanks John
Reply
Hoowan says:
July 17, 2010 at 12:47 am
super thank you for this tuts…

and thanks for all the comments that helped me throughout this tuts when the author uses
some shortcut keys they’ve also helped me.. hehe..
thanks to all.. ^___^

up for this tuts!! XD
Reply
Bridger says:
July 3, 2010 at 7:32 am
Hey thanks alot man whoever u are, God bless u!!!!!!!!
Reply
Aurell says:
June 8, 2010 at 3:21 am
how do i create a layer mask on step 4 ._.
Reply
Gooya IT says:
May 11, 2010 at 4:09 pm
ow this very good
Reply
anjela says:
April 20, 2010 at 3:04 am
f..k …. its such a ……
Reply
Coen says:
April 10, 2010 at 9:29 pm
I was also stuck at step 7. After half an hour I finaly got it. My paint bucket tool (to fill the picture)
was still at the pattern mode (from step 2) instead of the ‘foreground’. I’ve filled it with black
and finally it worked! I think this is the main issue over here.
Reply
Sami says:
April 10, 2010 at 4:26 am
I really like this effect, it was confusing at first, but the video tutorial helped me a lot.
This is my finished product.
http://hphotos-
snc3.fbcdn.net/hs363.snc3/23455_116418195037209_100000070861320_299012_1909645_n.jpg
Reply
TMo says:
April 2, 2010 at 11:36 am
Hey I’m having trouble with steps 6 I create the alpha channel and I do the that thing where
only certain parts of the face are selected and its all black. In the videos you use some short
cuts on your keyboard to make the black disappear. What do you press?
I remove the background, then I cant do step 7 and make it look like that. Can you e-mail me and break down
those steps? Please and Thanks
Reply
RYT says:
August 1, 2010 at 11:34 pm
yeah, me too, how to fill the alpha???
rdanish says:
March 19, 2010 at 4:47 am
Step 6 cannot be done i dont know it is impossible or i cannot do that!!!!
Reply
Scott says:
March 19, 2010 at 7:53 am
I figured it out, after you select inverse you press ***ALT-BACKSPACE*** and it should
show up worked for me anyway though the tutorial doesn’t indicate that….but thanks
for the tutorial anyway!!
Scott says:
March 11, 2010 at 2:20 pm
CAN YOU PLEASE EXPLAIN STEP 6 TO ME IM TRYING TO MAKE THIS FOR MY GIRLFRIEND
AND I HAVE BEEN USEING PHOTOSHOP FOR A WHILE BUT I CAN’T SEEM TO GET THE
ALPHA CHANNEL ON TO THE BACKGROUND WHICH IS LIKE THE MOST IMPORTANT STEP
PLEASE SOMEONE EXPLAIN
Reply
Amyth says:
February 11, 2010 at 10:38 pm
http://www.facebook.com/photo.php?pid=5109505&id=571790048
my work!
please chek!
Reply
Christoffer says:
February 11, 2010 at 5:29 am
Nice tutorial. Have been thinking about giving it a try for… aaa, almost 4 months now but
haven’t taken the time. So I finally took a picture of my girl and tried it out, learned a few new
tricks like the alpha channel painting.
Here’s the result, hope you like it
http://img687.imageshack.us/img687/9935/hippieanna.jpg
/Christoffer
Reply
mohammed says:
thhhhhhhhhhhhhx aloot for the video
Reply
Lori says:
January 28, 2010 at 3:28 am
I really wanted to achieve this effect — it’s so cool — but sadly, the instructions are impossible
to follow.
Reply
Amyth says:
hey, itz actually pretty easy!

i mean!
i din getit manny times!
but aftr i gotit i came to kno how easy it was!
hehe
Amyth says:
January 26, 2010 at 2:47 pm
doesnt d video tutorial hav audio?!
Reply
Johnson Koh says:

January 26, 2010 at 10:38 pm
I have no confidence in recording my voice buddy But I will give it a try soon.
Moosey says:
This was explained very poorly and was hard to follow at imporant parts… interesting idea
though.
Reply
Julezzz says:
I concur. some steps were wicked hard to follow up with like the alpha channels. my
photoshop is to new for this so mabey he should update this tutorial with a CS3
extended version. thanks
~XxXJulEzZzXbangxX
matt says:
Great tutorial, though a tutorial for your deviation is what I’m really looking for. Do you have a
tutorial for that one?
Reply
Amyth says:
December 30, 2009 at 5:26 pm
i din understand 6th step!

ple help?!
Reply
Harry says:
tried the above steps – but how did you manage to save into jpg since it doesn’t support alpha
channel ?
Reply
Johnson Koh says:

Hello Harry, the alpha is no longer useful after Step 6. So we can save the final work as
JPG.
Zwezda says:
December 18, 2009 at 3:31 am
I have problems on step 6 wth Alpha channel:/ can’t go towards that. Is this may have
something to do wth my Photoshop version??? As i use CS4?
Reply
wiggy says:
why aint u showing us everything you do in step 6
Reply
Johnson Koh says:

Thanks Wiggy for highlighting the bad image links. I have amended them.
wiggy says:
i finally got it, YEA!!!
actually a good tutorial—makes u think!

(it being my first attempt at a photomanipulation didn’t help )
thanks again!!! and sorry about being a baby!
Russell says:
October 26, 2009 at 12:58 pm
Hey, cool effect…but a lil know how was required to get through some of the steps…
anyway…here is my version…
http://photoshop-pinups.blogspot.com/2009/10/keeley-hazell-alpha-channel-color.html
yeah…mine is with Keeley as well… always a good model to use!!!
Reply
taryarL says:
October 1, 2009 at 6:18 am
so cool
thank
Reply
VinX says:
my was a phail imo , take a look at the screenshot b3l0w :
http://img411.imageshack.us/img411/7476/fab4.png
Reply
Just smile says:

very very very wounderful

thank you so much my brother
Reply
Sahdev Thakur says:

August 18, 2009 at 9:26 pm
nice creativity, looks lovely.
Reply
naz says:
August 14, 2009 at 4:32 pm
i can’t do the stuff on step 4.. when i used the brush tool, it just paints the color and it doesn’t
show the pattern… why does that happen?
Reply
Xavier says:
August 2, 2009 at 12:42 pm
Thanks for the tuts. I have learned so much about photoshop from your website. Great job.
Keep it up.
Reply
Johnson Koh says:

July 8, 2009 at 5:56 pm
You may wish to try out the Face Shattering Effect? Thanks for your support!
Reply
Steele says:
July 8, 2009 at 11:38 am
was there any suggestions you could make for my photo? Thank’s ahead of time if so
Reply
Steele says:
July 8, 2009 at 11:37 am
Thanks Johnson, I am starting on your next tut now I just cant decide which one to do lol
Reply
Johnson Koh says:

July 7, 2009 at 11:57 am
@Steele : I think you have done a great job for just the 2nd attempt
Reply
Steele says:
July 6, 2009 at 2:36 pm
I decided to tackle your second version of this pic and love what I came up with and am
curious to know what people think . This is my 3rd photoshop chop ever beyond removing the
occasional scar. I take criticism well (somewhat )
http://www.flickr.com/photos/40140882@N02/3693473628/
Reply
Steele says:
July 5, 2009 at 2:42 am
WOW AMAZING I JUST GOT DONE AND LEARNED SO MUCH. I PLAN ON COMPLETING ALL
OF YOUR TUTORIALS. 2 DOWN LOTS MORE TO GO
Reply
eva says:
July 2, 2009 at 3:53 pm
hi, may i know what is the final step after fade the line?because my image faces (eyes &
mouth) r not clear.
Reply
Johnson Koh says:

May 8, 2009 at 11:00 pm
Nice job done, Begginer! And thanks for sharing what you found with the rest of the community
Reply
begginer says:
May 7, 2009 at 11:12 pm
well, I have already discovered how to simulate perfect blending and colorization in ps
elemnts 6
1.blending
In step 7 you have to change layer mode to linear darkness (it’s my translation from polish, I don’t know how
is this exactly named in english version) and then you’ll see exactly the same effect as in the picture
illustrating this step.
2.colorizing
To avoid colorizating model with gradient blending (what’s not avaliable in pse) you just have to use simple
soft brush to colorize the layer with model.
And that’s all I hope I helped a bit all of ps elments users. I would be thankful if you could add some
remarks for pse users in step 7, to help them succesfully achieve the complete effect
Reply
begginer says:
May 7, 2009 at 10:19 pm
colud anyone help me simulating step 8 in ps elements 6 please? I don’t have cs3 and i
wonder if there’s any way to do similar trick in my program
Reply
iCe says:
April 14, 2009 at 12:45 pm
my problem is with step 7. I’m done brushing the alpha channel with all white. Have selected
the dark areas, after going back to the layers section, my picture still remains the same and
not the brushed-white version like yours. please help
Reply
Johnson Koh says:

April 13, 2009 at 11:49 am
Much appreciated!
Reply
jessa says:
April 13, 2009 at 11:42 am
sure sir..i have many friends who are also crazy over photoshop like me…i will probably share
this because this is very helpful for our projects!!
Reply
Johnson Koh says:

April 13, 2009 at 11:00 am
That’s very motivating Jessa I’m pretty poor at promoting my own site. Do help me to share
around your friends if you think they will like it as well.
Have a good day!
Reply
jessa says:
April 13, 2009 at 10:57 am
haha..yay!!but really you are good…of all the sites that teach photoshop tuts i think your site is
the best!!
Reply
Johnson Koh says:

April 12, 2009 at 7:51 pm
Thanks Jessa. You are a great supporter
Reply
jessa says:
April 12, 2009 at 7:32 pm
you are very good..keep it up!
Reply
jessa says:
April 6, 2009 at 9:19 pm
thank you…especially with your patience..:)
Reply
Johnson Koh says:

April 6, 2009 at 2:41 pm
Hi Jessa, I have the video of this tutorial at http://vimeo.com/groups/10steps/videos/1745833
See if it is clearer?
Reply
jessa says:
April 5, 2009 at 3:43 pm
stuck on number 6..the animation thing..tnx for your patience:)
Reply
Anna says:
March 4, 2009 at 10:25 pm
PSD file, please
Reply
Johnson says:
Thanks Bashir. I am constantly looking out for ideas. Do drop me a note if you have any
suggestions too
Reply
bashir says:
it is very nice and a great job. Keep it up. congratulation for this tutorial hopefully u will again
appear with a great job. again congratulation. if any useful tips, tricks may please be informed
me via mail. i shall be highly grateful for your kindness.
Reply
Johnson says:
Hi all, for those who encounter problems with Step 6 and Step 7, possible to pass me a
screen-shot of what you have on your screen via email? This is because everyone seems to
land up with different results.
I will try my best to help and reply everyone individually.
Reply
Marco says:
i really like this tutorial..

but..im i run in to problems at step 6
pls help
i look at the animation to the left but its not helping
an i would like 2 know how you did the other picture
if you could explain that too..thnks
Reply
PennyLane says:
I love this! Now I wish someone could work it out in Gimp so I could try it out. Any takers?? =)
Reply
Luca says:
January 28, 2009 at 10:35 pm
Hi,
very good work! keep on
I have some troubles on Step 6 and 7 (as everybody)…

My problem is that is not clear which layers and channels has to be selected in those 2 steps…
In step 7, after selection + inverse on Alpha channel and then creation of the new layer, which channels has to
be selected?
Thanks a lot
Reply
Erica says:
January 10, 2009 at 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?
Reply
Michaela says:
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?
Reply
Camilla says:
Hi! great tutorial but in my case my brightness image is the blue channel Â¿?
Reply
Camilla says:
Hi! great tutorial but in mi case my brightness image is the blue channel
Reply
Johnson says:
November 28, 2008 at 8:08 am
Let’s chat in email then
Reply
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
Reply
Johnson says:
Great work Triet!

Nice picture you’ve there
Reply
Triet says:
btw thank you for this awesome tutorial
Reply
Triet says:
Nice effect…this is wut i got:

http://i232.photobucket.com/albums/ee60/xox_what_the_heo_xox/girls_colors.jpg
Reply
Scott says:
March 11, 2010 at 2:52 pm
how did you get step 6?
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)
Reply
Emily says:
Hahaha woops; heres the right link ..
http://i38.tinypic.com/2utrgy9.jpg
Reply
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!
Reply
Johnson says:
Thanks guys! Woah… Bill Gates was here before
Reply
Ritu chauhan says:

November 10, 2008 at 11:26 pm
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
Reply
Crystal says:
Loved this tutorial!! Thanks for the tips!
Reply
Bill Gates says:

This tutorial is not rily clear to me.. tsk tsk tsk.. “F”
Reply
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…
Reply
willie says:
October 27, 2008 at 4:44 pm
haha, wow. this tut is… confusing to say the least. my outcome was pretty shitty.
http://i36.tinypic.com/x5qntv.jpg
Reply
Santiago says:
October 24, 2008 at 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!!
|*||
Reply
passerby says:
October 19, 2008 at 11:36 am
ehs how to fill the page with colour uh?
Reply
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
Reply
olivia says:
October 16, 2008 at 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 fit screen. mind explaining?
Reply
Johnson says:
October 16, 2008 at 11:01 am
Great idea! Let me work something on that
Reply
sumti says:
my pleasure, i wonder if you could do a tut on hair selection using channel, i really wanted to
learn that..
Reply
Johnson says:
Great work Sumti!

Thanks for supporting this tut.
Reply
sumti says:
here is my attempt to replicate the effect

http://sumit270.deviantart.com/art/Color-Effects-Alpha-Channel-100793105
Reply
xxxtim ;]] says:

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
Reply
b says:
could u plz make one 4 me..

*wink*
i cant get it right doing it myself
Reply
Helmut says:
I saw this effect 2 month ago, on Corey BarkerÂ´s website
Reply
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
- Jay
Reply
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.
Reply
ultradmitrenko says:
i`l tried, but there is no shadows…
http://img186.imageshack.us/img186/6092/53324395fx5.jpg
thanks anyway
Reply
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
Reply
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!
Reply
Johnson says:
Hi Sandra, congratulations!
Reply
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
Reply
Sandra says:
Okay thanks, i’ll give it a try.. see if that works out..
Reply
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.
Reply
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
Help needed!
Reply
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.
Reply
Rick says:
Thanks for the video tutorial, brilliant I’ve manage to do it, thanks again its fantastic.
Reply
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..^^
Reply
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.
Reply
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 ?
Reply
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.
Reply
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
Reply
kelsey says:
I get stuck at Step 5, I don’t see a Channels tab anywhere. I have Photoshop Elements 6.0.
Reply
tommy says:
hi johnson: if you have the .psd file for this tutorial ? Iâ€™m trying but canâ€™t get like final
iamgeâ€¦!!!
Reply
MANNY says:
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
Reply
Johnson says:
Thanks Kathy
No prob egy, I’m glad you made it. Cheers!
Reply
egy says:
Finally I could do it, thanks again Johnson I will try another tutorial.
IÂ´m sorry for my english is very poor
Reply
Kathy says:
thank you for this great tutorial! i got a very good result!:))
Reply
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!
Reply
Maddy says:
Ahh!
I get this:
http://i38.tinypic.com/o0vs6g.jpg
Reply
egy says:
I give up , I have the same problem that Alan.

Could be the order of the layers? Or the opacity?
Thanks anyway.
Reply
Johnson says:
Thanks Ronald. I love your site too!
Reply
NaldzGraphics says:
very nice tutorial.keep it up:)
Ronald
Reply
Johnson says:
I’m considering doing so already
Reply
nighthawk says:
can u convert this tut to vedio or flash tutâ€¦??
Iâ€™m trying but canâ€™t get like final iamgeâ€¦!!!
Reply
Johnson says:
Don’t mention it It does takes awhile to experiment here and there. Cheers.
Reply
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 =)
Reply
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.
Reply
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)
I am so sorry If I am beeing too anoying =/
Reply
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.
Reply
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 =/
Reply
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.
Reply
Mark says:
I created an alpha channel, but like Kayne – I can’t seem to brush away the dark background.
Any ideas?
Reply
Alan says:
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? =/
Reply
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?
Reply
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
Reply
Kanye says:
I tryed but i can’t paint away the dark background on step 6, can you help me out ?
Reply
Leave a Comment
Name (required)
Mail (will not be published) (required)
Website
Submit Comment
Notify me of followup comments via e-mail
14-09-2010 | (4) Comments 15-08-2010 | (12) Comments

Amazing Manufactured Totems by 33 Stunning Desktop Wallpapers for
Alain Delorme Designers

50 (Really) Beautiful Geometry Digital 10 Loving Emoticons for your
Arts Valentine’s Day

40 Artistic Examples of Origami 4800 Mini Icons You Ever Need for your
Animals Apps

40 Spectacular Polar Panorama 30 Free PSD Templates for Product
Photographs Design

50 Cool and Funky Custom Sneakers 250 Christmas Icons to Decorate Your
Designs Blog

33 Creative Examples of Smart Car 40 Free Artistic Twitter Backgrounds
Advertisements
Back to Top
Free Panorama Software
Easy-to-use & 100% Free Create Breathtaking Panoramas!
www.Serif.com/FreePhotoStitching
© Copyright 10Steps.SG 2008-2010. All Rights Reserved

The text, images and tutorials themselves are copyright their respective ow ners. You CANNOT copy w hole tutorials, either in English or translated to another language.
Icons from WeFunction | Member of BlogCatalog | Hosted on WPWebHost

Color Effects With Alpha Channel - 10steps

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Color Effects With Alpha Channel - 10steps

Uploaded by

Copyright:

Available Formats

9/24/2010 Color Effects with Alpha Channel | 10St…

Articles » Contests Freebies » Freelance Inspirations » News Roundups » Tutorials » Videos

All rights of these resources belong to their

Subscribe for Full RSS Feeds

Select Pencil tool w ith 1px and color #000000,

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

Join our Flickr Group

Step 3 – Transparent Rainbow:

Drag the gradient from top-left of the document

How To Give Your Photos A Lomo Effect

Obviously, you’re pretty much into lomo yes? Then

Future Design Thinking: I’m on a Boat! I’m in a

This second article my series, last time w e discussed

60 Excellent Adobe Illustrator Icon & Logo

In my opinion logo design domain is the most spread

Using Soft Brush tool of size 100px and color

Note: View animation on the left.

Step 7 – Gradient on Model:

Right-click on the layer and choose Blending

Step 8 – Enhancing the Colors:

Right-click on duplicated layer and choose

Step 9 – Drawing Lines:

You w ill need to hold dow n the Shift key w hile

Using Soft Eraser tool of size 150px, fade the

Repeat Step 9 and 10 if you need more lines on

Video tutorial is posted at Vimeo

Click here to view the final image.

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.

Enter your email here

Other Design Articles You May Find Interesting

168 Comments | Write a Comment

Dhei Rind says:

I can do it after repeated a few times

i dont get 6th part.. im confuse.

Peter Christensen says:

hey there, thanks for ur tutor

super thank you for this tuts…

thanks to all.. ^___^

Hey thanks alot man whoever u are, God bless u!!!!!!!!

ow this very good

f..k …. its such a ……

yeah, me too, how to fill the alpha???

Step 6 cannot be done i dont know it is impossible or i cannot do that!!!!

thhhhhhhhhhhhhx aloot for the video

hey, itz actually pretty easy!

doesnt d video tutorial hav audio?!

Johnson Koh says:

i din understand 6th step!

Johnson Koh says:

why aint u showing us everything you do in step 6

Johnson Koh says:

i finally got it, YEA!!!

actually a good tutorial—makes u think!

thanks again!!! and sorry about being a baby!

yeah…mine is with Keeley as well… always a good model to use!!!

my was a phail imo , take a look at the screenshot b3l0w :

Just smile says:

very very very wounderful

Sahdev Thakur says: