Twitter RSS

Tutorial: Making an Invisequine.com Style Logo

Saturday, August 16th, 2008

Step 1

First we’ll start off with a photograph of an equestrian horse jumping. This one is from iStockphoto.com, feel free to use whatever picture you’d like.

Jumping Horse

Step 2

Open your picture in Adobe Illustrator. Trace an outline of the horse and rider with the pen tool. Don’t worry too much about the tail or mane, just give it a nice outline- we’ll work on the details of those areas later.

Step 3

Tweak the finished outline of the horse. You may need to use object > path > simplify… to smooth out your work.

Vector outline of horse

Step 4

Now we’ll make a brush to add some of the fancy curls and swirls for the long hair details of the horse. Start by making a circle with the shape tool. than use the direct selection tool, , to grab the bottom point and pull it down. The result should be something like below.

Step 5

To make this shape into a brush we’ll go to the brushes palette and select “new brush…”

Step 6

Select Art Brush.

Step 7

In the option box match the settings below.

Step 8

Now we’ll start to add in some of the hair. This uses a combination of techniques that you can choose from and mix and match to create the hair. The first is the arc tool. Draw an arc on the tail to start making some of the detail hair. Repeat as necessary and if needed you can alt click the canvas with the arc tool to bring up the arc tool’s options.

Step 9

The other technique to use is the spiral tool,. Again, alt click the canvas with the spiral tool to bring up its options. After some use of the arc and spiral tools you should come up with something resembling this:

Step 10

Now all we need to do is the mane. You can continue to use the same two spiral and arc techniques, but since its smaller, finer hair I went for the brush tool. If you double click the brush tool you can bring up its settings. It helps if you turn up the smoothing. Then, just use the custom brush that we’ve been using, turn the stroke width down a little, and start drawing some hair on top of the horse’s neck. Here’s what it should look like.

Finished Product

The finished Product


Invisequine.com

Wednesday, July 30th, 2008

We built and launched Invisequine.com as a redesign and rebranding of Invisequine Co. The previous website was a template based e-commerce site that offered far more than what Diane Sheets, the owner of Invisequine Co., needed to sell her waterproof equestrian products. The site template was really designed for companies who sell hundreds of projects, and Diane’s company offered a small and select list of specialty products. The resulting mismatch was a cluttered site that was difficult to navigate. Our goal was to restructure the information architecture to allow users to purchase products with as few clicks as possible. We were also tasked with organizing the different types of products and options in the best possible way. As far as the rebranding was concerned, Invisequine Co. wanted to be modern and trendy yet elegant.

Invisequine.com Screenshot

The information architecture was reduced to pure simplicity. There are only 3 pages on the whole site- Home, Catalog, and Contact. Take note that there is no cart page.

Invisequine Information Architecture

For the shopping cart we employed a rather inventive technique. When an item is added to the cart a bar at the bottom of the page appears to show all of the cart functionality and products. From this bar you can checkout through PayPal. If you’re a return visitor the bar will appear just as it did when you last left the site. When the cart is emptied, the bar disappears.

Invisequine Cart Screenshot

The Branding borrowed the standard horse jumping mantra of Equestrian brands and took it a step further. The horse is jumping over the logo type and has some extra flare to set it apart and make it more “hip” . The raindrop helps convey that Invisequine Co. sells equestrian rain products.

Invisequine Logo

In a future article I will walk through the process of creating this logo from start to finish.