Final Fantasy Effect in Photoshop

Agony a Go-Go Home-->Agony a Library-->Agony a Workshop-->Final Fantasy Effect

Creating a Final Fantasy-Like Image in Photoshop
by Kurt Komoda

By now you have surely seen those nifty Final Fantasy logos drawn in sweet brushwork and filled with a gradient. Maybe you've even seen my versions on Final Fotosite III. Some of you may have wondered, "I want to make a Final Fantasy-like logo. How do I do it?" Well, it's all pretty simple. So let's begin!

Original Artwork

Final Fotosite III logos by Kurt Komoda      How easy this is all depends on what you're working with as your starting image. An image drawn in Photoshop with all the "black ink" on a white background makes this process very easy. A pencil drawing on tinted paper makes this a lot more complex- basically to the point of "don't even bother." Not every image/drawing will work. If it's not a computer-drawn image, then you need to at least have a composition with bold contrast from its background. So, think: BLACK INK on WHITE PAPER. You'll be making a selection or mask of all the ink work, so it really does have to stand out. Think of it like a cut-out stencil, but on a much finer and more detailed level.

     The images to the right were done completely in Photoshop. I just opened a new document drew everything with the Paintbrush Tool, and then followed the simple steps described below. Yeah, you'll need a drawing tablet or, better yet, a flatscreen drawing tablet like the Wacom Cintiq that I have. It is possible to use non-computer generated images, such as scanned art, but you'll have to make some adjustments to the Levels and Contrast to give yourself a workable image.

     So, let us begin.

Creating a Quick Sample Image

To use as an example, I've drawn this quick little picture using the Paintbrush Tool and a hard brush. I don't want to use a soft brush because that would create too many grey tones around the edges. I always do my ink work on a separate layer(below right). You don't absolutely have to do this, but it really does make working with digital painting tools much easier in the long run.

