Central Dynamo Interface Tutorial
Before we begin, I would like to thank you very much for viewing this tutorial. Your continued support will allow me to create more incredible and useful tutorials for you to benefit from. When you complete this tutorial, I would appreciate any feedback you wish to give me. Once again, thank you.
I assume that you have a basic understanding of Photoshop such as how to create and delete layers and channels etc. However, if you do get stuck on a step, or have questions about ANYTHING, please contact me at:
, or post on the tutorial message boards I will be more than happy to answer your questions about how to do a technique or step. Also, the units used in this tutorial are pixels, and if you see something like this "File -> Save As" it just means go to the top menu bar and select "File", then select "Save As".
Thanks again, and have fun!
You may download the zip version this interface. Please open your copy of CentralDynamo.psd in Photoshop so you can have it handy and be able to use it as a reference when you need to. This helps you to see where a certain element of the interface needs to be on the document. A tip I recommend is to set your screen resolution to 1152 x 864 or higher. Of course this is not mandatory, but I have found that when working in Photoshop you need all the desktop space you can have.
- Start by creating a new document (ctrl + n). Make the document size 600 x 450 pixels with a white background, a resolution of 72 pixels/inch, and RGB Color Mode.
We'll focus on the inner circle area first, then work on the side arm areas.
-Start by creating a layer set called "Center Circle Area". Click on the icon that looks like a folder, at the bottom of the layer's palette.
- Create a new layer inside this layer set and name it "middle circle" (Right click on the layer's text in the layer's palette and select Layer Properties, or double click the text in the layers palette).
- Select the neutral gray color, #AAAAAA, for your foreground color.
- With the Elliptical Marquee Tool (M), draw a circular selection of 205 x 205 in the middle of the document. You can create a perfect circular selection by holding shift while dragging the mouse.
To set the dimensions for a selection, press M, and then from the style pull-down menu, select "fixed size" as in the picture below:
Width and Height information of a selection can be found by having a check mark beside: Window -> Info.
- Fill this rectangle (alt + backspace) with your gray foreground color.
- Deselect the selection (ctrl + d or Select -> Deselect) and create a new layer called "inner circle screen".
- Make a circular selection of 171 x 171 and fill it with the color #9B9B9B.
- Deselect, and make your active/current working layer (which is the layer you are currently editing or working on) be "middle circle". Do this by clicking on its name in the layers palette. It's now highlighted.
- Bring up the rulers by pressing ctrl + R. Make sure you have a check by View -> Snap.
- Place your cursor anywhere on the vertical ruler, and drag a guide towards to middle of the circle. It should snap automatically to the middle, when you get close enough to it.
- Then, do the same thing for the top/horizontal ruler, and drag to the middle to make the guides cross, as in the screen shot above.
- With your current working layer as middle circle, drag it with the move tool (V) towards where the guides intersect.
- Switch your current working layer to inner circle screen.
If you're using CS2, make sure View -> Snap To -> Layers is checked, and you shouldn't have to create guides to snap it to the middle. Just drag it with the move tool towards the center and it will snap when it gets close.
- Hit "/" on your keyboard to lock the layer's transparency, and make the red color #d02f38 as your foreground.
- Hit alt + backspace. This fills your layer or selection with whatever the foreground color is. While ctrl + backspace fills with your background color
- Load inner circle screen layer's selection. ctrl + clicking on its thumbnail in the layers palette
- Contract the selection by 2 pixels. To contract a selection, go to Select -> Modify -> Contract
- Create a new channel, and fill the selection with white.
- Deselect, and give the channel a gaussian blur of 4.
- Load the channel's selection by ctrl + clicking on it.
- Go back to you layers palette and create a new layer called "screen inner shadow", right above inner circle screen.
- Invert the selection. shift + ctrl + i
- Fill it with black.
- Deselect.
- Move the layer down by 7 pixels. Click the move tool and hit the arrow on your keyboard in the direction you want to move the layer to move it by one pixel. Hold shift while you hit the arrow to move by 10 pxiels at a time.
- Load inner circle screen layer's selection and invert it:
- Hit the delete button on your keyboard to remove the excess of the layer.
- Deselect, and you should have something similar to below:
- Create a new layer and make sure it's directly above inner circle screen, and right below screen inner shadow. Call it "top hlight".
- Load the inner circle screen layer's selection and grab the elliptical marquee tool.
- Start at the bottom right of the document window, drag to the middle left and subtract an elliptical selection from the circle selection you have active. To subtract one selection from the active selection, hold down alt, then click and drag. When you release, the selection you just made will be subtracted from the previous one.
See below for the screenshot:
- Fill this new selection with a white foreground to transparent background gradient. Start at the top of the red circle, and finish just outside of the bottom of the selection. Hold down shift as you drag to create a perfectly straight gradient.
Take a look below to see what is should kind of look like:
- Deselect the selection.
- Create a new layer above the screen inner shadow layer, but still within the Center Circle Area layer set. Name it "bot hlight".
- Load the inner circle screen's selection and contract it by 2 pixels.
- Now, with the elliptical marquee tool, start at the top left and alt + click and drag to the bottom right to subtract and create our bottom hlight selection:
- Apply a white foreground to transparent background similarly to how we did with the top hlight. Start outside at the bottom of the outside cirle, and finish just after the selection. Remember to hold down shift as you drag to create a perfectly straight gradient.
- Deselect the selection.
- Create a new layer right above middle circle. Name it "outside ring".
- Load the middle circle selection, and make your current working layer be outside ring (it should already be, but just making sure).
- Fill this selection with #aaaaaa.
- Now load the inner circle screen selection.
- Hit the delete key to delete that circle from the middle circle, so you're left with an outside ring.
It won't appear as if anything has happened, but if you temporarily hide all the other layers, you can see you are left with a ring.
You can hide the middle circle layer if you want. It won't show, but I still like to only show layers that I am using for a purpose, so I hid my middle circle layer. We'll need this layer shortly, but won't need it to show. It's probably better to have it as a channel, but either way is fine.
- Apply the following layer styles to the outside ring layer. Just go to Layer -> Layer Style -> Bevel and Emboss, etc.
Bevel and Emboss Layer Style Settings:
Gradient Overlay Layer Style Settings:
Stroke Layer Style Settings:
- Duplicate middle circle layer, right click on the layer's name in the layers palette and select "Duplicate Layer..." and name it "outside darker".
- Place it directly above the outside ring layer. Drag and drop in the layers palette to move a layer's position.
- Make it visible if it's hidden. Click on the eye icon to the left of the layer's thumbnail and name in the layers palette to show or hide a layer.
- Fille the circle with black. Lock it, "/", and hit alt + backspace if black is your foreground, and ctrl + backspace if black is your background.v
- Place guides directly in the center of this circular layer and make sure there is a check next to View -> Snap To -> Guides, and also Layers.
- Zoom in to about 300%, and grab the elliptical marquee tool.
- Start at the intersection of the guides in the middle of the cricle, hold down alt + shift, and drag until the circlular selection is about halfway inside the middle ring area. See below for a screenshot of what I mean:
- Create a new channel (don't worry about naming it anything, just leave as "Alpha 2") , and fill this selection with white in that new channel. We'll need this selection later on, and will save it as a channel so we can load it easily when we need to.
- Go back to your layers palette, and hide your guides. With the selection still active, hit the delete key to remove this inside area, and we're left with just a black sliver of the outside ring.
- Keep the selection active, but lower this layer's opacity to 20%.
- Make a new layer called "inset hlight". Give the selection a white stroke of 1 pixel, inside.
- Keep the selection active, create a new layer called "inset shadow ".
- Stroke the selection by 1pixel, black, inside.
- Deselect and nudge the inner hlight layer down 1 pixel and to the right by 1 pixel.
- Drop the inner hlight's opacity to 20%, and inner shadow to 60%.
- Create a new layer called "outside semi crcles". Make sure it's directly above inner shadow.
- Load the outside darker layer's selection. Show your guides.
- Fill with black and deselect. Lower the opacity to 40%.
- Grab the polygonal lasso tool.
- Create a selection simialr to the one below. Make sure the bottom of the selection is perfectly straight by holding shift when you create that side of the selection. Also, notice how it lines up evenly with the horizontal guide.
-
- Invert the selection, and hit delete to clear away everything except the polygonal shape we just created.
- Duplicate this layer, and Edit -> Transform -> Flip Vertical.
- Hide your guides, and hold down shift and drag straight down until the two peices line up and look like they are one piece like this: (Remember you can nudge layers by 1 pixel by hitting your arrows on the keyboard)
- Hit ctrl + e to merge the two layers together which creates one whole piece
- Duplicate the semi circle layer, and flip it horizontally. Edit -> Transform -> Flip Horizontal/Vertical.
- Hold shift, and drag it to the right until it lines up perfectly on the right hand side as it does on the left:
- Hit ctrl + e again to merge the right and left semi circles into one layer.
- Create a layer called "insets" directly above outside semi circles.
- Load outside darker's selection.
- Grab the line tool and make sure, up at the top, the fourth icon from the left called "Fill Pixels" is clicked, and anti alias is checked:
- Draw a diagonal white line, that lines up with the top of the left semi circle like this:
Since the selection is active, you can safely draw outside of it, and when you let go, only what is inside the selection will be left.
- Create a new layer, don't worry about naming it anything.
- Do the same thing but with a black line, and draw it right above the white line.
- Deselect the selection.
- Drop the white line's opacity to 30%, and the black line's opacity to 70%.
- With your current working layer as the black line layer, hit ctrl + e to merge the black line onto the inset layer (a.k.a. white line).
- Duplicate the insets layer, and flip it horizontally. With the move tool, hold shift, and drag it straight across and put it on the right hand side.
- Hit ctrl + e to merge.
- For the bottom insets, do the same process as the top, but put the black lines on top, and white lines on bottom. Also, make the black lines 80%, and white lines be 30% opacity.
- Merge all the insets onto the inset layer.
Here is what you should have now:
Good job on the screen!
Let's move on to the right side arm area. Follow me to page 2...