Meet grownup Kit

The thoughts around the character were to show Kit (don’t hurt the web/Test pilot) as an older fox, now with an superhero alter ego for saving the Web. His style turned out to be an evolution of some of the sketching I had done when designing our new mascot.

Five poses were created for the different pages in SUMO’s get involved section – introduction, army of awesome, knowledge base, forums, localization. It wasn’t the easiest task to come up with visual metaphors for the sections, but after some quick jamming with the team I was able to start in on the artwork.

I really love sketching on the Cintiq and the quality of line that comes from the pencil tools I have in Photoshop. I’m quite happy with the raw drawings so I decided to release a few as some fun wallpapers. Hope you like them. Enjoy!

Before I get into the nuts and bolts of it, some background on the visual itself. In the poster, we see a sad little fox (Kit) in tears and looking for love and kindness. In no way is he meant to represent a run-down, tired, vulnerable Firefox. The sadness we see in Kit in the poster is his reaction to people hurting the Web he loves – it’s sadness out of the Web he loves being hurt, not himself. He isn’t meant to be addressing specific events or people, just a general reminder that no matter where we find the web – desktop or mobile – be sure to build with standards, openness, and all players in mind.

Final Artwork

Technique

Some of you may have been able to watch me stream some of the process live yesterday on my UStream channel. If you’re wondering why I introduce Illustrator into the process, it’s simply to have the artwork in vector form so if this were to be printed down the road, it will be able to be scaled to any size while still maintaining the sketch look and feel. That and I love Illustrator. <3. The following gallery shows the process in it’s entirety, so sit back and enjoy the tips included.

Initial freehand sketching done in Photoshop using a custom pencil

Stumpy pencil tool preset for those interested in the quality of sketch lines

Copy and paste sketch into Illustrator, use “Image trace” panel and create a custom preset based on these settings

Paste the artwork again and create a custom black and white art trace for more pronounced lines

You’re left with two versions of the artwork – light fine sketch lines and thicker detail lines

Overlay both an set the transparency to multiply, the thicker lines set at 50% opacity

Vector sketch, baby!

Optionally, you can create a background color to recreate the feel of off-white or colored paper

Lock your sketched layers and create a layer underneath to apply the color forms. Check my saved video of the color process

Outline layers turned off to show color layer

Final step is to bring it back into Photoshop and apply any textures you’d like. In this example, I apply an inverted watercolor, grain and various filters

- Bill Watterson

We do too, big guy. We do too.

A fox farewell

Who doesn’t love and remember the original Firefox mascot? He was the Martin Scorsese of mascots thanks to his big ol’ bushy eyebrows. He proudly stood for Firefox and absorbed the hugs in the early years, strutting his generic fox coat around the room and high fiving us all for sharing in the love. A pioneer in the field of Firefox fan motivation, he paved the way for future generations of Firefox mascots. Let us take this moment to thank him for his years of duty and wish him well in his retirement closet. High five, good buddy.

Foxes and dinos

When it was decided to look at getting a new mascot costume for Firefox, we immediately knew who we wanted to bring on as the team to build it – Irene Corey Costume Design.  Their work was previously seen in the 2010 Summit characters that were brilliantly built based on the event poster art. Another character in their portfolio some of you may be familiar with is the ever jolly Barney the Dinosaur! It seemed a perfect fit considering just like Barney and his crew, we’re a happy family here at Mozilla.

Next on fox: Process

Our first thoughts in designing the new suit were to ensure that it resembled the actual logo. Some initial sketches were done where we tried to imagine what the face of the fox looked like when turned around. I had previously created the Personas logo, so that is what we used as a starting point. From here on in, I’ll share captioned images of the process in which we worked with Suzanne Lockridge and staff at Irene Corey.

The initial pass by Suzanne. A very literal fox design.

My initial design based on the Firefox logo.

Initial detail sketch views of the head.

After several back and forth versions, a detailed final sketch of the mascot.

Full colour version.

The build begins

With the sketches complete, it was time to build out the framework and physical build. Though fascinating, it can be somewhat shocking to see disembodied parts and partial skulls during the process. Avert your eyes if you’re not keen on seeingOGOD LOOK DOWN NOW IT IS HIDEOUS WHAT IS GOING ON?!?

Horrific photo of the clay model process. OGOD POOR FIREFOX.

Foam head completed! Human head insertion success!

Yes, an artichoke IS the best way to describe the tail.

Grizzly scene. Actually it is a fox scene, but you know what I mean.

A new star is born

And it came to pass that a mascot was born in a workshop. We saw that it was good. We cheered, we wept with joy, we exaggerated our emotions in a blog post. I’m not going to lie to you folks, seeing this mascot strutting around and knowing it was originally a rough illustration is one of the most satisfying things I have ever helped with at Mozilla. It’s not often you get to hug an illustration and I… EXCUSE ME I HAVE SOMETHING IN MY EYE.

Now head on over to the YouTubes to see him in his big screen debut for Firefox Flicks! With any luck, we’ll be seeing him front row in a tux laughing it up at the 85th Oscars!

