Site Navigation:

Home // Tutorials // Photoshop® // Waving Flags

Waving Flags

Waving Flags image 1
So the World Cup (2002) is underway and you want to show your support by pasting flags up all over your web site, cause that's sure to help. Well why not....

To start with, you will need your flat flag image, Since I'm using an england flag and its fairly simple, I created mine.

So make a new image 500x500px with a white background. Paste your flag image into the centre of your image.

HOLD CTRL and click on the layer containing your flag to select it. Press X then D to reset the colours. Now go to Edit>Stroke choose a setting of 1 px and make sure Centre is dotted. It should look like mine, unless of course your not supporting England.
Waving Flags image 2
Now you got your basic flat flag sorted, its time to make it wave. Firstly, we want to create the shadows that make it appear waving. To do this HOLD CTRL and click on the flag layer to select it. Select your gradient too. Press X then D to reset your colours. Now make sure you are using the reflected gradient as shown in the picture.

Create a new layer. Now, drag the gradient horizontally a few times to get a pattern like mine. Try to match mine as close you can to get a realistic outcome, (may take a few tries).
Waving Flags image 3
Once you have it looking similar, lower that layers opacity to about 30% but this depends on what flag you are doing it on. Just so you can see it faintly like mine.

Once done. With the black shadows layer selected, press CTRL + E to merge the layer with the flag one below. It should be looking like mine opposite.

We have the shadows, now we need to make it wave.
Waving Flags image 4
Make sure you have nothing selected (CTRL +D)

Now go to Filter>Liquify

Or Image>adjust>Liquify

Select the Warp tool (W)

In the Tool options set the brush size to around 73 and pressure to about 12. Simply dray it to shape, you will need to change the Brush Size. To modify various parts. Again, see if you can get it to look like mine. The way you modify it depends on where your shadows are. So see if you can get it to look like my image opposite, If you make a mistake just press CTRL + Z to undo. When your happy with it click ok.
Waving Flags image 5
Its starting to look pretty good now except if you went too made with your liquify tool, you may have slightly jaggy edges, but not to worry. We have a solution. Use the Blur tool with the following settings...

Now paint just around the black line around the flag, this will smooth it out and make it look nice.

I now simply added a drop shadow to mine... but that's optional.
Waving Flags image 6
You are basically done now! Ready to paste on a web site...

You may want to add a flag pole and I also gave mine some text just to polish it off.

Sweet eh? If you want to show it off, post it over at Tutorialforums for us to see.

Hope you enjoyed the tutorial as much as you'll enjoy the world cup!

This Tutorial was Brought to you by Robouk, Please post any questions in the forum. Thank you.

Home Tutorials Free Stuff About Gallery Forum Links Contact

Copyright © Robouk 2001.

Dreamweaver®, Flash® and Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Hosted by Pixelcode - web design tutorials.