Es Developed - Fresh Website and Graphic Design » vector

10 Outstanding TV Series Title Sequences

Shawn — Fri, 05 Feb 2010 16:30:11 +0000

This week, we’re looking at 10 outstanding and uniquely styled TV series title sequences.

Many people refer to the title sequence as the opening credits even though they are not really the same. However, I’ll be using the two terms interchangeably in this post.

The title sequence / opening credits is usually accompanied by visuals and sound that set the mood for the series. This usually includes the theme music for the series (if any).

Previously, I showcased a couple of title sequences from other shows that use specific effects, such as Poirot and Dollhouse. Since I’ve already featured them here on the Blog, I’m not going to include them in this list.

The title sequences chosen for this post are ones I feel are particularly memorable or out of the ordinary.

Human Target (Season 1, FOX)

The opening credits for Human Target immediately made me take notice.

The title sequence makes great use of a grunge/watercolor effect. It borrows a bit from the Bond movies, but everything works well together and fits the theme of the series.

I also like the tilting and suddenly jerk effects (for lack of better terms). This gives the sequence a more ‘real’ and less digital feel, which goes well with the watercolor and grunge effects.

Murphy’s Law (Series 3, 4 and 5, BBC)

Murphy’s Law as a series changed quite a bit from the beginning of season 1.

Season 5’s title sequence was a big departure from the opening credits of the previous seasons but fits with the shift in the subject matter of that season.

My favorite part is the way the Murphy’s Law text/logo appears to be painted onto shards of glass which move toward the viewer at the end.

I couldn’t find the opening credits for just season 5 by itself, so the video below contains the intros for seasons 3, 4 and 5.

Caprica (Season 1, SyFy)

Whether you like the opening credits for Caprica or not, you have to admit that it’s a very unique intro.

I haven’t seen anything quite like it. Beyond the slick CGI and effects, it sets up the plot of the series and is almost like a mini episode.

Hustle (BBC)

Hustle, a series about a small group of grifters (con-men), doesn’t often take itself overly seriously and the title sequence plays to this well.

While the title sequence changes after season 3, both the earlier and later versions use vector-style animation which fits in really well with the show’s fun theme.

If you watch the title sequences, you’ll see some great visual metaphors within the animation (the fat businessman falling for the trap).

Plus, I dare you not to start humming or whistling the theme song.

Hustle Seasons 1–3

Hustle Season 5

Mad Men (Season 1, FOX)

Mad Men’s opening credits are a mix of vector illustration/animation and retro photographs which is very fitting for the theme of the series.

Eureka (Syfy)

Eureka’s opening credits are a bit unusual in that they use an “animated images”/Ken Burns style.

It also mixes a small town look with retro-futurism elements and a muted palette.

Chuck (Season 1, NBC)

Chuck’s title sequence combines vector-style animation, ninjas, and a theme song from Cake that won’t get out of your head. Win, win, win.

Conclusion

The above television series’ title sequences are some of my personal favorites.

As such, I’m sure there are many others that I have either forgotten about or never seen. What’s your favorite television title sequence? Tell us in the comments.

New Features and Tools in Inkscape 0.47

Shawn — Fri, 04 Dec 2009 14:31:00 +0000

Inkscape is my vector editor of choice for several reasons.

Handles AI, EPS, PDF, SVG and a slew of other vector and raster formats
It’s open source and free
Runs on all major operating systems–Windows, Mac OS X and Linux

Last week, Inkscape’s newest version, 0.47, was released.

What’s new in Inkscapes latest version? Lots.

What’s New in Inkscape 0.47?

Improved UI and Desktop Integration

So you want to know what the new version of Inkscape looks like?

It’s not a radical departure from the previous version, but it has some streamlining and small tweaks that’s been given it. Mainly, it seems to integrate better with whatever OS it’s installed.

You can view some screenshots of the new Inkscape interface and examples of what’s possible on the Screenshots gallery page.

Above: Obligatory Megan Fox vector illustration

Additions and Improvements

Here’s just a brief list of additions and improvements. You can read the full list of changes on Inkscape.org.

Autosave with adjustable preferences
Spiro splines for the Pen, Pencil, and Node tools
Auto smooth nodes
New modes in Tweak tool
Reworked snapping and grid system, plus a Snapping toolbar
New path effects, including sketch, hatching, envelope deformation; effects can be stacked and assigned to groups
Tons of filters found in new Filters menu
Typography–Base support for creating SVG fonts
New and improved extensions
New cairo-based PS and EPS export: improved quality, more features supported, fallback rasterization for filters and transparency
Spell checker for text objects
Many new extensions: restacking, calendar, printing marks, cartesian and polar grids, interpolating attributes
Optimized SVG code options
Better desktop integration. Better Gnome integration (Linux) with improved icons. Also includes themable icons.

New Path Effects

New Sketch path effect in Inkscape 0.47

There are several new path effects in the new version of Inkscape.

