Banner And Animated Gif Tutorial for Photoshop and Image Rea
Banner And Animated Gif Tutorial for Photoshop and Image Ready
Banner Dimensions and Restrictions
To create a banner within particular dimensions and color and file size restrictions:
The standard banner specifications are as follows:
_ 468 x 60 (check the board for specs)
_ GIF: Web Color Palette
_ Animation: Permitted/Not Permitted
_ 8K to 14K
Dimensions, palette, and file size can, and often do, vary so before developing a banner confirm the specifications.
Creating a Static Banner
Creating a static Banner is simply a matter of creating an image with the specified pixel dimensions and compressing it so that the file size does not exceed the specified limit and uses the specified color palette.
Lets get started:
1. Create a new image: dimensions 468 x 60, resolution 72 ppi, mode: RGB, contents: transparent. Save it as staticbanner.psd.
2. Because the vertical resolution is so low (60 pixels), the shape of banners forces us to design almost exclusively within a horizontal direction. Place you text or picture etc on the first layer.
3. Select Add Layer in the Layers Palette to make new layers and link the remaining Layers to it by {Clicking} each one separately, or {Clicking}, holding, and running the mouse pointer over the Link boxes. Note that the
Text Layer Set has been compressed.
All Layers are linked to the 1st Layer.
4. Select Layer/Merge Visible to merge the Layers together. The result is one Layer titled whatever you named the layer.
5. If you want to put a logo into the banner resize it to fit the dimensions.
Add a ?Logo? Image then select Image/Image Size and change the height to 60. The width should adjust automatically as the proportions are set to constrained.
6. Create a layer and add your text/image to the layer and set the transparency/opacity.
7. Save the image in Photoshop format.
8.With the text layer selected, select the Type Tool and input ?Your Text Message?
9.Create new text Layers for each message that you want to use. Input your next message and use the same appearance settings that you applied to the first text Layer.
10.Position the text according to where you want it to display but don?t worry about the final positioning for the time being.
11.Add a new Layer and position it at the bottom of the stacking order. Use the Fill Tool to fill it with your color/image choice.
12.Save the ?staticbanner.psd?, again
13. Repeat the process for each text message you want to include. Saving after each layer is added.
With each layer set to visible you should have a banner that can be used ?as is? for a static banner.
Creating an Animated GIF Banner
Creating an animated banner involves building on a static version, as we have just done and then adding animation.
By doing so you always have a static version to fall back too when required. Animation doesn?t occur in Photoshop, rather it occurs in ImageReady. Close all Image Windows except for ?staticbanner.psd? {Click} the Jump to ImageReady button at the bottom of the Toolbox to launch ImageReady. ImageReady opens and ?staticbanner.psd? is transferred from Photoshop to ImageReady.
The ImageReady Environment ImageReady?s environment or workspace should be immediately familiar to you because there are many similarities to Photoshop.
The first thing you?ll notice is the Image Window contains Save for Web controls in the form of Original, Optimized, 2-Up, and 4-Up Tabs. Because ImageReady is dedicated exclusively to web output, you can think of ImageReady as always being in Save for Web mode.
Though of course, you can still save native Photoshop files.
The ImageReady Environment
There are also some changes to the Palettes. Instead of a Navigation Palette, you have an Optimize Palette where you set your Compression settings. You also have a Rollover, Animation, Image Map, and Slice Palette. Furthermore, subtle changes in other Photoshop ?s traditional Palettes also exist.
Finally, the Toolbox also has new additions and changes. We have the Image Map Tools and various toggles to turn the visibility of web content on and off.
One Tool that ImageReady and Photoshop share the Slice Tool. It operates identically in both programs so as you work with ImageReady and you can apply this knowledge to future use of Photoshop.
In addition to the current set of ImageReady Tools and Palettes, we also need the Animation Palette. Select Window/Show Animation to open the Animation Palette if it is not open.
The Animation Palette
The Animation Palette contains Tabs for Animation, Slice, Image Map, and
Rollover (Slice, Image Map, and Rollover are covered later), a Frame Thumbnail, Looping control, Frame controls (First Frame, Previous Frame, Stop, Play, Next Frame), and controls to Tween, Add, Duplicate and Remove frames.
Frame Thumbnails
Each Frame Thumbnail consists of a frame marker, which indicates the frame number, a graphical representation of the image data contained in the frame, and the duration of the frame which you change by {Clicking} on the arrow beside the duration and selecting the desired duration (in seconds).
To change the order of frames simply {Click}, hold, and drag the frame to the new location.
To add frames {Click} the Duplicate Frame button. A new frame is created with the image data contents of the previous frame inside.
To delete a frame, select it and {Click} the Trashcan icon.
To control whether the animation plays once, loops continuously, or loops a set amount of times select from the Loop drop-down menu.
Frame Controls
Use the Frame controls to play and stop the animation, go to the next or previous frames, and go to the first frame.
Animating in ImageReady
Animating in ImageReady involves adding new frames in the Animation Palette and then changing the image data within the image accordingly using the Layers Palette.
Each frame holds the current state of the image. For instance, if you want a graphic to fade away you would reduce the opacity of the Layer containing the graphic in steps through a series of frames.
After you?ve created each frame of your animation you manipulate and adjust timing by adding time to each frame or particular frames. Finally, you decide if you want the animation to loop continuously, loop a set number of times, or play once.
Let?s animate our ?staticbanner.psd? image in ImageReady.
1. {Click} the 2-Up Tab in the Image Window so you can see the original version and apply Compression settings to the second Preview Window.
2. Ensure that the second Preview Window is selected and use the following Compression settings from the Optimize Palette: Gif, Adaptive, Diffusion, 0 Lossy, 90 Colors. Experiment with Dither settings if you desire.
Notice that with Diffusion you can adjust the percentage by using the Dither slider.
3. If it?s not open, select Windows/Show Animation to open the Animation
Palette. The Animation Palette contains one Frame Thumbnail representing the first frame.
4. Our animation involves ?Your Text? moving in the banner.
Use the Layers Palette to make the Type Layers invisible. Notice now the Type Layers also disappear from the Frame Thumbnail.
5. {Click} on the Duplicate Current Frame button to create a new frame and turn the visibility of the ?Text? Layer back on. We now have a two frame animation in which the words ?Your Text? appear in the banner. {Click} on the Play button in the Palette?s Frame Controls to preview your animation. Notice the abrupt and sudden looping of the frames. We?ll adjust this later. {Click} the Stop button.
6. Now we?re going to animate the next entrance of ?Your Text? text. Duplicate the current frame and turn the visibility of ?Your Text? text on. Duplicate this new frame. You should now have 2 frames added with the visibility of ?Your Text? turned on in both. Set the opacity of the entrance frame to 0% and the opacity of the ending frame to 100%.
7. We?re going to set the start and end position of the ?Your Text? text. At the moment, we have the end position, or where we want the text to be when that part of the animation ends. Now we have to establish the start position. Select the first Frame Thumbnail that contains the visible ?Your Text? text and use the Arrows on your keyboard to move it off the edge on the left (for text that moves left to right into the image. If you cannot select the ?Your text? Layer {Click} the Original Preview Window as modifications can only be performed with the original version selected, not in any of the Compression Preview Windows.
8. Select both ?Your Text? Frame Thumbnails (Frames 3 and 4) showing the start and ending positions of ?Your Text?.
9. {Click} on the Tween Frames button at the bottom of the Animation Palette. We are going to have ImageReady generate Frames in beTween the two frames to automatically move the text.
The Tween dialog box
10.Examine the Tween dialog box.
Select ?All Layers ? to copy all the currently visible Layers into the Frames that ImageReady automatically generates.
{Click} Position, Opacity, or Effects (Layer Effects) depending on the nature of the changes you are making to create the animation.
Check Position. Define what to Tween with, either Selection, Next Frame, or Last Frame. In this case, we are Tweening the Frame Thumbnails we have selected so select Selection.
How many frames do we want in beTween the first and last frame that make up our selection? Input 3-5 Frames to Add.
{Click} OK. Examine the Animation Palette.
{Click} each Frame Thumbnail to see the text advance in each Frame. Adjust the opacity as needed to get the fade in and out effect.
11. {Click} the Play button in the Animation Palette. You?ll see the text move into the image. Keep in mind that ImageReady does not play the animation as quickly as it will actually play in a web browser. To see how it really plays you?ll have to save it and preview the file in a browser.
12.Duplicate the last frame in the animation and turn the visibility of ?Your Text? text on. We now have all of the frames for our animation. Now we just have to adjust the timing.
13.Use the Frame Timing drop down menu below each Frame thumbnail to adjust the delay between each frame. Set each frame to play for 1 second except for those that make up ?Your Text? position change frames.
Set those frames to play at 0.1 seconds except for the last which should be set for1 second. The last frame of the animation should be set for two or three seconds.
Frame Thumbnails with Duration setting added to each frame.
14.Select File/Save, to save the Original version of the file with the new changes.
15.Select Files/Save Optimized, to save the GIF version with the new changes.
16.View the GIF in a web browser.
When done and satisfied with the animation use a gif crunching/optimizing program to reduce the size of the gif to acceptable size.
