Smashing Newsletter: Issue #31
This newsletter issue was sent out to 54,859 newsletter subscribers on April 12th 2010.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.
Table of Contents
01. Solarized: Precision Colors for Your Code2
02. GuideGuide: Columns, Rows and Midpoints Panel for Photoshop3
04. Plum, Grape, Lavender… or Just Purple?5
05. Pixel Patterns With CSS6
06. Roots: A New WordPress Starter Theme7
07. Inspirational Books for Designers and Artists8
08. The Art of the Title Sequence9
If you spend a lot of time writing code or using the command terminal, then you may have already found yourself needing to adjust the default colorization of code. How do you find the perfect balance of colors? Moreover, what if you’d like your whole team of developers to use a consistent, optimal color scheme? You need colors that are easily legible, while still providing enough contrast, both with the background and each other, so that the different parts of your mark-up are easily distinguishable.
Enter Solarized10. Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones” and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles. They’ve been tested on calibrated, uncalibrated and miscalibrated monitors and under various lighting conditions to be highly visible in different contexts. The schemes are currently available for Vim, Mutt, Xresources, iTerm2, OS X Terminal, Adobe Photoshop Palette, Apple Color Picket Palette and GIMP palette. (cc)
If you’ve been working with grids and InDesign for a while, then you may have wondered why Photoshop doesn’t have a grid tool similar to InDesign’s. But thanks to Cameron McEfee, such a tool now exists. GuideGuide11 is a columns, rows and midpoints panel for Photoshop CS4 and CS5. It features a midpoint-seeking function, and it enables you to create margins, rows and columns as desired. Punch in the numbers of rows and columns you need, set the gutter widths, click “Create Guides,” and the grid will be created on the canvas using guides. The midpoint seeker provides you with three options: horizontal middle, vertical middle, and both horizontal and vertical middle. Both the midpoint-seeking function and the rows and columns function can be applied to whole documents as well as to selected elements.
The panel is reliable and easy to use. Just download the ZIP file, unzip it, and drop the GuideGuide folder in Applications — Adobe Photoshop — Plug-Ins — Panels on a Mac, or Program Files — Adobe Photoshop — Plug-Ins — Panels — in Windows. Then restart Photoshop, and you’ll find the panel ready to use in your extensions area. Alternatively, you could use Russel Brown’s GuideGuide Installer12 (.zip) and check out the quick video tutorial13 (.mov) on using the tool. (sp)
Gender and color is a topic that has been debated for decades. The infographics on “Gender and Color15” take a close look at the results of studies of the issue, with the aim of identifying certain colors as feminine or masculine. The results imply certain general conclusions about the color tastes of men and women. It turns out that blue is quite popular with both men and women alike. Why is that? Blue is often associated with clean water, blue sky, authority and truth: how much more persuasive could it be?
Take your time skimming the infographics on the website. Check out where your favorite color ranks. Do you agree with the names and categories given to colors by males and females? Let us know on Twitter (please use the hashtag
Pixel patterns can add interest to a design element, whether it’s the background of a website or a particular item. Interestingly, creating patterns with CSS (i.e. without images) is apparently possible. The tricky part is that doing this manually is not exactly easy.
Patternify16 changes all that. Sacha Greif’s tool lets you create patterns with up to 10 square pixels with multiple colors. A few patterns are built in (including wavy lines, dotted lines and basketweave) that you can use or adapt. To use the tool, just draw your pattern on the grid (use the cursors to limit the drawing surface and control the tiling), and download either the CSS or PNG file. You can also get a short unique URL to share with other pattern addicts. (cc)
Plenty of WordPress starter themes are out there, yet most of them use HTML4 or XHTML. If you’d like to make your theme more semantic and make the CSS easier to maintain, you could give HTML5 a try. In fact, we’ve already converted WordPress 3.0’s default TwentyTen theme to HTML517, but you could go even further.
As far as the Roots WordPress theme18, in fact. Roots comes in several flavors: HTML5 Boilerplate, Blueprint CSS or 960.gs, and Starkers. When activated in a fresh WordPress installation, it gives you dummy content to work with, and it is ideal for blogs and brochure websites. The designers have also built in features to make WordPress’ code output cleaner, including moving static theme assets to the website’s root and heavily modifying
wp_head. Don’t forget to add an HTML5 shiv19 for users with older versions of IE, so that they can experience the full website, too. (cc)
When it comes to finding inspiration, every little bit helps. One way is to have a good library at home. The books don’t all have to feature appealing pictures or works by other artists. What about books with good stories that plant ideas in our minds? On Designers & Books20, you will find short reviews of 797 books, presented by 60 designers from different disciplines and different countries. Each designer introduces one or more books that have influenced their ideas and values. Furthermore, you’ll find members who have created must-read lists for different disciplines in design.
As you read through the write-ups, you can easily add your favorites to a reading list and email it to yourself or print it out. Designers are regularly added to the website, and you can follow the blog to avoid missing out on any. So, if you have some space left on your bookshelf, let yourself be inspired by the great choice offered on this website. (as)
This Web resource of film and television title designs from around the world is free to the public and updated monthly. The Art of the Title Sequence21 is dedicated to the brief history of title design, and it features opening titles for film and television. High-resolution thumbnails from the titles are presented, the works are extensively cataloged, and the variety of tools allow you to compare, analyze and view items in new and experimental ways.
The works, which are intended to foster creativity, are accompanied by stills and video links, interviews, creator notes and user comments. Also, check out A Brief History of Title Design Video22, a short film that features some memorable and remarkable title designs. Hats off to all the designers who have created and are still creating excellent title sequences! (il)
The authors are: Vitaly Friedman (vf), Iris Ljesnjanin (il), Thomas Burkert (tb), Stephan Poppe (sp), Anne Sundermann (as), Cameron Chapman (cc).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 #a8
- 10 http://ethanschoonover.com/solarized
- 11 http://www.cameronmcefee.com/guideguide/
- 12 http://www.russellbrown.com/images/tips_downloads/GuideGuide_Installer.zip
- 13 http://av.adobe.com/russellbrown/GuideGuide_SM.mov
- 15 http://blog.kissmetrics.com/gender-and-color/
- 16 http://www.patternify.com/
- 17 http://www.smashingmagazine.com/2011/02/22/using-html5-to-transform-wordpress-twentyten-theme/
- 18 http://www.rootstheme.com/
- 19 http://code.google.com/p/html5shiv/
- 20 http://www.designersandbooks.com/
- 21 http://www.artofthetitle.com/
- 22 http://www.artofthetitle.com/2011/03/14/a-brief-history-of-title-design/