Pushing out design mock-ups and layouts have been my thing lately. I’ve created a few revisions to Atlanta2Jamaica (this theme), started two design comps for my side projects, made another mock-up for a potential freelance gig I’m shooting for and did another internal redesign of my prime jewel, WP News Theme.
Creating layouts from a blank Photoshop file have been pretty tough at times and the fact that I’m primarily a developer doesn’t help at all. In an attempt to speed up my design work flow, I created a little “framework” for designing layouts in Photoshop available for download.
The purpose for this “framework” is to provide commonly used elements for web designers that will drastically speed up their work flow.
With that in mind, I also wanted to solve the blank screen problem by setting up a basic grid system with the choice of a 12 or 16 column 960px width layout.
Here’s a screenshot of everything included:
Download Ptah’s Photoshop Design Framework
(version 1.0 – .zip 41KB)
With this framework added to your artillery, it will get your creative juices flowing again and increase your productivity during the design stage.
You’ll notice that I’ve also included multiple “Above the Fold” bars inside the “Fold-Area” folder. Don’t rely on those just yet as they’re probably inaccurate. Once I get the correct measurements set, I’ll update the download link with the changes. In future versions of this framework, I’ll be adding extras goodies so you’ll have everything you’ll need. If you’ve got anything in mind that you’d like me to add in this file, let me know in the comments!
hahaha! I got you into grids! Love it PTAH!
@Patrick – Yes you did.. lol and it makes sense. You also made me reconsider trying out blueprint but i’m taking baby steps! Lol
Wow… this is awesome. I didn’t feel too excited at first… but this really is useful! Thanks a lot Ptah!
This is actually nothing new. Such grid files plus CSS can be downloaded from here:
http://960.gs/
@WPGuy – Thanks man, glad you find it useful!
@eno – True, the idea isn’t new and you can also find something similar here, here, here, and here.
Everybody has there own way of doing things, and this is mines. Plus, it’s not just for grids. Check it out and you’ll be surprised.
I tried to check it out but it needs some visionary skills to learn your intentions by the pds alone without any notes or hints
. This is why immediately 960.gs came into my mind which is well documented and logical at the first sight.
@eno – Well sorry if the image up there didn’t throw out any hints of what was included in the “.psd” – which doesn’t take a visionary to figure out that this file helps web designers with mocking up comp layouts
Hello Ptah Dunbar,
Thank you. Framework help us a lot and improve efficiency.
@AJ: Glad you found it useful! If you use adobe fireworks, I’ve got something coming for that too!