Photoshop tips and tutorials

Photoshop to Flash - A Walk Through

In this post I'll talk you through the basics of creating a Photoshop Comp and taking it throught to Flash to animate.

Creating the Photoshop Composition

We are going to create a Photoshop composition ‘comp’ that we will import into Adobe Flash Professional to animate.

We are doing to produce an image of a windfarm.

View the Procedure

Select Edit > Preferences > Units and Rulers (Windows) Photoshop > Preferences > Units and Rulers (Mac OS) and in the Units sections change both Rulers and Type to pixels.

Select File > New to create a new comp. Set the width to 960px and height to 300px. The comp will have a layer called ‘layer1’. Double click on this layer and rename it ‘hills’.

Creating the Hills

Black and White ColourIn the tools panel click the default Foreground and Background colours icon to set the colours to black and white.

  • Choose Filter > Render > Clouds.
  • Then Filter > Noise > Add Noise.
  • Then Filter > Brush Strokes > Splatter.
  • and finally Filter > Blur > Gaussian Blur.

Experiment with these filters until you are happy with the texture. To change the colour add a hue/saturation adjustment layer via Layer > New Adjustment Layer > Hue/Saturation.

In the Adjustments panel select the ‘colorize’ checkbox and then select a green hue. Experiment with the hue, saturation and lightness sliders until you are happy with the colour now applied to the texture.

Ensure you have ‘hills’ layer selected and not the adjustment layer. Use the lasso tool in the toolbar to draw a hillside shape in this layer. The ‘marching ants’ will indicate it is selected. Add a layer mask by clicking on the icon at the bottom of the layer panel.

Hills creating in Photoshop

You could duplicate this layer by dragging the layer down onto the new layer icon at the bottom of the layer panel. We’ll flip this horizontally to achieve a more interesting hillscape. To flip the layer select Edit > Transform > Flip Horizontal.

Move and resize the two layers until you are happy with the hillside you have created.
Before we add a layer for sky we need to refine the adjustment layer that is used to add the colour to the hills. To do so place your cursor between the adjustment layer and the layer itself and ALT click. You will see an icon made up of a black and white overlapped circles.

Adding the sky

Add a new layer with the new layer icon at the bottom of the layer panel.

The Layers Panel

Change the foreground and background colours to different hues of blue. Then use the same clouds filter to add a sky background ie Filter > Render > Clouds.

Creating a windmill

We are doing to create a windfarm ie lots of windmills but we’ll leave the creation of the windfarm to Flash. In Photoshop however we will create one copy of a windmill that will then be ‘cloned’ and animated in Flash.

Here you may choose to use guides to help create the shape of a windmill blade. To create the shape itself use the pen tool. This creates a path. You can see the path in the ‘Paths’ panel - which is a tabbed panel behind layers.

Right click on the path (described as a working path) in the path panel and choose Make Selection. Return to the layer panel and you will see that the marching ants are now following the outline of your path. We will now fill this shape with a gradient colour. To do so use select the gradient tool from the toolbar and then a white/black gradient from the options bar.

Windmill Blade

Use the crosshair to create a gradient effect by dragging. Experiment until you have created a shadow gradient effect that you think works well.

You may want to resize the blade. Use Control T Windows/ CMD T MAC to break up transform handlers around your blade shape. Resize until you are happy with the shape. Drag the original blade onto the new layer icon to duplicate.

Blades with Transform Handlers

With the duplicated version of the blade still selected for transformation use the option bar to set a rotation value of 120°. Repeat the duplication and transformation process until you have 3 blades positioned as followed.

All 3 Blades of the Windmill

Tip: When duplicated and rotating the blades ensure they stay within the canvas otherwise they will be cropped when moved. Now we will create a mast for our windmill.

To do so we will use a vector shape. Select the Polygon Tool from the Tool bar. In the Options bar enter a value of 3 for the number of sides. With white as your foreground colour draw a triangle. This wil automatically get added to a new layer. This doesn’t look very much like a windmill mast so now use the transform tool Control T Windows / CMD T MAC to squash and stretch your triangle until it resembles a mast. Once you are happy with the shape select the Add Layer Style button on the bottom of the Layers panel and choose ‘Gradient Overlay’.

