If you’ve been following our blog at all, it’s probably no secret that we enjoy listening to music around the office. Here’s a short selection of industry record labels that we think are the bees knees, design wise…

Epitaph (est. 1980)

Warp (est. 1989)

Hyperdub (est. 2004)

Too Pure (est. 1990)

Reprise (est. 1960)

Record Collection (est. 2004)

Motown (est. 1959)

Plugins are a great resource for filling functionality gaps. But we don’t always come up against problems that are easily fixed by installing one plugin. Here’s a list of some great combos that have helped me solve some interesting problems.

1.) Mingle Forum + Peter’s Login Redirect

Need to get a forum up quick and make registration painless without loosing your audience to the WP dashboard? Registering your guests through WP is great for simplicity and management purposes, but you don’t necessarily need them mucking around in the WP backend when all they need is to register and join the discussion. Mingle Forum is a great basic forum plugin that comes with several skins and full group/category management features. It even has built in ad support. The only problem is that the registration process drops the registrant into the WP dashboard instead of the forum. Enter Peter’s Login Redirect, which, like it sounds, allows you to redefine the URL that a user is sent to when they complete registration.

2.) Adminimize + FV Clone Screen Options

This duo is great for reining in sub-admin users and simplifying the dashboard. Adminimize is an incredibly comprehensive tool for setting specific permissions to sub-admin users, and FV Clone Screen Options is handy for setting your screen options (i.e. hiding sensitive areas in the dashboard) and then cloning those settings for existing and new users.

3.) WordPress Mobile Pack + Email Post Activation + PostMaster

For the mobile quick post: this trio sets up a way for users to post pictures from their cell phones directly to the posts page. WordPress Mobile Pack is a well supported plugin with built-in browser switching and device adaptation, among other things. Email Post Activation readies your blog to receive posts from an email address (to learn more, check this from the WordPress Codex). PostMaster parses your email-posts, stripping the html and grabbing just the plaintext portion for the post, giving you options to resize pictures (handy for creating on-the-go thumbnails) and define the category of the post through the subject line.

There you have it. Three handy examples of plugin combos that solve problems. If you have a favorite combo, let me know about it!

When developing a WordPress blog or website for a client, the issue of security takes on extra meaning. WordPress, being open source, certainly requires extra vigilance on the part of users and developers to maintain their own secure sites. Add a client into the mix, and you’re adding another layer of security. You certainly want to direct the client to get the most out of maintaining their website without exposing them to sensitive areas where they could do damage.

I’ve put together this list of invaluable plugins that will both bolster the overall security of your website AND add much need controls when you hand an editor account over to your client. For more on security, straight from the horse’s mouth, visit http://codex.wordpress.org/Hardening_WordPress.

1.) WordPress Firewall 2

http://wordpress.org/extend/plugins/wordpress-firewall-2

This nifty plugin adds a whole host of security filters and allows you to whitelist IPs. Granted, it maybe little constrictive if you’re developing a community blog or a site with a lot of sub-admin accounts, but it’s a must install for simple CMS client sites or single-user blogs.

2.) WP-DB-Backup

http://wordpress.org/extend/plugins/wp-db-backup

Just like it sounds, WP-DB-Backup gives you the ability to easily back up your core WordPress DB tables. If you need explaining why this is important, I’d take the time to read up. This article is a good start.

3.) Secure WordPress

http://wordpress.org/extend/plugins/secure-wordpress

This plugin removes a lot of sub-admin update options, removes error information on the login page, adds index.html to the plugin directory, and blocks bad queries, among other things. Basically, it tightens access to core files.

4.) Secure Admin

http://wordpress.org/extend/plugins/secure-admin

This plugin rounds out the security heavy-hitters. From the official WordPress plugin page: secures login and admin pages using private or shared SSL. ‘Nough said.

5.) Verification Code for Comments

http://wordpress.org/extend/plugins/verification-code-for-comments

Not as much as security issues as piece of mind for you and your client. If you are building into the site any pages or posts that accept comments, make sure you install this plugin or something similar to filter out spam comments. Otherwise you and your client’s inboxes and comment logs WILL get flooded, trust me.

6.) WP-Optimize

http://wordpress.org/extend/plugins/wp-optimize

This plugin aids you in your quest for security by making it much easier to clean up and optimize your DB without having to use cPanel and/or phpMyAdmin. You can clean out old post and page revisions and empty your comment/post/page trashes easily, all from the comfort of your dashboard.

7.) WP Security Scan

http://wordpress.org/extend/plugins/wp-security-scan

Usefully for pointing out security flaws that you might have missed, WP Security Scan looks for vulnerabilities and suggests corrective actions. I like this plugin, and thankfully it’s developer plans on taking it further.

8.) Hide Update Reminder

http://wordpress.org/extend/plugins/hide-update-reminder

This handy plugin simply hides all updates, version or plugin related, from anyone below the user role of admin. Updating the WP version, plugins, and themes should be closely monitored by the admin – a client who doesn’t know what they are doing can screw things up pretty quickly when these things are left visible on the dashboard. You should definitely continue to update as needed, as outdated plugins can leave you susceptible to security vulnerabilities and performance issues. Just don’t leave updates in the hands of your clients, whatever you do!

