N ews Gothic is used for the scrolling body text on all the films, however, so it looks as if Abrams just decided to make his crawl consistent throughout, without a separate title font. The font used for Star Wars: The Force Awakens logo is ITC Serif Gothic Heavy, which is a display serif font designed by Antonio DiSpigna & Herb Lubalin and published by ITC. Sources & Links: ITC Serif Gothic Heavy Font on myfonts.com. ITC Serif Gothic Heavy Font on fonts.com. Next Font Machete Kills Font. Previous Font Lone Survivor Font.

In this Photoshop tutorial, I’m going to show you how to create the title to Star Wars. We are going to make the perspective text and actually animate it, so that it moves just like at the beginning of all the Star Wars movies. We are going to do all of this in Photoshop CS6 or Photoshop CC. If you have an earlier version of Photoshop, you can still make the text effect, but you will need CS6 or CC to make the animation.

I have also included the PSD that you can download for free at the end of this tutorial. PhotoshopCAFE: doing what other tutorial sites don’t 🙂 Enjoy!

Step 1 – Creating the Text with the Star Wars font

Start with a new blank document. Set the background color to black.

Step 2

We are going to create some paragraph text.

Click the type tool

Choose bright yellow as the color. The font used on Star Wars is Franklin Gothic.

Step 3

Now, we will create a body of text. To create paragraph text, click and drag a box around the area where you want the text to go.

Either type, or paste in some text.

Here is the nonsense text used in this block, if you want to, just cut and paste it…

Step 4

We now want to add some perspective to the text. You will notice that you can’t add perspective to a paragraph of text without rasterizing it. Or can you? I have figured out a sneaky way of doing it, that is the key to this technique working. (I thank my days as a Flash designer for figuring out this kind of stuff).

Right click on the text’s Thumbnail in the Layers panel and choose “Convert to Smart Object”

Step 5. making the Star Wars Perspective text

Now, we can transform this smart object.

With the text Smart Object active in the Layers panel, Press Cmd/Ctrl+T for free transform

Right Click and choose Perspective.

Step 6

Drag the top corner in to make a perspective shape.

Press enter to apply.

Star Wars Writing Font

Step 7

We have now made an image of the Star wars perspective text effect. This is where other tutorials end (Hopefully, Youtubers won’t rip off this tutorial, like they have a lot of my other tutorials, so sad). But this is where we kick it up a gear. We are going to make it move!

Animating the Star Wars Intro Perspective text in Photoshop CS6 or CC.

You can use any version of Photoshop to get to where we are right now, but you will need CS6 or CC to animate it.

Step 8

Open the timeline from the Window>Timeline menu if it’s not visible.

Right in the middle of the Timeline, you will see a button that says “Create Video Timeline.” Go ahead and click it

Step 9

You will now see a timeline appear in Photoshop.

I know you are tempted to try and animate things right now, but resist the urge. You won’t get a decent result animating it on this timeline.

Step 10

