Paramiliar Design Studios Redefining Innovation and Excellence Design Services, website, build, cost effective, World Wide Web Consortium, browser compatability, website renovation

Creating a Professional Flag Icon

Posted By : mattyb 28th Mar 2007

One thing most website designers overlook when creating multi-lingual websites is the flag icons. Sure, it shows the correct flag but when you view it in context to the page, you see just how bad the plain flag looks. Therefore, for this reason we have developed this tutorial to help you spruce up your flags into flags you can be proud to display.

Please note all the images of the flag on this page have been resized to 200% of the original size.

Step 1 - Here we go

Our first step is to load up Photoshop and create a new image 18x12 (that is 18 pixels wide and 12 pixels high). Create a new layer and call this border. Now grab the pencil tool, set the colour to black (#000000) and set the width to 1 pixel and draw a black border around the outside of the image (if you get stuck drawing straight lines then use the shift key to help you)

Step 2 - Making the flag

In this article, we will be making the St. George flag. Why I hear you ask, because I am British and proud. So anyway, let us get on with the show, the St. George flag is a simple red cross. So create another new layer called cross and draw a simple red cross using the same method as before (again if you get stuck with straight lines use the shift key). Now fill in the rest of the space with white.

Step 3 - Using flags from Google

Of course, not all flags can be created that easily for some of the more complicated flags you can always search on Google images and resize them. However if you do use images from Google always check the copyright notice’s. Once you have the image simply shrink it down to the 18x12 size and do the black border.

Step 4 - Making the Flag Professional

This is where it all comes into play, we have the flag and we could use it if we wanted to but we want to make it look professional so this is what we do.
Right click on the flag layer (in our case the cross layer) and click on blending options. Apply the following gradient overlay.

Creating a professional flag icon

Step 5 - Finishing it off

Well the flag looks good so far, you think? We have a reflection on it that makes the flag look like its got depth, but we have not finished there! The final step is to add a white gloss effect to the flag; this will give it more depth and make it stand out more. So next, create a new layer above the cross and call it gloss, with this layer selected create a white to transparent gradient and set the opacity to 75.

That is the end of the article, in this article, you have learned how you can make one of the simplest images, a language flag look professional and clean.