Find some awesome shit

Share 'Responsive Photoshop PSD Template'

Blaz Robar
February 19, 2013

Responsive web design in Photoshop

Today’s free PSD is something more experimental, so please be kind if it’s not your type of thing! It’s a experimental responsive PSD template that allows quick and easy  design mockups in different widths and sizes. The PSD template is set up with a number of generic device widths to simulate a few of the mobile devices on the market.

Responsive Photoshop PSD Template

This responsive PSD template uses Photoshop smart objects for all the heavy work. Simply update one of the smart objects in any of the device width folders and that image or block will update across all the device widths. Well thats the idea anyways!

This is the first time I’ve ever used or seen smart objects be used in this way to achieve a responsive PSD template, so please feel free to let me know how I could improve it or make it better! Again this is a very experimental idea at the moment so please let me know what you all think!

How to use the Responsive PSD Template

  • Open the PSD in Photoshop and then expand or open any of the 320px, 640px, 980px or 1024px folders and select a smart layer.
  • Alt click (mac) the smart layer and the layer should open a new window which you can edit its contents in.
  • Make your changes then save and close the file.
  • Your changes should be updated across all the different device widths in all folders and instances of that smart object.

Learn more about Photoshops Smart objects here.

Leave a nice comment