Archive for the ‘Design Love’ Category

Find All Open Paths in Adobe Illustrator

Monday, May 23rd, 2011

A few weeks ago, I was working on an illustration and I noticed that the Divide function in my Pathfinder palette was not working the way it was supposed to. After a little troubleshooting, I found out that it was because one of the shapes I was trying to divide was not a closed path. I looked to see if Illustrator provided an easy way to find and select unclosed paths to no avail. It seemed to me that you should be able to find it under the Select menu where you can select stray points, all text objects, same fill or stroke color, or same blending mode etc. It seems like selecting all unclosed paths would be a pretty common query. Nope.
I did a Google search to see if anyone else had this problem or knew something that I didn’t. I ran across a free plug-in that adds Open Paths as well as 17 additional object types under Illustrator’s Select menu. It is awesome. Now I can easily select Guides, Open Paths, Closed Paths, Filled Paths, Unstroked Paths, etc. instead of spending valuable time and sanity hunting these rascals down.

The screen-caps above show Illustrator's Select Menu without (left) and with (right) the SelectMenuCS3 Plug-in.

You can find this and many other useful Illustrator plug-ins here. Thank you Rick Johnson! Download the file and then drag the plug-in into Illustrator’s “Plug-ins” folder. (On the website, it says it only works with CS3 and CS4 but it works for me in CS5).

The above plug-in only finds open paths. It is up to you to close them. I found a script that will find and close all open paths in Illustrator. I found this one on vectips.com. It actually contains 2 scripts; one that closes all Open Paths and one closes all selected Open Paths. To use the scripts, in Illustrator, under the File menu go to Scripts then Other Scripts… and navigate to the downloaded script and click Choose.

A dialogue box will open and let you know how many open paths it found and ask you if you want to close them all.

If you want your scripts to show up automatically without having to navigate to find them, store all your scripts in Illustrator’s Scripts folder. You can find Illustrator’s Scripts folder here: Applications/Adobe Illustrator CS5/Presets/en_US/Scripts.

Sweeeeeeet.


Get up and Goe

Tuesday, May 17th, 2011

Just introduced in 2007, Pantone Goe System has finally made it’s way into our grasp! Today we received a large box with coated and uncoated swatchbooks, as well as a set of coated GoSticks (sticky backed color chips). The Pantone system, if you are unfamiliar, allows for a precise and reliable way to print color during the offset printing process by the use of specified inks. It felt like Christmas morning, opening the box and discovering the magic inside. The Pantone Goe system offers more than 2,000 NEW colors in addition to the original Pantone Matching System. In the past, the old pallet could feel very limiting; I couldn’t quite get just that right shade of orangy-red, soft green, or 50′s sea-foam blue. It’s great to have such a new and large selection of colors to play around with. I’m definitely excited to see a HUGE array of green and blue hues (my favorite!). Better yet, they are now arranged in an intuitive, chromatic order, simplifying the process of selecting the perfect shade without having to jump through the color palette. The new chip books also have nice sticky backs, so we’ll easily be able to play and experiment with colors, and then attach and share with fellow Zoomers and clients. I just can’t wait to start experimenting!

My current top picks from the Goe System:


2011 Web Trend: Creative Navigation

Monday, April 25th, 2011

Again and again I’ve run across experimental and creative ways to navigate a page. I’ve uncovered side-scrollers, one-page vertical scrollers, parallax scrolling, animation, story-telling, and even horizontal scrolling within horizontal scrolling (and the list goes on). These new types of navigation systems can give web sites an exciting and engaging way to captivate users, forcing them to interact differently with content, experiment, or be taken on a journey through your web site. But be careful, because something new and different can often confuse or scare users away.

More traditional styles of navigation are comfortable and expected to users, enabling them to easily guide themselves through your content. By steering your users in a non-traditional style, you can risk losing your audience. For this reason, it’s vital that your navigation remains effective. A non-traditional navigation needs to be smart, thoughtful, and content appropriate. An e-commerce site probably wouldn’t benefit from a single page scroller, because of it’s high-volume of information. But a smaller scaled portfolio or promotional site could potentially benefit from a more dynamic style of navigation. If you are in a specific design, illustration or web field, giving your users a new way to get around can be a great way to show off personal style, technique and skill.

Want to experience it for yourself? Check out these examples of creative navigation below:

Nike Better World
This site uses parallax scrolling to create a dynamic site with depth. Just scroll to explore and animate.

Jax Vineyards
This site uses a mixture of vertical and horizontal scrolling, for a clean, minimal look and feel. Constant top navigation is smart and let’s users interact easily with the site and side. Scrolling arrows are large and easy to maneuver.

Ben The Body Guard
This web site takes you on a journey, once you figure out about its vertical scrolling feature. Follow Ben along the dark streets to figure out all you need to know.

Youzee
This vertical scroller takes you step by step. Just click the button on the home screen to get started. Use the icon driven nav at the top or scroll on through each page.

crushlovely
With a constant navigation on the left, it’s easy to get around this vertical scrolling site. Each “page” is broken up vertically with a different color theme.

Polecat
This is a vertical stroller that allows you to jump between pages with a simple top navigation.


2011 Web Trend: The End of the Fold

Friday, February 25th, 2011

