Tutorial: How to draw Tap Notes (Photoshop)

[tibyandy]

Tutorial: How to draw Tap Notes (Photoshop)

This is pretty much how I did my Andy-Note and Andy-Vivid Noteskins. I hope this tutorial helps people out there who want to draw "vivid/note-like" Noteskins.
If you have any question, feel free to ask me on this topic. Whenever I get free time, I'll answer ya ;)

Moderators: I don't know the best place to post this tutorial... so I posted here :P


Before starting...

- You must have some basic Photoshop knowledge, mainly knowing to use layers, working with multiple files, copy, paste, selection, slice and gradient tools.
- I recommend creating a folder to save the whole project images.
- I recommend using the default Stepmania 3.9 base arrow, then improving it.
- I recommend patience. It takes lots of trial and error to achieve perfection!


Table of Contents

I. Creating the base arrow
II. Creating the "filling arrow" effect:
III. Creating the 8 arrow transitions
IV. Creating vivid background
V. Creating background tiles
VI. Placing the background tiles on arrows


I. Creating the base arrow

(I'll assume you're picking the "down" arrow for later guide parts)

1. Pick the original borders from the base 64x64 arrow. (ok, about 60x60 arrow...)
2. Rescale (by nearest neighbor) to 4x the width / height - 256 x 256.
3. Redraw the borders using the previous picture as base (in other layer)
4. Create other layer beneath the border, fill the inner contents with a solid color
5. Create other layer above the solid color, draw the "full white inset"

OK, so now we have 4 layers:
A - Borders
B - White inset
C - Solid color
D - Base arrow

Throw away D, we don't need it anymore.
Save the file! "Base Arrow Full Size"


II. Creating the "filling arrow" effect:

I'm assuming you'll create 8 frames per beat (hence 4x2).

1. Select the white inset layer.
2. Create a new file with 4x width and 2x height from the original (for 8 frames for each beat. If you want more, just add more rows / columns)
3. Split the layer with 8 slices (K tool) of the same size as the original white inset layer
4. Paste 8 times the inner inset, one for each slice
5. Lock every layer transparency
6. Select the gradient tool, with radial gradient, ranging from white to black
7. Fill each one of the layers with a different fade level of white / black
8. Adjust image brightness / contrast for each one of the layers. Raise contrast to the max, while setting brightness to different levels for each layer.
9. Use gaussian blur filter to "spread" the white and black parts, for every layer.
10. Save the file. You can choose to edit it later if you wish to "tune up" your effects... "White Insets 4x2 Full Size"

It's done. Every single "white filling" is done. Now, we must put it on the original file. Copy one of the layers and paste it into the arrow file, so we have

LAYERS
A - Borders
B - New White inset (some of the new 8 )
C - Old White inset
D - Solid color

For every white inset layer, you can apply some layer effect now, for example, "overlay", or "50% normal", or "screen"... it depends on what final effect you want to do. I kept the original white inset with inverted colors (black) with 75% normal, and used the other 8 white insets to create a "white on 75% black filling" effect, if you know what I mean...

LAYERS
A - Borders
B - New White inset (some of the new 8 ) with "Screen" effect
C - Black inset with "Normal" effect, 75% transparency
D - Solid color


III. Creating the arrow transitions

So, now we're gonna do the same as we did for the insets, but this time, for the whole arrow, in more steps:

1. Create a new file with 8 times the size of the original. For example, if we were working with an 256 x 256 picture, create a file with, for example, 256x4 = 1024 width and 256x2=512 height.
2. Copy the border from the original.
3. Paste 8 times the border, one for each slice. (to center the paste, select the are from one slice then use ctrl-v)
4. Do the same for the fill color.
5. Do the same for the white inset effect layers...

This time we have lots of layers, don't we? And we don't need to work at this size anymore, since all details are already made. So.

6. Save this file ("Arrows 4x2 Full Size", for example)
7. Flatten all layers of the same category - ex: all border layers should be on a single layer "Borders", all insets on a single layer "Insets", all fill layers on layer "Fill".
8. Save with another name ("Arrows 4x2 Full Size Flattened")
9. Resize to 1/4 the width/height: 256x128. Every arrow is now in 64x64 size.
10. Save with another name ("Arrows 4x2 Real Size Flattened")