9.) User Role Editor

http://wordpress.org/extend/plugins/user-role-editor

This plugin is simply an easy way to define what roles and capabilities your sub-admin accounts have access to. It gives you a check box list of capabilities, and you simple click what each role can do, plain and simple.

10.) Multiple Content Blocks

http://wordpress.org/extend/plugins/multiple-content-blocks

An optional plugin, Multiple Content Blocks adds an additional WYSIWYG editor to your pages. Very useful if you have code or style edits that you don’t want your client to mess with. After installing the plugin, you add a single line to page.php, <?php the_block(‘blockname’); ?>, and voilà!, an extra editor.

11.) Technical Support

http://wordpress.org/extend/plugins/technical-support

Optional as well: this plug in gives your clients a technical support dashboard, from where they can submit support tickets that get emailed straight to you.

Happy, safe and secure developing!

As far as delivery mechanisms for typography go, you can’t find a more alluring medium then the sleeves of 12″ records. Here are some top notch examples of album typography over the years, in no particular order, from my personal collection. May they spark your imagination!

Talking Heads – 77 (1977)

Clinic – Internal Wrangler (2003)

Interpol – s/t (2010)

the xx – s/t (2009)

Spiritualized – Songs in A & E (2008)

Four Tet – Everything Ecstatic (2005)

the Hold Steady – Boys and Girls in America (2006)

Sons and Daughters – the Repulsion Box (2005)

Simian Mobile Disco – Attack Decay Sustain Release (2007)

the National – High Violet (2010)

King Crimson – Starless and Bible Black (1974)

the Walkmen – You & Me (2008)

the Stone Roses – s/t (1989)

Radiohead – In Rainbows (2008)

Peter, Paul and Mary – Album 1700 (1967)

the Books – the Way Out (2010)

No Age – Nouns (2008)

Junior Boys – Begone Dull Care (2009)

Stereolab – Aluminum Tunes (1998)

Spoon – Gimme Fiction (2005)

Here’s a great gift idea, if you’re into the DIY, homemade thing. A full-page size 2011 day planner, perfect for you or an on-the-go friend! All you need is hardback book, one that you don’t mind disemboweling (5.5″x8.5″, 3/4 of an inch thick is ideal), 80 sheets of semi-heavy weight paper, a printer, a needle and some thread, a pencil and a ruler, and some good quality craft glue. We’ll provide the rest! If you’ve followed our design blog at all, we’ll be making the 20xx Day Planner described here, but I’ve already laid out the pages for you and provided them in a handy downloadable zip file.

The Print

As mentioned in the original post, I like to use used paper whenever possible. Visit your local copy/print store and see if they have any used stock they’d let you have. Next, download the zip file and unzip it to the desired location. You’ll find 20 PDF binders, numbered and lettered either a or b, and a readme notepad file containing the printing instructions in depth. If you follow the instructions correctly, you’ll end up with 20 sets of four pages each.

The Fold and Sew

Starting with the first binder, fold all four pages together in half, landscape-wise, so that Jan. 1st is in the top-left corner, like the picture to the left. Holding the binder after you’ve folded it thusly, you should be able to leaf through it like you would a book and the dates should follow chronological order. Do this with all 20 binders. Keeping them in chronological order as you do this will save you the trouble of rearranging them later when you assemble the planner.

Grab the Jan. 1st binder once again – it’s time to sew the binding down the fold you just made. Grab your pencil and ruler and mark the even inches going down the inside of the fold and the odd inches on the outside. Now, with your needle and 20″-24″ of thread, sew the length of the fold, using the marks you just made. Do this will all 20 binders, keeping them in order as you go. After you sew each binder, make sure you return it to it’s folded state.

The Bind

You should have, at this point, 20 folded, sewn binders, starting with Jan. 1st in the top left corner and organized in chronological order. The next step is to grab your 5.5″x8.5″x3/4″ hardback and, carefully, rip out the pages so that the spine and cover remains in good, sturdy shape. Using a carpet knife or razor can make the job go a little more quickly, but just be careful not to slash the spine. Your local library is a great source for finding a used book for this purpose – most have a free book section.

Apply a good amount of glue to the inside of the spine of your book, and then apply a thin strip of glue to each sewn signature and place them, still in the correct chronological order, centered in the hardback cover. Take a moment to check for and clean up any excess glue. To let the glue set, I like to place the planner spine down between some books on a bookshelf like the picture to the left. Don’t wedge it in there to much, or else the glue will dry in a rigid way and your bind will be weak and possibly uneven as a result. Let the glue set overnight, or at least over the course of a few hours.

Once the glue has adequately set, you’re free to give it a leaf-through.

This is a quick and cheap way to bind, by the way. If you’re looking for something a little more professional/substantial, there’s a huge database of resources here, and I’m particularly fond of the Secret Belgian Book Binding Technique as well. Putting a little extra work into the binding is

