HomePhotoshopDreamweaverIllustrator
 
 

Photoshop - Moving Flag - See the result

A superb effect with many uses. Fly the flag! To get you started, we've included a selection for you to right-click and copy into Photoshop here

1. Firstly, copy/paste your flag of choice into Photoshop and then (if necessary) re-size it to, say 550 px wide. (IMAGE...Image Size and check the 'Constrain Proportions' box)

2. Now create a new document 1600 wide x 750 high, white background (and as this image will be for the Web, of course we'll make it 72 dpi).

3. Copy/paste your flag into this new document. Move the flag with the Move Tool over to the left-ish side of your document (not right to the edge, leave some white there - see below). Make sure the white layer is highlighted, link it to the flag layer and align it vertically (LAYER...Align Linked...Vertical Centers).

4. Now copy the "flag" layer by dragging it down to the new layer icon, select the Move Tool and, with Shift held down, hit the right-arrow key on your keyboard ten times to move the copy of the flag to the right.

5. Repeat this sequence (i.e. copy topmost flag layer and nudge over - Shift + 10 times) until you have something like the image below. In this case, we ended up with ten "flag" layers. I've also coloured the background grey so you can see what's happening.
ten flags
6. Now we're going to create a Displacement Map. If you're not familiar with these in Photoshop, a quick explanation is that it's a grayscale image which allows overlying art to "hug" the contours of the map. It's one of the things that places Photoshop apart from, say Illustrator where this technique is not possible.The key to a successful result lies in the amount of blur applied to the greyscale image that is to become the Map. With no blur at all, artwork is distorted harshly, producing artificial and ugly results. If you think of black areas as being the low points and white as being the high points, the blur is the size of the slope between the two: the higher the degree of blur, the smoother the transition will be. To this extent, it is the same as creating bump maps for use with the Lighting Effects filter. Confused? Let's just do it! Re-set your Foreground/Background colors to Black/White by pressing D. Create a new layer at the top of the pile and fill with White (Ctrl + backspace). Now select a large, soft-edged brush of 250 -300 px., Opacity 50%, and draw a series of vertical Black lines as below. I know! I know!, when you start your second stroke, the end of the first stroke will "follow" it. To get around this, create your first stroke and then go to your Toolbar and change tools. (Just click on any tool) and then re-select the Brush Tool. When you've done that, lower the size of your brush to around 125 px and draw a diagonal line as shown:
displacement map

7. Now you need to save this displacement map. Select all (Ctrl + A) to get marching ants going all round the canvas, copy it (Ctrl + C) so it is saved to the clipboard. Open a new document (Ctrl + N) -the size will be exactly as you require as Photoshop has "remembered" the dimensions of the item on the clipboard - and paste the displacement map onto this new canvas (Ctrl + V). The power of keyboard shortcuts! Now go to File...Save As, name this file (we called ours flagdismap.psd) and decide where you want to save it (Desktop is usually a good option). Then close this image.

At this time, you can hide or even delete the "banded" layer from the top of your layer stack - it's served its purpose.

Note: The dialog box below gives some idea how our flag is going to be "distorted". The Horizontal Scale is the amount the flag will be twisted along its short edge. The Vertical Scale is the distortion along its longest side. Therefore for a simpler (and easier) effect, leave the Horizontal scale at 0%, create a Displacement Map with just vertical bands and shade in just a vertical manner. By introducing a slight Horizontal Scale, we wish the flag to twist in 2 planes. Therefore we drew a diagonal line on the dispalcement map. You will need to use your eyes carefully when "shading in" later in the exercise. Practice. Take your time. It will come good!

8. Now we are going to use the displacement map we created to distort the flag layers. Make sure all of the flag layers are visible and make the topmost layer active by clicking on it once (we don't want marching ants surrounding the flag in this layer.) Choose FILTER...Distort...Displace and a dialog will open for you to choose some settings. We used those to the right:

When you press OK you will be asked for the location and file for the displacement map. Find it and click Open.

Dispacement filter

9. Now click each of the flag layers in turn (to select it, not to turn the marching ants on) and press Ctrl + F to apply the displace filter on each flag layer. Do not apply this effect to your bottom (white) layer, just the flag layers. Does your displacement of the flag look something like that to the right?

10. Now link all the flag layers together and go to LAYER...Align Linked...Horizontal Centers to stack all the flag layers on top of each other. At this stage you can marquee around the image to crop some of the excess white (or in our case, gray) background (IMAGE...Crop):

11. Un-link all the flag layers...and have a break!

displaced flags

 

1, 2>>
©grafikhaus 2015 | sheffield-central.com