This is how I  progressed on how to make the huds digitals and make the animations for them:

I will only be showing one main hud, the speedometer hud shows the progress on how to make. Most other Huds I made are very similar progress to make the hud and animation. I will still show some specific skills for some other huds I made after I show how I made the speedometer.

I started in Adobe Photoshop and selected File > New at the top bar. I set the canvas to be 1000 by 1000 pixels at a 72 resolution. We are in 72 resolution as it gives us less pixel information, so when animating the computer doesn’t have to read so many pixels when we move the positions from point A to B.

speedometer-canvas-settings

When I created the workspace, I set up guides by dragging them for the ruler.

speedometer-set-up-with-guides

Next I set up another workspace in Photoshop with the same size and resolution. I made original textures for the huds. First lets make the clock base. Make a new layer using the tools which provides: bucket, brushes and blend tools. I will be using these colours which I made in Photoshop to use as a template for colours.

Clock base colours.png

Make a fine texture making the colours blend into each other. It should look something like this.

Speedometer clock face texture.JPG

Next I made the metal texture! The metal texture is more difficult to do. The basic way of doing it would be by getting a grey colour then using the blur tools in Photoshop to make it look like a metal grained texture. I researched into how to make realistic metal textures in Photoshop. I used this video:

Uploaded on 18 Aug 2009 Make a Simple Metal Texture in Photoshop – Quick Tip #1 (Accessed: 26  February 2017).

Here is my metal textures which I have made I in Photoshop by using the tutorial.

speedometer-metal-texture

Now I selected both of the textures and copied them into the Speedometer workspace. Next I made template for circles which then I can used as masks. I made make a circle using the Ellipse Tool.

circle-shapes

I resize it to big but not too big where it is touching the canvas edges. I rescaled it by Cmd (or Ctrl on windows) + T to make box appear so I can resize it. I will hold down shift and drag the box outwards to make it have a even rescale upwards. To make something like this:

big-circle-over-clock-base

On the layers Cmd click on the Clock Base to make a selection.

layers-maskingcircle-selction

Now at the bottom bar at layers go to the mask buttons to create a circle mask for the clock base.

mask-buttonmask-circle

Now do the same thing but make the circle bigger for the metal which will be behind the clock base of the outer ring. Now go into Adobe Illustrator to make the clock handles.  I made one handle by research and getting inspiration by various existing clock handles to use in my project. I made a new graphic by going around an existing clock handle with the pen tool and  used the anchor tool to make round corners, etc.

adobe-illustartor-no-wirtefeamadobe-illustartor-wirtefeam

I saved and then exported as .PSD file type to use in Photoshop.

I lined the clock handles to the centre, added an anchor point in after effects so it is easier to rotate in After Effects later.

clock-with-handle-screeshot

Now I will add the text. From my research and ideas, I liked the Madison BQ font which I found in a book called “The Complete Typographer” By Christopher Perfect. The front I will be using isn’t one of the default fonts. I got the front font from a online website. Link: http://fontsgeek.com/fonts/Madison-BQ-Regular

I will by making text layers from the numbers 0 to 12. The font size I used was 100 and now for the placing of which numbers need to go where on the clock. This was hard to calculate and I had to do it many times to make it right. I used guides and maths to make the numbers go to the right places. Here is the screen shot of where the guides and numbers needs to go.

Guide on placing numbers screenshot.JPG

I also added small lines around the clock next to the numbers, which most car dials and speedometers in driving game do have. I made some by making a simple rectangle shape then copy and pasted and rotated it a lot.

Small lines around clock.JPG

Next I added detail to the speedometer. I added texture to the clock bases and numbers by using specific brushes to make the rough or metal texture. I added shading to the clock by using a black to transparent gradient from the centre to outside.

After I added texture and shading to the dial I make the clockwork gears. A similar progress to the clock bases masking. I made a template out of shapes selecting it all to make a mask out of it to use it on the metal texture.

gear-masking-templatemetal-gear-maskclockwork-masking-layer

I made two clockworks gears with different shaping and metal colours. I will save both of them and export as a .PNG ready for After Effects.

Next I exported the clock dial that I made in Photoshop as an .PNG read for After Effects well. I saved the .PNG two times one for the clock base with the numbers and the other just for the clock handle.

Once in Adobe After Effects, create an new project and composition. Make the two composition 1000 by 1000 for the two clockworks gears. Make another composition for the dial at 1000 by 1000 as well. Make one more composition for all of pre-composed assets to come to gather to make the animated hud. We will need this one at 720 pixels in height and 1280 pixels in width. For all of the compositions make them durability 10 seconds long.

Then import the .PNG assets. Get your first clockwork gear and put it in the composition. Place two key frames in the rotational at the star and ending of the composition. Make sure the first is key frame value is at 0 x 0.0 degrees. For the Last key frame make it 2 x 0.0 degrees so it spins twice in one loop. We will need no Easy eases as we want the loop to be fluent and want it to be at the same speed at all times.

Clockworks animtion 1.JPG

Render that out and export it as a .avi or .mov (depending if you are on mac or windows). Now do the same with the other clockwork gear you have made. Pre-compose both of them separately and make a new composition and put the two gears together and make them fit so they can rotate at the same time.

two-gears-togehter

Export them as .avi or .mov and start to animate the speedometer dial. Put the two .PNG  clock handle and clock base into After Effects. Centre both of the .PNG’s in the centre of the new composition. Click on the clock handle and put the anchor point at the circle part of the handle.

clock-handle-anchor-point

When the anchor point is there we can rotate the clock handle easily around so it is like an actual dial on a speedometer. Set up the key frames so it can be seen by clock handle and can move around the speed dial.

roations-keyframes

To make the clock handle it needs to be slightly shaky to make effect clockworks and the engine is on, place down two key frames for positions, one at the start and one at the end. Click on both of the key frames by using the cmd or ctrl. Go to Windows >Wiggler.

after-effect-wiggler

A new window tab should appear.

wigger-tab

The wiggler tab, gives a shaky effect to any assets. It can be customized to have a bigger shaky effect or a little shaky effect. For the clock handle and clock bases I made a small shaky wiggler effect but made the clock base slightly shaker than the clock handle. The key frames for both the clock handle and dial base should look similar to this.

Animation full keyframes.JPG

Pre-compose the main part of the speedometer and put it in another new final composition with the pre-composed clockwork gears. Put the gears behind the speedometer dial so it seems to be popping outside of the clock.

last-screenshot-shows-full-st-uff

When dose go to File > Export > Add To Render Queue.

render-queue

Before rendering and exporting make sure you change the Output To any file you want it to be saved as and change some settings in Output Module. Click on Lossless and change the channels from RBG to RBG + Alpha to have transparent background!

Your speedometer should look like this but better (this is in a GIF file type, avi is better to export as!).

speedometer-gif

Notes for other Huds which I made:

All other where made in a similar process. From Photoshop to After Effects!

I found a good tutorial for the making the vintage style clock which I used as a guideline and inspiration to make the something similar for the speedometer!

Link: http://ditscheri.com/blog/design-a-vintage-clock-with-rusty-mechanics-in-photoshop

I used these set of brushes to create the metal textures and nuts and bolts:

Link: http://arkyrra.deviantart.com/art/Arc-s-Rivets-Metal-Brushes-63621015

It was helpful to make it look more realistic! Here is an rough example of what the brushes can do!

Metal texture test 2.png

 

 

 

 

 

 

 

 

 

Advertisements