And there you have it: a 2011 day planner that you can call your own or give as a gift. Be sure to check out my other posts, and thanks for stopping by.

It’s easy to see why Twenty-Ten is the default theme for WordPress. It’s simple, well-organized, and easy to customize. It’s got 6 widgetized areas, works in all browsers, and, since it is the default, has plenty of support out there should something go awry.

Because it’s so basic and customizable, it’s a great theme to turn into a basic CMS. Follow these simple steps, and you’ll have a basic CMS with powerful potential.

We’re going to assume that you already have a fresh install of WordPress on your server with Twenty-Ten set as the active theme.  First thing to do: delete the only post and comment, the examples that come with WordPress, permanently.  Next we’re going to set up a new static home page.  Create a new page, called it “Home”, disable comments, and ublish. While you’re at it, open up the “About” page and disable comments there as well.  Now,  go to Settings–>Reading and tell the front page to display a static page, and select the new “Home” page to be the static page.  Save changes.  Note that you can also get into the Reading settings to set a page as the default posts page, in the event that you or a client want to add blog functionality to the site later.

Now get into the Appearance–>Editor and click on Header.php from the list on the right.  Scroll down in the Edit Themes window almost to the bottom – remove the bit of php code between <div id=”site-description”> and the closing tag for <div id=”branding”>.  This removes Twenty-Ten’s header image and leaves you with a nice, clean empty header.  While you’re at it, FTP to your site and delete the entire “headers” folder from Twenty-Ten’s images folder.

Appearance–>Editor one more time: this time click on Sidebar.php from the list on the right. Remove all of the list items, <li>s, that appear right below the line if ( ! dynamic_sidebar( ‘primary-widget-area’ ) ) : ?> and above the line <?php endif; // end primary widget area ?>. This disables all default hard-coded sidebar widgets, giving you a fresh palette. From here on out, you can add widgets as normal, by going into Appearance–>Widgets.

And finally to make a few adjustments to the stylesheet. Get into Appearance–>Editor once more and click on the Stylesheet (style.css). Add height:130px; (or your own desired height) to #branding and make padding:0; for #wrapper.

Expecting more?  That’s basically it.  You now have a simple WordPress CMS with two static pages that is completely customizable and ready to style.

WordPress has become my goto CMS. First off, it is, in my experience, by far the easiest to install (see the Famous 5-Minute Install, which I’ve managed to get down to between three to four minutes). Secondly, it’s open source and structured on MySQL and PHP, so it’s already powerful enough to run virtually any type of site, any size. And thirdly, the client UI and development environment are easy to access and use.

When installing a fresh WordPress site, there are some mostly minor modifications that I’ve gotten into the habit of implementing right off the bat. Irregardless of what type of website you’re going to ultimately build, which theme you’re going to use or who will be maintaining the content, these includes will be useful in a variety of ways.

1.) Prepping the Canvas

* {margin:0; padding:0;}
html, body {height:100%;}
focus {outline:0;}

If you have even just a novice’s understanding of web design, you know that getting your site to render correctly in all of the major browsers is a big pain in the neck. You’ve already overcome this hurdle somewhat by choosing to use WordPress: if you’re going to pick one of the many themes that WordPress has to offer, a vast majority of them are already cross-browser compatible or very close to it. There’s a good chance that you’re going to want to manipulate the html and css of your theme, though. I call this little set of css rules the Canvas Resets. Firstly, * {margin:0; padding:0;} resets all margins and padding in your site to 0. This is useful because discrepancies of up to 16px can occur in Internet Explorer and other browsers. Next, html, body {height:100%;} sets your canvas to 100% height. This gets overlooked, but no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. Including this line will allow you to set the height of all your elements within the body and html tags to percentages. Lastly, focus {outline:0;} is mostly based on a pet peeve of mine. It has to do with that little dotted line that shows up when you click on a button or link on some websites. I hate it. Setting your focus outline to 0 eliminates it.

If you are planning on using a theme as-is and out-of-the-box, you’ll probably find that the stylesheet(s) included with it probably already have some variations on these, so look into it before you go adding things that might be redundant.

On a side note, these very simple css reset methods are just the tip of the iceberg in the ocean of possibilities on the subject. Some folks out have developed pretty elaborate, and foolproof, css reset snippets. Check out Eric Meyer’s CSS Reset.

2.) Google Analytics

No site should be without it. It’s free, it’s easy to install, and the data it provides is absolutely priceless. Google Analytics, if you’re unfamiliar, is, to quote the site, an “enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness.” It allows you to access detailed information about who’s been visiting your site, where they came from, how long they stayed, what kind of browser and screen resolution they viewed it in, etc. etc. etc. You can also set up “goals” that allow you to track visitors’ progress through the site. I could write a whole post or two about Google Analytics, but thankfully for me a million people before me already have.

3.) Debugging Snippet

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

I came across this handy debugging script a while back: thanks goes out to Chris Page. It creates color-coded lines around all of your elements, helping you to visualize your html layout and “depth”. It’s very useful while in the design process, and then you can simply wrap it in comment to hide it when you’re done.

