Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Sand Dragon Animation

1. Open your sand dunes image. Click Image=>image size. resize the image so it is 750 wide. and constrain proportions.

2. Click Image=> canvas size.

  • width =750
  • height = 900
  • anchor = center bottom


3. Click Image=> canvas size.

  • width =750
  • height = 500
  • anchor = center top

 


4. Duplicate the back ground to make a layer called "top dunes". Select the bottom two dunes using  the magnetic lasso tool. Click the Add layer mask button on the bottom of the layers palette.

5. Right Click on the background layer and select duplicate. Call this layer Dragon Scales.

6. Use the magnetic lasso tool to select the next dune back. Click add layer mask button on the bottom of the layers palette.

Click back on the image on the dragon scales layer instead of the mask.

7. Click Filter=> texture=> Texturizer. Click on Texture type: load texture. Search your hard drive for your adobe folder, photoshop 7+>presets=> textures. Select the snakeskin.psd file inside this folder. Set the following settings to your texturizer.

  • scaling = 50%
  • Relief = 10
  • Light direction = top right

Click back on the background layer. Turn the eye off on the top dunes and the dragon scales layers

8. Open your image of the sand dragon head. Click Image=> Mode=> RGB.
Select your magic wand tool and set the options to

  • tolerence = 85
  • contiguous checked
  • antialias unchecked

Use the wand to select the black surrounding the dragon head. Click Select=> inverse.

9. Use your move tool to drag this image onto your dunes canvas. Position the dragon so the top of the horns are just at the top of the dune which was the dragon scale dune.


10. Click image=> adjust=> Hue/Saturation. Adjust the hues to match the shades of the dunes. I used the following:

  • hue = -65
  • saturation = -29
  • lightness = -20

11. Turn on the eye for the dragon scales layer and the topdunes.

Creating the animation

12. SWITCH TO IMAGE READY.

13.  Open the Animation panel. Set the time of frame 1 at 0.5 seconds. Click the duplicate current frame icon on the bottom of the animation panel.

14. Select the move tool. Make sure the Bounding box option is NOT selected. Move the sanddragon head on frame 2 up till it is near the top of the image.

15. Click back on frame 1. Click the carrot on the right side of the animation panel banner and select TWEEN. Set the following:

  • tween with = next frame
  • frames to add= 4
  • layers = all layers

16. Set the new frames, 2-5, to a time of 0.1 seconds.

17. Click on frame 2. Hold your shift key down and click on frame 5. This will highlight frames 2-5.

  • Click the right hand carrot in the upper right and select copy frames.
  • Click on frame 6.
  • Click the right hand carrot and select paste frames. Select Paste After Selection.
  • Click on frame 7. Hold your shift key down and click on frame 10 to select frames 7-10.
  • Click the carrot in the upper right corner of the animation palette. Select reverse frames.

17. Click on frame one. Click image=>image size. set the width to 300 by 200 high and constrain proportions.

18. Use your slice tool to make a slice that will contain all of your animated dragon. At least two other slices will result as default. Set the animated slice to  the following:

  • gif
  • lossy =0
  • adaptive colors 128
  • no dither.

19. Use the slice tool to click on the other two slices, one at a time and set the image to JPG 45%

 

20 Click Save=>optimized as. Set to HTML and graphics.



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2008 All Rights Reserved
Privacy and Legal