How do you present your Photoshop mock ups? Very often you will need to present your web-design mockups to your customers in a quote or sales pitch. Usually you just stick with the Photoshop mockup you created, but in my opinion that always seems to be missing that extra touch. Clients need to be given a extra push in order for them to visualize how a design looks like in a final web browser.

This is just a little protocol we used to follow to present our web-designs in print for new customers.

Step 1 Download the Webdesigners Toolkit

I just love The Webdesigners Toolkit. It contains several free browser templates ready made for Photoshop. You can use them to frame your design with a Safari, Firefox, Internet Explorer or even a Opera browser. Page title, address bar, favicon, scrollbar everything can be adjusted and is included.

Visit the Webdesigners Toolkit on webdesignerstoolkit.com.

Step 2 Insert your design

We always use 1024 pixels width as a starting point, but don’t constrain the design to that size. As you can see on the image below the design exceeds the browsers frame a little bit. Not only does this give it a more open look, but it also lets the client know that the design differs per screen resolution.

Step 3 Save as JPEG

If possible upscale your design to a resolution of 200 or 300 DPI. That will make it look better in print. 75 DPI gives you a rather small preview. Next export your design as large JPEG file so you have a new flat file which we can use to generate that curled paper look.

Step 4 Generate Peel Off Look

I use the PanosFX Discrete action set to generate the curled paper look. You can download it for free at panosfx.com. Import the actions, run PanosFX_discrete and select your newly saved JPEG file as source. The usage of this action set pretty much speaks for itself.

(update! Panosfx is no longer available as a download, you can use a cheap alternative from Graphic River)

And fowla there you have the image I showed you on the top the page. If you have any other methods or design habbits please let me know. I would love to hear about them.

Trackback URL

Other posts in Photoshop