Of course, Firefox’s Firebug is quite useful, too.

4.) Pick an SEO plugin

It’s all the rage and nobody seems to understand exactly how to acheive it! Still, we all need to start somewhere, and the sooner the better. There are several WordPress SEO plugins that I would recommend for your new site. Research which plugin best suits your site’s needs, and install and configure that bad boy. Read this for a succinct run-down on WordPress’ SEO capabilities and limitations. Never think, though, that putting keywords into your header is any kind of substitute for good old fashioned promotion and marketing.

5.) Favicon = Cherry On Top

This include might come later in the game, but having a favicon for your sight has become almost mandatory. What’s a favicon?! That’s the little thumbnail image you see, for example, when you look up at the tab in your browser for the post you’re reading right now. There are a few favicon generators out there. I like to use Dynamic Drive’s. Just upload the image you want to make into a favicon – .jpg if its got a background or .gif/.png if the background is transparent – and it will spit out your favicon, all ready to go. Next, FTP your new favicon to the main directory of your site, where your wp-admin, wp-content, and wp-includes folders are, and then add this line to the head portion of your WordPress site:

<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico” />

Favicons are a cool way to identify yourself in the tabs of your browser and one more (literally) little marketing tool that can help you, or your client, establish some brand identity.

Thanks for reading, and happy blogging/CMSing!

It’s estimated that there are close to 20 million home-based business owners and nearly 30 million telecommuters in the US. If you’re one of them, it’s high time you realized that saving energy while at work isn’t just an option, it’s a responsibility. Not to mention it can save your business money. I’ve come up with 10 savvy tips that you can use to reduce your business’s environmental impact.

1.) Don’t Print This

Learn to keep your records electronically. When you make an online purchase, when you register your software, when you e-file your taxes: most online vendors and services provide a printable version and an alternate, such as a PDF. Take the time to set up a file system on your computer and get in the habit of storing those files electronically instead of printing them. While you’re at it, if you’re not already doing it, you should learn how to and actively practice the art of the back-up. And I don’t mean to CDs, which just create more waste. Back-up to an external hard-drive, flash drive, or a RAID system that’s configured for back-up. There are also several great remote back-up services out there.

2.) Bill Electronically

I tell clients that I can send them invoices and deliverables in PDF form, and usually they don’t even blink. It’s become much more common practice, and most everyone now is comfortable doing business this way. I have my own deliverable system in place, but there are several services out there. Pancake! is a great new online billing system that you can interface with your business and handles almost any deliverable you can think of.

3.) Support and Do Business with Green Companies

Do a little research into the companies that you give your business to. There are several great hosting companies with great environmental policies. One is Oregon’s Think Host, who offer top-notch, reasonably priced web hosting services, are carbon-neutral (100% wind and solar), and who even plant a tree for every new client they get. And if you must print, because sometimes graphic artists and designers have to do that, try to find a green printing service – one that uses soy based inks and recycled paper.

4.) Power Down

There’s been an ongoing debate about this one, but I’m here to tell you that shutting down your computer(s) when they’re not in use DOES save energy. The technology has advanced far enough that powering down your computer on a regular basis won’t harm it. On the contrary, the equipment will ultimately last longer. According to the US Department of Energy: “Most PCs reach the end of their ‘useful’ life due to advances in technology long before the effects of being switched on and off multiple times have a negative impact on their service life. The less time a PC is on, the longer it will ‘last.’ PCs also produce heat, so turning them off reduces building cooling loads.” There is also phantom energy loss to consider. This is the energy usage, albeit a small amount, that occurs when something is turned off but still plugged in. Using a “smart” power strip is one way that can help reduce or eliminate this slow leak of energy.

5.) Sign Up for Alternative Energy

If your state has incentives for alternative and/or renewable energy, look into it. In Washington, you can opt to get all of your home’s energy from wind and solar. If you’re not sure about your state, check out the Database of State Incentives for Renewables and Efficiency (DSIRE) site to find out what programs are offered.

6.) Find Out if a Stand-Alone System Is Right for Your Business

A one-up to #5: see if there’s a way that you can produce your own electricity to power your business. The US Department of Energy offers a great introduction, and there are countless resources online besides that explain, for example, how to make your own hydroelectric generator using a 5 gallon bucket. You don’t have to go off the grid completely, but you maybe be able to take a few important first steps.

7.) Reduce Trips for Supplies

If you need something from the office supply store, first consider how badly you need it, if it need it right away, and then think about how you can make the trip worthwhile by taking care of other things while your out. One of the advantages to working from home is that you can kill two birds with one stone: business business and personal business. Driving? I have a better idea: walk, ride your bike or use public transportation to do business errands. And an even better idea is to reduce your reliance on office supplies in the first place! Refer to #1 and #2, and try to think of creative ways to reuse or eliminate the need for other work related supplies, as much as possible. If you haven’t already checked out my post on how to make your own day planner, well here’s a good opportunity. I’ve been bringing used and discarded pads of paper to write and plan out ideas to my client meetings for years, and I can’t remember the last time I actually bought a pad of paper from the store.

