<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> &#169;AraImages</title> <meta name="keywords" content="AraImages, Tutorials" /> <meta name="description" content="PSP Tutorials, graphics, links, gallery, images, tubes" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript"> <!-- hide script from old browsers //detect browser: browserName = navigator.appName; browserVer = parseInt(navigator.appVersion); if (browserName == "Netscape" && browserVer >= 3) browserVer = "1"; else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1"; else browserVer = "2"; //image swapping function: function hiLite(imgDocID, imgObjName, comment) { if (browserVer == 1) { document.images[imgDocID].src = eval(imgObjName + ".src"); window.status = comment; return true; }} //end hiding --> </script> <!--**************CHANGE REPEATING BODY BACKGROUND IMAGE, RIBBON BORDERS, AND MAIN BACKGROUND HERE**************--> <style type="text/css"> body { height:100%; overflow: auto; position: relative; background-image: url(http://www.arasimages.com/Tutorials9/Tutorial220/OuterBG.jpg); background-position: center; background-color: #4b110d; color: #242717; font-family: Book Antiqua Bold; font-size: 22px; background-repeat: repeat; padding-top:80px; padding-bottom: 80px; } #divborder1{ background-color: #d5d0b3; border: 3px double #242717; height: 100%; width: 100%; overflow: auto; position: relative; margin: 0 auto; padding-bottom: 12px; padding-top: 12px; padding-left: 12px; padding-right: 12px; } #divborder2{ background-image: url(http://www.arasimages.com/Tutorials9/Tutorial220/OuterBG.jpg); background-position: center; background-color: #7e8c59; border: 3px double #242717; height: 95%; width: 95%; overflow: auto; position: relative; margin: 0 auto; padding-bottom: 15px; padding-top: 15px; padding-left: 10px; padding-right: 10px; } #divborder3{ background-color: #d5d0b3; border: 3px double #242717; height: 95%; width: 95%; overflow: auto; position: relative; margin: 0 auto; padding-bottom: 12px; padding-top: 12px; padding-left: 3px; padding-right: 3px; } #div1{ background-color: #7e8c59; border: 3px double #242717; height: 95%; width: 95%; overflow: auto; position: relative; margin: 0 auto; padding-bottom: 20px; padding-top: 50px; padding-left: 0px; padding-right: 0px; } .HeaderName{ border: none; margin-top: 10px; margin-bottom: 5px; } .ImageBorder{ border: none; margin-top: 40px; margin-bottom: 50px; } p{ text-align: center; width:85%; } <!--**************END OF BACKGROUND CUSTOMIZATIONS**************--> a:active{ outline: none; } a:focus { -moz-outline-style: none; } html{ scrollbar-face-color: #7e8c59; scrollbar-highlight-color: #7e8c59; scrollbar-3dlight-color: #242717; scrollbar-darkshadow-color: #242717; scrollbar-shadow-color: #7e8c59; scrollbar-arrow-color: #242717; scrollbar-track-color: #7e8c59; } </style> <!--**********DO NOT EDIT THIS CODE -DRAG PICTURE CODE STARTS HERE- DO NOT EDIT THIS CODE**********--> <style type="text/css"> .drag{ position:relative; cursor:hand; z-index: 100; } </style> <script type="text/javascript"> var dragobject={ z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, initialize:function(){ document.onmousedown=this.drag document.onmouseup=function(){this.dragapproved=0} }, drag:function(e){ var evtobj=window.event? window.event : e this.targetobj=window.event? event.srcElement : e.target if (this.targetobj.className=="drag"){ this.dragapproved=1 if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} this.offsetx=parseInt(this.targetobj.style.left) this.offsety=parseInt(this.targetobj.style.top) this.x=evtobj.clientX this.y=evtobj.clientY if (evtobj.preventDefault) evtobj.preventDefault() document.onmousemove=dragobject.moveit } }, moveit:function(e){ var evtobj=window.event? window.event : e if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" return false } } } dragobject.initialize() </script> <!--**********DRAG PICTURE SCRIPT STOPS HERE**********--> </head> <body> <script type="text/javascript"> var colour="#ffffff"; var sparkles=50; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script> <div id="divborder1" align="center" style=" width: 1118px;"> <div id="divborder2" align="center" style=" width: 1094px;"> <div id="divborder3" align="center" style=" width: 1071px;"> <div id="div1" align="center" style=" width: 1050px;"> <!--********** TITLE IMAGE AND MAIN TUTORIAL IMAGE-CHANGE THE BORDER AT THE TOP CSS "class-ImageBorder" AND " class="HeaderName"**********--> <div><img src="http://www.arasimages.com/Tutorials9/Tutorial220/TopText.png"></div> <div><img src="http://www.arasimages.com/Tutorials9/Tutorial220/EnchantedForestBackground.gif" class="ImageBorder"></div> <p> <a href="http://arasimages.com/Tutorials9/Tutorial220/Enchanted Forest.zip"> <img border="0"src="http://www.arasimages.com/Tutorials9/Tutorial220/zip.gif" /></a></p> <p> For a Danish, Italian, Dutch, Spanish and French translation, click on the flags.<p><a href="http://skyttenpsp.weebly.com/enchanted-forest.html"><img border="0" src="http://www.arasimages.com/Tutorials9/Tutorial220/denmarkC1.gif"></a>&nbsp;<a href="http://www.graficamia.com/arasimages/EnchantedForest.html"><img border="0" src="http://www.arasimages.com/Tutorials9/Tutorial220/italyc4e21.gif " /></a>&nbsp;<a href="http://www.moonlightangel.nl/arasimagesEnchantedForest.htm"><img border="0" src="http://www.arasimages.com/Tutorials9/Tutorial220/animated-netherland-flag.gif" /></a>&nbsp;<a href="http://www.stardesignpsp.com/tutoriales/tut.traducidos/arasimages/enchantedforest/tuto_enchantedforest.html"><img border="0" src=" http://www.arasimages.com/Tutorials9/Tutorial220/spainC1.gif"></a>&nbsp;<a href="http://lemondedelisat.free.fr/tutorial_barbara_foret_enchantee/tutorial_barbara_foret_enchantee.html"><img border="0" src="http://www.arasimages.com/Tutorials9/Tutorial220/animated-french-flag.gif"/></a></p> <p> Unzip the materials into a working folder you have created on your desktop named Enchanted Forest. Please duplicate and close original tubes. Use the copies for your work so you will not lose the originals. Place Selection in your PSP/Selections folder. I have used the effects of PSP and the programs Sqirlz and Animation Shop in this tutorial. It is assumed you have a working knowledge of PSP to follow these directions. I have used PSPX6 for this tutorial but other versions may be used.</p> <p> Thanks go to PamelaD and EvaTexas of Arasimages for their lovely tubes used in this tutorial. You can find them and more new tubes on my Tubes link. Thanks also to Simone for her beautiful animations.</p> <br> <!--******DRAG IMAGE CODE SNIPPET STARTS HERE - EDIT PICTURE URL TO CUSTOMIZE******--> <p>Use the fern to mark your place along the way.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/FernFollowMe.png" class="drag"></p> <!--******DRAG IMAGE CODE SNIPPET STOPS HERE - EDIT PICTURE URL TO CUSTOMIZE******--> <p> 1. In Materials Palette, set Foreground to #d5d0b3, Background to #6e7731. Create a Gradient using these colors, Gradient Corel_06_029 (foreground/background), Style Sunburst, Angle 0, Repeats 0, Invert unchecked, Center Points/ Focal Points default.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/Gradient.jpg"></p> <p> 2. New/New Image 850px by 700px. Flood fill with Gradient.</p> <p> 3. Open ForestStream.pspimage (misted layer). Copy/Paste as New Layer.</p> <p> 4. Image/Mirror. Place image to the left and up a little as seen below.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PlaceLeftFirst.jpg"></p> <p> 5. Paste again as New Layer. Place image to the right side as seen below.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PullImagetoRightSide.jpg"></p> <p> 6. Paste again as New Layer. Image/Mirror.</p> <p> 7. Place on left side of image all the way to the left border as seen below.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/threelayers.jpg"></p> <p> 8. Layers/New Raster Layer.</p> <p> 9. Selections/Load Save Selection/Load Selection From Disk. Select ArasimagesForestArc. Load.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/Selection.jpg"></p> <p> 10. Change Background color to #7e8c59. Flood fill Selection with Background color. Deselect.</p> <p> 11. Effects/Edge Effects/Enhance.</p> <p> 12. Effects/Distortion Effects/Polar Coordinates.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/DistortionPolarCoordinates.jpg"></p> <p> 13. Duplicate. Image/Mirror.</p> <p> 14. Duplicate. Image/Flip.</p> <p> 15. Pull Raster 2 above Copy of Raster 2.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PullRaster2AboveCopyRaster2.jpg"></p> <p> 16. Arrange arcs so that they form this configuration.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PullArcsConfiguration.jpg"></p> <p> 17. Merge/Merge Down twice.</p> <p> 18. Effects/3D Effects/Drop Shadow. Vertical -14, Horizontal -8, Opacity 50, Blur 15, color #000000.</p> <p> 19. Open Doll_51.psp image. Copy Tubed layer/Paste as New Layer.</p> <p> 20. Image/Mirror.</p> <p> 21. Image/Resize/Resize by 74%/Resize layers unchecked.</p> <p> 22. Adjust/Sharpness/High Pass Sharpen.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/HighPassSharpen.jpg"></p> <p> 23. Adjust/Sharpness/Sharpen.</p> <p> 24. Effects/3D Effects/Drop Shadow. Vertical --14, Horizontal -8, Opacity 50, Blur 15, color #000000.</p> <p> 25. Move Fairie to touch the left side of image so she is sitting in bottom of left arc.</p> <p> 26. Copy Doll_51 Tube again/Paste as New Layer.</p> <p> 27. Image/Resize/Resize by 52%/Resize all layers unchecked.</p> <p> 28. Adjust/Sharpness/High Pass Sharpen. Use same settings at Step #22.</p> <p> 29. Adjust/Sharpness/Sharpen.</p> <p> 30. Using Push Tool from Tool bar, Size set to 8, all other settings at default, push the Fairie's dress out on right side so it is not so straight edged.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PushToolOnDress.jpg"></p> <p> 31. Effects/3D Effects/Drop Shadow. Vertical --14, Horizontal -8, Opacity 50, Blur 15, color #000000.</p> <p> 32. Place Fairie toward the top, sitting on the lower part of the arc in the center of image.</p> <p> 33. Copy Doll_51 Misted layer/Paste as New Layer.</p> <p> 34. Image/Mirror. Image/Resize/Resize by 42%/Resize all layers unchecked.</p> <p> 35. Place resized Fairie to the right side of tree on right.</p> <p> 36. Open Ferns_1.pspimage. Copy/Paste as New Layer.</p> <p> 37. Place in bottom right corner.</p> <p> 38. Adjust/Sharpness/Sharpen.</p> <p> 39. Open Ferns_02.pspimage. Copy/Paste as New Layer.</p> <p> 40. Adjust/Sharpness/Sharpen.</p> <p> 41. Move into bottom left corner.</p> <p> 42. Duplicate. Resize by 42%. Move above dark rock near right side of image as seen below.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PlaceFern2Here.jpg"></p> <p> 43. Drop Opacity to 67.</p> <p> 44. Place your watermark or sign your name at this point.</p> <p> 45. Image/Add Borders/Add 3px border, Symmetric checked, color #d5d0b3.</p> <p> 46. Save as a .jpg file called Enchanted Forest.</p> <p> 47. Open the program Sqirlz. File/Open the Enchanted Forest .jpg.</p> <p> 48. Click on the red circle at the top of the Tool bar on the left to start selecting the area where we will have water ring ripple animation.</p> <p> 49. Select carefully, click by click the area you want animated, then right click to connect the dashes. I encompassed the area under the lady and also on the right bottom corner by ferns in my final image. Note: You might find you will be doing this step a few times before you are satisfied with your selection.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/PamelaDPC.jpg"></p> <p> 50. At the top tool bar, click on Basic Ripples. Change settings in Parameters box as seen below.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/BasicRippleOnToolBar.jpg"></p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/BasicRipples.jpg"></p> <p> 51. Click on Water Color/Darkness while you have the Set Parameters for Basic Ripples open. Click on No Coloring, then OK for clear water. Now close out the Set Parameters for Basic Ripples box.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/ParametersRingRipplesWaterNone.jpg"></p> <p> 52. At the top in the Tool bar, click on the yellow arrow to test your animation. If it is okay, then click on gif in the top tool bar to the right. This will now save your animation.</p> <p> 53. When you click on the gif, a box will appear telling you what your animation has, in this case basic ripples only.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/ClickOKonbox.jpg"></p> <p> 54. Click OK. The Save As box appears and you will direct where to save your work at the top, give the File name and Save as type. The name will be Enchanted Forest and save as GIF Files (*gif). Click OK.</p> <p> 55. Next, another box will appear where you can enter a frame rate. It is set to 15 default. I changed it to 10 for faster moving water. Click OK.</p> <p> 56. Now you can watch while the Saving Animation does its work. The Information box shows that your animation was saved at 856px by 706px. Click OK.</p> <p> 57. Now open Animation Shop. File/open Enchanted Forest. Click/highlight the first frame. Edit/Select All.</p> <p> 58. Animation/Cull Animation. Select 7 as your frame choice leaving 18 frames total.</p> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/CullFramesinAS.jpg"></p> <p> 59. File/Open SimoneAni515-MNG.mng file. Click/highlight the first frame. Edit/Select All. Copy.</p> <p> 60. Go back to the Enchanted Forest frames. In first frame, right click and Paste/Into Selected Frame in the upper left side above Fairie. Left click to set into place. Paste again into upper left corner having only some of the fireflies showing.</p> <p> 61. File/open SimoneAni514-MNG.mng file. Click/highlight the first frame. Edit/Select All. Copy.</p> <p> 62. Go back to the Enchanted Forest frames. In the first frame, right click and Paste/Into Selected Frame, placing the fireflies in upper right above Fairie. Left click to set in place.</p> <p> 63. Right click in first frame again and Paste/Into Selected Frame into area below and over the top center Fairie. Left click to set in place.</p> <p> 64. If you are not pleased with your placement, you can undo and repeat steps above until you are happy with your work. Now we will save it.</p> <p> 65. File/Save As. When the box appears, direct where to Save in (working folder), give the File name: Enchanted Forest and Save as type leave as a (*gif) file. Click Save.</p> <p> 66. As the boxes appear, simply click Next, Next, Next and Finish.</p> <p> You are now finished with a double animated tutorial! Thank you for your interest in my work.</p> <p> Please, if you are going to use this tutorial for stationery, cards or place the tutorial/tag on another site, I would appreciate you contacting me for permission, giving Arasimages credit for the original tutorial and if possible, a link back to my site. Thank you.</p> <p> This tutorial was tested by PamelaD and Evatexas. Thanks ladies!</p> <br> <!--**********THIS IS YOUR BOTTOM THUMB IMAGE**********--> <p><img src="http://www.arasimages.com/Tutorials9/Tutorial220/EnchantedForestThumbnail.gif"/></p> <!--*****THIS IS YOUR GO BACK BUTTON CODE-DO NOT EDIT*****--> <p><FORM><INPUT TYPE="button" VALUE="Go Back" onClick="history.go(-1);return true;"></FORM></p> <!--*****END OF BACK BUTTON CODE*****--> </div> </div> </div> </div> </body> </html>