Using Blade Pro to make a 3D console
Blade Pro is often used for buttons, occasionally for text, and rarely for anything else.
In this tutorial I wanted to cover the making of something different using
Blade Pro to explore some of the wider possibilities.
Step 1:
 - Starting with a new image, 500 x 300, white on black
- The basic shape is created by drawing a large ellipse in white
- Then a smaller, black ellipse is used to make one of the cut-outs at the bottom
- The rectangular area is a standard rectangle select,
but then I expand the selection by a few pixels to give rounded corners.
- Then, to make it symmetrical, select one half of the image
- Cut it out and paste as a new layer
- Mirror the new layer and position it to make a mirrored join
- Bit of tweaking up to finish off a couple of edges.
- You probably also want to crop the image to centralise it at this stage.
Step 2:
 - Next I want to add some alien/sci-fi looking buttons.
- I used a font called "B5Wingdings" which contains items from the TV series
Babylon 5. There are many of these kinds of fonts available on the web.
- This is added in black.
- Experiment with the first one, until you get the size right, then add the remainder

Step 3:
 - Now set the foreground colour to white
- Select the white area with the wand, and modify the selection to Select Similar
- You may also need to add a little feather as well, but not too much or you will destroy
the dingbats you have added.
- Select Blade Pro from the Plug-Ins
- In this example I have selected to use the standard preset "Obsidian Frame".
It has been tweaked slightly: the radius and height of the edge effect have both been reduced to 13.
The edge effect itself has been switched to a rounded style button.
It was also quite fun just trying random settings and other presets too.
The important thing here is to keep the radius of the button edge fairly tight
and to use the simplest of button edges. Large radius of complicated double bevelled button effects just don't work on this kind of object.
Step 4:
 - Select the rectangle "scope" in the centre, feather the edge slightly
- Fire up Blade Pro again and select an effect you like, I was trying to achieve
a scope looking down on land effect, but hey, choose what you like!
- Once that's set, draw some lines over it to give the "scope" feel. Using the light green is a standard "monitor" colour, so keys into peoples
imaginations, even if it is a little cliched.
Don't forget, you can draw perfect horizontal or vertical lines by holding down the
shift key with the line draw tool.
Step 5:
 - Finishing off is now up to you
- I added a "science" logo onto the main body
- I also added the wingding buttons over the originals, as by the time
I'd finished they had somewhat lost their clarity.
A Lesson I Learnt
I set out to create this image because I wanted to have a console based
navigation system for a web site I was thinking about. As a user moved the mouse over the buttons, different pictures would load in the "scope" part.
Now, setting up the picture, maybe "dicing" the image, or writing some more fancy JavaScript would be OK. But what I'd forgotten was that to try and
get the changing picture into the "scope" space meant I was really going to have
to dice the picture into a lot of smaller images.
Lots of diced images means that I wouldn't have achieved the loading effect I wanted, the construction of the image would have been too clear. So, back to the drawing board and a re-think about the shape I wanted.
Obvious lesson? Think about the end result, then work towards it. Don't just
bodge it until you get there.
|