8.) Choose Energy Star

Consider replacing your computer equipment with equipment that is Energy Star qualified. There’s a lot of resources for this out there. Check Energy Star’s site for starters. When buying new equipment, look for the Energy Star qualification.

9.) Connect with Others

Connect with fellow energy savers online. Follow a blog or join in a conversation in a forum about energy saving techniques. With technology evolving so rapidly, there is a constant stream of new information out there on the subject. And with the need to save energy and reduce our carbon impact growing more and more all the time, there is a lot of brain power being directed towards energy conservation. Again, the US Department of Energy’s blog for energy savers is a good starter, but don’t stop there. Also – network locally and find people in your area with the same concerns as you.

10.) Get More Vitamin D

Rely less on artificial light and move your office to a space with real sunlight, if you haven’t already. Less artificial light equals less energy usage equals less environmental impact, and chances are as a homebody you could probably use all the sunlight you can get. You can also use the sun to help regulate your heating bills. During colder months, allow the sun to help heat your home office by keeping blinds or drapes open during the day, and retain the heat overnight by closing the blinds after dark. In the summer, leave windows cracked or open during the cooler morning hours and shut them and leave them shut right before it begins to heat up outside to retain the cool.

Striving for less environmental impact is often hard work, but it’s always rewarding. Keep in mind that you’re not just benefiting yourself – you’re also helping companies that support green initiatives and your setting a good example for those you work with and for.

Here’s a very simple and quick tutorial on how to turn your photos into vectors using Photoshop. Truth is, creating vectors can take a really long time, depending on how much detail and depth you want to put into it. This tutorial is designed to teach the basics, and you’ll end up with a simple vectorized photo. By learning these basics and with some practice, you can go on to create complex vectors from images.

We need a good photo to start with. Try to pick one that is relatively simple in composition. By this I mean simple subjects and colors – an image that’s not too complicated. I’ve chosen a picture I took of a cloud rising over a forest. Clouds are a great subject to get started with because of their simple shapes and relatively monotone colors.

Open up your photo in Photoshop (or use my cloud, if you’d like) and copy the image layer twice (right-click on the layer, Duplicate Layer…), so that you have three layers of the image, one of which is a locked background image. Then select the background layer and fill it with white (Edit, Fill…, White). When you’re finished, you’re screen should resemble the screenshot to the right. I’ve named my layers Cloud and Cloud copy, but you can name them whatever you want, just so long as there are two and you designate one of them as the image you’re going to posterize. Once we’re set up like the picture to the right, we’re ready to start manipulating our photo.

The first step is to blur the image just a little bit. With the Cloud copy layer selected, apply a smart blur with a radius of 3 and a threshold of 75 (Filter, Blur, Smart Blur…). This will dull the image’s sharpness just a bit, barely noticeably. Next, we posterize. For my cloud photo, level 10 will work just fine (Image, Adjustments, Posterize…). If you’re using a different photo, the appropriate level will vary. What you want is a level that breaks up the colors into nice, defined chunks so that they’re easier to work with. Once you’ve posterized the image, you should have something similar to the screen shot on the left.

At this point, I like to add another layer just above Cloud copy and fill it with 50% gray (Edit, Fill…, 50% Gray). You’ll see why soon! Create the layer and then hide it, for now, by clicking on the eye to the left of the layer in the layers panel.

The next tool we’ll use, and the one that you’re going to get the most mileage out of, is our handy pen tool. The pen tool is great for creating custom shapes and “tracing” the contours of objects in an image. Make sure you’re using the default pen tool, and make sure it’s set up to create paths. To do this, look under the Edit menu tab and just to the right of the pen tool icon in the upper left-hand corner of your screen, where there are three boxes: make sure you select the one in the middle that resembles a box with the pen tool inside of it. Now, click a series of points that follow the shape of the forest, and then complete the path by click off the image to the right and then around the bottom, like I’ve done in the screenshot to the right. When you click on the first point you made, it will complete, and therefore close, the path. You can add shape to your path by switching to the convert point tool (right-click on the pen tool, Convert Point Tool). With the convert point tool selected, you can click and drag the individual points that you made in the path and give them shape. This is a process you’ll want to play around with and get to know well as it’s instrumental in creating high quality, professional looking vectors.

Once you have the path’s shape fit to the forest, the next step is to fill the path in a new layer. First, create a new layer right above your %50 gray layer and then make sure that you select it. Grab your foreground color picker and chose a nice green from the forest. I chose #38551C. Then select the pen tool again, right-click within the path, and click “Fill Path…” and set the contents to the foreground color. Press “OK”, and your path is now green. Now you can erase the path by right-clicking anywhere on the image and clicking “Delete Path”. Your photo should look a little something like the screenshot to the left.

Here’s where the grey layer comes in handy. By unhiding it, you can see the progress you’re making with your filled path/layers. Cool, huh? Use it periodically to see where things are situated. This is especially nice when doing more complicated, more involved vector work, as it can be difficult to manage lots of layers at once. For now, let’s hide it again and move on to the sky.

