0

I am designing a website layout in Photoshop.

I created a home page and saved it in png so now it's a full page website design showing a home page for a desktop view.

But I also want to make a mobile view of it (for example to show the responsive view of my home page). So is there ant plugin or what that will make my psd in mobile view or do I have to design a separate psd for the mobile view?

  • 2
    It is customary to design for different screens. There's no "plug in" that can make aesthetic decisions for you that I'm aware of. – Scott May 12 '15 at 15:22
  • 1
    hmm yup me too not aware of any way to doing it. okay means i have to spend some time for mobile view also. thanks for clearing my dbout. – Bikramjit May 12 '15 at 16:00
1

Responsive design should happen primarily in the browser. The reason for this is how the mobile view and desktop view will look is heavily dependent on how you markup the page. Giving the developer two PSDs for two views is going to be a recipe for some very hacky and non-reusable markup and JS. It's best to design for one view (mobile first is always nice) and then work alongside the developer to figure out what needs to be tweaked for the other view.

0

There is so many tools that help you to convert you design file into a html and adjust it to a responsive bootstrap compatible template.

I will list some of them as a guidance.

  1. you can drag and drop your PSD file into dreamweaver CC2014 and dreamweaver will do the job for you. converting your PDS into HTML5 compatible and when you ant to convert it then comes a dreamweaver extension for bootstrap called DMXzone Bootstrap 3 there is a free and paid version of that extension.
  2. the second solution is to drag and drop you PSD into Adobe Edge Reflow this is a great tool. and here you can find how to connect your Phtoshop with Edge Reflow
  3. some online tools are also a solution you can navigate between different online tools, please check Online Bootstrap Editors
  4. some desktop solution are awesome too, like the free tool Pingendo and the great pinegrow.com
  5. Some paid services are also can convert your design int a responsive bootstrap html like the online service psd-to-bootstrap and psdwizard
  6. Finaly there is some photoshop extensions that help you doing the job like velositey-v2

Conclusion: there are so many tool that can do what you want jut pick up the most that meets your needs.

  • 2
    Many of these suggestions are for going from a PSD to HTML. Which is fine, and half the battle, but doesn't really address the issues and complexities of responsive web design. Good RWD requires working at the presentation layer. Either directly or in an iterative manner with a developer. – DA01 Jun 13 '15 at 23:28

protected by Community Aug 29 '17 at 5:24

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.