On February 26th, David of DavidAirey.com posted about his logo design project for a client and he also showed a mockup of the business card with a die cut. Due to the fact that this card wasn’t in print yet, David wanted to show the client what the die cut effect would look like.
So, as good designers do, he created a nice visual of what the card would look like if the client decided to reach a little deeper into her pocket ($$$) for a die cut business card.
A few people commented on his post asking how he created the “fake business card” that looked so real with the die cut and everything. Jacob Cass was one of them
So, here’s a quick, and very rough tutorial on how to do this for yourself. Please remember this is my first video tutorial production, and it goes pretty quickly at the start! I didn’t get too detailed in the Photoshop tools, how they are used etc, so beginners may get a little lost!
CLICK HERE TO VIEW THE VIDEO IF IT IS NOT DISPLAYING ABOVE
If you do this, I would spend a little more time on it making it look better than what I did, but you get the idea hopefully!
Looking at David’s a little closer, it looks as though he may have created a “shadow” layer that allowed him to give only the corners a darker shadow so it gives the effect of being raised from the surface at the corners. This also adds to the “real” feel of a mockup like this.
If you have any questions on how this is done, please feel free to ask away in the comments below!
Future video tutorials will be posted right here so please subscribe to my blog and stay in touch! Thanks!
Digg this story to share with others!
Forgot to say…..I am not saying that this is how David created the mock up at all, I am only saying this is how you CAN do it!
Looking closely at his mockup, it seems as though he may have actually printed out the business cards on actual business card paper, and took a photo of them on the wood textured table. Then he manipulated the photo by adding the wood texture to the crane icons….et voila! (That’s another way you can do it) My way , you don’t need to print the card out.
So, hopefully someone will find this helpful, and I promise that in the future, the videos won’t go thru everything so quickly, and they will have a more detailed explanation of what is going on!
Thanks
Hi Brian,
Something’s happened to your blog formatting, and the info is all skew-whiff. The video isn’t appearing for me, but you’re absolutely spot on with your comment about how I might’ve created the effect. I used a photo, then overlayed the design in Photoshop.
David Airey’s last blog post..Spec work in the internet age
It’s fixed now, I think it the object tag got shifted around and firefox got angry at me. IE allowed it though….strange!
You’re welcome, Brian.
What software did you use to create the video? My reason for taking an initial photograph was so the perspective was exactly as it would, rather than guessing the closest fit. You did a good job though.
David Airey’s last blog post..A few logo designs not yet featured
Thanks for the info, it’s very interesting.
For anybody interested in doing screencasts with a Mac, the best program around by far is Screen Flow. I’ve tried almost everything PC & Mac and Screen Flow is amazing.
Shaun Barnes’s last blog post..Effective web content: Entice and engage your users
Hi there, that’s a great video tutorial. I’ve stumbled upon your blog a few times in the last few weeks. I was wondering what software you used to create the video (on Mac also?), as I’m wanting to do a video of my own shortly.
Thanks…
Andrew Kelsall’s last blog post..How to get album artwork for your MP3’s in iTunes
Hi, Brian - That’s my business card that David designed and I did go with the die-cut. It’s beautiful and people remark on it every time I hand one over.
It was fun to watch your video, as a Photoshop neophyte, and I learned a couple of new things.
Cheers,
Tammy
Tammy Lenski’s last blog post..Healthy relationships, moment by moment
@Andrew Kelsall: See my above comment regarding screen recording software for the Mac. It’s called Screen Flow and it’s excellent. It’s really simple to use, has some stunning features and you can record yourself with your iSight camera and overlay yourself explaining whatever you are recording. It makes it a lot more personal having yourself in the corner.
Check out the demo video at http://www.varasoftware.com/products/screenflow/
Shaun Barnes’s last blog post..Effective web content: Entice and engage your users
Thanks for visiting and thanks for the info on Screen Flow. I will definately check it out. This was my first experience with any screen capturing software, so I am definately open to playing with a few others.
Hi Andrew,
Thanks for stopping by. I’ll probably go play with Screen Flow soon so I will post about my experience with it if you’re interested.
If you have never used software like this, Camtasia Studio 5 worked out really great. It was suprisingly simple to use, and I was even more surprised when I saw the zoom panning effects it added to my video by itself! I thought that was cool.
Hi Tammy,
It is a great thing to have a business card that you are proud of! It just gives you that extra pride in your business that makes you want to hand it out to as many people as possibe!
Thanks for visiting
Thanks for the info, I’ll stay tuned
Hmmm… the video isn’t working for me at all. Good idea though, I’d really like to see it. I’ve often been impressed with David’s mockups.
Randa Clay’s last blog post..Free Twitter Graphics
That’s weird…what browser/os are you using? Do you have flash enabled? It’s working on Safari, Firefox and IE 6 and 7 for me.
Can you see it at this link?
http://www.brianyerkes.com/tutorials/Die-Cut-Business-Card-Mockup.htm
I’m on a PC - I don’t know if that makes any difference at all. It doesn’t work in FF, but does in IE7 - I just tried it. I can see the video in FF, but it never plays. Oh well - I got to see it and it’s great! Thanks!
Randa Clay’s last blog post..Free Twitter Graphics
Hi
I have gone through the video tutorial that you have put up, it was just amazing. The die cut effect really does good. Hope to see more such tutorials put up.
Regards.
Sorry for the trouble you had viewing the video. I can see it in Firefox fine so Im not sure what would be causing that.
I’m glad you got to see it though!
Satheesh,
Thanks for the comments. Die cuts are very cool, I wish it didn’t cost so much to get them made though!
Nice post – I enjoyed it, Brian. And it works of FF with a Mac (Leopard) for what it’s worth. Downloading Screen Flow now.You’ve inspired me!
Rob Cubbon - freelance graphic designer’s last blog post..Changing an image to match your design’s colours
Let me know how it is if you use it before I post about it. Some of your good tutorials would be perfect for a quick vid like this.
Thanks, Brian. I’m afraid I didn’t realise that all these packages cost a bit so I’d thought I’d put this on the backburner for a while. At the moment I’ve just got excited about Flash again (something you’re very good at, but something I’ve never got to grips with) and am doing some short movies advertising my websites to post on youtube. Going off topic now… Anyway if I get into doing tut vids I’ll get back to you if I may. Cheers!
Rob Cubbon - freelance graphic designer’s last blog post..Changing an image to match your design’s colours