I truly love the series and thought: Which are the best than recreating the company with awesome internet technologies?
NOTHING! So let’s begin.
The Fundamental Concepts: CSS
I began while using the chemical elements Br Ba. because they are quite simple to produce with CSS. What font can be utilized here?
Google: “breaking bad font”
First hit is MyFonts.com
Among the fonts is Arial MT Bold. to create technique default Arial. nice! Hold on. Another regions of the trademark have reached the font known as Bundy. I looked for a few minutes, but may not find this phenomenal font. Exactly what are my options?
A picture? No: Not resolution independent and too large in quality.
Another font? No: Are you currently presently presently kidding me? This should actually be real for god’s sake.
Special font operations: SVG
Irrrve never produced a SVG before, but it’s merely a regular vector right? Perfect, well, i opened up up up Illustrator (within my virtual Home home home windows) and produced the road for each letter.
Now just save as *.svg right? What? Are you currently presently presently kidding me? No SVG with Illustrator? Thanks Adobe. Fortunately, I’ve also Illustrator installed, well, i exported my Illustrator Pathways to Illustrator. . opened up in the exported *.ai (with Illustrator) and saved it *.svg! That’s easy. is not it?
You can download the produced SVG here:
The situation is perfect now. The company looks just nice. But something is missing? Yes, the meth lab smoke you idiot!
I authored the data SVG – The easiest method to create use vector graphics on the internet where I describe the easiest method to create vector graphics (+ screencast).
Meth lab smoke: HTML5 canvas
Cause I am really unfamiliar with this hole canvas stuff I looked once more for almost any nice tutorial explaining how to get it done right.
Google: “html5 canvas smoke”
Among the center hits is Astronautz.com
Official theme song: HTML5 audio
For the third in time the following sentences I exploit Google to uncover something. boring, so what can i actually do rather?
Google: “breaking bad theme”
Among the center hits is televisiontunes.com
I converted the *.mp3 to *.ogg, since the primary browser don’t support every audio format. Why they? That may be too easy. Incidentally: You Want OGG.
You may be wondering: You need to what audio format you are by taking your browser?
The solution: I do not, I exploit Modernizr!
Watch the “Making of” as being a Codecast
We used a enjoyable feature on cssdeck to create a codecast. What exactly is a codecast? You can record the stuff inside the CSS/JS/HTML editors, reserve it watching it again whenever you would go to a movie! But rather of actors you will see me typing some figures and allowing the Breaking Bad emblem.
He produced a fucking awesome canvas smoke effect.
Grey Ghost Visuals
He inspired me to include the problem theme song together with his comment at CodePen:
Grey Ghost Visuals. audio intro please in recognition of WW bitch!