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!
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
Tags in Tags
- 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!
- 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
- 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
- What’s the future of cultural journalism? How can art connect communities?
- Canary Goes Global: World-class culture in the City of Brotherly Love
- Cultural Moments of 2012: Megan's Picks
- Cultural Moments of 2012: Rose's Picks
- Cultural Moments of 2012: Carolyn's Picks
- 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!
- 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
- Insight into Insights: Reach Your Goals With the Right Facebook Campaign
- Insight into Insights: Reach Your Goals With the Right Facebook Campaign
- Congratulations to the 2012 Knight Arts Challenge Philadelphia winners!
- Rediscover Public Art with Fairmount Park Art Association
- 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
- 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
- Knight Foundation and NEA Seek New Models for Arts Journalism
- Live Arts Festival Tickets On Sale Now!
- 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.
- The Cultural Engagement Index, Why Audience Participation Matters
- Congratulations to all of the Knight Arts Challenge Philadelphia 2011 Winners!
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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!
- Two thumbs up for Mauckingbird's revamped queer "A Midsummer Night's Dream"
- How creative PR & marketing work together to draw in new audiences
- 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
- 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!
- 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!
- Staff Profile: Melissa Brice
- Google Chrome - Search Any Site from the Address Bar
- The New York Times reviews Philagrafika 2010, a Canary PR client!
- 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
- Philadelphia Live Arts Festival & Philly Fringe Opens Today!
- Pig Iron Theatre Company's Welcome to Yuba City
- 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
- 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
- Get the path to a Drupal module or theme
- IE doesn't load stylesheets / IE doesn't load conditional comment stylesheets
- IE6 PNG Fix
- 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
- 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
- PR/Marketing Internship Opening
- custom jQuery accordion menu function for drupal primary menu
- South Street offers empty storefronts to artists
- 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
- Inaugural BarCamp Philly to be held November 8
- Treehouse of Horror: Canary Pumpkins Rule the Night
- First Person Festival
- calibrate your monitor
- 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
- 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
- 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
- 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!
- 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
- 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
- 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?
- My loony bun is fine, Benny Lava.
- Dispatches from Google chat: Jon Stewart strikebuster edition.
- The Museum of Baby Heads
- WING TIPS: Canary's Favorite Things - Cool Gifts for the Holidays
- Best Potential Client Inquiry Ever
- White Board: Stinky
- Just a few vacation photos
- machines machines machines... featured on FOX Philadelphia!
- 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
- 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
- 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
- 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.
- His Dark Materials musings in this week's Philadelphia City Paper
- Paris by night
- Canary Nabs Philadelphia City Paper Choice Award
- 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!