With new developments in screen sizes and devices, the fold has become practically outdated. In web design, the “fold” is known as the imaginary line on a screen that designates what content is visible to a viewer without scrolling. If you’re curious, the term, “fold” originated from the traditional newspaper, where the most important content and images were printed above the paper fold. This rule helped gain maximum attention from the reader and made sure essential information was always visible. The same goes for web design, you want to make sure a viewer has visual access to the key info on your site within the first five seconds of reaching the page.

For years, web designers could mostly rely on the fact that a visitor would have a screen resolution between 1024×768 or 1280×700, and web sites could be created accordingly. There have been debates on where the traditional fold fell on these screen resoutions, but in general, the rule has been, don’t put any essential information below 600 pixels. Today, this is not always the case. Viewers now have access to a variety of screens, from iPhones, to giant TV’s, and it’s getting more and more difficult to establish the ‘fold’ line on a specific device. You can’t possibly design for all outcomes, and so the “fold” is starting to become irrelevant. To add to the mayhem, users today also aren’t afraid of scrolling either, and devices like the iPhone, make this intuitive and essential to view important information. With this new openness to scroll, these invisible boundaries seem somewhat unnecessary.

Even though we are moving into an entire new use of space, it doesn’t mean we should totally ignore the idea of the fold. The most important messages should remain near the top. We still need to respect the importance of the initial visual hit a viewer gets when they reach a site. It’s a powerful tool and and can help to capture the attention of the audience and perhaps even keep them scrolling on down the page.


Hey Craig!

Friday, February 11th, 2011

I love Craigslist. I found my job there, I found my house there, and even a sweet west elm headboard there. I love perusing the posts and seeing if I can find some sweet items or great deals. I go through phases where I go on there every day, and generally have a list of items that I cycle through searching. If you search a lot of specific items like I do (card catalog, faux bamboo chair, etc…), going and searching everyday can be time consuming, but maybe not anymore!

Today I discovered Hey Craig! an online application that helps you in your daily search. All you have to do is enter the item you are hunting for, your email, and Craigslist location. Hey Craig will then keep watch on Craigslist and email you when those items are posted. Voila, you have avoided the daily search! The catch that I noticed, is like any search on Craigslist, if a post contains those specific search words, you’ll probably end up getting items that aren’t exactly what you are looking for. This could potentially lead to many emails if you aren’t terribly specific! I’ve signed up to test it out and hopefully it will find the card catalog of my dreams. If you’re a craigslister like me, check out Hey Craig here!


-=Mid Century Montage=-

Wednesday, February 2nd, 2011

I’ve been having a lot of Mid Century Moments as of late, perhaps because I am about to hit the Mid Century Mark myself this year. Or perhaps it’s because I have always been drawn to the aesthetic. I’m not a purist by any means, and I am wont to mix and match a little more than most are comfortable with. Here are a few things that caught my eye and distracted me from Mubarak today.


Basking in the warm glow of fiberglass,

Mrs. Knightly


Oh, white space, how I adore thee!

Friday, January 28th, 2011

As a marketing and design firm with a very varied client list, we sometimes run into the question of white space. Some clients wonder why we “don’t just fill up that space?” Here’s the definition of white space, so sayeth wikipedia:

White space should not be considered merely ‘blank’ space — it is an important element of design which enables the objects in it to exist at all, the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition.

When space is at a premium, such as some types of magazine, newspaper, and yellow pages advertising, white space is limited in order to get as much vital information on to the page as possible. A page crammed full of text or graphics with very little white space runs the risk of appearing busy, cluttered, and is typically difficult to read. Some designs compensate for this problem through the careful use of leading and typeface.

Judicious use of white space can give a page a classic, elegant, or rich appearance. For example, upscale brands often use ad layouts with little text and a lot of white space. Inexpert use of white space can make a page appear incomplete.

Our design team could go on and on about how important white space is, and I support them completely. That said, and in support of white space, I offer you the following websites that have been deemed “excellent use of white space”:





You can view the list of fabulous white space sites here.


2011 Web Trend: Full Image Backgrounds

Wednesday, January 26th, 2011

Want a show-stopper? Then hop on trend with full image backgrounds. A large scale illustration or photo background instantly grabs your viewer’s attention, adding life and creating a more dynamic and engaging look and feel. These over-sized backgrounds are great, but should be used in the right setting. Sites that already have image galleries make great candidates, think photography studio, design agency, fashion designer, illustrator, or even a picturesque resort. Beware, the most common issue with large backgrounds it that they have to conform to many different screen resolutions, so make sure you test, test, test and use an image large enough to fit the width for the most commonly used screen resolutions. Check out these images below for this new trend in action.


2011 Web Trend: Parallax Scrolling

Monday, January 10th, 2011

First seen in side scrolling video games from the 80′s, Parallax Scrolling is a special technique that gives an illusion of depth in a video game, or in today’s case, a web site. Parallax scrolling uses multiple layers to create the illusion of a 3D space, where background images move slower than foreground images. When used in web design, it can add a great sense of depth to the look of your site and is best used as a header, footer, or background. The effect can be created using CSS and some JQuery plugins (I’ll leave that up the the dev team). To experience this technique in action, check out Silver Back App. You’ll have to scale your screen width to get the full experience. Also, The Old Pulteney Row to the Pole web site uses a top down parallax that is super sweet. Be on the lookout for more designs like these popping up in 2011. For more info and how it can be done, check out Think Vitamin’s post on how to recreate the silverbacks parallax effect.