 |
|
|
|
A tutorial showing you how to create a banner in Photoshop and then animate it in Image ready. You can see the result of the tutorial in the image below. |
|
|
|
| First of all create a new photoshop document with dimensions of 100x100. Then add 2 images (a &b), which can be from parts of your header or something that represents your site. Name the 2 images image 1 and image 2. Next, add some text you want to appear on your banner. You can see the text settings i used in image d). |
 |
|
|
|
|
| Next, we're going to add a darker border to the text. Do this by making a selection of it, expanding the selection(select > modify > expand) by 2 pixels and then filling a new layer with the dark color. Now, choose how many segments you want to divide your image by and then work out how big each image should be. For my banner i've used two down and 3 across, so i need to make each segment 34 pixels wide (100/3, rounded) and 50 pixels high (100/2). After working out the size of the segments create a new document using the dimensions, fill it and then drag it over to your 100x100 document. Duplicate the layer, so that you have a total of 3, and then place them like in image c). Next make another duplicate and then change the hue (image > adjustments > hue/saturation). Fill in the gaps with duplicates of the newly colored rectangle. |
|
|
|
|
|
| FMake a selection using the 1st red rectangle, and then right click on the 1st of your 100x100 images. Choose layer via cut to cut out part of image 1, creating your first segment. Make the 1st red rectangle and segment invisible. |
|
|
|
|
|
| Repeat the process for the rest of the colored rectangles, cutting out all the segments of image 1. Once you've done that you should end up with just image 2 showing. |
|
| |
|
|
| Next, open up Image Ready and make all of the segments of image 1 visible. Then create a new frame, by clicking on the icon in the bottom right corner of image a). For the 2nd frame make the 1st segment invisible, as shown in images a) and b). |
|
|
|
|
|
| Add another frame and make another sement invisible. Continue to add frames and making segments invisible until all of image 2 is visible, which should be at frame 7. |
|
|
|
|
|
| Next, make the text visble on frame 8 and 10, and invisible on frame 9. Set the delay of frame 10 from 0 to 2 seconds. |
|
|
|
|
|
| Now, from frame 11 onwards we're going to start making image 1 appear. Go back to frame 6 and, while holding the Ctrl key, drag frame 6 to after frame 10. This will copy frame 6 into frame 11, and you'll see a hand icon appaer as you drag it. Continue to copy over the frame sin reverse order, so next you'll need to copy over frame 5 to become frame 12. Continue to do this until you've made image 1 appear again at frame 16, and then make the text visible again. |
|
|
|
|
|
| Insert some frame so that the text will flash and pause for 2 seconds again. |
|
| a) |
 |
|
|
|
| And that's all there is to it. You should now have created a banner in Photoshop and Image Ready! |
|
|
|
|
 |