The image I've drawn is, eh, okay- but it's almost all line. We have to remember that the gradient tone will fill in only areas that are black(or whatever color "ink/paint" you are using, it won't make a difference). So, I go back in and create more areas of black.

     An alternative method would be to add in a sumi ink swipe, creating a dark background that will make the linework stand out without having to change it. While I'm doing this, I might as well show you what I do to accomplish this, because there's a bit of a trick. When I drew all of the logos for Final Fotosite III, I drew up a number of sumi ink strokes and then just added them into the current images. Today, though, I'm just going to draw in a fake sumi ink stroke into the background.

     Right here is a good example of why it's best to draw/paint on a new layer. If I had drawn everything on the Background Layer, I'd now have to double-click the Background Layer and then hit Enter/Return to cause it to lose its unmovable "Background Layer" status, then convert the layer into a Multiply Layer, create a new layer beneath it and fill it with white(as a new background), and then add a new layer for the new stroke drawing on top of that.

     With the "ink" on its own layer, all I do is to create a new layer underneath the current image and then draw in the stroke in a color other than black, so that I can still see the top image of the boy(below left). After it's all drawn in, I use create a layer mask(Layer--> Layer Mask--> Reveal All) and mask out the areas that interfere with image of the boy(below center). Whenever you're erasing parts of your image that require any preciseness at all, it's best to use a mask as opposed to using the Eraser Tool. When using a mask, you can paint stuff back in when you screw up. If you don't want the mask hanging around, you can always drag it into the trash and then hit "Apply," so you just end up with your adjusted image. Anyway, after the stroke is all masked out and it looks like the boy is standing in front of the stroke, it's time to make the stroke black:

Hold down the Cmd/Ctrl key and click on the layer icon. This selects everything in the layer. You'll see the little running ants around what's left of the stroke.
To quickly select black as your foreground color, press "D."
Go to Edit--> Fill(or Shift+F5)--> Use: Foreground Color. Hit "OK"

You should now have an image using only black ink(below right). I keep saying "ink," but you know I'm just referring to black colored pixels. You do know that, don't you?

Okay, so now we can just flatten either of the two images I've created above and begin the actual process. In the second image, we have the element of the sumi brush stroke. Now, Final Fantasy logos handle this in two different ways. In the first instance, the entire image, stroke and all, would be combined and then the gradient would wash through everything. In the second instance, the stroke is treated as a separate element and given its own stroke, as in the Final Fantasy XII logo at the top of this page. To keep things simple, we'll combine everything. So, just flatten everything. Go Layer--> Flatten Image. That's it.

Before moving on, I should address something. With all this selecting this, selecting that, it may seem like the easiest solution to creating a Final Fantasy logo would be to Cmd/Ctrl click the layer icon of the layer with your "ink" work on it and then run a gradient through that. Unfortunately, that doesn't always provide the cleanest results. Let's look at what can happen.

Okay, so I have the boy and the stroke combined on a single layer. Cmd/Ctrl clicking on the layer icon selects all of the layer's contents: the black ink work(below left). Dragging the gradient tool through this appears to do the job of turning our illustration into something resembling the technique used in the Final Fantasy logos(below center). Upon closer inspection, however, it is evident that there is a dark fringe surrounding the image(below right). Yuck! We hates dark fringe!

With our flattened image, black on white. We're ready to go. Select your favorite Final Fantasy-like colors for your gradient- nothing too bright, unless you're using a black background(in which case, nothing too dark)- and then load them into your gradient...

What?!? You don't know how to create your own gradient? Wow. You really are a noob. Well, let's teach you something. First, select the Gradient Tool. It's probably hidden. Go to the Paintbucket Tool and click and hold- a selection menu will pop out allowing you to select the Gradient Tool:

When you select it, information about the Gradient Tool should appear along the top bar of Photoshop(assuming you haven't changed your setup and it is visible). Make sure that the left most gradient is selected(1) and then click on the gradient display(2). This will open up the all-powerful Gradient Editor:

The gradient editor is really easy to use and you should be embarrassed that I have to tell you. Okay, see those little colored things(1) with the little arrows pointing up towards the long colored bar of colors blending into eachother(aka a GRADIENT)? Well, you click on those things to change the colors(your cursor becomes an Eyedropper Tool and then you can select a color from your swatches, any open images, or even the gradient bar itself. You can also click anywhere below the gradient bar(2) to add more colors. Use the little diamonds(3) to control the way one color blends into the next. To delete a color, just click on one of the color indicators(1) and drag downwards. That's all there is to it! When you're happy with your gradient, just hit OK.

Okay! Let's get on with this, already! Now, pay attention:

Convert your image to Greyscale: Image--> Mode--> Grayscale. In CS3, it will ask you if want to discard your color information, and then try to tempt you into using its new Black and White Image Adjustment feature. Hit "Discard." It is necessary that this image be in greyscale.
Create a new image with the same dimensions as your original. One way to do this is to take your original image(the now flat and grayscaled one we've been working with) and:
- hit Cmd/Ctrl+A(Select All)
- Now, hit Cmd/Ctrl+C(Copy)- if your document is still in multiple layers for whatever reason, you should hit SHIFT+Cmd/Ctrl+C(Copy All Layers)
- Cmd/Ctrl+N(create new document)- it will come up with a dialogue which shows that you want to open a new document using the document size in your clipboard- hit Enter/Return.
You now have a blank document the same size as your original.
Use the gradient tool to fill the Background Layer with the gradient you want to see running through your image.
Add a new layer. Either go Layer--> New--> Layer, or hit SHIFT+Cmd/Ctrl+N, or hit the "Add New Layer" button at the bottom of the Layers Palette:
Fill this new layer with white(or whatever color you want the background to be).
With this same layer(Layer 1) activated, go Select--> Load Selection: Document: (Your original image); Channel: Gray
You'll now see the running ants selecting the negative space around your original image: Go Layer--> Layer Mask --> Reveal Selection
BANG! You're done! Flatten your image, if you wish(Cmd/Ctrl+E will merge the only two existing layers).

Please post any questions you have about this tutorial in Agony a Forum! The theory is that maybe your problem is also someone else's. Posting your questions to the forum not only helps others, but also allows others to provide their own answers.

Click below to enter:

Agony a Go-Go Home-->Agony a Library-->Agony a Workshop-->Final Fantasy Effect