Photoshop Tutorial: How to Create Flag Icon Web Graphics

A Fun and Easy Guide

Being able to create your own web graphics for a site is definitely a lot of fun. Many people believe that they have to hire a web artist to design everything, but this is untrue. In Adobe Photoshop, you can generally create anything you’ll need to make your personal website professional looking, without the high cost of a designer. In this tutorial, you will learn how to create tiny flag icons. These are especially useful if you want to create translation links, country shipping lists, or anything your heart desires.

For this tutorial specifically, you’ll want to zoom in since the original will be so small. Just keep that in mind at make sure to work with the image zoomed in to about 400% or so, whatever works best for you and your computer is fine.

Step 1) Create a blank canvas of about 20x14 pixels. Next, create a new layer and then create a 1 pixel border around the entire image. This will be the border’s own layer and it will not change while you continue to create the rest of the image. Of course you don’t have to create a border, but it generally looks much nicer if you’re making a little flag

Step 2) Then create another new layer and place it between both the background and border layer. I used France in the example (you can use whatever you like, but try to keep it simple for the first time); fill in a nice 6x8 pixel block of blue with the 1 pixel pencil tool. Make sure the blue color is 100% pure on the color scroll selector.

Step 3) Now on the same exact layer, do the same thing for the right side of the flag. Make sure it is a pure color as well.

Step 4)Finally, fill in between the two colors using the same technique as before, I would use white for my French flag

Step 5) Right click the color layer, and go to blending options. Follow the image for gradient overlay. This will give nice detail to the flag.

Step 6) Next, create a new layer above the colored layer, and select the gradient tool now. With a white to transparent gradient, click and hold the tool at the top of the graphic, and pull it all the way to the bottom. It should have a nice, neat shiny effect.