Hug him. High five him. Show the love, for him and the open Web.

Firefox hanging out with Mitchell in Barcelona!

]]> http://blog.seanmartell.com/2012/02/29/the-rebirth-of-the-firefox-mascot/feed/ 3 http://blog.seanmartell.com/2011/04/21/nightly-and-aurora-space-quest-goodies/ http://blog.seanmartell.com/2011/04/21/nightly-and-aurora-space-quest-goodies/#comments Thu, 21 Apr 2011 15:40:02 +0000 mart3ll http://blog.seanmartell.com/?p=736 Continue reading →]]> Yes, that’s right.  The two new logos on the block had a fashion shoot in space and they’ve brought back pictures!  Gird your desktop with sleek new wallpaper or slather your browser with a fresh persona! The options are endless!*

* dramatization. there are only two options.

Aurora had but newly chased the night,
And purpled o’er the sky with blushing light.
- John Dryden, Palamon and Arcite

Folks, those book words are from an actual book. I looked them up. I have to say, they’re pretty spot on when it comes to introducing the tale I am about to tell – a tale of pixels that frolic along paths only vectors can carve.

We’ve recently had the dawn of a new day for Firefox at Mozilla with the introduction of our all new rapid release cycle. We now dispense Firefox love to the internets more often so you the user/artist/developer/general awesome person you are can take advantage of all the latest HTML glories sooner than ever before.

The introduction of the new release cycle has allowed us to create new channels for individuals to sample our wares – from nightly builds, builds that play with the first light of new features, to beta builds and beyond – there’s a flavour for everyone. We’re like Ben n’ Jerry’s now, and my stars, you’re gonna want to sample.

All Night Long

The new Nightly logo began its life fairly simply. Take one Firefox logo, give the wee fox an all-expense paid ticket to the outer edges of the artboard, and you have yourself a bare globe. Success!

Firefox logo sans renard

After removing some of the shine and shimmer from the default globe, the shadow of night was added to blanket the continents in darkness(random land masses are random folks), keeping in mind that the sun sets in the west of course.  The original mockup of the logo had the light portion on the right, but after much staring that seemed to be silly. For you see, having the light portion on the right would only work for a product named after daybreak or “dawn”. The mind pieces things together and that little gem was placed in the “save for later” pile.

Sunglasses wearin' time

So now we have our darkened globe. At this point the inhabitants were bruising their shins on coffee tables and solid forms with edges at shin height, so points of electric light were added all thanks to the inspiring glow visual dreampt up by our friends in Mozilla webdev. One quick request by our UX team for moar lights and we had ourselves a thriving populace, their power meters spinning and wallets thinning.

Evening came, the first logo

Good Morning

If you thought designing the logo for Nigthly was painless, wait until you hear about Aurora. Take one Nightly logo, horizontal flip the night shadow, turn off the lights in the lit region, turn on the lights in the dark region, you have yourself a predawn globe.

The night at its darkest

Purists will tell you that dawn is actually the beginning of twilight before sunrise, but that’d just be a flipped logo and a reference to a movie with emo vampires. We’re extending the reach of Aurora’s light to the instant the sun crests the edges of the globe. Yes folks, vectors have that power.

Here comes the Sun

Now I have to admit, I wanted purple in this logo. My daughter, at the age of 3, insisted that I create a logo with purple in it. Lucky for me that when you overlay a radial gradient with the Firefox yellows and oranges onto the globe, you get some snazzy looking purples.

Morning came, the second logo

There you have it. The birth of two new logos for our rapid release channels. We hope you enjoy their presence as you partake in the rich, yummy goodness of the web using the latest in web browsery technologies.

For those keen individuals who noticed, yes “All Night Long” and “Good Morning” are Lionel Ritchie song titles. Congratulations!

I’ve been playing Lord of the Rings Online now since 2008 and I have to say, I’m fairly addicted. It seems to have formed a perfect storm where excellent game design merged with my childhood fascination of all things Tolkien. The chance to run around Middle Earth and hew some Orc is something this fan just can’t pass up.

When Turbine released their Free-to-Play version of the game back in September, they refreshed the look of their website to try and glam it up for the influx of new fans. Now I have to say, I really can’t stand the new website layout and the forums are downright HULK SMASH, but I was smitten by one element.  The background image has a gorgeous rendering of Sauron’s fiery eye.

Let’s Play With Fire

I got to thinking about how Turbine created the asset and thought I’d like to have a go at trying a version in Photoshop. Now this was my first time playing with digital fire, so I wasn’t quite sure how to go about it. Here’s how I did it so you can giv’er a shot.

1) I decided to grab some Google Image flame assets to play around with and hauled down a bunch that were set on black backgrounds.  I then brought them into Photoshop and selected all the darkness around them with the Select > Color Range… option and a hearty feathering on the selection tool. A few twists and turns with some of the select flames, a slathering of layer styled glows, and I had an eye shape.

Flames overlapped, layer styles with orange screened dropshadow applied

2) Next was hunting down the background image. I wanted something that showcased the playful nature of little Sauron’s playground setting, so I hunted on flickr for green field images within England. My goal was to find an image that resembled the Shire, and the results did not disappoint.  I brought in this great shot and played with the saturation so the flames would be the dominant element.  I also used the Smudge tool and made a heat effect on the image around the eye.

Use an advanced flickr search with proper CC settings

3) Of course, since Sauron is a big old eye of fire, he’s going to burn things. Badly. My next step was adding a charred patch of earth beneath him and once again I ran to Google Images and tore a random campfire out of an image result. Some orange glows were drawn above simply using the Paintbrush tool and setting the layer to Screen.

Burned grass image added, aligned and masked, grass blades drawn

4) For the swings, yes… Google Images. Random swings were random and I traced them out, slapped them in and warped them with the Smudge tool for the heat effect once again.  I then applied coloring and shadowing for ambient immersion. For a seat, I built a wee little perspective chunk o wood and threw a charred log texture on top. Added a freshly evil-burned glow to the top and ripped open a bag o’ marshmallows.

Swing set added, warped with Smudge Tool, color and shading added

5) The final detail I wanted to add was a cloud of sparks. Where there is fire, there are sparks. (I know you are looking for smoke now, but evil fire doesn’t produce smoke. leave it alone.) I simply used the Pencil tool and went nuts slapping down wee white specks to which I then applied an orange Outer Glow. For a few, I applied a Motion Blur to make it look as if they were rising.

Sparks created with Pencil Tool, Motion Blur and orange Outer Glow

And that is how Poor Little Sauron burned down the swing set. For those of you who are wondering what the font is, it is a free font called First Order. I thought it matched Turbine’s choice for the LOTRO logo so I gave ‘er a go. Sorry I didn’t go into further detail, but if I can find a good spot online somewhere, perhaps I’ll host the PSD so you can check out all the layer styles and settings used.

Enjoy!

During a Mozilla Labs week a while back, I was tasked with creating a logo for a yet to be realized project that centered around a person’s contacts.  That initial experiment has matured into a full Labs project and is now up and running as Mozilla Labs Contacts, so head on over and check it out.

When it comes to the actual logo, whatever possessed me to try and illustrate a field of undulating light in vector is beyond me.  I may have been mad at myself for not grabbing a cup of coffee that morning, or perhaps I was keen on having a headache that day.  Either way, it happened – so I thought I’d share the process.

First order of business, I illustrated the address book.  A fairly straight forward illustration – gradients and strips of color forming the volume of the pages and cover.  As always, applying more than one gradient to a shape using the Appearance panel within Illustrator is key to getting volume, ambient light and shadows looking the way you want.  Layering colors and gradients using different transparency effects is the greatest technique for building anything in vector.

Now comes the fun part – projected holographic light!  Of course, the line “Help me Obi Wan..” popped into my head as soon as I started and stuck as the main inspiration for the visual.  The first step was to create a human shape on a similar 3/4 plane as the book.  I hunted around for an inspirational image and found a nice classic bust sculpture at the proper angle.  The next task was illustrating it with high contrast light and shadow outlines to allow a”pass through” look for the 3D light form.  A bottom up radial gradient gave the illusion of a light source originating from the book which I then augmented with another full outline of the shape including the beam itself.  Adding a “Stylize > Feather” effect to the vector shape gave it a nice transparent gaseous look and completed the form.  Of course, the whole technology of projected holograms is not yet perfected, so I had to create an overlay gradient of wavy lines to convey signal frequency issues.  All the needed elements were now complete.  Put them together and what have you got?  Bippity boppity boo in most cases, but in this case a somewhat believable hologram.

At some point I may create a video showing the techniques used in the creation of one of my logos.  I’ll be sure to see what I can whip up in the form of an instructional video when I can find the time.  *presses the laugh track button*  Seriously, though, I’ll see what I can come up with.

Playing around with -moz-radial-gradient this past while, and seeing the amazing job done on the CSS Opera logo by David Desandro, I thought I’d have a go at recreating one of the logos I illustrated within the past year using pure CSS.

The Raindrop logo I created was the prime candidate, as my first thoughts were “hey, three of the corners are basically -moz-border-radius set to 100%!”  Done.

Next was to figure out how to construct it. Well, turns out I made myself a cheat sheet shortly after I designed the logo, highlighting the gradient elements I layered within the shape using the appearance palette:

Using the separate elements as a guide, I built out the shapes and gradients checking the rgb settings and their gradient percentage positioning in Illustrator.  Turns out, it translates pretty well.  Only a few tweaks here and there.

In the end, it isn’t perfect, but pretty close for a half hour test.  If I can sort out using ellipse gradients vs circles, I should be able to make it much closer to the original image.

Have a look at the result here and be sure to use zoom in the browser to see it scale!

Note: I did this as a quick test using only -moz CSS rules. At some point I will try and get this working across all browsers that use border radius and gradients.