BarsClubsCoffee/CafeContact UsDevonshire QuarterHomeHotelsLeopold SquareMenusPhotosPubsRestaurantsSportTheatres etc.TransportWeatherWest Street
Photoshop - Fireplace (3)
You've probably noticed that we use ImageReady a lot in our tutorials. I just haven't got round to including a tutorial on it but if you send me an Email, I'll include one pronto.
11. Switch to ImageReady by clicking on the Switch to ImageReady icon at the bottom of the toolbar.
12. If you're new to ImageReady, just make sure the following palettes are visible via the WINDOW command in the menu bar:- Animation, Optimize, Layers and the main image window (set at 4-up via the tab at the top of this window).
13. In the layers palette, make sure that your layer stack is as shown to the right - Fireplace image right at the top, Color Balance Adjustment layer just beneath that, the top blurred layer under that (with visibility turned on) and the other three blurred layers under that, with visibility turned off. Layers in Image Ready
14. In the Animation palette, you should just have one frame visible. We need to create a new frame. Click on the New Frame icon as shown.
ImageReady animation palette

15. Now we have two frames, but this time in the layers palette turn off the visibility of the top-most "blurred" layer and turn on the visibility of the next one down. This is how ImageReady works - you do the work in Photoshop, making each layer slightly different and then switch to ImageReady and turn on/off the visibility of the layers. It's similar to the old "animation" booklets where fanning the pages give the illusion of motion whereas here the different layers and their visibility take the place of the pages.

Create a new frame and this time turn off the visibility of the last layer (in this case Layer 2 copy 2) and turn on the visibility of Layer 2 copy. Then create one more new frame, turn off the visibility of Layer 2 copy and turn on the visibility of Layer 2.

ImageReady layers 2
16. Your Animation palette should now look like the one on the right - four frames, each slightly different to reflect the various layers that have had their visibility turned on and off. Press the "Play" button (circled) to see the result in the main preview window. Play animation
17. Nearly there! We just need to alter the timing of the animation. See where it says 0 sec. under each frame? Click on the black drop-down arrow and make each frame 0.2 sec. (If you have a lot of frames, click the arrow in the top-right of the Animation palette and choose "Select All Frames" and then just changing the timing on one frame will alter all the frames.)
18. Back into Photoshop, and add a layer under the original fireplace but above the Adjustment layer. Paint in some coal with a fairly large, soft brush (black,of course!), maybe add some Monochromatic you go! Fireplace Coal Layer
19. After all that work, make sure you save it properly! Make sure it's saved as a GIF (Jpegs can't be animated). Go to FILE...Save Optimized As. ImageReady Optimization

Here I repeated the new frame, turn on/off visibility process to end up with a total of eight frames.

The one shown here has benefited from a few tweaks in Photoshop:

  • The Burn Tool Burn Tool was used in each of the four "blurred" layers to carefully add some glow at the base of the flames.
  • The "sparks" were simply painted in using a tiny brush and an orangey color.
  • The original fireplace layer was darkened using IMAGE...Adjustments...Brightness/Contrast to give the flames more focus.
  • A "fireguard" was added on it's own layer by creating a pattern (NEW...File. 2 x 2px. transparent background and, using the Pencil Tool Pencil Tool the opposite corners were filled with black. Then EDIT...Define Pattern, and the pattern was used to fill a selection made with the Rectangular Marquee Tool. Lower the opacity of this layer a bit and that's it!

<<1, 2, 3

Finished Fireplace