This is where the magic of a nested animation comes in handy. (I wrote a book on this kind of stuff in Flash (How to Wow With Flash) and I can adapt these techniques to work in Photoshop.

Find our Smart Object with the text and double click the thumbnail

Step 11

You will notice that a new document opens with the contents of the smart object displayed. This is where we are going to do our animation.

Step 12

Go to the timeline and click the arrow on the left of the track name, to reveal the animation options.

Click the stopwatch icon to the left of the word Transform. This will create a yellow diamond which is an animation keyframe.

Step 13

On the document window, drag the text down to the bottom of the screen.

(Tip: Hold down the shift key as you drag to constrain the movement to a vertical alignment). We are setting the beginning of the animation

Free Star Wars Title Fonts

Step 14

Now for the end

Move the playhead to the end of the timeline, by dragging it.

Step 15

Drag the text all the way up (while holding down the Shift key). We are moving it to the end position of the animation.

Step 16

You will notice that another animation keyframe is automatically created.

Step 17

If you press the play button in the timeline (Or press the spacebar) you will notice that the text now animates from the bottom to the top of the window.

Step 18

Now for the magic!

Press Cmd/Ctrl+S to save the document (contents of smart object).

Close this window and go back to your starting document where you first created the text.

Star Wars Font Generator

Press the spacebar / play button in the timeline

You will now see the star wars effect working!

I don’t know about you, but I think this is pretty cool.

If you want to export this as a video do this:

Choose File>Render Video

Select Folder (name the video and select where you want it to be saved to)

Choose H.264 as the format

Preset: High Quality

Then press render

The video will now be created in the folder you chose. Be patient, it may take a while

I have more Photoshop animation tutorials here

https://photoshopcafe.com/wp-content/uploads/2014/11/Screen-Shot-2015-12-08-at-12.39.04-PM.jpg

I have done a lot of experimenting with video and animation in Photoshop and had the huge honor of presenting some of my techniques for Adobe at their world headquarters (several times), as well as at Adobe Max (the Adobe World Conference).

If you want to get deeper into what you can do in Photoshop with Video and animation check out the 2 premium videos that I have created. Video in Photoshop will get your feet wet and teach you the range of things you can do in Photoshop (perfect for a beginner). Then check out Making Movies in Photoshop, which picks up where Photoshop and Video leaves of. I have also written a book, Video in Photoshop with Peachpit Press that you can find at bookstores.

Thanks so much for checking out this tutorial!
Download the PSD here

Add a comment! See you at the CAFE

Star Wars Title Font Maker

Colin Smith

Star Wars Title Font Free

CS6 Superguide

All the CS6 information and more is available as a PDF magazine called the CS6 Superguide. If you’re on our list, you will receive it free by email as soon as it’s available. If not, sign up now and get the CS6 Superguide for free. Or click the image below.

Star Wars: The Force Awakens is one of the most popular movies of all time, and we’ve posted about all the hidden Easter eggs, seen many video essays about the plot comparisons to A New Hope (which even Abrams has admitted was by design) and seen a bevy of posts and videos pointing out the film’s flaws. But one error I haven’t seen mentioned many places in the mainstream press is the fact that Star Wars: The Force Awakens opening crawl features a different font from the previous six live-action films. And there’s almost nothing nerdier than typography and font geekery, but if this kind of thing interests you, hit the jump and find out how it’s wrong.

An essay on Medium by FixTheCrawl was the first to point this out:

The ‘roll-up’ has a very specific typographical treatment in the previous six films — and the font used for the episode title, “The Force Awakens”, is wrong. Really wrong. The Star Wars opening crawl is perhaps the most famous narrative device in cinema history. Star Wars has many stylistic hallmarks, such as the Kurosawa-inspired scene wipe. But the opening crawl has become so associated with Star Wars that no other film could possibly use it without seeming like a blatant lift. In fact, you might say that the opening crawl is the thing that makes a Star Wars film feel like The Real Deal™. When series creator George Lucas got his chance to make the first sequel to Star Wars (1980’s The Empire Strikes Back), he made a very controversial move — re-titling his original blockbuster, Star Wars, by appending Episode IV — A New Hope. With this in mind, he decided the visual consistency of the opening crawl across all future episodes would be so sacrosanct, that he completely re-shot a new opening crawl that contained the new title and episode number. Ever since, every main saga episode of Star Wars has contained the Episode number, typeset in the News Gothic family, and the title of the film itself, typeset in the Univers family.

But apparently Disney got it wrong with The Force Awakens opening crawl. The episode’s title is set with a condensed version of News Gothic, when it should be set in Univers, Ultra Condensed. I’m not nerdy enough to explain how it’s different, so here is another excerpt from FixtheCrawl:

News Gothic (also used for the body text) is very round, friendly, and readable, whereas Univers gives the title of the film some stately heft — telegraphing the impression that the events about to transpire are carved in the stone of destiny (or something). … It’s subtle, but noticable. The ‘S’ and ‘R’ glyphs, in particular, are very different. Overall, it’s boxier, and feels more staid. Less urgent.

The latest episode of Moisés Chiullán’s podcast Electric Shadow delves into this story, and even talks to original Star Wars opening title sequence designer Dan Perri. In the podcast, Perri reveals that he heard that J.J. Abrams and Bad Robot tried very hard to duplicate what he had created, including the flaws. Perri has not yet seen the new film so he had not noticed the error, but when told that the scroll used New Gothic, ultra condensed, the original Star Wars crawl designer said:

Oh, Oh my God, thats way off. I know the New Gothic lines well and I can tell you I used it on Raging Bull because it was from the era, from the ’40s and ’50s. No I would not have used New Gothic on Star Wars.

For the Star Wars prequels, George Lucas tasked Visual Effects Supervisor John Knoll to get the Star Wars crawl right.

For the classic Trilogy, a high contrast film of the text was laid out flat on a long lightbox (a transparent table lit from underneath), with a camera set up on rails running parallel to the lightbox. The camera was controlled by a computer to make sure the scrolling speed remained constant: that’s what we call a ‘motion-control camera’. To create the illusion of text disappearing on the horizon, the special effects guys tilted the camera at an angle and ran it down the track. A star field was later optically added to complete the footage.

In trying to recreate the iconic crawl in a computer, Knoll admitted that the big problem was that “nobody took precise notes when they were shooting those sequences.” Knoll and his team were able to reverse engineer the exact fonts, taking into account the curvature created by the 24mm camera lens, which they also had to recreate in the computer. There is a whole article with quotes from Knoll talking about the extensive amount of work that they took on to make sure the opening crawl for The Phantom Menace (and the subsequent prequels) matched up exactly to the crawl for the original trilogy films. (It should be noted that even the original trilogy films aren’t completely consistent, and Electric Shadow delves deeper into that hole.)

Strangely, most of the promotional material for Star Wars: The Force Awakens got the font correct, such as the official online Star Wars Crawl Creator and television commercials. So the question, then, is why the font was changed for The Force Awakens. The only real answer we have comes from Lucasfilm Story Group head Pablo Hidalgo who admits that the crawl “that was approved by the director changed things around.” So there you have it, J.J. Abrams made the change.

@FixTheCrawl @jedimisterclark We know the one that was approved by the director changed things around.

— Pablo Hidalgo (@pablohidalgo) January 26, 2016

We also know that J.J. Abrams is notoriously a typography and font nerd. He has a favorite font that is used at Bad Robot on almost everything. So it’s not like Abrams made the change without a lot of perspective. I wonder what his reason was for this change. For now it’s something that will continue to annoy font and typography geeks for years to come. As for whether Rian Johnson will “fix the crawl” for Episode VIII, he’s not saying:

.@pablohidalgo@PlanetSunset For the record, the NYT could print a rumor that the opening crawl will be yellow & I wouldn't confirm/deny.

— Rian Johnson (@rianjohnson) April 25, 2016

And we don’t know if December’s Star Wars: Rogue One will even feature an opening crawl. It’s possible they could avoid a crawl to help distinguish the “A Star Wars Story” films from the Skywalker series, although many other non-Skywalker series Star Wars projects have been released with a crawl including the recent LEGO Star Wars short films.