Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by manuelfischer
manuelfischer
Courses Plus Student 7,010 Points

Photoshop Grid Layout for Bootstrap Fluid Designs

Hey guys,

I try to find a solution for my design workflow in photoshop. I found some good predefined bootstra grid layouts for photoshop, but I want to know how can I design a one page design with fluid layout.

So, maybe someone has some experience with designa full with layout. When I try it, sometime it looks like the is something wrong, cause I have a widescreen monitor... Is there a fixed size and height for each website. Need I use a standard resolution?

Example: http://s1.directupload.net/images/140625/lb8toayh.png

It is really hard for design a full with (fluid) design...

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

This is a big reason why using PSD in the workflow has become difficult, almost to the point that it doesn't help much anymore. There is no way to really design a fluid site in PSD. It's always going to be a fixed width document. The closest you can get would be creating a new file and grid for each of the major breakpoints, but even that doesn't help much when you're sizing things on the web in percentages; plus the time involved. PSD can only do fixed width.

I made a readjustment to my workflow, maybe it'll help you.

1)Sketching. Good ole' paper and pen. Doesn't have to be pretty, but get your ideas down on paper fast and dirty, first. 2)Wireframing. This is where you can help find your breakpoints. Leave most content out still. Layout your designs. 3)Design in browser - Get your layout functioning correctly. Start using actual text and images if needed. 4)Create shadows, texture, or other visual assets in PSD, than recreate it in code. I find it easier to get exactly the color I want or get a shadow right in PSD first, and than match that with code.

At any point, don't be afraid to go back. If you're wireframing, don't be afraid to go back to sketching. If you're designing in browser, don't be afraid to even go back to sketching. As a matter of fact, you should be jumping around when you get into working inside the browser. But to get started, that's the order I go.