Mast shape Transformed and Gradient Overlay

Experiment with the gradient setting to give more depth to your mast. On the duplicated layer use Control T Windows/ CMD T MAC to show the transform handlers. The transformation point that is used to rotate the blade needs placing at the axis. To do so use hold down ALT and drag the transformation point so it is positioned centre left as follows:

Your composition should now look something like this.

Final Comp

Before moving into Flash it will pay dividends to ensure that you have named all your layers appropriately. I would also at this stage merge the windmill blade layers into one layer called ‘blades’. To do so select the layers with the three blades on and right-click and select ‘merge layers’.

Named Layers

Tip: Use the eye icon in the layers panel to toggle layers on/off to ensure everything is named correctly.

Save your Photoshop file as a PSD.

Importing the Photoshop Comp into Flash

With the Photoshop composition ‘comp’ complete we will now move into Adobe Flash Professional. Create a new Actionscript 3.0 file.

Import Settings

Select File > Import > Import to Stage and browse to locate your PSD file. The following dialog box should now appear. Notice how all the layer names you used in the Photoshop composition are carried across into Flash. Flash wants to bring all the content in as Bitmaps but we’ll tweak the settings a little. Select the Mast layer. You will now be offered the opportunity to import the layer as a MovieClip.

Flash Import Photoshop Dialog Box

Select ‘Create MovieClip for this layer’. Do the same for the ‘Blades’ layer. The other layers we can leave as Bitmaps. This dialog box also allows you to set the stage size in Flash to match that of the Photoshop canvas, That is a great time saver so ensure you check the option to do so before leaving this dialog box. Once the PSD is imported Flash will create layers and library items for the elements of the PSD.

Creating the Windmill MovieClip

Identify and select the blades and mast layer. Then select Modify > Convert to Symbol. Give the symbol a name of ‘Windmill’ and choose the MovieClip symbol type. In the Library Panel in Flash you will now have a movieClip called ‘Windmill’.

Items in Flash Library

Double click on the MovieClip’s blue icon in the Library Panel to edit it (or right-click on the MovieClip in the Library Panel and choose Edit). You should now be in Symbol Edit Mode where the symbol is isolated for editing. Both the mast and the blades are on the same layer. This is no good for tweening they need to be on separate layers. Select both objects (mast and blades) and then choose Modify > Timeline > Distribute to Layers.

This will place the mast and blades symbols on separate layers named appropriately.

Reposition the layers to create a windmill and then in the blades layer right-click over the blades movieClip and choose Motion Tween. In the Properties inspector sent the rotation value of the motion tween to 1. Ensure the mast layer has the same length of timeline by adding a simple frame to match the 24 frames of the blades layer. Use the breadcrumb to return to the Flash stage. You could now add multiple windmills to your Movie and resize and reposition to create your windfarm.

Ten Photoshop Starter Tips

Everyone knows how to use Photoshop right? Wrong.  In my experience plenty of people have access to Photoshop and 'dabble' with it, but perhaps aren't using this powerful application to its full potential.  My tips are unashamedly aimed at web designers / developers.

1. Set Photoshop Up to be Web Friendly

Before you start let’s set up Photoshop to be web friendly.  Web developers understand pixels, none of this print nonsense of inches, points and picas.  So we’ll set Photoshop up to be web friendly.

Select Edit > Preferences > Units and Rulers (Windows) Photoshop > Preferences > Units and Rulers (Mac OS) and in the Units sections change both Rulers and Type to pixels.

When opening an image to edit also ensure that the image mode is set to RGB colour.  This is found under Image > Mode > RGB Color.  A quick way to check your image is RGB is to toggle the Layers panel to the Channels panel.  A RGB file would appear as follows with a channel for Red, Green and Blue (the primary colours of light).

2. Rotating and Scaling an Image

So you open an image file such as a JPG saved from a digital camera and you want to rotate it.

Select Image > Image Rotation and choose the most appropriate setting for example 90° CW – that is 90° clockwise.

Under the same Image menu you will also find Image > Image Size.  Use this to resize the image, most frequently and by default you will constrain the image proportions.  Untick Constrain Proportions if you would like to change either the width or height disproportionately (not recommended).