If you did everything correctly, borders are not overlapping each other, and arrows are almost good to be saved into PNG format. But the background color of the arrows is still solid...


IV. Creating vivid background

This is a nice part.

1. Create another file, with, say, 100 pixels wide and 500 pixels tall.
2. Draw a nice vertical color gradient, split into many parts. Ex: red to pink, pink to blue, blue to green, green to yellow, yellow to orange, orange to red again.
3. Crop the image borders, where the gradient color repeats.
4. Copy the image.
5. Resample (not resize!) the image to double it's height. Preferentially keeping the current at the top.
6. Paste the image at the bottom, so the gradient is now repeating twice.
7. Flatten all layers.
8. Split the image vertically with two slices.
9. Save as "Arrow Background Gradient"

Now we have a nice gradient to be used as the background for the arrow!


V. Creating background tiles

Well, well, how to explain this easily... we have a gradient, we have the arrows, but we want to apply the gradient to the solid color of the arrow... you must do some math now...

+------+
| #### | <-- Suppose this is the gradient file you just draw.
| ++++ |     Your arrow will "cycle" through half the gradient,
| ---- |     so you must select an square area from the gradient
| .... |     and "scroll vertically" the selection, copying and
|      |     pasting every "tile" of it into a different file,
| '''' |     creating lots of layers...
| """" |---+
| |||| |   |---+       NUM_GRADIENT_STEPS =
| nnnn | A |   |---+       Num Inner White Cycles (8) x 4
| WWWW |   | B |   |       
| HHHH |---+   | C |   NUM_GRADIENT_STEPS =
| CCCC |    ---+   |       32
| #### |        ---+
| ++++ |
| ---- |     Since we must create 32 layers, we must, into 32
| .... |     "vertical scrolls" of selection cover half the
|      |     gradient we draw. For example, if the gradient
| '''' |     starts at pixel 0 and repeats at pixel 320, we must
| """" |     scroll vertically the selection 10 pixels tall a
| |||| |     time, for each layer. (Like A, B, C, ... is showing)
| nnnn |
| WWWW |     I hope you get it ^^;
| HHHH |
| CCCC |
+-------+

After creating this "gradient tiles" file, with 32 square layers, resize the image square to the arrow fill size, and save the file "Arrow Background Gradient Tiles".


VI. Placing the background tiles on arrows

For this part, we need two files:
(A) Arrows 4x2 Real Size Flattened
(B) Arrow Background Gradient Tiles

1. Open (A).
2. Create another image 4x tall as A, sliced 4 times with the original size.
3. Copy every layer on A and paste it on the new image, so we have 4 times the original file, containing all borders and backgrounds and inner insets...
4. Merge all equivalent layers, so we have on the new image:

LAYERS
A. All borders
B. All inner insets
C. ...
...
X. All arrow flat-colored backgrounds

5. Divide every one of the four slices on this image by 4x2, so every single arrow has it's own slice.
6. Open (B).
7. For each layer on this file, copy it, select a different slice on A, and paste it. Starting top-left, going cell by cell, first to the right, then going down,

After 7, your image will be filled with gradients over your arrows...

8. Merge all gradient layers and name it "gradient backgrounds"
9. Place it before the flat-colored backgrounds layer.
10. Ctrl-click the flat-colored backgrounds layer. This will select all the arrow "areas"
11. Click on the "gradient backgrounds" layer and click on the mask button (near the "new layer" button)

Tadah! The gradients are now the arrow backgrounds!!

12. Hidden all layers you won't be using (like the flat-colored BGs)
13. Save the file

Now it's all done creating the graphics for the arrows... you just need to export the file as a PNG now, preferentially using "Save for Web". You need to create another image with the same dimensions as this one, since slices would put every arrow on a different file. Copy all layers merged (Ctrl-A, Ctrl-shift-C), then paste it on the new file, and save it for web.

The next step is setting the metrics file for the Noteskin, but this is for another tutorial... ;)

-
Posted 2007/06/19, 10:00AM, during work (took one and a half hour to type it :S). I know I should be working, but meh :P
Future versions may include pictures, if there's enough feedback / need.

Any feedback is appreciated ;)