Gradient Tool:
The ¡®Gradient Tool¡¯ is a very powerful tool which can be used in your designs to create interesting, but yet professional effects. The ¡®Gradient Tool¡¯ forms a gradient flow, using the primary and secondary colors in the ¡®Color Box¡¯. This tool is situated on the ¡®Toolbar¡¯. If the ¡®Toolbar¡¯ is not visible on your workspace, you can make it visible by going to ¡®Window > Tools¡¯. *You can actively select the ¡®Gradient Tool¡¯ at any stage during your design by pressing ¡®G¡¯ on your keyboard. Do note that by clicking and holding on the button of the ¡®Gradient Tool¡¯ on the ¡®Toolbar¡¯ will allow you to choose from other tools in that category, such as the ¡®Paint Bucket Tool¡¯ which is used to fill large or small areas with a specific color.
Type Tool:
The ¡®Type Tool¡¯, also better known as the ¡®Horizontal Type Tool¡¯ will satisfy all your test needs. This tool is situated on the ¡®Toolbar¡¯, and with a click and hold of the button, you can access other useful tools such as a ¡®Vertical Type Tool¡¯. Once you have the ¡®Type Tool¡¯ actively selected, and start typing on the design window, you will notice that a text layer is formed which will be available for later editing. To convert your text layer to a graphic, right-click on the layer in the ¡®Layers¡¯ panel and select ¡®Raterize Layer¡¯ to execute the conversion. This will allow you to apply other more significant effects to this layer. *You can have this tool at hand at any time during your design by simply pressing ¡®T¡¯ on your keyboard.
Color Box:
The ¡®Color Box¡¯ consists of two colors, known as the primary and the secondary colors. The primary color is represented by the ¡®white¡¯ block in the image above, and the ¡®black¡¯ box will then be the secondary color. You will mostly be making use of the primary color, but there are certain tools, such as the ¡®Gradient Tool¡¯ which make use of both colors simultaneously. The ¡®Color Box¡¯ can be found on the ¡®Toolbar¡¯. You can easily reset your colors to the default ¡®white¡¯ and ¡®black¡¯ by pressing ¡®D¡¯ at any time during your design, and you also have the ability to conveniently switch these two colors by pressing ¡®X¡¯ at any time.
Marquee Tool:
The ¡®Marquee Tool¡¯ is an extremely useful tool to actively select certain areas or measurements of a design for resizing, editing, and applying effects to that specific area only. This tool is situated on the ¡®Toolbar¡¯ and has a few different features in the same category which can be viewed by clicking and holding the button of this tool on the ¡®Toolbar¡¯. *Press ¡®M¡¯ at any time during your design to have this tool at hand for easy and convenient editing.
Eraser Tool:
The ¡®Eraser Tool¡¯ does what its name says. You can erase and wipe instances from a design, or a specific layer for that matter, but this tool really offer you so many options and useful features. By right-clicking in the design window with this tool selected, you will be able to change the erase size and hardness, or even erase according to a specific pattern. There are many other options such as transparency of erasing, feather, etc. This tool is situated on the ¡®Toolbar¡¯ *or you can press ¡®E¡¯ at any time to select this tool for use.
Creation & Implementation:
Start off by creating a new document in Photoshop once you have opened the application. You can do this by going to ¡®File > New¡¡¯ *or simply by pressing ¡®Ctrl¡¯ + ¡®N¡¯ as keyboard shortcut. Once you have done this, you will notice a ¡®New Document¡¯ Dialog opening on the workspace. You can now view Figure 1 below as an illustration and reference to the exact values which you have to input into the fields.
Figure 1
You can name your new ¡®.psd¡¯ document according to any name you would like to identify your design. The width of the new document will be 500px and the height will be 300px. When you insert these values, ensure that the measurement is set to pixels. Pixels are the most well known measurement for designs throughout the internet and other external applications. The ¡®Resolution¡¯ field will determine the amount of dots/pixels that your document will contain per inch. Thus, the higher the value in this fields, the finer the detail of your design, which is consequential to a higher quality result. Do note that you can always crop the design at a lower resolution at a later stage if you feel the need to reduce the file size. Set this value to 800dpi.
The other remaining fields in the prompting dialog can be left intact on their default values, and you can now click ¡®Ok¡¯ to continue creating your new document. Once you have done this, you will notice a new, blank window appearing on the workspace, available for you to start working on.
Firstly we will be creating the base for the presentation. You should actively select the ¡®Gradient Tool¡¯ and ensure that you have ¡®white¡¯ as your primary color and ¡®#515151¡¯ as your secondary color. Select ¡®Layer1¡¯ in the ¡®Layers¡¯ panel. If the ¡®Layers¡¯ panel is not visible on the workspace, you can make it visible by going to ¡®Window > Layers¡¯ *or simply by pressing ¡®F7¡¯ as a keyboard shortcut.
View the top and left edge of your design window to see if the rulers of your document are visible. If the rulers are not visible, you can go to ¡®View > Rulers¡¯ to make them visible *or press ¡®Ctrl¡¯ + ¡®R¡¯ as a keyboard shortcut. Once you have ensured that your rulers are visible, click on the top ruler and drag down to the 150px mark on the vertical ruler. Then click again on the top ruler and drag the line down to the 175px mark on the vertical ruler. Lastly, do the same again, but this time, drag the line down to the 250px mark on the vertical ruler.
As you have the ¡®Gradient Tool¡¯ at hand, you should see different settings for the particular tool at the top of the application, on the menu bar. Hold your mouse pointer over the 5 small buttons to view their captions. Click the second last one from the right-hand side, which has a caption that says ¡®Reflected Gradient¡¯.
Now click and drag with the ¡®Gradient Tool¡¯, from the 150px horizontal mark, down to the bottom edge of the window, and release. This will be implemented on the first layer, named ¡®Layer1¡¯. Rename ¡®Layer1¡¯ in the ¡®Layers¡¯ panel as ¡®flow1¡¯. This can be done by double-clicking directly on the caption/text of the layer name and then typing the new name. Create a new layer in the ¡®Layers¡¯ panel, and rename this layer as ¡®flow2¡¯. You should still have the ¡®Gradient Tool¡¯ actively selected, and you can now click and drag upwards from the 250px horizontal mark, all the way up to the 175px horizontal mark. Also ensure that you have the blending mode of the ¡®flow2¡¯ layer set to ¡®Soft Light¡¯. View Figure 2 below as an illustration and guidance to how your design should look at the moment, and also view Figure 3 as a description and reference to the ¡®Layers¡¯ panel.
Figure 2
Figure 3
There are many useful features on the ¡®Layers¡¯ panel itself, and by using this panel, you will definitely ease the process of designing.
Compare your design to that of Figure 4. This will be the base of the presentation, giving it a slick, professional look. We will ad some color to it now, with the use of images to compliment the design.
You now have two layers, named ¡®flow1¡¯ and ¡®flow2¡¯. Open any image which you would like to use for your presentation¡¯s first frame/slide. Once you have opened the image in Photoshop, press select the ¡®Move Tool¡¯ on the ¡®Toolbar¡¯ *or press ¡®V¡¯ as a keyboard shortcut. Then click on the image, and drag the image to the ¡®presentation¡¯ document you have been working on.
The image which you have transferred to your design will now be placed on a new layer, named ¡®Layer1¡¯. You can rename this layer as ¡®image1¡¯. But you will notice that your image might either be too small, or too large to fit on the window. Select the ¡®Marquee Tool¡¯ from the ¡®Toolbar¡¯ *or press ¡®M¡¯ as a keyboard shortcut. Then right click on the ¡®image1¡¯ layer in the design window and select ¡®Free Transform¡¯. You will now reshape and move the image so that the top-left corner of the image is positioned perfectly in the top-left corner of the design window. You also have to ensure that the bottom-left corner of the image fits perfectly in the bottom-left corner of the design window.
When you resize any graphics using the ¡®Free Transform¡¯ method, you can hold the ¡®Shift¡¯ key while adjusting the width and height of the graphic. By holding the ¡®Shift¡¯ key, you will prevent the graphic from losing its scaled dimensions. In other words, when you increase the height, the width will also increase in perfect proportion to keep the perspective of the graphic intact.
Now click on the vertical ruler to the left of the design window and drag the line to the 200px mark on the horizontal ruler. This will be used as guidance, for you will no erase the overlapping instance of the graphic on the right-hand side of this line to make space for some text. Choose the ¡®Eraser Tool¡¯ situated on the ¡®Toolbar¡¯ *or press ¡®E¡¯ as a keyboard shortcut. While you have the ¡®Eraser Tool¡¯ at hand, you can right-click on the design window at any time to define the size of the erasing. Right-click on the design window and select the 100px Soft Eraser.
You will now erase everything to the right of the ruler line you have set on the 200px vertical mark. Erase carefully, and allow the edge of the erasing brush to touch the ruler line at all times to achieve a smooth erasing line. You can now view Figure 4 below as an illustration and reference to how your design should look at this moment in time.
Figure 4
There is one last step to complete before you can start creating the animation of your presentation. You need to create text layers which you would like to have to the right of the graphic. We will later animate this text to slide or bounce into place.
Actively select the ¡®Type Tool¡¯ situated on the ¡®Toolbar¡¯ *or press ¡®T¡¯ as a keyboard shortcut. Open the ¡®Character ¡®panel which you will use to set all the necessary preferences of the text that you will be typing. You can open the ¡®Character¡¯ panel by going to ¡®Window > Character¡¯ and then noticing a panel opening on the workspace. By using the ¡®Character¡¯ panel, set the font to ¡®Haettenshweiler¡¯, the font-size to 36px and the font-color to #FFFF(white). Then type a phrase of text somewhere on the workspace, and position it in the center, at the top of the right panel of your presentation slide. Rename this text layer as ¡®text1¡¯.
You should now raterize this text layer in order to convert it to a graphic. The reason why you will be doing this, is to apply a drop shadow to the text. Right-click on the text layer in the ¡®Layers¡¯ panel and then select ¡®Raterize Type¡¯ to executer the conversion. Then double-click on the small white thumbnail of the layer, right next to the caption/text of the layer to see the ¡®Layer Style¡¯ dialog appear. Now tick the ¡®Dropshadow¡¯ checkbox on the left-hand side, while clicking the name itself to see the preferences on the right. View Figure 5 below as an illustration and reference to the exact settings you have to input.
Figure 5
Once again select the ¡®Type Tool¡¯, setting the font to ¡®Agency FB¡¯, the font-size to 24px and the font-color to black. Then type a phrase or sentence, and position it below the previous text layer you have created earlier. Now rename this new text layer as ¡®text2¡¯. Then right click on the ¡®text2¡¯ layer in the ¡®Layers¡¯ panel and select ¡®Raterize Type¡¯ to convert the text layer to a graphic layer. Your design is now ready to be animated, and you can view the result of the design on Figure 6 below.
Figure 6
To start animating your presentation, go to ¡®Window > Animation¡¯, to notice the ¡®Animation¡¯ panel opening. The ¡®Animation¡¯ panel consists of frames. In the top-right hand corner of this panel, you should see a small arrow. When you click this arrow, you will see a range of different options and executions complying with animation. Click the arrow and select ¡®Make frames from layers...¡¯. View Figure 7 below as guidance to how your ¡®Animation¡¯ panel should look at this moment in time.
Figure 7
Each layer you have created in your design will now be converted to frame. The fist thing you have to do is to delete frame 2;3;4;5. This will leave you with only one frame left, namely frame 1. Click once on frame 1 to select it, and then move over to the ¡®Layers¡¯ panel. You should have noticed that there is a small grey box to the left of each layer in the ¡®Layers¡¯ panel. When you toggle this box by clicking it, you will see a small ¡®eye¡¯ image appearing and disappearing. Now with the first frame selected, ensure that all the layers in the ¡®Layers¡¯ panel have the ¡®eye¡¯ icon next to them. This will allow all the layers to be visible on the particular frame.
Now click the button next to the ¡®trash can¡¯ to create a new duplicated frame of the first one. You will now have two frames, looking exactly the same. Select the first frame, and edit the layers on the frame as follows.
With the first frame selected, move the ¡®text1¡¯ layer to the right, off the edge of the window. Also change the opacity of the ¡®text1¡¯ layer to 0% in the ¡®Layers¡¯ panel. Then move the ¡®text2¡¯ layer downwards outside the edge of the window, and also change the opacity to 0%. This will mean that the two text layers have now been moved on the first frame, and they both have a 100% transparency, but these same layers will stay as they were on frame 2.
Once you have done this, click the tween button on the ¡®Animations¡¯ panel, and view Figure 8 below as an illustration to the exact settings you should input into the prompting dialog.
Figure 8
You are now done with the first slide of your presentation. View the animation by clicking the ¡®play¡¯ arrow on the ¡®Animations¡¯ panel. Now that you understand the facts and the basics to creating both a professional graphic, and animating that graphic, you can continue to create the other slides for you presentation, and add additional features and animated objects to it.
Once you are done with the complete layout, there are two important things you have to do. The first is to toggle and alternate the time delay on each frame accordingly to suit your needs. At the bottom of each frame, you will find a small tab, showing you the time delay in seconds. You can click on this tab and change the delay. The second thing you have to do is to export your animation as a ¡®.gif¡¯ file for using on a website or other source. You can export the file as a ¡®.gif¡¯ by going to ¡®File > Save For Web...¡¯ *or by pressing ¡®Ctrl¡¯ + ¡®Shift¡¯ + ¡®Alt¡¯ + ¡®S¡¯. You will see a dialog opening on the screen.
A very important tip for saving optimized files. Before saving the file, always select the ¡®Optimized¡¯ tab at the top, in order to see the result you will be getting after the save. You can change certain settings, such as ¡®dither¡¯, ¡®transparency¡¯, ¡®snap¡¯, etc to optimize your file correctly in order to make it look good, but at the same time retaining a small file size.
After you have saved the ¡®.gif¡¯ file to a specific directory, you can view the file in ¡®Windows Picture & Fax Viewer¡¯ by double clicking on the ¡®.gif¡¯ animation.
Finished Product:
discuss this topic to forum
