Displace filter with vector effectsListThumbs
Displace filter with vector effects
After one month traveling I’m back and trying to get back to my routine. First of all, I’d like to thank all comments and emails about the blog and the tutorials.
Now talking about Photoshop, I started using the new CS3 programs on my mac and I have to say, they are really faster, and I can finally use the Illustrator more often.
On this article I created a design inspired by the work of Nik Ainley. He’s one of my favorite Photoshop Masters and his work is really impressive. For this design I used the Displace filter in Photoshop, I think it’s one of the most obscure filters because most the majority of users don’t know how to use it, and that includes me, lol. The vectors were created in Illustrator with, again the blend tool.
1 - Create a new document and in the layer style create a gradient.
2 - Select a person to use: I used a nice photo taken by John Arlington for the Udox website. The new select features in Photoshop are amazingly cool, it’s pretty easy to cut a person off the picture with the Quick Selection Tool and the Refine Edge options.
3 - Add a Diffuse Glow: Go to Filters>Distort>Diffuse Glow
4 - Exploding the guy: Use the displace filter to explode the guy. I used a crazy image as a displacement map, though you can use any image.
5 - Refining everything: Apply a mask in the layer of the displace and in the guy’s. Start erasing the displace layer, after that use the Smudge tool to blend them together.
6 - Giving a blur: Duplicate the guy’s layer, apply the filter Pixelate>Mezzoting and choose the type as Medium Lines. After that apply a motion blur.
7- Creating the vector lines: That is pretty simple in Illustrator, just create some lines with the pen tool and use the blend tool. Repeat it as many times you think it’s ok.
8 - Using the vectors: In Photoshop again, paste the vectors there as Smart Objects, and apply a Layer Style. In that case I added a glow and a color overlay. Try different colors and glows to the different vectors.
9 - The final result: I played with the graphics a bit more like adding new elements and filters such as the noise filter in the background.
I have to say that I’ve learned a lot creating this image. It took me some time to create everything, the displace filter and the vector lines that we see a lot out there. I want to say thanks to a visitor of my blog who sent me an email asking how to do an image similar to this one. That was my motivation to create this article.
Download the Photoshop File
You can download all the files used here.
About the author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.
56 Comments
Hey, can you please send me the disort files?
Riick88@Gmail.com
Thankyou!
Wow its so awesome
this is cool...
could you give me the displacement file?
just sent to my email
uciha_kid@yahoo.com or
yogi.syahreza@gmail.com
Thanks you very much, I learn a lot of details!!
U R so nice for shearing
take care!!
helo...
I'm from indonesia
i like it your tutorial's
it's very good
I like the tut, but it seems my displace filter doesnt work, i use default settings ( stretch to fit, repeat adges, 10 - 10), i tried serveral things like using other settings (100 - 100), or tried using 'wrap around' or 'Tile', iv also tried to use different images wich didnt work :(
If anyone can help me, Please!
l3ami
hehehe, look what i found
Flickr Photostream
It' really amazing, but when I dwonload the file and unpack the file, I have a file withe the filetype: "file" thats sounds crazy and I wondering what it is beacause I have this problem with nearly all files here.
Muy buen tutorial, como todos los demás.
Y excelentes tus trabajos.
Te sigo hace tiempo y siempre me doy una vueltita por la página, para aprender cosas nuevas y para buscar inspiración.
Gracias x compartir.
Saludos desde Argentina.
Great tutorial! Simple filters..HUGE effects!!!!
Looks very ntresting. I've lloked for a way to achieve this effect a long time now - let's give it a try
Awesome! I love it! I tried two times today and I think I will use this tutorial a lot! Thank you very much!
One of my results: http://img384.imageshack.us/img384/210/thomas2ap3.png
1)This available for xp?
2)Can I ask you something? what is .DS_Store? I downloaded some photoshop tutorial source and this is what i've got!
wow, it's awesome nd simple to practice....thanks zee
Very good tutorial! Great way of explaining things! 1 problem though, that displacement picture isn't here for download.. mind uploading it again?
Thanks!
Hey Abduzeedo, can you re-upload the 5D6CI6KD.zip file? Its down again, thanks, much appreciated it.
Thanks for the wonderful tutorial.
Amazing!!! Thanks!!! This was soo good, especially the illustrator part. Ive learned so much. You rock!!
That's all cool, I love this one (as I love most of things on this site). I've got problem with downloading 5D6CI6KD.Zip file, though. It says there's no such a file and I gat this 'Houston, we've got a problem' message. Too bad, because I couln't find image like this for a displacement map and this one would be really useful for me.
abduzeedo ... i don't know what can i say ....
i like it your tutorial's... other thing.. could re-upload the 5D6CI6KD.zip if you can plz plz plz :P
Sos muy groso !!
ayer descubri esta pagina ...
aunq lo mio es amateurismo puro y no se si se puede llegar a decir caradurismo a full jeje
esta bueno para tener algunas ideas ...
Un abrazo che !
adioz!
FELICITACIONES POR LA PAGINA (H5)
I am a student studying in design field and i think this tutorial will help me a lot in my assignment.. what i don't understand is i have created the vector lines in illustrator. when i transfer it to photoshop, there is white background on the lines as if i have filled the lines with white colour.. im new in illustrator..can u teach me how to create the lines? thanx!
Great! can u send me all the tutorials u have?,, Thank u! more Power!
really great tut
Totally wicked vector man.
vinyl siding
WOW thanx !
I think this style is great. But then, different people have different preferences.
Thanks, youve revealed 2 things i wanted to know.
Yeah, it is ugly and not thought out. There is no real style here..
It's pretty ugly.
You da man. just thought you should know
This tutorial is VERY helpful, I've seen many people use this technique before but I never really understood how to achieve it.
deadly effect man!!.. ve been browzin thru ur site and learning a few good tricks myself..
right now m workin on a website.. creating the name by applyig vector effects.. will send ya the link once it goes online. thanks again!
I like to know how to make a clean screenshuts of my work, any ideas? I have been trying to get my screenshuts as crisp as possible but unfortunatly i never seem to get it right. I look at other designers portfolios, and wander how do they get their images to look so crisp looking! Any help from you nice ppl would be appreciated.
For the novice fella: At the bottom of the layers window u can add a mask to the selected layer. This makes the layer invisible. You can see the mask to the right of the chosen layer after u've added it. Black means its not visible. By deleting the black you reveal the layer underneath... Makes sense?
Great tutorial!!!
Sorry for the stupid question but I am trying to draw a line in PS CS3 with the pen tool and it always wants to fill it in like a shape. How do I just draw the line like you have there?
I dont know what settings on my pen tool to use. Please advise.
I dont have Illustrator.
Buddy
Look at my displaced design!!
http://img262.imageshack.us/img262/8163/manikisubirfq9.png
Thanks!!!
I will try to make screencasts of these tutorials. I'm learning how to do that, but soon I will be publishing them.... Anyways, thanks for all comments.
you are the man, this is great, I'll try it on one of my photos, thank you!
I agree with gaby, i like your tutorials a lot but you could be more explicit with the explination.(Im from mexico too).
cool, i like it a lot.. but i will apreciated if you could be a little bit more explicity in the kind you do your explanation... just to have a better work... any way i understand, but just for do it with better details...
thnks a lot :)
greetings from mexico
You glorious bastard. I've seen a few of these kind of images around and I've screamed at my monitor, "How the hell do you do that?"
Now I know even I can make these.
Absolutely wonderful tut!
Nice......................
this is about the only tute on the net showing this effect.
and thank god. someone finally showed how to do it.
thanx
Thanks for the comments. The files can be downloaded again, I don't know what happened... and 5D6CI6KD.zip is the Displace Map...
Hi...great tutorial...but I don´t find the archives to download like in the others...Do you forget it?
Continue with this brilliant work mate!
hey i liked very much this tutourial .i wondering if you could send me the render for the exploding part please ;)
Thanks for the comments. That masking part is just create a mask on your layer and start deleting or painting the mask. I will try to add screencasts for the next tutorials... Now, about a name, I don't know if there's a specific name for that.
does anyone knows the name of this kind of design?? i'm looking for tutorial about this kind of design, but i'm not having any luck..
This tutorial sucks, no explination on anything. Hard to follow and stupid effects.
Hey, I really Like the tutorial, but I am also a Novice. This is probably why I got confused, and any help would be appreciated. The part of your tutorial where you described the masking of the displace and object layers... is there any way you could explain that a little more in detail to me? Like what kind of mask, and your methods for erasing? Sorry if this is a nuisance. Thanks!
that is hot... can u help me out
niCe and cOOL...good jOb!
Hello you a poofter. Looks yuppie!
Great tutorial. Congrats from São Paulo :)
Post new comment