Graphic blog, Webdesigns tip&tricks, Photoshop tutorials

You certainly already met on the web, this type of illustration; it is often regarding a security service or main time a global service, colour changing with the range. Today I suggest to you a Photoshop tutorial to duplicate this icon of shield, you can later use in you next graphic creations.

Here is the representation of final result under different colours.

You can there download a pack including icons with png and psd extended files attributes.
If you do not want to follow this tutorial, you can still download this file to include these icons into your works, but in this case, please be nice to inform around you about this website

PHOTOSHOP TUTORIAL, Creating a shield icon.

Step 1: Create a new document

Open Photoshop and go to the menu File> New (or hit Ctrl/Cmd + N) et update the values : width 600 pixels and height 600 pixels.

Select the Paint bucket tool (G).

Edit the Set foreground colour by the blue #33c3f3 then fill in your picture.

Step 2 : Create the basement of shield

Select the Pen tool (P) and update the foreground colour by the black.

With help of Pen tool create the basement of the shield, in case of, you can use this picture to make you work easier:

Or this Photoshop file, you can download clicking there:

PHOTOSHOP FILES

Rename created layer « Shield ».

Step 3 : Create a first border

To simulate the stone shield border, add a gradient. To do it use the Layer styles (menu Layer> Layer styles> Gradient overlay).

A new window gets open, use the settings from the following picture for inner shadow.

Step 4: Create a second border

To give more reality to the metallic borders, you need to create a second border to simulate a relief, to do it, you only use to duplicate the layer and to update the gradient.

To start this operation, right click on the layer « Shield » and select Duplicate Layer. A copy
appears, rename it “Shield 2” then right click again on “Shield 2” and select Delete the Layer style.

Then hit Ctrl/Cmd + T to active the free transform and increase the size by 97% (height and width in the option tools on the top side). Type “Enter” to validate updates.

To close this step, apply a gradient, go to the menu and follow the hereby setting.

Step5: Create the inner shield

To create the inner shield, it’s easy because it is similar to previous step. Duplicate the layer “Shield 2”, rename it “inside” then delete its layer style and apply it a colour overlay.

I do not explain it once again, please refer to previous step

Notice: instead to apply a Gradient, you have here to apply a colour, the nuance is located in the Layer style menu, in place of clicking on Gradient overlay, click on Colour overlay.

Here is the colour to use : #140074

Step 6 : Create a Checkerbord

This step is regarding the creation of a Checkerboard, to do it perfect, you need to define some guides on your picture.

Press on Ctrl/Cmd + R to display the rules, then put a mark on the top, the bottom, the left and the right of the shield. Then, with the tool Rectangular marquee tool (M) and the Info panel, define in pixels, the height and width of your shield, to know where to put the marks of the middle place (vertical et horizontal).

Duplicate the layer « Inside » (right click and select Duplicate the layer). Rename it “Checkerboard”. Update now the inset colour by: #0080c1.

Then use the Rectangular marquee tool (M) to delete the right and left low parts

Step 7: Create the first reflect 1/2

To increase the shine effect on the reflect, the first one has to be quiet and has to be put on the right bottom.

To create it, retrieve first the layer “Inside” selection, press on Ctrl/Cmd + click on the layer thumbnail.

Now, create a new layer (Ctrl/Cmd + Upcase + N or menu Layer> New> Layer) and name it “Reflect 1”.

Then select the Gradient tool (G) and in the gradient selector choice the second Foreground to transparent

Update the foreground stage by the white.

Create a gradient on the layer, starting from the bottom to the top (Do not forget to keep Shift pressed while making the gradient).

Step 8: Create the first reflect 2/2

The goal of this step is to decrease the reflect previously created. For this operation, use the tool Layer Mask/

Start to select the layer « Reflect 1 » then go to the menu Layer > Layer mask> Reveal all

Then select the Brush tool (B) and select in the Brush Preset Picker the Soft round, size 150px then reduce the opaqueness of 10% (check the options tool bar on top of screen). Update now the foreground colour by the black.

On the layer mask, use the Brush tool (B) to be able to shadow the centre of the reflect. Do it at the instance of the picture below:

Step 9: Create another reflect

The creation of this reflect is not really easy and needs a meticulous attention, take care you do not jump on of the next points of this step.

Start with the duplication of the layer « inside », put it over all other, rename it ‘Reflect base ». Press Ctrl/Cmd + T then reduce the size of 97%.

Retrieve the selection of this layer (Ctrl/Cmd + click on the thumbnail).

Shadow the layer “Reflect base”.

Create a new layer and rename it « Reflect 2 ».

Edit the foreground colour by the white and go to the menu Edit> Fill.

Then go to the menu Layer> Layer style> Blending options and decrease the Fill opacity to 50%

Then go to the Inner glow and take example on the hereby picture to setup it

Create a new layer under the layer « Reflect 2 ».
Merge the both layers together (select both layers at the same time and right click and select Merge layers) Rename the new layer you get so, in “Reflect 2”. This operation allows you to crush the layers styles.

Use the Selection tool (M) and then, delete the right part (use the marks for it)

And to finish, use a Layer mask and the Gradient tool to shadow the top part of this new reflect (the technique of Layer mask has been detailed in step 7).

Step 10: Create a new reflect

Use the same method now, for the creation of a rounded “reflect”, on the right.

Step 11: The last reflect

Use once again the same technique of Layer mask to create a reflect on the top left side of the Shield.

Step 12 : Create stripes

For creation of stripes, nothing is easier than this operation. Select the Line Tool (U) then change the foreground colour by the white and the weight to 30px.

Create now a new group (menu Layer> New> Group). Rename this group “Stripes”.

Change the foreground colour and draw a stripe in the middle of your picture (think about to keep the Shift key pressed)

Duplicate this stripe and move it to 50 pixels to the bottom (use the move tool (V) and use the keyboard arrows, the Uppercase key allow you to move an element from 10 to 10 pixels)

Repeat it to create 4 stripes.

To finish with it, select the group “Stripes” and activate the free transformation (Ctrl/Cmd + T)
In the bar tool options, on the top of the screen, enter 30 as rotation grade and press Enter.

Step 13: Coating

Right click on the mouse on the group « Stripes » and select Merge group.

Retrieve the outline of the layer « Stripes ». Go then to the menu Selection> Invert.

Select the layer « Stripes » et press the Delete key.

Use the Move tool (V) to check if some residues do not exist on the invisible parts of stripes, if it is the case, delete them using the Rubber (E).

And now, to finish, go to the menu Layer> Layers style and add a Gradient overlay, an Inner glow and a darkness.

Keep example on these pictures for the setup

All this get this result

To go ahead in the future regarding the icon creation, you can also change the colours or why not, you can add darkness on the bottom.

Well, the Photoshop tutorial in now finished! I hope you all made it with success, if it is the case, get my congratulations, in opposite, we can meet in the comments to try to solve the problems you got during this tutorial. All together, we will certainly find a solution or a trick to get out of this situation

Regardless of this, thank you very much to you all, you took part of your time to read this article, if you liked it, did you know you can help us? Please, share this link with your friends on Facebook or Twitter, each new reader will bring a part of your help.

Related posts:

1. How to create a clean and design portfolio layout using Photoshop
2. How to do a glossy and animated jQuery button 1/2 Photoshop part
3. How to create an energy ball effect as Dragon ball Z with Photoshop
4. How to do a fancy layout for a graphic design blog using Photoshop
5. Create a Vintage Movie Intro Wallpaper in Photoshop