* dramatization. there are only two options.

click the picture above to download! (1920 x 1200 resolution)

click the picture above to get this persona!

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!

Poor lil guy

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!

]]> http://blog.seanmartell.com/2010/11/16/poor-little-sauron/feed/ 0 http://blog.seanmartell.com/2010/04/27/vector-hologram/ http://blog.seanmartell.com/2010/04/27/vector-hologram/#comments Tue, 27 Apr 2010 21:46:54 +0000 mart3ll http://blog.seanmartell.com/?p=620

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.

I’m going to talk to you about a website!  The Mozilla Labs website, now with a fresh new coat of paint! *throws up arms in rejoicing fashion*  Today, we’ve launched the new theme for the Mozilla Labs site and our project pages.  Wider articles, bigger pictures, in-your-face headlines, it has it all.  Need to know what the author of an article looks like?  We’ve got that too!  And diagonal lines… did I mention diagonal lines?  We’re swimming in them.

Please head on over and look around.  We’ll be evolving the site further in the weeks and months ahead, adding newer navigation and expanded project descriptions, so stay tuned.  Please feel free to give me your feedback and if you find anything that may need fixing, please don’t hesitate to contact us.

There’s one more thing…

For those of you who now demand nothing but diagonal line artwork, I have created a fresh new Persona to usher in the launch.  Feel free to gird your browser with the Mozilla Labs Refresh persona, now live at getpersonas.com – http://www.getpersonas.com/en-US/persona/87345 !

Enjoy!

About Drumbeat

Mozilla Drumbeat is global community of people creating tools that enable internet users to understand, participate and take control of their online lives. Drumbeat provides an opportunity for these people to share project ideas — and finds contributors, funds and advice to help the most promising projects succeed. Mozilla also directly leads a number of Drumbeat projects of its own. https://wiki.mozilla.org/drumbeat

About Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. http://getfirebug.com/

Unfortunately, I can confirm that as you program the remote, if there is a purchasable item in the first panel of the default “Spotlight” section of the dashboard, pressing “OK+TV” multiple times to check different TV codes will handily purchase said product.  I mistakenly decided to program my remote while still getting the video signal from my digital cable box – unaware that the whole time my programming actions were also directing the 360 dashboard to purchase GTA IV as a direct download.

The Xbox 360 Spotlight Channel. Beware!

To add to the pain, Microsoft’s policy on purchasing content on Xbox Live! is no refunds, all sales final.  I was on the phone with 4 different representatives today ( I must add all quite friendly and understanding ) who in the end confirmed there was nothing they could do, not even a credit to my account, for that would be against policy.

Let’s compound that pain by the discovery that I can’t even get the item that was mistakenly purchased.  I have a 20Gb HD on my 360 and in order to download the full game, I would have to wipe most of my content or buy a premium priced 120Gb HD from Microsoft. Fantastic.

I have been on Xbox Live! since 2004 and due to this unfortunate experience, I have asked them to cancel the auto-renewal on my account.  A funny coincidence to all of this was that it happened the day after I bought a Nintendo Wii.

So dear Xbox, apparently I CAN quit you.

Initial Inspiration

To me, and quite likely to most of you out there, a subject such as a space station can drum up lots of imagery.  We’re bombarded with Sci-Fi constantly and we get to see lots of space vessels and stations in all the glowy, shiny bits of Star Trek, Star Wars and Battlestar Galactica moving picture shows.  Now those are all excellent sources for inspiration, but my mind decided to travel into the deep recesses of my brain to two excellent sources from my childhood – Calvin and Hobbes’ Spaceman Spiff and Space Quest 3: The Pirates of Pestulon.

With Spaceman Spiff, we have an example of space vehicle design at its simplest, and in my mind, the perfect look for a ship in the logo.  It’s a classic UFO saucer style, full glass dome and all.  I have the entire Calvin and Hobbes collection in hardcover and I couldn’t let this opportunity to draw inspiration from my favorite childhood comic pass me by.  DEATH TO NAGOONS!  Done.

Now when thinking about the design of the space station itself, my mind went straight to Monolith Burger from Space Quest 3.  I spent many an hour trying to land Astro Chicken on the pads in the arcade mini-game found within its pressurized walls.  The interstellar diner is apparently now firmly etched within my brain.  This game still holds steady as one of my top five games of all time.  The Two Guys from Andromeda were geniuses and it was a sad day when Ken and Roberta Williams handed over the reigns of Sierra.  But I digress.  Achievement unlocked: Space station inspiration. On to the sketches.

A Few Quick Sketches

Having gathered my sketching markers and moleskin, I began sketching out some station designs.  As much fun as it is to use a Wacom Cintiq, nothing beats sketching in a moleskin with a graphic pen. There is no undo and if you make a mistake, most times you can turn that mistake into a new feature you hadn’t planned.  Happy accidents.

Final Logo Design

In the end, I’m happy with how the logo turned out.  It took 5 hours total once I started illustrating it with vector.  I kept the palette the same as the Add-ons logo and went with more of a brass look to the station instead of a standard greenish-grey “space metal” look.  If you look closely, the inhabitants of the station are wee Mozillians that are either planning for Browser Wars or forming a song list for the inevitable Karaoke marathon that occurs in every space station.  Be prepared for their next move.

Yes, that’s right, the Mozilla Creative Collective is up and running and we want you to join!  Why you say?  Well, did you know that there are achievement badges and design challenges?  Did you know you can create your own gallery for others to view and comment on?  Did you know you can do all of this for the low, low price of FREE?  That’s right folks. It’s your one-stop-shop for flexing your creative muscle and showing the Mozilla community your mad, mad skills.

Did I mention achievement badges?

…

About the Mozilla Creative Collective

The Creative Collective is a community of artists and designers inspired by the Mozilla ideals of openness, innovation and participation.

We believe in the power of well-made and widely distributed art, and want to make it possible for artists to cover the web with designs inspired by Mozilla and the principles we stand for. We also want to showcase the talents of our members by giving them the opportunity to share their work with a global audience.

To do this, we’ve created an online social environment where designers and non-designers alike can connect and collaborate in a positive, communal manner. Where things go from here is up to you, but we’re looking forward to seeing what happens!