The forest is the foremost path of our vector, and the sky is going to be the backdrop, with the cloud in between. So, we’ll create the sky next. Make a new layer between the gray layer and our forest, make sure it’s selected, and let’s create the first layer of sky. Following the example on the left, use the pen tool again to make a big triangle within the bottom most blue portion of the sky. Then grab the convert point tool again. You’re going to concentrate on just the top point of the triangle.

This is great practice with the convert point tool. When you click and drag that top point, you’ll see that it bows the path on either side of the point, allowing you to control the curve. You can further alter the curve and shape by then clicking and dragging the new set of points that appear once you’ve altered the original point for greater accuracy. Get the path set up like mine is in the screen shot to the right. Once you’re satisfied, double check to make sure that your empty layer between the gray and forest layers is selected and fill the path like you did with the forest, selecting the color with your color picker.

Fill out the rest of the sky in this manner, making sure each time that the blank layer you create to be filled is just above the gray layer. Photoshop layers will overlap in order from top to bottom in the layer panel: a good thing to always be aware of during the vector-creating process. When you are finished, you should have something similar to the screenshot shown to the left. At this point, you can and should merge all of the layers that make up the sky – hide all layers that have nothing to do with the sky, make sure one of your sky layers is selected, and then merge the visible layers (Layer, Merge Visible). Looking good!

All that’s left to deal with is the cloud. I find it easier to hide the layers I’ve already completed at this point so that I can concentrate on the task at hand. Let’s create a new layer between the forest and sky layers – everything that has to do with the cloud will fall between these two layers – and begin making paths again.

I find it easy to start with the middle and work my way out. Grab your foreground color picker and pick the whitest, most inner part of the cloud’s color, in this case #FFFFFF. Then select your pen tool again and, much like you did with the forest earlier, begin to “trace the inner white part of the cloud like I’ve done in the screenshot to the right. Whatever you do, just make sure that your path extends below where the forest path resides, so that you don’t have any unsightly gaps in your final vector. You can unhide the forest layer and the gray layer at anytime during this process to check and make sure this is the case.

Then, grab your convert point tool and, much like you did with the forest path, shape this path to match the image. When you’re satisfied, fill the path within the empty layer you created with the foreground color. Continue to work your way out within the cloud, creating a new layer just above the sky layer each time. Keep unhiding the gray layer periodically to see your progress. As I said before, this is a very useful practice, especially as the complexity of a vector project increases.

Almost done! By now you should be somewhat comfortable working with the pen tool. You can go back at any point and add details, positioning the layers in the proper stack order so that they are visible. As you are probably figuring out, a lot of time and detail can go into creating vectors. I’ve gone back in and added a few gray highlights to the cloud. When you’re satisfied with the look of your cloud, merge its layers like you did with the sky.

Unhide the forest and sky layers to show all of your vector work. Delete the white background and the original two layers, Cloud and Cloud copy, leaving you with the sky, forest, and cloud vectors broken out into their own layers. At this point, you can merge the visible layers if you want.

Voila! A vectorized photo!

Working with the pen tool is also a useful way to clean up logos, clip people from photographs, and, needless to say, create graphics in both Photoshop and Illustrator. Practice makes perfect, so keep honing those pen tool skills. You’ll be a pro before you know it.

My trusty daily planner is always with me. It serves as my guide during work hours and as my brain-download when I have an idea. Being a bit right-brained, I need a day planner with big spaces – something I can doodle and sketch in as well as keep track of meetings, teleconferences, birthdays, and all that other important stuff. Most of the day planners that I thumb through at the store have a week on each page, so for a standard 5 x 8¼” planner this means you get about 2.5″ by 1.375″ writing space per day. Not good enough!

I’ve been designing and building my own daily planners for a few years now. I originally got the idea from a DIY design book that included a chapter on how to design and make your own bound blank notebooks. It’s a great way to save some money, recycle some paper, and fave fun designing something useful. It’s also a great on-hand example of your design skills to carry around.

This tutorial assumes that you have a basic working understanding of Adobe Photoshop, but the process doesn’t even actually require you to use Photoshop, so anybody should be able to make their own planner.

The Prep

The supply requirements are fairly simple. You’ll need paper, a used hardback book that you don’t mind disemboweling, glue (PVA Glue or a contact cement like PowerPoxy will work, or something similar), a needle and thread, a ruler and pencil, and a reliable printer with a good supply of ink. I also like to find a good online calendar with holidays to use as a guide. This one, for 2011, is fairly straight-forward and easy to reference.

This is a good chance to recycle some perfectly good materials that would normally end up in a landfill. I like to find old stock of letter-size notebook, graph or ledger paper to use. Of course, you can go with any size you want, as long as it’s all the same and you can find a way to feed it through a printer. You also might want to consider the weight. A heavier bond paper will be more durable and take your creative abuse a little more gracefully. You’ll be printing, and eventually writing, on both sides, so keep that in mind as you select your stock.

