In this tutorial, I will show you how to make a typographic face by using simple techniques. Using the Brush Tool and experimenting with light, you will get this amazing Typographic Space Face that looks like it's created by letters and an amazing explosion. Let's get started!
Final Image Preview
Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version here.
Step 1
First of all, I want to make clear that the image with the face that I'm using here, is an personal image of my self, Face Image. I would recommend you to get this image for this tutorial, for you to follow me step by step, also you can use any other image you like. It will be easier for you to choose an image that has a Black Background, in order to use this effect in a similar way.
In this tutorial, Im also using a brush set, that I found really useful. You can find it on Deviantart or from obsidiandawn.com. I also used a stock image of Fireworks that helped me to get the effect of an explosion. Before you get the Brush Set and the Fireworks image, please do not forget to credit the Artists.
Step 2
After you downloaded all the needed material, it's time for us to start. Open the Face Image, press Alt + Double-click on the layer so you can Unlock it. Rename the layer "Face." Now you have to create a New Layer by pressing Command + Shift + N, below this one and fill it with Solid Black, rename the layer "Background."
Step 3
Go to Brush Tool (B), select one of the brushes from the set you downloaded before. I recommend you select one that has more letters. In this case, I used number 22. Before you apply the brush, be sure you create a new layer using Command + Shit + N, then select the new layer so the brush will apply on it. Also for the brush size, the Master Diameter has to be set for the maximum, which in this case is 2500 px. Later after you got the idea, you can play more with the brush sizes.
Step 4
Now it's time to work a bit more, select the "Layer 1", hold Control Key, Command-click on the layer "Layer 1," you will see that all the letters of the brush are selected.
Select the Layer called "Face," be sure the letters are still selected, and copy the selected pixels from the layer, then paste. You will see an automatic layer is created below "Layer 1" and layer "Face." I call that layer "Cameleon" because it has the same colors as the Image. You have to Delete "Layer 1," or you won't see any difference. If you hide the layer "Face," you will see that the letters become the same as the Face Image.
Step 5
In Step 3 and Step 4, I explain how the letters from the brush are colored as the image of the face. You now need to repeat those steps as many times as needed until the face becomes clear. In this case, I repeated the steps eight times, and I got the image below as the result.
Don't forget to group all the layers (Layer > New > Group). Rename the group "Letters" and then select all the layers, drag them and drop them into the Group.
Step 6
To make more clear that the letters are overlapping each other, you need to apply shadow on them. Select one of the layers that is inside the Group "Letters." Double-click on it and choose Blending Options, then set the Drop Shadow with a Blend Mode of Multiply, Opacity 90%, Angle 30, Distance 8px, and Size 5px.
By applying this on one layer, you can copy this effect by Right-clicking on that layer and choose Copy Layer Style. Select all the layers that are inside the group, then Right-click again in one of them and choose Paste Layer Style. You will see that all the layers get this shadow.
Step 7
Everything now is done. This was the whole trick. Now it needs only the retro colors and the explosion effect to finish the design.
Create two layers (Command + Shift + N), call them "Blue" and "Orange." Fill the "Blue" layer with (#080d4c) and fill the "Orange" layer with (#ffc600).
The Opacity of the "Blue" layer has to be 50 %, and the Blend Mode, Lighten. The Opacity of the "Orange" layer has to be 6%, and the Blend Mode, Lighter Color. Be sure that the "Blue" layer is on top.
Step 8
Now we'll make the lights. Select the Brush Tool (B), choose a normal brush Circle with a Master Diameter of 150 px. Choose two colors (#00fffc) and (#00ff4e) for the lines.
Create a new layer (Command + Shift + N), and start to draw with the brush from the upper-left corner to the right-lower corner, as I did in the image below.
Step 9
Select the layer with the lines you drew. Go to Filter > Blur > Motion Blur. Be sure the Angle is -45 degrees, and the distance is 998 px.
Step 10
This time go to Filter > Blur > Gaussian Blur. The Radius has to be 124px. After you've applied the Blur, go on the Blending Mode of the layer and change it from Normal to Lighten, also reduce the Opacity to 50%.
Step 11
Create a New Layer. Choose the Brush Tool that we used before to draw the lines, and draw something similar to the image below with this color: #ff0066.
Step 12
Now go Filter > Blur > Gaussian Blur. Be sure you have selected the rough layer, the one with Pink Light. And be sure the Radius is in Max 250.0 px. Go to the Blend Mode of the same layer and change the Mode to Screen.
Step 13
Now open the image with the Fireworks that you downloaded in the beginning. Go to Hue/Saturations (Command + U), and change the Hue to -98. You see that the color of the image changed into a Pink. Press Command + A to select all the pixels of the image, Copy the Image, and then go to our project and Paste it there. As you see, a new layer is created. Rotate the image as shown in the second image below.
Step 14
Change the Blend Mode of the image to Linear Dodge.
Step 15
Create a new layer (Command + Shift + N). fill it with Solid Black, go to Filter > Render > Lens Flare, and set the Brightness to 89%. Also, choose 35 mm prime, and try to move the light in the same place as shown below.
Step 16
Go to the blend mode of this layer, and from Normal Mode change it to Screen. Also, by moving and rotating the image, you can get something similar to that shown below.
Conclusion
Now save this project, and after you get the finished image you can play with the Brightness and the Contrast until you are satisfied with the result.
I Hope you learned something new and had fun. You can view the final image below or view a larger version here.
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )mustafa July 14th
good work!
( )SnakeJake July 14th
Tell me you didn’t just use LENS FLARE!
Otherwise, good tutorial
( )Ivan July 15th
kkkkkkkkkkkkkkkkkkkkk! Yep! LENS FLARE! TADAAAAA!
( )vic July 26th
hahaha. right on. goodstuff but flare takes away from dark mood that could have been established. ppl o.d. on these lens flares. nice anywayz. peace
( )elijah November 18th
LENS FLARE! Old school baby!
( )Dee July 14th
This looks very familiar. Not too bad though
( )shivanagendra July 14th
suuuuuuuuper yaar… this is very great
( )Mike_Viking July 14th
the lens flare kills it………oh dear
( )FUNKist July 14th
Great Artwork, nice tutorial, a very different one for a change
( )Igor July 14th
Very good tutorial
( )Xand July 14th
True, the flare is out of place plus it needs more depth in lighting and colors… otherwise nice effect.
( )Verso July 14th
Hmmm… looks good at Step 5 then suffers from overkill.
( )Modisana July 14th
Awesome dude… I have to agree with the others about the lens flare though. Other than that awesome awesome work.
Keep it up man!
( )markus July 14th
should you be able to tell that the typography is showing a man?
( )squareart July 14th
Stunning! I love this – nice to see something completely different!
( )squareart July 14th
PS. Agree on the lens flare issue – but for means of a tutorial, I understand you wanting to share the extra bit of info.
( )Noah July 14th
Should have Siberian tigers jumping out of the eyes instead of lens flare : ] other than that I like it.
( )Jesse July 14th
Hmmm… When I viewed the final image prior to reading any of the article text (including headline), I didn’t notice any semblance of a man. I can sort of see it after the fact, but it seems like a bit of a stretch to me.
Nonetheless, I actually really like the look of the image, man or not (sans len flare).
( )choen July 14th
nice typo… thanks
( )jake July 14th
is that a face??? where???
( )VertigoSFX July 14th
Simple effect, don’t like the lens flare though, looks blah.
( )Fred July 14th
the face is lost .. the process is great but here the result is not acheived … but nice tutorial indeed . and Yes the lens flare is killing the whole thing
( )Brett July 14th
Good concept, lens flair could be done a little different..
( )Melody July 14th
Yea, the flare is a lil much..more detail to the face probably would’ve been better than the unnecessary extras..
( )snnaqvi July 14th
Good tutorial but the face is not very clear.
( )prekesh July 14th
To be honest, this tutorial doesn’t really teach anything, just tells you how to create this rather poor effect with a final outcome that looks like someone who has used photoshop for 5 hours has created.
Sorry but this just doesn’t cut it.
( )Collin July 14th
I’m assuming you should be able to tell its a face in the outcome? I would not have known if I did not see the first part of the tutorial.
( )steven July 14th
could you tell me what is your brush set call?
( )Diego SA July 14th
Although everyone here don’t be satisfied with the final result (which human face is almost inconspicuous), I dare to say I liked it. I’d change somethings in the face but it’s OK.
( )Thanks for the tutorial!
Chris Robinson July 14th
IMO this isn’t even close to PSDtuts normal standards.
( )lawrence77 July 14th
I like the step 8,9,10…
Great work and welcome tutorial to psdtuts Mr. Vasjen Katro!
Do more all the best, nice tutorial…
( )Random Guess July 14th
If you show the “Face” layer and add a “Hard Light” Blend Mode to it, the face is a little less ambiguous.
( )chillyweed July 14th
wow nice tut and easy ;p
( )Melenaapatica July 14th
Wow this tutorial is pretty sweet
( )SDRAWKCABSIHTDAER July 14th
I like your concept, and I like the basic look at step 5…Ever consider just using a couple layer masks? No need to do all that selecting, copying and hiding.
( )Henrik July 14th
for some reason I can’t open the face immge=(
( )Daniel Whyte July 14th
Dear god… not the lens flare of visual appeal distruction.
nice tut, shame about the lensflare..
( )Halparth July 14th
Should have stopped at step 9. Really goes down hill after that. And the lens flare absolutely destroys it.
( )Honestly, the fireworks thing could have worked had it been better executed. Step 14 looks a lot like the apple coldplay ‘viva la vida’ commercial. That would have worked excellently had it been masked and a little more subdued.
pcs1905 July 15th
Amazing great tut!!!
( )Alen July 15th
Nice and easy. Could be better.
( )ThaClown July 15th
Cool look, but the lens flare is terrible and i’m not sue what the concept really is…
( )Should you actually notice the face??? I did not.
salmanlp July 15th
good till step 8 i’ve been looking for this tutorial
( )aflipya July 15th
If you left it at step 5 then it would have been better as there is a fair bit of detail and I like the highlight in the eyes (although it is a little overdone) BUT with a busy, colourful background the detail is missed and it looks like a jumble of characters floating in space with some odd patches of shadow. There are no obvious facial features.
A wider canvas size with a darker space background would have been more dramatic and shown the detail better. The colourful nebula type effects would be better in a different area of the composition to add interest and draw more attention to the face. Step 5 is a good start and with a lot more work it could be a nice composition.
( )Benjamin July 15th
Seriously tuts, do some proof reading. Yuk.
‘…be sure you create a new layer using Command + Shit + N, and selected it so the brush will apply on it.’
( )Sean Hodge July 15th
@ Benjamin. I made a correction there. I also fixed the link to the face image. Thx.
( )aravind July 15th
Seriously great tutorial!
( )tobiatch09 July 15th
after step 4, the letters are not becoming the same color of the face image! why is that? can someone help me out? or is this tut not working ^^
( )andrew July 15th
stop at the 5th step…looks great…from there the image turns to rubbish.
( )León July 15th
beautiful effect, I love it
( )Wouter K July 15th
Learned again something new!
Thx
( )Johnny July 15th
Like the tutorial! But I dont like the finished result. The outcome in Step 5 looks good and the face is clear. Too many things going on in the final result to see what is going on. Good stuff though but yeeah, drop the lens flare agreed.
( )TheAL July 15th
Finding it to be very difficult to replicate. The specific combination of the brushes, size and position, seems very hit-or-miss. And none of the b&w face images I wanna use are high enough quality and/or contrast. Shame…
( )breskva July 16th
Oh, it was a face…
( )Matt July 16th
I love the idea of it but like others have said found it difficult to replicate.
( )Roberto Blake July 16th
This is a seriously great tutorial on typography used in a creative way and I love it. I really feel strongly that typography gets severe under-use in the market today, even though there are so many inventive things you can do with it creatively. I think your tutorial really captures that in a great way.
I like how the steps were broken down for this particular tutorial, and I like how steps 10 and 11 showed us something familiar in the form of how you utilized those layer blend modes. Thanks for the great post!
( )Roberto Blake July 16th
If anyone is interested in talking about typography and the lack of love it gets in the design world compare to other techniques I have post about it on my blog.
Typography Your Best Friend
I really do feel that typography could stand to be utilized a lot more in design, and I know even I don’t give it the respect it really deserves some times!
( )sawang Treetippitak July 16th
I like it but if it only Look more datail like a face I would like it more. Great tut tho
( )win July 16th
very nice concept, shame about the lens flare. that is something i would expect from a blind, retarded dinosaur-riding-nazi with aids in his ass.
fyi. nicelegs
( )Rezo / July 16th
Thanks, great tut!
( )Here’s my effect – http://seviexe.deviantart.com/art/Typographic-Face-poster-129709637
Roberto Blake July 17th
Nice work, in a lot of ways I think that this happens to work a lot better, maybe you should write a tutorial on what you did for this. I think I would make a good typography effect tutorial.
( )Rezo July 17th
Thanks
goodman July 16th
gooooood!
( )Zil July 17th
Is anyone else getting the final result in step 4? all my letters are the same color?
( )Rezo July 17th
Now I can say that thanks!
I made another work based on this tutorial, and it’s the best work i have ever done. If there wasn’t this tutorial, I doubt that this work would be created, so:
BIG THANKS!
Here’s the work:
( )http://seviexe.deviantart.com/art/Typography-is-129863584
WAL July 18th
Feel good ~ I like the idea of good design,
( )matt July 19th
good job, thank you
( )Cris July 19th
Congratulations on the tut, the steps where so easy to follow and the result is just awsome! Thanks man
( )kokoboy July 20th
simply gooooooood
( )dequote July 20th
I think you ruin it with to much lighting effects. I think it looks great in step 7 but i don’t like the final product.
( )ktyellow July 20th
I like!!!
( )John July 20th
It was easier than it looks!!!
( )could use on a verity of subjects
Made it with my own photos
grimdeath July 21st
great technique and great tutorial….until the lens flare! please edit and remove that last step and it would be perfect!
the users works posted above using the technique rock though, good job guys
( )Maloix July 21st
I like it great tuto, go ahead. Greetings! I’ve mentioned in my blog!
( )Andre00x July 21st
I’m at the point of wanting an awesome typography poster like this…Is there a way so that my letters don’t look like it’s displacing the picture…? When I copy and paste the “cameleon” doesn’t seem to match my face picture.
I’m using my own image, and I made my own “text brush”. I should still be able to achieve the effect though… :S
( )Katro October 29th
After you Created the new layer and you apply the brushes! You have to select the pixels that are in the new layer, in this case the Letters!
( )The idea is that now you have selected that pixels that have the shape of the letters, so the only thing you need to do is to copy that selected area from the Face Image so you have to select the other Layer where the Face is, the try to make Copy and Paste!
Cheers
Joe Warren July 22nd
I thought it was a bitchin tutorial. Taught me a few things that I didn’t realize before. Here is my final duplication of the photo. http://i30.tinypic.com/2usaq0w.png
( )Katro October 29th
No man its not Bitchin!
( )Shubhojit July 22nd
Very good tutorial. I loved the composition
( )shang July 22nd
just because every1 read where the guy from abduzeedo said lens flare can turn your masterpiece into an average piece or w/e now everywhere you go wannabe graphic designers are ragging on lens flare… lens flare looks good when you use it right because its a friggin natural occurrence. think for yourself people, look at it, it makes aesthetic sense and is nice. you couldnt do it, or you wouldnt be looking around at tutorials. take your hate to youtube where it belongs!
( )Robin Crandall July 27th
This has turned into the Lens Flare rant. However, it started for me in 1999 while at college. My Digital Media instructor demonized the poor lens flare and practically forbade any student to employ it in their works. Apparently, it has been over used for quite some time. Oh, by the way, thanks for the tut. All tuts are useful in one way or another and that applies to yours as well Vasjen. There’s Hate on YouTube?
( )kato July 28th
really cool！
( )gül akıllı August 1st
good work!!
( )MAYUR August 3rd
MAST SITE
THIS SITE IS VERY – VERY HELPFUL
THANKS
( )ims August 3rd
The idea & technique of the letters with the face is really awesome
& i think the other effects is disturbing the view !
good work
( )Mike Gao August 6th
YOU good!
( )I like!
mario August 7th
awesome… but lens flare is too much…
( )keep on
darcy August 11th
you are really artist
( )harish choudhary August 12th
wow. good idea!
( )Shlomit August 18th
absolutely brilliant!
( )I love everything
and you wrote this tutorial very good to follow you and understand it
Thank you very much!
Katro October 29th
Thank you too!
( )saud August 20th
the thought is really gr8 i love the typographic effects but you didnt tell us the name of the brush set
( )M NARESHKUMAR August 21st
Very Nice & thanks for ur informatopm
( )Joe August 29th
The results aren’t very good, neither is the tutorial … Good effort though
( )Luc September 1st
Great !! lots different tricks and techniques, very useful !!
( )Thank, great tutorial !
Cheers..
firoo September 3rd
its tooooooooooo bad sorry tooooooooooooo gud i like that
( )Gabo September 9th
AMAZING TUT!!!!
( )Carlo September 21st
great work, applying it right now…
( )kidloco September 21st
There’s no way in step four you get that shaded picture with letters with only copy paste of the “letters” layer!???! something is missing….
( )Katro October 29th
OK! after you Created the new layer and you apply the brushes! You have to select the pixels that are in the new layer, in this case the Letters!
( )The idea is that now you have selected that pixels that have the shape of the letters, so the only thing you need to do is to copy that selected area from the Face Image so you have to select the other Layer where the Face is, the try to make Copy and Paste!
Cheers
mars September 21st
9$ for an A+ on a project anyday
( )Dee September 22nd
is there some1 responding to the questions about step 1-4? im not getting
( )the letters in the face figure 2 and this really is the first time i have this prob in photoshop. any tips?
ProjectCenter September 26th
Nice work. Interesting idea that I think could more effectively elsewhere.
( )mango October 3rd
Thanks Vasjen Katro. It is a great tutorial
( )Katro October 29th
im glad you like it!
( )Kenneth October 5th
For those having trouble with step 4, I was too but once you have the pixels selected. Then you have to click on the face layer and then you hit copy then paste it. If you just hit copy right after you select the pixels without clicking on the face layer you will just copy and paste the exact same thing.
( )Habib Q October 9th
Hey, I seem to be having trouble with step 4, I tried what you said Kenneth, and i still seem to be having some trouble, as in copy pixels?
Thanks
( )JUN WEI LI October 17th
very beautiful I‘AM Chinese don’t know clear
( )but very beautiful
It is a great tutorial
LazyJoey November 5th
I can’t find the Fireworks image… can anyone send it to me please?
my mail is lazyjoey.dev [at] gmail.com
thanks all.
( )jen November 7th
Do you have to download the words too?
( )Way cool tut November 7th
The link to the fireworks image is broken. I used another that looks different so my outcome looks way different. For those who said to stop at step 5, don’t, the effect at that stage is awesome, but so is the one in the final step. You can make two images that are cool in their own way. And for the lens flare haters, you all just saw someone else’s comment about lens flares and thought you would all be cool and professional by saying flares are for amateurs, there’s nothing wrong with a lens flare, especially in this tut. It looks great. THE LENS FLARE LOOKS GREAT!! The face effect is good because it’s not noticed right away and when pointed out, really makes the viewer take a good look at the picture and say, oh yeah, it is a face, that’s soo cool…
( )alisha November 7th
love it i tried it how did i do ?? lol i used butterfly brushes but im not sure about them lol
http://i38.tinypic.com/b9j0ut.jpg
comment back on my site
alisha
( )Nice November 7th
Very high quality tut, very easy to follow, interesting techniques, I’m definitely reusing these, often.
( )LazyJoey November 8th
No one can help me? please.
( )Vasjen Katro November 14th
The artist who had the Fireworks Image Stock Has deleted his image from his set..
Im so sorry for this but i can provide you with smth similiar that you can apply the same technique.
http://resurgere.deviantart.com/art/Package-Cosmos-7-115852336
Please also remember to credit the Artist.
( )