• Home
  • WordPress
  • Web Design
  • Restaurants
  • Portfolio
  • Blog
  • Contact Us
  • Home
  • WordPress
  • Web Design
  • Restaurants
  • Portfolio
  • Blog
  • Contact Us

Vectorizing

Published in Web Design Tutorials on March 19, 2008
Vectorizing
Email

I recently ran into some problems vectorizing some images I wanted to use for a logo, and took some time to problem solve, so I’m presenting my findings here in hopes it will save someone a big headache and a lot of stress.

Ok, so I got my image ready in Photoshop and saved it as a .psd, and placed it in Illustrator. See how the image below has a border around it? That’s important. You need to have closed path shapes of course when you vectorize an image, and Illustrator interprets full bleed images as open shapes, so making a ‘border’ from the background layer in Photoshop is an important step. Then I used Object > Live Trace > Make and Convert to Live Paint:

vectorize1.gif

After you do this, make sure you release the paint group. (Object > Live Paint > Release).

The next problem: losing details. Or so it seemed. The trunk of the tree ended up on top of the shadow marks, and I couldn’t find those for a while. So I sent the trunk to the back of the group and turned it into another color so I could see the smaller paths on top:

vectorize3.gif

What you’re seeing here is the next step. I selected all the small shapes on top of the trunk, then the trunk, and used Pathfinder to cut out the smaller path shapes from the trunk shape. You could just make them the same color as the background if you wanted to, but I wanted the most design process flexibility, so I made them as a cut-out.

Here’s one of the concept revisions I used this image for:

vectorizefinal.gif

« WordPress 2.5 Tease
Browser competition makes the web better »
  • Stay Connected

    • Subscribe via RSS
    • Connect on twitter
    • Connect on facebook
    • Connect on delicious
    • Connect on linkedin
  • Tags

    adobe, Advertising, animation, blog, bluehost, Chicago Events, CMS, cmyk, color, colors, colours, copywriting, Design, Flash, food, godaddy, google, illustrator, images, iphone, layout, logo, marketing, pages, photo gallery, photos, photoshop, plugin, plugins, print, restaurant, rgb, search engines, security, SEO, sites, slideshow, sysco, twitter, upgrade, video, web, webhosts, websites, wordpress
  • Categories

    • Advertising
    • Arts
    • Blueprint News
    • Careers
    • Chicago
    • Chicago Events
    • Clients
    • Design
    • Developer News
    • Humor
    • Inspiration
    • jQuery
    • Links
    • Marketing
    • Mobile
    • Responsive Web Design
    • Restaurants
    • Search Engine Optimization
    • SEO
    • Social Media
    • Typography
    • Web 2.0
    • Web Design
    • Web Design
    • Web Design News
    • Web Design Tutorials
    • Web development
    • WordPress
©2012 Blueprint Design. All Rights Reserved.
  • Home
  • About
  • Blog
  • Web Design
  • Restaurants
  • Careers
  • Terms of Use
  • Contact Us