They way my planner is set up, one sheet will cover 4-5 days, so you’ll need around 75 sheets of paper. This will give you a little extra, in case of mistakes. You may be able to talk your local print shop or office supply store out of some paper if they just plan on tossing or recycling it. Again – great opportunity to divert needless waste and create something useful out of used materials.

The cover can be made from a book, or you can make the cover yourself. There are tons of useful tutorials out there on how to bind your own books. The DIY Bookbinding tutorial is quite useful. You can also, in most places, visit a print shop or a Kinko’s and there’s a good chance they provide some sort of book binding service. I’m not going to go into tremendous detail about bookbinding here because there is such a wealth of information out there and many different ways to do it. Suffice to say that you can really get creative here: I’ve seen book covers made out of wood, old vinyl records, sushi rolling mats, cardboard beer bottle six pack cartons, flattened tin cans, you name it.

For the purposes of this tutorial: I like to pick up a hard back from my local library’s give away bin with the intention of ripping it’s pages out. You can find a lot of personality in your local library cut-out bin. Old romance covers, interesting science manuals, etc. I love the worn look, but just make sure that it isn’t too bent out of shape and weak. If you love your planner like I love mine, it’s going to go through a lot in the next year.

It needs to be around 3/4 of an inch thick, or somewhere between 100 and 150 pages. Lots of hardbacks are already the right dimensions in regards to height and width, around 5.5 x 8.5 inches, and we’re going to be folding our letter-size paper in half, so that’s a good thing. Last year I chose to us H.G. Wells’ The Outline of History, and it has served me well.

The Layout

There’s a lot going on here logistically. We’re going to use half of one side of a sheet of paper to represent one day, two if it’s the weekend. This means that each full sheet of paper will have four or five days to cover. We’re also going to be making “sewn signatures” by folding four sheets of paper in half and then sewing them together down the spine. This comes later, but knowing now will help you visualize the layout process.

Working with sewn signatures presents a little bit of a puzzle to solve. We need to get the order of the dates correct, and since we’re working in sets of four folded pieces of paper, we need a way to visually map the dates and where they will be printed. At first, this may seem a simple task – and it will be once you conceptualize the pattern – but we are dealing with a bit of a basic algorithm here.

Fig. 1 - Click to view large

This series of diagrams (Fig. 1-4) shows how to map out the dates for each four page, sewn signature unit, starting with January 1st through 18th. Imagine that the left-hand column of rectangles represents a stack of four sheets of paper, face up. The right-hand column, then, is that same stack flipped over and facing down. At this point it also helps to visualize this by making a dummy: fold four pieces of paper in half together and hold it like you would a book. If you’re looking at the “cover,” then you’re looking at the bottom right page in Fig. 1, our starting point. More specifically, you’re looking at the right half of the back of that sheet of paper. To further complicate things, we have weekends. I’ve chosen to have Saturday and Sunday share a page, but it’s not necessary. The year we’re modeling happens to start on a Sunday (hurray for New Year’s falling on a Saturday!), so, as you can see, our starting point is the top half of the right half of the back of the bottom sheet of paper.

You still with me?!

Fig. 2 - Click to view large

Once you wrap your head around all that, it’s a simple task of planning out each sheet, front and back, before we print them off. Our first set of moves is shown in red in Fig. 2. Again, it helps to have a dummy to go off of. Even though it may seem complicated at first, the pattern is a simple “weaving” pattern. And the weekends sharing a page doesn’t really complicate the process all that much, it just means we have two dates to cover on a page every sixth page. It’s not a bad idea, throughout this process, to periodically check in with your online calendar to make sure that your dates are matching up to their respective days of the week. I would even suggest printing out Fig. 1 and using it to write in the dates each time you go through this…you’re going to do it about 20 times. Having a visual aid handy really makes things a lot easier. Keep in mind, if you use Fig. 1 as a template, that the weekends will change positions, since 3/8 is already as reduced as it’s going to get. In other words, the weekends can fall on any page.

Fig. 3 - Click to view large

The next set of moves, shown in blue in Fig. 3, basically follow the same “weave” pattern back down, but this time on the “inside” halves of the two columns. If you’ve been following along with your dummy set, this should all be making sense by now.

Making adjustments for the weekends along the way, we end up at long last back where we started, on the half-page right next to Jan. 1st at the bottom of the diagram. The diagram in Fig. 4 show’s the pattern in its entirety, weaving up the outside and then back down the inside. Wasn’t so tough, was it? When it’s time, we’ll be ready to start the process off all over again, replacing Jan. 1st with Jan. 19th and building out the next 18 or so dates.

Fig. 4 - The whole enchilada

Following the pattern presented in Fig. 1 through Fig. 4 is crucial to keeping the process, let alone the days, organized. It’s also quite important that you follow along with your online calendar, or whatever you’re using to map out the year, so that you know where the weekends fall. Don’t worry, after a few rounds you’ll have it down pat. For now though, rather than get ahead of ourselves, and since we have a set to start with, let’s take a break from all the planning and puzzle-solving and do a little designing! The graphic design side of this project, for my purposes, is very light. I just want the day, date, and holiday if applicable. I’m going to use Adobe Photoshop, but one could just as easily use any basic word processing software. Obviously, this is another area in which the scope of creativity is up to you. Have fun! Be inventive! Last time I checked, next year’s only going to happen once…

