Birdfeed
Grid Nirvana - How to Easily Incorporate Blueprint into Photoshop
Here at Canary we’re big proponents of tools that help us get the job done. When it comes to our CSS layouts lately we’ve been using the Blueprint CSS framework in our workflow. We’ve found that despite the trade-offs (some non-semantic html), we get a lot of benefit from the system. There’s a great CSS reset that removes all the default browser styling, it’s been cross-browser tested, pretty good out-of-the-box typography settings, and both a baseline and horizontal grid.
About Blueprint (from blueprintcss.org):
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
The grid is what I’m going to focus on here. There are a lot of CSS frameworks that provide a grid, but there’s a tool for Blueprint that we’ve been using to create custom grids. This gives us the freedom to set the page width and number of columns to whatever we need for the site, and generates the structure for us that we use in our design and development process.
Download Blueprint and set it aside for now. You’ll use this when you’re building the site.
Go to the Blueprint Grid CSS Generator and enter the specs for your custom grid. I’ve found that I can play around with this in order to create the exact grid I need for each project. Once you’ve got the setting you want, click ‘Generate CSS’. Copy and save the Grid.css and compressed.css files. You’ll use those to overwrite the default grid that came with Blueprint. Now flip over to the Grid.png tab. The script created this png file from the specs you entered. It represents one cell of your new grid. Save this file. It’s intended to replace the default grid.png file that you get with Blueprint, but we’re also going to use it as a guide in Photoshop. (It’s tiny, and a little hard to see both in the generator and below)
Open the grid.png file in Photoshop. Convert the color mode to RGB. (you may not need to do this, but I’ve occasionally had problems when I didn’t.) Now select Edit->Define a Pattern. You can keep the default name and click OK.
Now create an empty document that is the width of your grid for your website. It can be any height, but I usually start with at least 1000px tall. Fill a new layer named ‘grid’ with a solid color.
Create a new layer style for that layer and select the Pattern Overlay tab. Set the blend mode to ‘multiply’ and choose ‘snap to origin’. Open the ‘Pattern’ selector and choose your new pattern. It should be the last one in the list. Now go to the ‘Blending Options’ tab and under Advanced Blending set the fill opacity to 0%.
You now have a semi-transparent custom grid that you can place over your other layers to guide you as you design!
And here it is in action. This is a little preview of our new site in progress. 10 points to you if you spot the temporary heading title!
Watch out for part 2 in this series, in which we’ll divulge how we incorporate Blueprint into our Drupal theming process. [Now we’re on the hook to write it!]
Go to the Blueprint Grid CSS Generator and enter the specs for your custom grid. I’ve found that I can play around with this in order to create the exact grid I need for each project. Once you’ve got the setting you want, click ‘Generate CSS’. Copy and save the Grid.css and compressed.css files. You’ll use those to overwrite the default grid that came with Blueprint. Now flip over to the Grid.png tab. The script created this png file from the specs you entered. It represents one cell of your new grid. Save this file. It’s intended to replace the default grid.png file that you get with Blueprint, but we’re also going to use it as a guide in Photoshop. (It’s tiny, and a little hard to see both in the generator and below)
Open the grid.png file in Photoshop. Convert the color mode to RGB. (you may not need to do this, but I’ve occasionally had problems when I didn’t.) Now select Edit->Define a Pattern. You can keep the default name and click OK.
Now create an empty document that is the width of your grid for your website. It can be any height, but I usually start with at least 1000px tall. Fill a new layer named ‘grid’ with a solid color.
Create a new layer style for that layer and select the Pattern Overlay tab. Set the blend mode to ‘multiply’ and choose ‘snap to origin’. Open the ‘Pattern’ selector and choose your new pattern. It should be the last one in the list. Now go to the ‘Blending Options’ tab and under Advanced Blending set the fill opacity to 0%.
You now have a semi-transparent custom grid that you can place over your other layers to guide you as you design!
And here it is in action. This is a little preview of our new site in progress. 10 points to you if you spot the temporary heading title!
Advanced Trick!
Set up a couple custom actions to turn your ‘grid’ layer on and off with a key command. We’ve found that really helps us quickly check our alignment as we work.
Watch out for part 2 in this series, in which we’ll divulge how we incorporate Blueprint into our Drupal theming process. [Now we’re on the hook to write it!]
Submitted by canary on Fri, 07/31/2009 - 1:04am
Recent Posts
Tags in Tags
Archive
October 2014
July 2014
June 2014
- Philly arts and culture reporters share tips on how to get great press coverage
- Blog post: Outside(r) Art
May 2014
- Philly arts organizations take on social media fads: A short history
- Entrepreneurship and Risk-Taking in Arts Organizations
- A Look Ahead This Month
April 2014
March 2014
February 2014
January 2014
- Philly's Top Broadcasters Weigh In: What Makes the Evening News?
- Top 10 Philadelphia Arts and Culture Orgs on Pinterest
- Be a Belieber in marketing your arts organization to teenagers
- Top Arts Marketing Resources for 2014
December 2013
- The Constant Grammarian: Three Grammar Resolutions You'll Want to Keep in 2014
- 2014: The Year Ahead
- ICYMI: Getting meta on social media, and other November reading
- Making Spirits Bright: Canary’s Holiday Favorites
- Canary Promotion Wins Two Awards from the PRSA!
November 2013
- ICYMI: What would you do if you were banned from Twitter?
- Messaging in a Bottle: How to Tell a Compelling “Story of Us”
- The Hot Topic of Crowdfunding for Conservation
October 2013
- ICYMI: Where we've been this fall, and where we're going
- Canary Guest Blogs for Americans for the Arts: A Holistic Approach to Communications
- PR in the Age of Shortening: Should we join ’em if we can’t beat ’em?
September 2013
- Megan Wendell on Keystone Edge: Growth, inspiration and putting the arts first
- Canary in Harrisburg for the Launch of Pennsylvania’s Top 10 Endangered Artifacts
- Canary News: Fall Arts Bounty, Winning at the Geek Awards, Social Media Tips
August 2013
- Playing Favorites: Where to find the Canary staff at the 2013 Fringe Festival
- Weekend Wrap Up: Great Press for Mauckingbird and Puppet Festival (r)Evolution
- More Than Words: Bringing Audiences Into the Moment with Instagram
July 2013
- ICYMI: What We're Reading This Summer
- 6 Ways Twitter Can Help Sell Tickets (Part 2)
- 6 Ways Twitter Can Help Sell Tickets (Part 1)
June 2013
- Adventures in Pittsburgh: How cultural storytelling can invigorate a city
- ICYMI: What Caught Our Attention in May
May 2013
- The Constant Grammarian, Part 3: Thou Art Banished
- Spring 2013 Newsletter: What Kind of Leader Are You?
- Crowdsourcing: How Honesty Moves Us Forward
- So You’ve Hired a Communications Team – Now What?
- ICYMI: What Caught Our Attention in April
- Third Time’s the Charm: Congratulations to the 43 winners of the 2013 Knight Arts Challenge!
April 2013
- Five Signs It’s Time to Hire a Communications Firm
- Stop Wasting Money: How to Stretch Your Facebook Ad Dollars
- ICYMI: What Caught Our Attention in March
March 2013
- Take readers behind the scenes — even while you're setting the stage: A content marketing strategy for arts organizations
- Faces of PRSA Philly: The Canary edition
- Connecting Organically: How PR drives SEO results
- The Future of Cultural Journalism: Inspiration, Innovation and Proactivity
February 2013
- What’s the future of cultural journalism? How can art connect communities?
- Canary Goes Global: World-class culture in the City of Brotherly Love
January 2013
- Cultural Moments of 2012: Megan's Picks
- Cultural Moments of 2012: Rose's Picks
- Cultural Moments of 2012: Carolyn's Picks
December 2012
November 2012
October 2012
- A Better Barrymore? Theatre Philadelphia: A Celebration! gave the arts community a much-needed boost at just the right moment.
- Internship Alert: Canary Promotion is hiring PR/Marketing interns this fall!
September 2012
August 2012
July 2012
- Philly 101 Wrap Party @ Frankford Hall: What You Wish You Knew, Now You Know
- The Constant Grammarian, Part 1: Seven Words and Phrases You Didn’t Know You Didn’t Know
- Canary Promotion Newsletter: Summer 2012
June 2012
- Insight into Insights: Reach Your Goals With the Right Facebook Campaign
- Insight into Insights: Reach Your Goals With the Right Facebook Campaign
May 2012
April 2012
- Congratulations to the 2012 Knight Arts Challenge Philadelphia winners!
- Rediscover Public Art with Fairmount Park Art Association
March 2012
January 2012
December 2011
- 5 Things You Can Do For Your Small Business Right Now
- Canary Promotion Welcomes Carolyn Huckabay of Philadelphia City Paper as Public Relations Associate
- 10 years, a bounty of art, and a job that still thrills me
- Young Voices Were On the Minds of TEDxPhilly Speakers
November 2011
October 2011
- Festivals, Public Art, Drama & Dracula: What We're Working On This Season
- Plenty to see this weekend as DesignPhiladelphia winds down. Stop by Not A Vacant Lot!
- 6 Tips for Getting Press-Perfect Photos
September 2011
August 2011
July 2011
- Knight Foundation and NEA Seek New Models for Arts Journalism
- Live Arts Festival Tickets On Sale Now!
June 2011
- With Facebook Ads, It's All About the Timing.
- We're hiring: PR & Marketing Coordinator position available
- The Value of Intangible Goods. How Donating Your Knowledge Makes a Difference.
May 2011
- The Cultural Engagement Index, Why Audience Participation Matters
- Congratulations to all of the Knight Arts Challenge Philadelphia 2011 Winners!
April 2011
- A mural party at the Rosenbach, a frank conversation with Maurice Sendak & the musically inspired “Grace Notes”
- Canary Promotion Newsletter: Spring 2011
- Spring is in the air! The Canary office gets spruced up for Spring.
- Our PIFA Picks: A Cultural Playground in April
- 6 Essentials for Successfully Working with the Media
- Woodmere Art Museum Opens Five New Exhibitions
March 2011
- Spring Break at Live Arts Brewery - A Laboratory for Research and Development
- Connecting With Your Community Through Facebook Ads
- Ars Nova Workshop presents Fieldwork, “A jazz power trio for the new century” (NPR)
- Put A Bird On It!
- Final Days to See John Folinsbee and American Modernism at the Woodmere
February 2011
- 7 Ways to Improve Your PR Writing
- Sometimes these Canaries need their creative-beauty sleep
- Young Voices High School Monologue Festival On Stage at The Adrienne Theater This Week
- The Associated Press, NPR, Philadelphia Inquirer & New York Times are all talking about the Rosenbach's Sendak Mural
- John Folinsbee and American Modernism Lecture Series at Woodmere Art Museum
January 2011
- Our Favorite Cultural Moments of 2010: Megans' Picks
- Our Favorite Cultural Moments of 2010: TEDxPhilly
- Our favorite cultural moments of 2010: Flash Opera, The Return of the Cultural Flash Mob to Philadelphia
- Our 2010 Year in Review
December 2010
- We're taking a holiday break!
- Rescue Your Blog with an Editorial Calendar
- Philadelphia’s got talent, United States Artists Knight Fellows announced
- Holiday Shop at Woodmere Art Museum
November 2010
- Ladies Rock Camp - the perfect gift for the ladies in your life
- Museum Without Walls: AUDIO the subject of national Associated Press story
- Chester County Historical Society Launches Social Media Campaign
- The Rosenbach Museum & Library announced today news of stunning new portraiture acquisitions
- Woodmere Art Museum Upcoming Community Events
October 2010
- Theater showcase by & for youth in Philadelphia touches on big issues at the right time
- TEDxPhilly, November 18, 2010 at the Kimmel Center.
- Canary clients have "Big Vision" says City Paper - We Agree!
- Spooky. Canary's tips for Halloween-themed events in Philly
- Coming Up: opportunities to get your Knight Arts Challenge questions answered
- Mayor Nutter, Arts Community Celebrate Knight Arts Challenge Philadelphia Launch
September 2010
- Coming Oct. 5: Knight Foundation brings new support to the arts in Philadelphia
- Have you heard? The Philadelphia Live Arts Festival and Philly Fringe is taking over!
August 2010
- Two thumbs up for Mauckingbird's revamped queer "A Midsummer Night's Dream"
- How creative PR & marketing work together to draw in new audiences
July 2010
- Museum Without Walls™: AUDIO wins Philadelphia Magazine BEST of PHILLY 2010 Award!
- The Rosenbach's new 'Dreadful Things Happen' exhibition reviewed in today's Inquirer
- Philadelphia Weekly “Picks for Best Theater This Year” Includes Five Canary Client Mentions!
- Canary News: Announcing some changes & new opportunities
June 2010
- We're Looking for PR/Marketing Interns for the Fall!
- Fringe Fest Sideshow: Opportunity for Philly Fringe Artists & Fans
- Today, Celebrate Bloomsday with the Rosenbach Museum & Library at Trinity Center for Urban Life
- Museum Without Walls™: AUDIO Program Officially Launches at LOVE Park
- Thursday, June 10th, Fairmount Park Art Association launches the groundbreaking Museum Without Walls™: AUDIO program in LOVE Park!
May 2010
- The Wilma Theater's U.S. Premiere of "Leaving" Opens TONIGHT!
- Drupaldelphia Wrap-Up
- Canary client Swim Pony Performing Arts will host Philadelphia's next large-scale improv event!
- The 2010 Philadelphia Live Arts Festival + Philly Fringe Line-up is Announced!
April 2010
March 2010
February 2010
- Google Chrome - Search Any Site from the Address Bar
- The New York Times reviews Philagrafika 2010, a Canary PR client!
November 2009
October 2009
- displaying location fields in a view
- Happy 200th Birthday, Edgar!: Brat Productions Celebrates with One-of-a-kind Theatrical Haunted House
- safari clips div when using anchor tags
- Philadelphia: Where the Wild Things Are + Sendak Mania at the Rosenbach
- string parsing code to get url from image tag
September 2009
- Philadelphia Live Arts Festival & Philly Fringe Opens Today!
- Pig Iron Theatre Company's Welcome to Yuba City
August 2009
- Drupaldelphia
- We're hiring! FT Publicity & Marketing Assistant
- Replace Taxonomy pages w/ Embed Views
- Embed Views
- creating a style for every n-th item in a list
- incremental classes when grouping multiple cck values in views
- Custom CCK Formats
July 2009
- Blueprint Grid Overlay in the Browser
- Grid Nirvana - How to Easily Incorporate Blueprint into Photoshop
- running cron.php from crontab
- redirect traffic from a subdomain to the root
- Theming a page by arbitrary content types
- Bloomsday Gives Joyceans a Reason to Love Philadelphia
June 2009
- Get the path to a Drupal module or theme
- IE doesn't load stylesheets / IE doesn't load conditional comment stylesheets
- IE6 PNG Fix
May 2009
- Watch nEW Festival Artist Interviews on StreetTalkin.com
- Add a custom ID to menu items based on the text in the link
- Even out different date fields across content types
- Embed Views2 blocks w/ PHP
- EmField Error: "Sorry, you need to install flash to see this content."
- Views2: Find the first NID from another view to use as an argument
- Watch WHYY: Experience Philadelphia Young Playwrights
April 2009
March 2009
- delete .svn folders from the cli
- Convert string to CSS friendly text
- Display taxonomy terms from one vocabulary id
- Web Design and Drupal Internship Available
- DrupalCon DC as a mind map
- Canary at DrupalCon DC
- Canary Promotion + Design seeks Web Designer/Developer
February 2009
- PR/Marketing Internship Opening
- custom jQuery accordion menu function for drupal primary menu
- South Street offers empty storefronts to artists
January 2009
December 2008
November 2008
- Client Testimonial: Neil Baldwin
- DrupalCamp Philly
- memory error: Fatal error: Allowed memory size of ...
- Complaint Choir on CBS 3!
- The 6 Dangerous Fallacies of Social Media
October 2008
- Inaugural BarCamp Philly to be held November 8
- Treehouse of Horror: Canary Pumpkins Rule the Night
- First Person Festival
- calibrate your monitor
September 2008
- Val Emmich, Little Daggers
- Ben Franklin persists
- Rock 'n' Roll at The Wilma Theater
- Sarah Palin and Hillary Clinton on SNL
- Help Elect Barack Obama. We can't afford to lose this.
- Connecting to MYSQL via terminal
- Live Arts Festival & Philly Fringe: in print, online & on the air
August 2008
- Live Arts Festival’s Kate Watson-Wallace talks Car in PW cover story
- Take the A List Apart Survey for People Who Make Websites
- White Screen of Death [WSOD] on form Submit
- find and delete files in ssh
- Mauckingbird's R&J in the Inquirer
- Girls Rock Camp on MTV
July 2008
- Classic Towns of Greater Philadelphia
- Philly's New Culture Chief
- First Person Impressions
- Mayor Nutter announces Arts & Culture Office
- split arrays into two for multiple columns
- Placing the contents of a block in any location
- Free your content of PHP: Moving PHP code out of blocks, views and nodes
- How to Call Attention to Yourself
- Ben Franklin & Betsy Ross Wedding
June 2008
- Delete nodes programatically through Drupal
- Backup/Restore MySQL via SSH if you can't access phpmyadmin
- Drupal user guides
- Clean URLs on IIS
- Why good design matters
- Bloomsday at the Rosenbach today!
May 2008
- ffmpeg, the flashvideo module and testing locally on Windows
- Browser detection in PHP
- Drupal Meetup at Canary Recap
- Sendak on Sendak on Video
- adding the servername to site5 nameservers
- clean urls on site5 before the domain is active
April 2008
- Creating email addresses on Site5
- Vote Early, Vote Obama
- Views Theming Wizard output incorrect
- remotely connect to mysql server - Site5
- File permissions
- wait for full page to load (not just the DOM) when resizing elements with jquery
March 2008
- Emulate word-wrap in Mozilla Firefox
- 500 Internal Server Error upon uploading site to Site5
- Lost Weekend: SXSWi 2008
- MYSQL ERROR: "MySQL server has gone away"
- Day One at SXSW
- SXSW Marathon, or, Will We Really Get to All 30 Panels?
February 2008
January 2008
- My loony bun is fine, Benny Lava.
- Dispatches from Google chat: Jon Stewart strikebuster edition.
- The Museum of Baby Heads
December 2007
- WING TIPS: Canary's Favorite Things - Cool Gifts for the Holidays
- Best Potential Client Inquiry Ever
October 2007
September 2007
August 2007
July 2007
June 2007
- White Board: Stinky
- Just a few vacation photos
- machines machines machines... featured on FOX Philadelphia!
May 2007
April 2007
March 2007
- How to talk to the media
- Cold Rock The Auction Block
- Where the Wild Things Are
- Take the Chekhov Lizardbrain Challenge
- I leave for SXSW this week
- Anton Chekhov is Taking Over Philadelphia
February 2007
- Snow Days
- The Hoohah Monologues
- It's the Arts, stupid
- Little Fat Man Who Sold His Soul
- Wing Tip - Tour the UK
- Image Makeover with Paul Mecurio
January 2007
- Happy Birthday, Megan!
- PhillyHistory.org on Phawker.com
- Doin' the Wife Swap Rock
- Canary on Breakthruradio
- New Play Festival site online
- Michael Cera - Impossible is the Opposite of Possible
- Canaryist, Part Two
December 2006
- Canaryist
- A John Dorian Christmas, or, You're a Good Man, JD
- December Wing Tips
- Donate to a music community friend
- Media Darling
- Will It Blend?
- I've obviously had hundreds of girlfriends.
November 2006
- His Dark Materials musings in this week's Philadelphia City Paper
- Paris by night
- Canary Nabs Philadelphia City Paper Choice Award
October 2006
September 2006
- Live Arts/Philly Fringe recap, Sept. 9-16
- Live Arts/Philly Fringe recap, Sept. 5-8
- Amnesia Curiosa
- Proper Manners and Haunting Houses
- Still Unknown
- Dark times in trucks and the old west
- Cheerleaders, strippers and puppets, oh my!