Free PSD websites & UI kits just for you

Create a Free Account to Download - Sign Up Here

Responsive PSD Template

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 makes it’s easy to quickly and easily mockup a design 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 PSD Template

More Information - Free PSDs

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.

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

Learn more about Photoshops Smart objects here.

Have somthing to say? Somthing good I hope!

  • Igor Aleksic

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

    • http://www.blazrobar.com/ Blaz Robar

      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 :)

        • http://www.blazrobar.com/ Blaz Robar

          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!

  • http://www.facebook.com/kevhdweb Kevin Hellot

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

    • 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!

  • Lance

    excellent, have been looking for something like this

  • giorgospm

    Does it include landscape mode?

    • http://www.blazrobar.com/ Blaz Robar

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

  • Pingback: Top 10 Free Resources for Web Designers › Think Design Company()

  • Adebowale Ibukun

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

    • http://www.blazrobar.com/ Blaz Robar

      All fixed

  • PwrSrg

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

    • http://www.blazrobar.com/ Blaz Robar

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

  • Thomas_Kiser

    Your dropbox account has been disabled and I cannot download

    • http://www.blazrobar.com/ Blaz Robar

      All fixed

  • http://www.idea2psd.com/ John Abay

    I like it you psd template is awesome.

  • http://www.justinthedesigner.com/ Justin The Designer

    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.

    thanks.

    Justin The Designer

  • Pingback: Gregory Smith()

More great Free PSD Websites

YouTube Player PSD

23,794
FavoriteLoadingAdd
September 9, 2011

Music UI kit by Pixel Kit

8,162
FavoriteLoadingAdd
March 14, 2014

Inspird Widget Design

7,308
FavoriteLoadingAdd
April 25, 2012
Designmodo Shop