The Design

Let’s open a new file. Make it letter-size, landscape, and 300 resolution w/ a white background. We’re not designing vectors here: that should be a high enough resolution if we’re just displaying text. Next we’ll set up some guides. The most obvious guide we’ll need is one right down the middle at 5.5″, where the fold will be. We’ll also include one across the middle horizontally at 4.25″, for when there’s a weekend. I also like to set up a 0.25″ perimeter margin around each ¼ page.

At this point your screen should resemble the screen shot to the right. The rest is easy: pick a font that holds your interest (I might suggest one you want to get to know over the next 365/366 days) and begin placing the dates in the appropriate place on the page – whatever that means to you, as long as the dates correspond with your diagram. I like to set up four text layers right off the bat, as it’s inevitable that you’ll get weekends landing on both sides of your template. You just hide the layers when not being used. This is an ideal time to save your file as a .PSD, as you’ll just be switching the dates out continuously from here on.

I’m going with Pica, a serif font that has a retro typewriter fee, and I’m going with #555 for the hexidecimal, 64, 56, 55, 31 in CMYK. Double check to make sure that the “Sunday” text layers are hidden if you’re not using them. If everything’s in place, then we’re ready to print. Flip it over, change the text layers to match the corresponding top page on our diagram for the Back, and print again. Repeat, going down the line, for all four pages. Then stack them in the appropriate order (Jan. 8th, 9th and 10th should be face-up on top, Jan. 6th and 12th next, and so on) and set aside. Like I mentioned before, you’ll do this 20 more times, so stay organized! I like to stagger my stacks of four so that they’re easier to sort through and work with on the next step, which is creating the sewn signatures. Organization is key – if you let the slightest detail slip, it could throw off your dates and/or pages.

If you haven’t already reloaded your template with the next set of dates, do it. Print, rinse and repeat the entire process until you reach Dec. 31st. Then get out your favorite thimble, maybe put on the kettle and find a comfortable place to do some sewing!

The Stitch

Grab the very last foursome that you printed off, should be the one with Dec. 31st. Fold all four pages together in half – this is fairly easy to be accurate with if you have a straight edge to work with. Give it a good crease, and then grab your ruler and pencil.

There are a lot of different patterns to use here. Just pick a pattern that makes sense and is symetrical. I’ve marked the even inches on the outside of the spine, and the odd numbers on the inside.

The next step is to sew. If you’re a novice seamster or seamstress, don’t despair. This is sewing 101. You don’t need anything fancy here: no one’s gonna see the thread when we’re done. Something like polyester thread will work just fine, it’s cheap and fairly tough stuff.

Here’s where you should skip ahead to the section on binding if you already know what you’re doing.

I like to get a good amount of thread to start with, at least twice as much as the surface I’m covering, so 20-24″. Thread your needle so that there’s about 2/3 to 1/3 thread on either side, and make a small knot at the very end of the longer side. Start at the bottom-most mark and sew to the top, then double back, filling the gaps between thread on each side. When you get back to the knot, you can tied the remaining thread around it and then snip the loose ends. You’re now an expert paper tailor.

the Binding

Only 20 more to go! Crank those sewn signatures out and then give those hands a nice warm soak. Next were going to bind our planner. If you’re using a hardback, tear out the pages, leaving the cover and spine as intact as you possibly can.

Homemade book binding is yet another area where you can go with a multitude of techniques. Mine is simple: a generous, even amount of PVA glue applied to the inside of my hardback cover’s spine and a thin strip applied to my 21 sewn signature spines. PVA glue (polyvinyl acetate) is better known as “good ol’ white glue,” and it makes the most sense here because they work the best on porous surfaces, like paper. You could also use a contact cement or even Gorilla glue (sparingly!), if you don’t trust the resolve of PVA.

Arrange your sewn signatures in the correct order. Should be straight forward, just look at the dates on the “front cover” of each and arrange them chronologically. Apply a generous amount of glue to the inside of the hardback cover’s spine. You can use your finger to even out any excess spots – that’s another nice feature to working with PVA, it’s generally non-toxic. Then apply a thin strip of glue to each sewn signature and then place them, still in correct order, centered in the hardback cover.

Professional book binders use a special vice. I’m using my bookshelf. Whatever apparatus you use, you don’t want to squeeze the spine too tight or the glue will dry in a rigid way and your bind will be weak and possibly uneven as a result. Just a nice, snug spot between some heavier books to hold it in place will do. Be sure to clean up any excess glue. I don’t have to tell you what stray glue can do to your pages. It’s ideal to let the glue set overnight, or at least a couple of hours more than is recommended in the instructions.

Wake up in the morning and reach for your new 20xx daily planner! Now you have a place to plan out the rest of the amazing things you’ll accomplish next year. Job well done.