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

  • Igor Aleksic

    Love it! Minimal & Clean, nice job on this one Blaz!

    • Thanks Igor, how did you find using it tho? For example is it easy to customise? Thanks again mate!

      • Igor Aleksic

        Ok so i played a little bit with this and frankly it’s quite easy, giving that im already working on other project which has responsive framework, (twitter bootstrap or my own responsive framework), providing the details here how it should look like in other portraits is a time saver!

        But my dear friend robin hood of psd’s :), you forgot to show the menu how it would look like when on 320 & 640 :)

        • Thanks Igor, great insight! Appreciate it!

          Ahh yes I have the top menu in there but did not design or add in the menu for 320 or 640! Definitely an addition for the next version!

          Thanks very much for your help!

  • I love it!
    I developed it in HTML5/CSS3 just for my train to responsive design.
    If you want to see:

    • Lance

      nice job kevin !

    • Rathanpatel

      Hi bro….. i wanna ur help to design responsive design can u help pls

  • Tommy Bæk Torpegaard

    Thanks a bunch for this one. Can’t wait to put it into action and see what it can do.

  • strikhur

    Hi Blaz, i was practicing with the PSD file that you made. I’m torn on what to use in the arrow part of the design, so i decided it will be nice if i ask you directly.

    Will i define a minimum height for the rows? or will i let the margin/padding define the height of the rows, namely the textbox row with 2 columns and the row with the 3 columns.

    If you were to code this what will be the best way to approach the mark-up? I also tried to used the display: table, and display: table-cell for the arrows. I used the [ div > a ] markup for the arrows. Hope my questions clear. thanks!

  • Hi Igor,

    Thank you for giving such a great and helpful article here. I think website owner must use a Mobile web template because it is also important now to create your website design friendly to smart phones.

  • Lance

    excellent, have been looking for something like this

  • giorgospm

    Does it include landscape mode?

    • No just the layouts seen in image above – thanks again!

  • Adebowale Ibukun

    Your dropbox account has been disabled and I cannot download…Thanks

  • PwrSrg

    DropBox – This account’s public links are generating too much traffic and have been temporarily disabled!

    • All fixed now – we had to move the file storage from Dropbox to Amazon S3. Sorry for the inconvenience.

      • anonymous

        it no longer works :(

  • Thomas_Kiser

    Your dropbox account has been disabled and I cannot download

  • I like it you psd template is awesome.

  • I am a graphic designer that does custom websites and have been trying to figure out the best way to approach responsive design in Photoshop. This entire idea with smart objects seems really interesting and one I have not scene before. I am new still to smart objects, and was wondering if you have any insight as to what is the best way I can grasp learning about smart objects so that I can understand the best way to approach them in this template?
    Also I have been told a number of times that I need to focus on percentages for columns when designing a PSD for a responsive website. Whats your thoughts on going the percentage route? and can you still do percentages with your template and smart object idea?
    Sorry for the bad termonology, Im very new to responsive design.


    Justin The Designer

  • ric

    But the 980px for which device means? Tablet portrait but i pad is 768px width correct? Thanks

  • MrFL1982

    I love it! Thanks

  • Nikita Pushkarskiy

    God bless you, Blaz. I’m a webdev rookie so this is excellent PSD for practicing

  • Thank you for giving such a great and helpful article here

  • God bless you, Blaz. I’m a webdev rookie so this is excellent PSD for practicing

  • Tamer Group sürdürülebilir yatırım ilkesi ile fırsatlar yaratarak, ülkemize yatırımcı çekmek ve farklı projelere ortak olarak iş geliştirmeye devam etmektedir. Sorunları çözmek ve kalıcı ekonomik değerler yaratmak şirketler grubunun temel vizyonudur.

  • Güvenlik kamera sistemleri denince web sitemizi ziyaret edebilirsiniz.