Posts Tagged ‘Illustration’

Calligraphy with Illustrator

Monday, September 12th, 2011

Sometimes calligraphy brushes in Illustrator just don’t cut it. As much as you may try, a brush style in Illustrator just can’t mimic the flowing hand drawn style we crave. In the past, Illustrator was very limiting in creating flourish elements. To get shapes the way you want, you had to rely on your skill with the pen tool and the Bézier curve. With Illustrator CS5 in our hands, we now have the ability to manipulate line weight at different points on a line, making a job that would have been very time consuming, a breeze.

1. To mimic the hand drawn calligraphic style, I’d suggest starting on paper. Erasers are definitely your friends. Grab references of calligraphy styles you enjoy. Play with flourishes at the ends of words and with how words interact with eachother. Draw out your words. Don’t worry about the line weight at this stage, we’ll be adding this in the next steps.

2. Scan in your sketch. Bring it into Photoshop and clean up your drawing. This step makes it easier to trace in Illustrator.

3. Open your clean sketch in illustrator and starting tracing. Using the pen tool, trace over all of your lines. I’d suggest trying to keep the number of points to a minimum, but if your having trouble getting smooth lines, I’d try using the smooth tool.

4. Now we can get crazy with those curves. Press Shift (W) to begin using the width tool. Once you have this selected you can click on any point in your illustration to adjust the width of the line. Just click and drag away from the line to create a thicker stroke or toward the line for a thinner stroke. This will adjust the width of the entire line from that single point. To have more control over the whole stroke, use the direct select tool (white arrow) to select a point on your line. Then press Shift (W) and adjust the point. This will only effect the width of the line from that point until it reaches the next point on the line. This method is great for getting high-contrasting line weights on a single line. A great way to start is by scaling down the width of the line on each end-point of your type. This creates clean beginning and endpoints and helps the lines feel more brush-like.

5. With your reference images in hand, mimic the line weights you see. I’d suggest trying to keep all of your thick strokes a similar weight and thin strokes a similar weight. This way your type has a very consistent and cohesive feeling. Once you have all of the type in the style to your liking, try playing around with embellishments. Add extra flourishes or lines to enhance the design. To finish up my own design, I added a soft gradient halo around my text and a subtle feathered drop shadow to make the text stand out from the background.

Now get out there and start experimenting, you’ll be surprised at what you can make and how easy it can be to get fabulous looking designs!


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.


Inspiring Infographics

Friday, December 3rd, 2010

Lately I’ve come across some extremely eye-catching and functional infographics. An infographic is a graphic visual representation of information or data, usually created to explain complex information quickly and clearly. Infographics can most commonly be found on maps, signage, educational materials, in technical writing, etc. People generally don’t like reading a ton of detailed information, so if we can see an image that quickly gets to the nitty-gritty, it’s a welcome treat. An infographic is always a plus, but it’s even better when it is designed well. A good infographic can tell a story, leading it’s audience on an adventure for the eyes and hopefully teaching you something useful in the process. Below are some of the awesome and inspiring examples that I’ve happened upon recently:


The Champagne of Packaging Redesign

Friday, August 13th, 2010

A few months ago, I noticed that something was different about the packaging of the Champagne of Beers which is Miller High Life. It was much simpler, bolder and graphic with an emphasis on the logo and Lucy, the girl in the moon. After a little research, I found out that this redesign was done by the San Francisco office of Landor, with illustration assistance by Chris Mitchell.

The old logo on the left has been simplified by eliminating the bevels, gradients and hi-lights and the curves are a little more graceful. The letters in HIGH LIFE are cleaned up, thinner and more readable. It is also just a one color logo now.

Old Lucy on the left is also more simplified and now wears hearts instead of diamonds.

One nice detail of the packaging occurs when you set multiple sized cans sitting next to each other.

Overall, the updated look is definitely a breath of fresh air with many great details and graphics working together.

Cheers.


2010 Web Design Trend: Hand Drawn Elements

Thursday, April 22nd, 2010

Many of today’s websites are now incorporating hand drawn or sketch elements into their designs. A hand drawn element can give a website a more personalized, unique, and organic feel,  making a design stand out from traditional web graphics. They key to this trend is to use the elements as an accent to the design and not as the main focus. You do not want to overwhelm the viewer by having a site covered with doodles, instead, use it sparingly to enhance specific elements in the design. Check out examples of hand drawn elements:

