#STAR WARS OPENING SCRAWL TV#

Then I exported the image as a three-color PNG file (black, brown, yellow). I used Photoshop to typeset the text, kerning (squeezing) lines or inserting line breaks where needed. So how did I actually assemble the final product?įirst, I created a document in Photoshop with the dimensions 80×1000. This will effectively double the vertical resolution from 80×25 to 80×50. One way to get more yellow/brown gradations would have been to use ANSI’s shaded block characters, which let you mix colors.īut because resolution is so low, I chose instead to use ANSI’s half-block characters, which I can treat as pixels, but must be solid colors. Neither is perfect, but I decided I liked the semi-anti-aliased approach better. So my options were: Make the crawl a single color (yellow), or make it semi-anti-aliased by adding dark brown. But with yellow, you only have two choices: bright yellow and dark brown. You can use the magentas along with the reds to get a bigger red range, for example. For reds, blues, and grays, you can fudge things by grouping similar colors. Anti-aliasingĪNSI offers 16 colors, in “high” and “low” pairs: bright red and dark red, bright cyan and dark cyan, etc.

And it doesn’t get much lower-rez than ANSI. However, I decided to go with Verdana, because it was designed to be legible at low resolutions. The original Star Wars crawls use News Gothic for the main crawl text. So I chose to simply center the text and move on.Īnother difference is fonts. Those would look ridiculous if they were justified. This means the entire passage has straight edges on the left and right, rather than a “ragged” edge on the right.īecause I am forced to use such a short line length (around 13-15 characters), some lines consist of single words. Star Wars’ crawls always use “justified text”: the spacing in the line is adjusted so that the letters spread to fill the entire line. The first is that I don’t justify the text, I simply center it. There are some typographical differences between my crawl, and a true Star Wars crawl. So, instead of: It is a period of civil war. Playing in Photoshop, it became clear that I just needed to rewrap the text at a much shorter line length. 80×25 resolution is just too small to fit such long lines of text legibly onto the screen. My initial thought was to duplicate the original crawl.

I didn’t really understand the math involved, but thankfully I found some implementations of it, including a very nice one in Javascript by Jenny Louthan. (This technique will actually work for any quadrilateral shape) I needed the actual algorithm behind that function, so that I could use it on a pixel grid.įor quite a while, my Google searching was fruitless, leading again and again to CSS solutions.īut eventually I learned you can transform a rectangle into a trapezoid by plugging into a very complicated formula the four corners of the source rectangle and the four corners of the destination trapezoid. That was useless to me since ANSI has no CSS. But these generators all rely on a transform function which is built into CSS. It seems that almost everyone and their brother has written one in HTML5/CSS in the last five years. Searching on the web, you come across a lot of Star Wars crawl generators. I knew from playing in Photoshop that you can achieve perspective by transforming a rectangle into a trapezoid. The most obvious challenge: how do you even create a perspective effect? (For the Blocktronics artpack, I used this technique to create an animated version of what would traditionally be the. Otherwise, just enjoy this GIF version of my ANSI Star Wars opening crawl: If you’d like to know more about the challenges I faced, keep reading.

When I was thinking of ideas I might contribute to Blocktronics’ “Detention Block AA-23” Star Wars artpack, making an ANSI version of the crawl was one of my first thoughts.

#STAR WARS OPENING SCRAWL TV#

Since then, the crawl has become a common trope cribbed by TV shows, computer games, and others. This crawl was George Lucas’ homage to the old Flash Gordon serials of the 1930s (which inspired many other parts of Star Wars visual style). Screen capture of an opening crawl from a Flash Gordon serial.

Star wars opening scrawl