Sketch makes an object or path look like it was rough sketched
Hatches draws hatch and “scribbles” within a shape
von Koch creates fractal images
Knot makes a knot from a flat self-intersecting curve; giving the illusion of a knot
Spiro Splines is a useful alternative to Bezier curves. This could be handy for those creating type or fonts
Construct Grid
Envelope Deformation lets you deform an object or group of objects by deforming any of its principle sides (top, bottom, sides). Can be edited with the Node tool.
Create ruler marks along a path with Ruler
Interpolate Subpaths “tweens” (think Flash) shapes along an editable path

If you haven’t tried Inkscape or haven’t tried out the newest version, download Inkscape today.

21 Super Vector Download Sites

Shawn — Fri, 10 Apr 2009 11:00:56 +0000

Our graphics posts the last few weeks have dealt with vectors and vector resources and these seem to be a very popular topic for most creatives.

So, in a similar vein, this week we’re showcasing 21 of the best websites to find free and affordable quality vector images and patterns. Most of the sites provide free vectors, but even those that you pay for offer vectors at very fair prices.

On To the Vectors

In no particular order. Unless otherwise stated, vectors are free.

GraphicRiver

Most of you probably already know about GraphicRiver (an Envato site), but they have a huge collection of user-created vector graphics.

While the vectors are not free, many of them are priced at only$1 USD, so they’re easy on the wallet.

VectorMadness

VectorMadness is a relatively new site, but it’s already got a large selection of free vector images, broken into category.

GoMediaZine Freebies
A huge collection of high-quality vectors

Vecteezy

Designus
Huge collection of useful vector patterns and vector graphics

BittBox Freebies

Designers Revolution
Vectors of Adobe Illustrator. Not free, but you get access to all their vectors for $15.

Keep Designing
Some great vintage vectors and patterns

Garcya Design

AIG – Symbol Signs
Vector signs in EPS and GIF formats

123Vectors.com

Open Source Vector Art (VectorArt.org)

CreateSk8
Lots of vector patterns

Designer’s Toolbox
Vector envelope templates

Did I miss any? Of course I did. Share your favorite vector sites with us in the comments.

4 Sites For Free Logos and Brands

Shawn — Fri, 03 Apr 2009 11:30:36 +0000

Every now and again, you need a logo for an established company. For instance, you need some credit card logos to display on an e-commerce site. Or maybe a client does work for well-known companies and they want those recognizable logos displayed.

Where do you find good quality logos in vector formats?

Now, you could search through Google Images for the logo in the right format, but that’s very hit and miss. Not to mention, I feel a little dirty afterwords for resorting to this method.

Here are 4 6 sites that make finding famous vector logos and brands easy.

Note: As with any registered logo, brand or trademark, make sure you’re using it in a legal way. Due diligence and all that.

Brands of the World

Brands of the World has a huge collection of just about any logo you can think of — often in various styles. For instance, many brands have several different logos depending on what they’re used for (search for ‘Microsoft’ and see how many results there are).

You can also browse alphabetically.

Logos can be downloaded as vector EPS files.

Logotypes

Logotypes also has logo search and the ability to browse by letter. Logos can also be downloaded in EPS format.

While the site is easier to use that Brands of the World, Logotypes doesn’t have quite as large a collection. But it’s still a great place to look if you can’t find a certain logo else where. Plus, Logotypes has mainly the more famous brands, so you don’t have to wade through 5 different M&M logos as you try to find a delicious snack logo.

All Free Logo

AllFreeLogo.com has a nice collection of logos in vector format (EPS, AI, etc) and an easy-to-use interface. This site contains a lot of logos that can’t be found at the other sites, as well as logos in more formats.

Credit Card Logos

Credit-Card-Logos.com certainly lives up to it’s name. Here you can find over 75 credit card and payment option logos in a variety of styles, layouts and sizes for e-commerce sites. Find logos for MasterCard, Visa, Discover, American Express, PayPal and eCheck.

Something else nice is that you can find groups of credit cards, singular credit card logos and faux credit cards — with the card logos on them, which is a nice touch.

Logos can either be downloaded as images (GIF), or linked to via HTML.

Note about using links to images: It’s been pointed out by David in the comments that this is a possible link-building scam site, so you might want to consider that if you’re thinking about using the HTML to embed the images in your site.

Generally, linking to images or code on another website is something I shy away from. This is mainly because you never know whether the links will change later, and there’s the possibility of sneakery as well (link-building scams and the like). Use caution.

Fast Charge

FastCharge.com also has a similar system for adding credit card icons to pages via HTML code. You can find some additional styles as well.

Wikipedia

Update: Thanks to David’s mention in the comments, I’m adding Wikipedia to the list of places to find credit card logos. I completely forgot about this when I was writing this post.

I’ve used Wikipedia as well for finding certain logos for other companies and brands. Definitely a good place to look as well.

Logos are most often available in SVG format.

Examples: