Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Adam Casey
Adam Casey
3,796 Points
Posted by Adam Casey
Adam Casey
3,796 Points

Pixel perfect text & vector artwork for product mockups using Photoshop Smart Objects

I'm trying to create a ebook template to use when creating graphics for our landing pages. In the past I've bought photoshop product mockup files from GraphicRiver.net that use smart objects to overlay your design onto photographs of business cards and other objects.

So I thought I'd use a similar process. I searched Youtube to find out how to recreate this effect and found this great tutorial (thanks to Josh Duncan): http://www.youtube.com/watch?v=dHAU3Zpd6dk

However my text layer saved in my smart layer renders really poorly. The text is rendered to the angle of the book cover I've created, but the letters are all over the place. (not aligned to a straight line, instead they are jumbled about, so each alternative letter in about 2 pixels up or down on the previous letter.

Also I've copied and pasted in some line drawings from illustrator and these too are being distorted really badly. Any suggestions on how to get pixel perfect artwork onto these product mockups?

Adam Casey
Adam Casey
3,796 Points
Adam Casey
Adam Casey
3,796 Points

Hmm now you've put some doubt in my mind. I will follow it again making sure I do this and see if that fixes the issue.

Here's what I produced in my first test. https://www.dropbox.com/s/x9crlbq0y6xcxjy/CrystalBall_ebook_template.png

6 Answers

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

I followed along with that tutorial and had no problems.

In the smart object: I dragged a logo from a .ps file into a new layer. Copied and pasted an .ai file as a smart object. Made a layer with small type and large type.

As soon as you created the square (in a separate layer) to cover the book cover- did you save it as a Smart Object BEFORE you made any transformation?

Do you have a link to what you are doing? Or a screen grab of your layers?

Adam Casey
Adam Casey
3,796 Points
Adam Casey
Adam Casey
3,796 Points

It's a little better the second time around. I think the problem I ran into was warping it. As there is no real bend in this book cover anyway, I left out the warping part this time and it seems to have produced a cleaner result.

Do you have an example link to your image?

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

That looks much better!

Perhaps it could do with a little more design - fonts, color, etc. More like an icon?

I'm not sure how you are using it. Post back when you have a mock up of the landing page. :)

Adam Casey
Adam Casey
3,796 Points
Adam Casey
Adam Casey
3,796 Points

Thanks Marsha, I've kept it pretty simple just to test the technique. Will be tweaking it a little and will post back once the landing page has been completed. ;)