I really love the series and thought: What would be better than recreating the logo with awesome web technologies?
NOTHING! So here we go...
Before we start I want to show you a screenshot of the final result
I started with the chemical elements Br & Ba, because they are super easy to create with CSS. But what font is used here?
Google: "breaking bad font"myfonts.com/WhatTheFont/forum/case/282847
First hit is MyFonts.com
One of the fonts is Arial MT Bold, so I can use the default Arial... nice! But wait. The other parts of the logo are set in a font called Bundy? I searched for a couple of minutes, but could not find this specific font. So what are my options?
An image? No: Not resolution independent and much too big in file size.
Another font? No: Are you kidding me? This must be real for god's sake.
I never created a SVG before, but it is just an ordinary vector right? Perfect, so I opened Photoshop (inside my virtual Windows) and created the path for every letter.
And now just save as *.svg right? What? Are you kidding me? No SVG with Photoshop? Thanks Adobe. Luckily, I have also Illustrator installed, so I exported my Photoshop Paths to Illustrator..., opened the exported *.ai (with Illustrator) and saved it as *.svg! That's easy... isn't it?
You can download the created SVG here:
timpietrusky.com/img/lab/breakingbad_eaking.svg
timpietrusky.com/img/lab/breakingbad_d.svg
Everything is perfect now. The logo looks just nice. But something is missing? Yes, the meth lab smoke you idiot!
I wrote the article SVG - How to create & use vector graphics on the web
where I describe how to create vector graphics (+ screencast).
timpierusky.com/svg-how-to-create-and-use-vector-graphics-on-the-web
Cause I'm really new to this hole canvas stuff I searched once again for a nice tutorial explaining how to do it right.
Google: "html5 canvas smoke"astronautz.com/wordpress/creating-realistic-particle-effect-with-html5-canvas
One of the center hits is Astronautz.com
And boom: What a nice smoke effect by Ed Welch. I had to create a few meth lab alike smoke puffs with Photoshop and adjust the default values of the JavaScript particle emitter.
For the third time in this article I use Google to find something... boring, but what should I do instead?
Google: "breaking bad theme"televisiontunes.com/Breaking_Bad.html
One of the center hits is televisiontunes.com
I converted the *.mp3 to *.ogg, because the main browser don't support every audio format. Why should they?
That would be too easy. By the way: WE WANT OGG!!!
wewantogg.com
You might be wondering: How do you know what audio format you take for what browser?
The answer: I don't, I use Modernizr!
modernizr.com/docs/#features-html5
Modernizr.audio.ogg ? '*.ogg' : '*.mp3';
I used a nice feature on cssdeck to create a codecast. What is a codecast? You can record the stuff from the CSS/JS/HTML editors, save it and watch it again as you would watch a movie! But instead of actors you will see me typing some characters and creating the Breaking Bad logo.
cssdeck.com/labs/breaking-bad-codecast
Check out this Pen!
codepen.io/TimPietrusky/pen/Bsegb
He created a fucking awesome canvas smoke effect.
astronautz.com/wordpress/creating-realistic-particle-effect-with-html5-canvas
He inspired me to add the official theme song with his comment at CodePen:
Gray Ghost Visuals: audio intro please in honor of WW bitch!