Learn how to create impressive mock-up designs. In this tutorial, you will learn how to use the Vanishing Point Filter to get quick and professional presentation results. The final result is a realistic looking box that looks well-worn, as if it were shipped worldwide. Use these techniques to create other mock-ups in your design work as well.
Final Image Preview
Before we get started, let's take a look at the image we'll be creating. click the screenshot below to view the full-size image. As always, the full layered Photoshop file is available via our PSDTUTS Plus membership.
Step 1
We'll start with the grunge image. You can use a Web banner, a disk label, or anything you want. This tutorial is about creating a mock-up intended to improve the final presentation of your work. Feel free to use any image you prefer.
First create a new blank document 1000px by 330px, RGB, 72 ppi, and paste this image as a background. Then save the document with the name of "My texture." Keep this file handy, as we'll need it later in the tutorial.
Step 2
Adjust the image Levels using these values.
Step 3
Now add some images to create a grunge collage. Paste this image of a guitar player into a new layer above the background. Then go to Edit > Transform > Flip Horizontal. Set the Blending mode to Darken. Resize it and place it near the building. Finally use the Magic Wand Tool to select all the white areas of the guitar player and delete them.
Step 4
Find more images and paste them anywhere you like. You can use this image. Select the Magic wand Tool. Then delete all the background and paste it at the center of the collage.
Step 5
Use a grunge font to add some text. I used a font called Acid Label, downloaded from here. Then set the type color to (#130900) and try to get something like the image below. Save your document and flatten the image.
Step 6
Create a new document that is 1024px by 768px, RGB, 72ppi. Create a gradient background that goes from (#000000) to (#302013) using the values in the image below.
Step 7
Hide the gradient layer. Then create two more layers above it and name both "Dark Gradient 1" and "Dark Gradient 2" respectively. Then press D to load the default palette. Fill both layers using the Gradient Tool (black to transparent). Use the values in the image below.
Step 8
Now paste this image in the center of the document. I chose it because it's a nice handcrafted box that looks like a shipping crate, which is perfect to mock-up a grunge design. Fix the imperfections of the image using the Clone Tool and Healing Brush Tool. Alt-click to select the clone source.
Tip: Photoshop CS3 Extended has a useful Tool. click on Window > Clone Source. Select "Show Overlay." You will see a transparency of the image you are cloning. This will help you with precise healing.
Step 9
Select all the white background with the Lasso Tool and then delete it. Add a Drop Shadow and an Inner Shadow, using the values in the image below. Use the Dodge Tool and Burn Tools to brush with these settings: 50px, Hardness: 0%, Range: Midtones, and Exposure: 25%. This will lighten and darken some areas of the box.
Step 10
Now we will add a wrinkled paper texture to our design. I used this image. Paste it into a new layer below the "Box" layer and name it "Paper." Put it in the upper margin, a bit up the middle of the document. Then adjust the Hue/Saturation using the values in the image below. Set Blending Mode to Color Dodge. Finally, go to Layer > Layer mask > Hide all, and draw a black-white Radial gradient.
Step 11
Hide both the "Box" and "Paper" layers. Create two new layers below the "Paper" layer and name them "Light" and "Shadow" respectively.
Use the Elliptical Marquee Tool to create an oval in each layer. Then Select>Modify>Feather and set the Feather radius to 25px. Fill one with a light color like (#C6A478) and the other with a dark color like black. Show the hidden layers and Free Transform the ovals to get a better result. Finally, with the "Light" layer set the Layer Opacity to 35% and "Shadow" Layer Opacity to 95%.
Step 12
Open the "My texture" file (the grunge collage we created earlier). Then copy the flattened image. Create a new layer above the "Box" layer. Name it "Texture" and select it.
Here comes the best. We will use the new feature of Vanishing Point Filter to create several perspective planes into a single filter. Click on Filters > Vanishing Point. Then start creating a single plane using the Create Plane Tool, Ctrl+Drag (WIN) or Command+Drag (MAC) a side point of the plane (not a corner point) to create a perpendicular plane. Then Alt+Drag to edit the angle of the new plane, trying to follow every surface of the box.
Tips: If you want to delete a plane, just select any side point and press Delete. If you cover the front and left side it's OK. It's optional to cover the top side.
Step 13
Paste the flattened image in the Vanishing Point window. Then drag it over the surfaces and place it wherever looks good. You can resize and rotate the image if you need to. If there are some overlapping planes, Ctrl-click or Command-click a plane to change the overlapping order. Then click OK when you're finished.
Step 14
Ctrl (Command) + click the Box layer to get the exact box shape. Then Ctrl (Command) + Shift + I to invert the selection. Then select the "Texture" layer and press Delete. Finally, change the "Texture" layer's blending mode to Multiply.
Conclusion
Optionally, you could paste more objects like text, images, or anything in the box top. Play with blending modes and effects. You can use this technique to create mock-ups of anything you want: CD labels, product boxes, DVD covers, and more. Try it!
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )Dan May 28th
So… a crate… with images on it. I’m sorry… How did this get approved?
Ben Griffiths May 28th
Wow, this looks awesome, thanks! Right, I’m off to grungify something
Alex Beltechi May 28th
That sure is thinking outside the box…
Edward May 28th
I agree with Dan, I thought it would actually show how to photoshop the box, rather than basic vanishing points. Hope to see some more quality tutorials in the future!
-Edward
Chris Henn May 28th
Nice tutorial, I dont see why you guys are complaining. You may already know about vanishing points, but this teaches the rest of us in a very nice way.
Ben Griffiths May 28th
Chris is right - not everyone knows about vanishing points. Infact, I’d hazard a guess that most average users don’t know how to use them properly.
Blake Lyons May 28th
I’m a pretty active viewer of this site. As well as a PSD TUTS Plus Member. This tutorial may not be one of the most advanced tutorials most users would come to expect. However, it’s nice that they incorporate something like this with a fresh new way of explaining vanishing points. I think it’s pretty bold to state that “everybody knows vanishing points” because while most users might, the rest of the population may not and it is a useful thing to know. This site rocks…
Peace-
Blake
Blake Lyons May 28th
*bold statement…
Jraider May 28th
I hope nobody else talks any bs because this is the best tutorial site for photoshop on the web and if you want to complain about learning how to do something as cool as that its weird.
Saying “quality not quantity” also doesn’t make sense either because this IS quality
~Jraider5~
koma May 28th
Great
Danny May 28th
Thats pretty cool, I didn’t know about this vanishing point thing
Sebah May 28th
Good tutorial. Maybe it doesn’t show usa any new technique about vanishing point, but it’s still a good tutorial for inspiration.
For everybody who says that this is “bad quality”, try to find another website wich offers very good tutorials free and maybe you’ll understand that this tutorials is for show techniques and not to teach us to make greater effects.
Aaron May 28th
this is definitely a more interesting way of learning vanishing points. awesome tut!
seth May 28th
awesome
Shawn May 28th
Never knew how to use vanishing point filters at all until this came up. Awesome
VertigoSFX May 28th
Although it’s some easy steps it is a creative way of using those simple steps. It’s a cool looking effect that some people may not thing of. I like it
Lamin Barrow May 28th
Sure that’s pretty impressive. Thx for the design.
DM2 Interactive May 28th
I’m sick and tired of people like Dan. What do you expect? Tutorials are about techniques and inspiration, not copy-cating! This is a damn good tutorial what can be accomplished with photo manipulation. [b]Inspiration, not replication![/b]
tr3Ks May 28th
Yay for Vanishing point, I’d love to see more done with that tool!
Robin May 28th
I’ve never had a reason to use the vanishing points filter up until now as I have a potential project that involves box design coming up. Great example of using that tool, especially with the extraction part where the boards stick out. I’ll be bookmarking this tutorial.
Good job Alvaro!!!
goldenthunder May 28th
Disagree with the lameness lol I think this is very simple but cool and helpful! Thank you! Great overall effect!
Tyler Bramer May 28th
Very quick and easy way to take a 2D design image and apply it to a 3D object. Try to think of the steps you would have to take to create the same look without using planes. The tutorial was well covered, it teaches a highly unknown technique (vanishing filters), and the final result looks great.
Greg May 28th
While I was hoping for a creation of the box, I was still quite pleased with this tutorial. This is one feature of photoshop I’ve tried and failed at using. Hopefully I’ll have more success now. Thanks psdtuts!
Andrew May 28th
Not sure what all the complaining is about, I’m liking this tutorial. Thanks!
Joefrey Mahusay May 28th
Great using of vanishing point. Thanks Alvaro!
Louie May 28th
Oh not bad.
Flaunt May 28th
Dan and Edward are Trolls, you know… the type of person who will go to the forums on the NAACP website and drop a comment containing the “N” word just to stir up some controversy. Good TUT Mate!
Ariful Alam Khan May 28th
Nice tutorial. Some may know about it. But nevertheless the Idea is great and creative. This site really rocks…
Adam Jackett May 28th
For those complaining about the tutorials here, you’re clearly missing the point. You’re not supposed to view these tutorials as what the finished product is, but rather the various steps to produce it. The key is to learn new techniques and methods that you may not have found on your own. That’s the purpose of a tutorial. Yes, the end result in this case was just a box, but the steps involved in getting there is what you should be paying attention to. Of course, not every tutorial will be as informative to everyone equally, as we’re all at different stages, but please keep in mind there are plenty of people still starting out and can really benefit from these tutorials, even the more “basic” ones.
Now saying that, if you’re reading these tutorials day after day and not getting anything out of them because you already know everything, then I encourage you to write some of your own. You’re obviously at that level where you can offer some wisdom to the rest of us, plus make a little money.
kyle May 28th
It was a decent tutorial but all I can say is that theres a lot of suck ups that comment on here.
@Flaunt I guess nobody has a right to an opinion unless its positive huh?
Kamel May 28th
very nice bro
Toxel.com May 28th
Grunge is always nice!
Erika May 28th
Very well said, Adam!
Ignacio May 28th
Nono, this tutorial is perfect. There aren’t secrets, but it is inspiring.
RUGRLN May 28th
I was bit disappointed that we didn’t get to actually make the box, as I expected but what is shown is still good. I guess we’re all disappointed about the fact that we can’t make the box which blinds us from seeing the other great aspects of this tutorial..
@ Ben Griffiths…
You’ve made a good hazard guess, I’m not a very regular user of Photoshop but I do use it from time to time, and yes I didn’t know how to use the VPointFilter..
D. Carreira May 28th
What a COOL EFFECT!
Amazing tutorial!
David Carreira
Adel May 28th
this is soooooooooooooo coooooool
I loooooooove thesr grungy styles
love u PSD tuts
if u just can low the prce of the PSD Plus
thanx 4 every thing
Ndrey May 28th
very impressive!
Tom May 28th
Thanks!
And to some of the commenters above, not everyone knows how to use vanishing points. I myself didn’t even know what they where. This site isn’t just for showing you how make complicated designs, it’s also for teaching you new things (like this is new for me) and where you can use certain techniques.
Carlos May 28th
Top qualitay tutorial. Will be trying this one out very soon!
Heinrich May 28th
Before anyone criticizes this tutorial I think you should take a good look at the people that visit this site. Anyone who says they know everything about Photoshop is clearly talking bull. What makes PS so nice is that you can learn and discover a lot of new methods on the way you work.
I find this tutorial necessary and I’ve learned something from this… I’m sure theres other people out there that has also benefited from this. I think its great. It doesn’t have to look like a masterpiece, as long as you learn something, its all good!
Keep it up!
Arnaud Alves May 28th
Really beautiful effect !
styxz May 28th
Very cool effect. Its not always about how to make up the image, its also about getting known of the techniques used in the tutorials.
Thanks for this tut i can use it in some projects perhaps :D!
Adam H May 28th
I am a beginner with Photoshop and Im still struggling with the vanishing points. Is there elsewhere for another vanishing point tut so I can grasp this a bit better?
thanks!
glsmaster May 28th
Cool technique
somebody May 28th
Man… fantastic… absolutly awesome!
Constantin Potorac May 28th
A very interesting tutorial. Congratulations
Constantin Potorac May 28th
Also I agree with Adam Jackett. As I mentioned before… the most important thing is to learn new techniques and make an idea of how other people work.
Also if you download the PSD’s you will also see how they work with the layers and how organized we are.
Andrew Pryde May 28th
The people that are defending the author are correct, I have been designing websites using photoshop for years and professionally for the last couple of months and I had until now never mastered vanising points.
Thanks
Andrew
Daniel May 28th
Great tut…
Daniel
misterbremer May 28th
Nice. I didn’t know how to do this.
Rooney May 29th
fantastic !! stop complaining please. This is amazing !
Andrew D May 29th
Great tutorial!
Brent Nelson May 29th
Good tutorial. For those of you who were wanting someone to show you how to make the box: You can use the same technique to create a box using plywood or 2by4 textures. It’s not difficult. Try it, record your steps, then post it on PSD Tuts and make 150 bucks!
wayno007 May 29th
Awesome tutorial! How about one on making a box?
Christian Mejia May 29th
@Flaunt… Ouch! That really hurt but that was funny! I have to agree with you though. On many occasions I have come across Tuts that I thought were just OK and sometimes cheesy but I never took the time to bash it. If you don’t like it then just move on and wait for something better. I personally haven’t used vanishing points for a while and found this tutorial refreshing. It inspired me to try something that I have been thinking about working on. Peace!!!
PannonDesigner May 29th
Supercool!
Sean Hodge May 29th
Hi all. We are going to be tagging tuts with a difficulty level. This will put more context on the tut. If a tut is marked Beginner, Intermediate, or Advanced (I’m not sure if these will be the exact tag names) then it will indicate its intended audience better. This will clear up the issues some people have had with this tut.
My opinion is that this is a great tut targeted at an Intermediate Photosohop user. Vanishing points are not a Beginner subject. Advanced users should already know how to use this though, and are likely not the target for this tut. Though even an Advanced user that hasn’t been using this feature lately might appreciate being reminded of it.
I really like this tutorial, but it’s targeted at me, as I’m an Intermediate level Photoshop user. We plan on having a range of tutorials for all levels of Photoshop users on the site. Collis mentions this in the latest news item, link here. After the tagging system is launched we’ll ask for feedback. We should have it working soon.
Thanks.
LOSWL May 29th
Excellent Tut!! :oO, I have seen a couple vanishing point tutorials, but most speak in terms that just go straight over the readers head!! huh!!….but reading through this I totally get it now!! :o) thanks for sharing!!
wildwise May 29th
I knew how to do it, but definitely usefull for people who didn’t
Craig Snedeker May 29th
Looks really cool!
Swattkidd May 29th
To those who are complaining, maybe they should not do any more tutorials since im sure there is someone out there who already knows how to do it. Or maybe since some how many of you think the site revolves around you they should ask every single one of you if the technique in the tutorial is new to you and if its not then they wont put it up.
Mukund May 29th
Hey that’s cool Alvaro!!
Especially the end effect looks really good! I’m sure, except for this tutorial, most people won’t be able to tell that the sides have been superficially put there in Photoshop!!
Only the ‘light’ towards the top doesn’t look right, may be the textured background should have continued further in that direction!!
And yeah, I didn’t know vanishing points!! So, full points from my side!!:D
joe May 29th
VERY bad VERY poor and VERY ugly stupid use of paper texture!!!!
thats all i can say.
Snorri3D May 29th
realy nice tut
i did not know about this technique so i find this tut realy helpful thanks
ZaFaR May 29th
I knew how to do it, but definitely usefull for people who didn’t know.Thanks for sharing.
Saad May 29th
WoW Wow and SUCh a good tutorial and have ever used this effect but now actually this is
Very Essential Work as he said Dvd Covers and Bla bla …..that Cool Keep going
kyle May 29th
stop complaining about FREE tutorials. just the fact alone that we have something new to read a couple times a week is awesome, let alone the fact that its teaching most of the people something they didnt know. thank you for putting the time and the effort in to communicating something you have knowledge. i apologize on behalf of the few that think they deserve something more from a free tutorial site.
tom May 30th
great tutorial for those of us who can’t use the distort tool and manually do this is less time.
emily May 30th
Great tutorial! Thanks for sharin’!
A May 30th
it’s a tutorial. not everyone knows about vanishing point, some rarely get an opportunity to use it. this is a decent way of showing new comers to photoshop a new tool and some of us photoshop regulars how to apply tools we never use. criticize all you want, but nobody said you had to use the crate or the paper background. it’s a tutorial, man make it your own! after all, we are here to learn technique NOT (hopefully) copy someone else’s design word for word, asset for asset and take credit just because you technically did it yourself. if you don’t like the finished product, don’t use the effect or make it yours. i can’t wait to see Dan’s tutorial on this site since he seems to be so good!
J.T. Shaver May 30th
Hmmm…what’s the practical use of this. The final image is pretty neat but, I still ask.
- http://www.shaverdesign.com
Terry May 31st
anyone who’s done a fair amount of ad building knows about this technique.
have any of you ever re skinned a sofa or table set to show off future designs? maybe it’s the same physical object amd you want to show a customer how you customoive the design/upholstery.
you think those 360/ps3 skins fall out of thin air?
maybe i just think outside the box. maybe some of you believe a MOCK UP (its in the heading) is useles, and that your final product will be used the first time, thus not invalidating hours of work.
can the flammage trolls. if you dont like it, point out what was bad, not use some “gut feeling”.
;(
i really hate the flammage on both sides lately, and here i am doing it.
maybe comments should be disabled and diggs be the only way to evaluate.
b May 31st
I thought we were going to learn how to build the box from scratch too. That would have been great. Photoshop tells you how to use vanishing points, it doesn’t tell you how to build a box.
apsuva June 1st
dont’ use lasso tool. menu- window - paths. select path and ctrl + mouse click
Qbrushes June 1st
awesome outcome!
Ray T. June 3rd
Well…. i dont know why but its good point show this.
Most photoshop users even dont know about the potencial of vanishing point ….
This tutorial is good..
MD June 4th
Yeah… really great tutorial! Thnx!
Graham June 4th
Lovely tutorial
Hey guys will you be able to give me more sites on tutorials plz.
Ichigo June 5th
wow, that’s awesome! I thought it would show us how to make the box, but no. it’s awesome anyway! I have to learn everything about photoshop and all these techniques for the future, cuz I don’t know any of this. thumbs up to whoever submitted this!
mellink June 7th
Meh!
stop complain its a good tutorial!
I didnt know about eh v.points.
So thanks again!
g June 13th
i was hoping it would be how to build the box. not bad tut though
lightupbox July 6th
Cool tutorial; thanks! This is a great way to learn Photoshop. The Vanishing Point step wasn’t crystal clear, though; I wasn’t able to get the pasted image to “wrap” from one pane into the next…? I ended up copying and pasting two sections of the collage separately for the two sides. Would love to know how to wrap one image continuously around corners, etc…
shaheen August 11th
great tut, im trying it now
Man Mohan Singh September 24th
Really Creative, Awesome, Great Job…………
…………….keep it up
andi October 10th
How to make a pic of a crate, step 1: get a photo of a crate…
Mr Kuzio October 13th
Wow! Impressive! O.o
Add Your Comment
( GET A GRAVATAR )Your Name December 1st
Trackbacks