If you require a bigger canvas ie more space outside your image, then Image > Canvas Size can be used.

This can also be used to crop the image if you make the canvas smaller than the current image.

3. Make the Background Editable

When you open an image file such as a JPG saved from a digital camera and you want to move it, you would instinctively select the four headed arrow icon to try and move it.  But nothing happens.  That is because this is a special layer called background and there are certain things you can’t do to the background layer.  You can’t move it, you can’t make it transparent and it must always stay at the bottom of the layer stack.

A small padlock next to the layer indicates it is locked.  Usually a layer can be unlocked by using the icon at the top of the layer panel.  But not in the case of the background layer.

To solve all these issues double click on the padlock.  This will open the ‘New Layer’ dialogue box.  You could choose to rename the layer rather than accept the default ‘Layer 0' name and then click OK.  The layer is no longer the ‘special’ background layer and is now completely editable.

4. Find the Essential Panels – Layers, Info, History

Panels are all listed under Window .  The Layers, Info and History panel can also all be found on the right-hand side of the default workspace.

The Info panel is just that.  It provides information on RGB settings, x/y coordinates and width/height.

The History panel is handy for visual undos.  You can see what you did step by step.  Use the slider to move backwards (or forwards) through them.

The Layers panel is probably the most used.  Here we can add, delete and duplicate layers.

Photoshop comps (compositions) are generally made up of multiple layers.  This makes life easier when editing complicated images.  A common issue amongst designers is to fail to save their PSD file, which has layers in it, and then only have a JPG to re-edit.  The JPG file won’t have layers so it becomes a nightmare to edit.

To add layers use the new layer icon at the bottom of the layers panel.  Layers can be reordered by dragging them around and they can be duplicated by dragging an already existing layer onto the new layer icon.

5. How to Select, Deselection and Delete Stuff

Selection tools such as marquee, lasso and quick selection tool all can be used to place ‘marching’ ants around a selection.  Once selected the content can be deleted, copied or moved.

Use CONTROL D on Windows / CMD D on Mac  to drop / deselect a selection

Use Select > Inverse to select everything that wasn’t previously selected.

6. Adding and Moving Shapes

Use the shape tool to add shapes.  These include boxes, ellipses, rounded rectangles and custom shapes.  The options bar drop down allows you to define proportions and choose from a range of custom shapes.

When drawing circles hold SHIFT and ALT down to draw from the centre.  Shapes are created as vectors.  They can be used to create masks by placing content above them in the layer stack and using ALT to drag between the two layers.

7. Transform Tool and Clipping Masks

Use the keyboard shortcut CONTROL T on Windows / CMD T on Mac to get transform handlers around an object.  In the options bar numeric values in pixels can be added to transform the object with more precision.

To apply the transformation either select the 'tick' icon on the options bar or simply press return.

This movie will also introduce the ALT-CLICK trick for clipping masks.  A clipping mask allows you to mask one layer with the content of another.  To do so place the layer to be the masked above the layer containing the shape to use as a mask.  Place your cursor between and hold ALT-CLICK.  You should see an overlapping circles icon.  At this point clicking will apply the mask.

8. Rasterizing Layers / Merge Layers

Photoshop is a bitmap editing tool.  Shape layers, produced by vectors, can be rasterized – ie turned into bitmaps.  Select the shape layer and right-click select Rasterize Layer.  Multiple layers can also be merged into one by right-clicking on selected layers and choosing merge layers.  Shape layers when merged are automatically rasterized.

9. Layers Styles

Strokes, Drop Shadows, Bevels, and Gradient Overlays can be added through layers styles accessible through the layers panel.

To remove a style, drag the effect to the Delete icon at the bottom of the layers panel.

10. Creating and Adding Gradients

Gradient can be added via the Gradient tool which is paired with the paint bucket in tool bar.  The Options bar will preview the gradient.  Double click on this to open the Gradient Editor.

In the Gradient Editor you can add more colours and to your gradient as well as control the opacity over the course of the gradient.

Once you have the gradient selected then a crosshair cursor allows you to draw out the extent of the gradient.