For those addicted to Skyrim, you may be looking to design a neat icon for your gaming based projects or websites. This tutorial will show you how to create a neat ‘shield’ type icon, which can be used for many designs! PSD at the end of the post!
Skyrim Icon in Photoshop
As with most of my icons, I like to start large. I started this project with a 1024px by 1024px document, filled with a black background. Of course, you’re free to start at any size you wish. Next, I started to lay out the different elements of this design. We’re going to be working with 4 primary elements.
– Outer black ring.
– Inner silver plate.
– Beveled plate.
– Middle circular plate.
To define the size of the design, I’m going to create the Outer black ring first by dragging out a perfect circle in the center of my document. (To constrain your circle, hold down your Shift key).
With that created, our next circle will act as the silver plate. To make things simple, I went ahead and duplicated the current circle by using the Command+J (Mac), CTRL+J (PC) shortcut key, and scaled the duplicated circle down. This can be done by using the Command/CTLR+T shortcut key to enter Free Transform mode, and then drag one of the corners inwards. **To ensure a perfect scale, hold down Option+Shift (Mac), Alt+Shift (PC) while dragging. It’s also probably a good idea to change the color of the new circle so you can differentiate it from the previous one.
Do the exact same process two more times for the other elements. (Duplicate then scale). The third circle should be scaled almost exactly like the second, and the fourth circle should be scaled only slightly inwards. See the image below for reference.
Now that we have the elements in place, let’s start adding Layer Styles. We’re going to start from the back circle, and move our way forward. *Important: Make sure the final circle, the middle one, is colored #404040.
Back Circle – Gradient Overlay, Inner Shadow
Inner Silver Plate – Gradient Overlay, Inner Shadow, Stroke
Beveled Plate – Gradient Overlay, Drop Shadow
Middle Plate – Pattern Overlay, Gradient Overlay, Inner Glow, Inner Shadow
At this point, if you followed the Layer Styles above quite closely, you should have a result that looks like this:
Next, we’re going to add some texture, highlights, and the Skyrim logo! Now that we have our layers set up with the proper lighting, it’s time to add textures! For the metal texture, you’re free to use any texture that you like, but the one I used I found over on DeviantArt. Click the image below to be taken to the page.
Once you have the texture downloaded or copied to your clipboard, place the image inside the document that we’re working with. Place the layer above all of our layers except the middle plate layer, which should be your top layer. You should see something like this:
Now that the metal texture is in place, we need to mask it to fit inside our circles. In your Layer’s Panel, turn the bottom most circle into a selection by holding down Command/CTRL, and clicking on the layer’s Vector Mask. If you did it correctly, you should see “marching ants” running around a circle. If you do, with the metal texture still active, click on the Add Layer Mask button () at the bottom of your Layer’s Panel. You should see the metal texture conform to the circular design.
In order to blend the texture with our layers, go ahead and change the Blend Mode of the texture layer to Overlay. This can be done at the top of your Layer’s Panel. You’ll probably see the word Normal by default. Once that’s done, duplicate your texture layer using the Command/CTRL+J shortcut key, and switch the Blend Mode of the new layer to Soft Light. You should now have a nicely textured design.
As for the Skyrim logo, a quick Google search brought me to a nice PNG of the logo:
From here, go ahead and place that logo in the center of your design, and move the layer right to the top of your layer stack.
The last thing I did, which is optional, was I added a few highlights to the edges of the Black plate. With the black plate layer active, create a new layer with a 40% opacity, then turn the back circle into a selection. (Command/CTRL+Click on the circle’s Vector Mask). Use a nice large brush (I used a 300px brush), with a Hardness of 0%, and add highlights around the edge where you feel it’s necessary. Once the highlights are in place, the back plate should have a bit more depth, like the final image below: