PMEDig

2D - Tutorials
Knobs for Rebirth Mods

⇒printer friendly version

Introduction

ModPacker (included on the CD of Rebirth RB-388) gives you the oppertunity to make your own mods (skins) for the RB-388. Beside the sound files (.aif), there are about 58 jpg files needed to make up the skin. One of the most difficult tasks is to make the knob files (see table below).

Picture No. of positions Knob image size
(w x h) in px
Knob image space (px) Picture size
(w x h) in px
12507.jpg 54 30 x 30 1 1674 x 30
12521.jpg 36 13 x 13 1 504 x 13
12522.jpg 36 13 x 13 1 504 x 13
12525.jpg 12 29 x 31 1 360 x 31
12552.jpg 32 18 x 19 1 608 x 19
12565.jpg 41 12 x 12 1 532 x 12

Tutorial

In this tutorial a new knob for the TR-808 (12521.jpg) will be designed. Photoshop is used in this tutorial but other 2D-applications may be used in a similar way.

1. In Photoshop make a new file with width 13px and height 13px. Name the layer "background" and fill this layer with the background color of your TR-808. I used light grey (#CCCCCC) for this tutorial. Save the file as knob.psd.

2. Add a new layer and name this layer "knob". Zoom 800%. Select the Elliptical Marquee Tool (M) and make the following adaptations: Feather 0 px, Anti-aliased checked, Style Fixed Size, width 9 px, height 9 px. Add thee marquee to the center of the knob layer.

3. Fill the marque with the color of your choice (in this tutorial light brown #907B6A). Deselect the marquee (Ctrl+D).

4. Select the Costum Shape Tool (U) and select the shape "square". Make the selection as picted below.

5. Name the shape "dial" and change the color to white (#FFFFFF).


6. Add a set to the layers tab and name it "knob". Drag the dial and knob layer in this folder.

7. Select blending options for the knob layer and make a Drop Shadow as depicted below.


8. The "12521.jpg" knob has 36 positions. With 8° between each position, the knob turns in total 280° (35 x 8°). Therefore the dial has to be turned 40° to adopt the first position.

9. Select the knob folder and select Edit -> Transform -> Rotate (Ctrl+T).

10. Add the value 40 in the "set rotation" box. "Commit transform" (Return). The dial is in its first position.

11. Select File -> Save For Web (Ctrl+Shift+Alt+S) and save the file as knob01.jpg (quality 90).

12. To turn the dial every time 8°, an Action will be defined. Create a new action, name it "turn knob 8 degrees" (Function key: Ctrl+Shift+F12)

13. Record the following action:
a. select Edit -> Transform -> Rotate (Ctrl+T)
b. Add the value 8 in the "set rotation" box
c. "Commit transform" (Return)

14. Stop the recording.

15. Select File -> Save For Web (Ctrl+Shift+Alt+S) and save the file as knob02.jpg (quality 90).

16. Turn the dial 8° (Ctrl+Shift+F12) and save the position (Ctrl+Shift+Alt+S) as knob03.jpg.

17. Repeat step 15-16 until you have the 36 positions (knob01.jpg - knob36.jpg).

18. Save and close the knob.psd file. Put the 36 position files into one folder (e.g. Knob positions).

19. Open ImageReady (Ctrl+Shift+M) and import the 36 files: File -> Import -> Folder as Frames.

20. Each position is a separate layer.

21. Select Image -> Canvas Size and make the following adaptions:

22. Add a new layer at the bottom and name this layer "background". Fill this layer with white (Edit -> Fill: White).

23. Zoom 400%. Select the Move Tool (M) and make the layer knob01.jpg visible. Select the knob02.jpg layer make it visible and drag the layer to the right and leave 1px (of white) between the layers.


24. Repeat this until all the 36 positions are arranged.

25. Flatten the image (Layer -> Flatten Image) and save the file as 12521.jpg when you want to use it in a new Rebirth mod.