Boompa

Boompa

Yellow Bird Project

Wallace HCL

This is Grow

Web Designer Wall Jobs

Free People

Charming Wall


Practice Makes Perfect

Monday, April 12th, 2010

Vectortuts Pen Tool Exercise

Need to sharpen your penmanship? The pen tool is by far one of the most important tools in illustrator’s repertoire. It allows you to create lines and shapes by using anchors (think connect the dots). The pen tool can be a bit daunting at first and take a bit of time to master, but it’s definitely a necessity for a ton of projects. I came across a comprehensive guide to the pen tool on Vector Tuts+, which broke down the features, shortcuts, and methods for working with the pen. I’d suggest trying out the Pen Tool Exercise at the bottom of the article if you need practice, or maybe even a little refresher course. Best thing I took away from this read: being able to change the anchor point and handle display. I’m loving the larger sized handles. To change the size of your handles in Illustrator go to Illustrator > Preferences > Selection & Anchor Display. In this dialog box, you can then choose the handle and anchor size to your liking, click Okay, and enjoy!

Anchor & Handle Prefrences


Holiday Design Toolkit

Wednesday, December 23rd, 2009

We are hours from the winter shutdown, but we don’t want to leave you without any suprezzies. I’ve uncovered some fun holiday-themed design tools to get you through the upcoming weeks.

1. Make sure you download this fun free aged serif font series called IM FELL (used below). It’s the perfect addition to your holiday cards, table place-holders, and don’t forget the present tags!

2. If you don’t want to spend time drawing your own snowflakes for your holiday window display, just download this set of free snowflake dings for a wide variety of styles, that you won’t have to repeat.

3. Your holiday designs wouldn’t be complete without a few swirls and flourishes. These babies are a toughie to hand draw, so just download this free vector art to spice up your designs. Try overlaying over your seasonal photos for a fun holiday gift to grandma!

4. Need a little nature in your designs? Download this free vector branches and get rustic!

5. Have a craving to make your own special wrapping paper? Download this free demask wallpaper pattern (used below) to make your presents sing!

6. Need a festive frame for those custom cards (seen below)? Download this super collection of vector goodies. Don’t miss out on the deer, birdies, & flourishes. Nontradtionalist? This pack isn’t all just holiday, Create your own wrapping paper using the scull and crossbones as a pattern.

7. Stuck on picking a color theme for your party? Check out 50′s Christmas color pallet on Kuler.com. Or maybe the urban holiday pallet is more your speed?

8. Not a designer? Well, we wouldn’t leave you empty handed, check out these pre-made printable designs. They are way too cute. Also, this Spooky Bois Lime Green Paper and gift box isn’t just for Halloween, use it as a festive wrapping paper.

Now get creative and go crazy. If you do use items from the toolkit we would love to check them out, so don’t forget to send your pictures our way! Happy Holidays!

Image made from items in the Holiday Design Toolkit

Image made from items in the Holiday Design Toolkit


fffflippin’ ffffantastic ffffind!

Wednesday, September 2nd, 2009

found_01.r2419If you haven’t found ffffound, you’re surely missing out. The ffffound web site lets you post (if you’re invited) and share images that others have discovered on the web. I’m not allowed to post, but I’d love to figure out how to get in! Though posting would be awesome, I really use ffffound as an inspiration tool for my own designs. Each time I visit the site, there are a variety of new images posted to the home page that include, but are not limited to, graphic design, typography, inspirational photography, illustration, fashion and interior design. I generally scroll until I find something that really grabs my attention, and this is truly where the fun begins. Ffffound dynamically recommends other photos based on your own tastes and interests, so when you click on that first image, ffffound suggests 10 other images that you might like. I can, for example, click on a photo of an interesting package design, and ffffound may show me more packaging from the same collection, different packaging from the same site that the original image was found on, and other images with a similar theme, color scheme, or feel. You can click on a new image from that suggested batch and receive a whole new suggestion list of wonderful (and sometimes odd) images. It’s addictive, trust me. Get ready for a trip, because you can definitely get lost in ffffound.