sb_decorated2.jpg

I found this tutorial here while searching for Paintshop Pro tutorials. I worked through it and when I was finished realized it was something adaptable to Image Magick and therefore msntv users. So I've written this tutorial and hope you enjoy it.

So you want to make a shadowbox, huh? Well It's not all that hard really. All we are going to need is a backgound tile



NOTE
I've learned something interesting(at least to me...lol). I was always under the mistaken notion that when we take the same image in a second time, without going off line in between, the changes under the different tabs we used are still selected...I found this very handy in creating the font examples for the Repository and just assumed it was a cookie. Not so. It's the individual image addy that causes the info to show up.Since posting this tutorial I've been using the white tile for other things and have found several options selected and textareas filled in that I know I did not do.Anyone giving this tute a try might want to take the white tile to their own filemanager to give it a unique addy and avoid any confusion or remember to check all the settings to be sure you arn't doing someone elses steps.

A wood texture


This font.


 and some images for statues.I'll be using these.

xmas.gifmouse3.gifmouse1.gifmouse2.gif
I'll explain how I gave these some depth and created the plaque.
Finally we are going to need IMAGE MAGICK
and GIFWORKS These two tools should at least be in your favorites if not on your f-keys or a tool page .(This is a good one Stardrops made available.It's free for the taking-transload away!!!) on your f-keys.
Ready? Lets start.


I'm starting with the shadowbox first since that will give you the basic unit you can use again and again. You can create the shadowbox and decorate it with it's trimmings in one trip to IM (once you create the hinges and knob and adapt the figrurines, if you like.
1). Go snag the addy for the wood tile above.CCP it and hit your find button and paste it there.
2).Now snag the addy for the white tile...CCP it and lets go to Image Magick.
3).On the front page, in the text area, remove their http:// and paste in the white tiles addy.Hit your return button twice.
4).On the main page of Image Magick, scroll over to the resize tab and click it. When the page loads, erase their numbers in the top text area and put in 200X300! (include the ! as this forces IM to resize to your exact preferences.) Click the radio button next to sample (Sample will not add colors to your image and thus increase it's "weight", zoom does.) and now click the resize button.
5). Now we are back to the main screen, let's give our palette a wooden texture. Click the composite tab.
6). On the composite screen, hit your find button and ccp the wood tile addy you have stored there. Paste it into the textarea(don't forget to remove their http://). Scroll to the bottom of the page and check the box next to tile across and down the image and then click the composite button. Back on the main screen you now have a nice wooden tile. Click the decorate tab next.
7).Remove their numbers in the top text area and put in 20X20 +5+5. For the color use saddlebrown. Click the radio button next to frame and click the decorate button.Viola you now have a wood frame. Let's make the shelves. Click the draw tab.
8). In my estimation, draw is the most intimidating section of IM. The first time I went there I hit the back key and left it for my betters. Don't worry, this is actually easier then it looks. First change the primitive button to polygon. In the text area, you know it, erase their numbers and enter the following co-ordinates. (for those just tackling the draw featute here's a basic breakdown. You need two co-ordinates to define a point, the distance from the left and the distance from the right.When drawing a polygon you need one more set of points then there are sides to the figure. The first and the last co-ordinates are always the same-start and finish. Without rpeating those co-ordinates you will have an open end. Each pair of co-ordinates have no spaces between them-+0+0 is a pair of co-ordinates.Each set of co-ordinates are defined be either a space or a comma before the next pair of co-ordinates-+0+0,+20+0 or +0+0 +20+0.) The co-ordinates for our first shelf are +20+125 +230+125 +230+128 +20+128 +20+125 Fill them in and then go down to the color choices. For fill use saddlebrown, for stroke use black, and for stroke width use one. The rest of the page is for the adventuresome...go click the draw button. That's one shelf down. Click draw again and change all the second co-ordinates of the pairs adding one hundred. They should be +20+125 +230+225 +230+228 +20+228 +20+225. Hit that draw button and you now have a two shelved shadow box.
9). Let's give a little depth to the shelves. Hit the draw tab and change the primitive to line.Erase all but the first two pair of co-ordinates altering them to be +20+229 +230+229. Go down to the coor selections and remove the fill color leaving it empty and change the stroke width to 2. Go back and hit draw. Now your bottom shef has a shadow. Click the draw tab again and change your co-ordinates to +20+129 +230+129 and hit the draw button again. You now have your basic shadowbox.
10). Let's save this now. There are quite a few ornate fonts out there that you can use for hinges and the knob on the door thus changing the look of your basic shadowbox( you could also use metal tiles to create a metal shadowbox using the above steps.)Keeping your work now means you will always have the basic empty shadowbox to adorn as you want. Click the output tab. On the output page select jpg for format, and click the radio button next to single frame. Under optional attributes change the first button on the left to true color and the middle button to zip...I may be crazy but I notice a differnce(albeit small when viewing graphics on my computer when I use these two both in general color and in byte size(we are going to be adding more kilobytes to this with the hinges and the figurines so I'm trying to cut every corner I can.Wait to reduce your colors until after you've composited everything on it, that way you'll get an even look.)...hit the output button and on the final page click your image and transload, upload, or beam it into your image storage space.
Viola, you are now the proud owner of a shadowbox you created all by yourself....


Hinge instructions! To create the hinges you need two items. The font on the main instructions (CCP that addy and stick it in your find box.) and a transparent gif (CCP that addy and go to Image Magick). 1). Paste the URL for the transparent gif in the textarea (what do we do to everything they have written in their text areas-REMOVE IT!) and hit your return button twice. 2). On the main page click the annotate key. The font you have is a dingbat font...every letter creates an image not a letter...Hit your find key and CCP it, you'll need it in a minute. 3).In the top text area, type a lower case a. 4).You don't need to change any of the information for location and gravity so scroll past the annotate button to the color and size section of the page. For fill I used #fee461 . For stroke I used #dee520 . For point sizeI used 45. for Density I left it at 72 and for stroke width I used 1. 5).Scroll down some more, past the fonts list, to the text area with that http:// just screaming to be removed....Do it and paste the font addy from your find box there. Scroll back to the annotate button and hit it. You will go back to the main page with your hinge image now there. (At this point you could composite a metallic tile over your image to give it a better look. Hit the composite tab and on the next screen, put the addy to your metal tile there, change the type of compositing to in and check the box next to the tile across and down image button. Then hit the composite button. On the main page, click the click the annotate tab and on the next page leave everything as is except for the fill coor-erase it and leave it blank.Then annotate on your image. Now you're ready to output it.) 4).Hit the output tab, and on the output screen click the redio buton next to single frame and then click the output button. On the final page click on your image. 5). If you put the tool page I recomended on an f-key hit that button and once the page has loaded scroll three-quarters of the way down till you see the gifworks button.Click on it and your image will preload into Gifworks main page. If you haven't got that on an f-key, CCP your images addy from your goto box and go to Gifworks. Click file, choose the open option and once clicked you will load the next page.Paste the addy in the textarea and click the button beneath it. 6).Once you have your image loaded at Gifworks. Click the edit button and scroll to smart crop. Hit your return...when the main screen loads you will have removed all the transparent pixels from around your image. Now click the effects key and type cl quickly-that should shoot you down to the bottom third of this list. Scroll down one to shadow and select that. On the shadow screen type 1 or 2. (Hey a text area with nothing to erase!!!!) and click the button beneath it. 7).Back on the main screen hit the file button and choose save. On the save screen look for the webtv link to view the image and click it.Once you've loaded it stash it away in your file manager(call it top_hinge.gif) with your blank shadowbox-dare I suggest the same directory.(It really will be easier if you put it all in one directory when we composite the whole thing together.) Now hit your recent button and look for the last screen that has your hinge image on it. Click it and once it loads click the edit button and select flip vertically. Save this image also labelling it bottom hinge. Now go back to Image Magick and load up the transparent tile again. 8).Once you loaded the main screen click the annotate tab...if you haven't turned off your webbie all your previous info will still be there. Change the a to p and click annotate.On the main screen you now have your door knob. Click output and follow the same steps as with the hinge and take it to Gifworks. 9). Do the smart crop thing again and then under edit click rotate custom. When the blue scren loads type in 45 and click the button.Back on the main screen choose effects and go down to shadow and on that blue screen add a 1 or a 2. From the main screen hit edit and select rotate right. Do the shadow again. Repeat this until you've shadowed all four sides. Now save your image to your file manger(doorknob.gif). You now have the hardware for your shadowbox. Let's go play with the images a bit that you want to put on your shelves.Oh yes and create that name plate Name Plate 1). Take the white till to Image Magick and load it up.From the main screen click the resize tab and make it 300X200! Now go to draw. 2). Choose round rectangle and enter these co-ordinates +20+20 +200+100 +30+30. Pair 1 defines the left and top border. Pair 2 defines the width and height. And pair 3 defines the width and height of the corner arcs. For fill I chose white. The stroke is #191979 with a width of 1. Click the draw button. 3). On the main screen, beneath your image, use these setings for the top row of buttons and textarea matte, floodfill, 1999.Now scroll up so your cursor box is around the image ,click return, move the arrow around to a spot outside your image and hit return again.When your page reloads everything but your image should be transparent. Hit composite and tile a seamless texture much as you did the wood except use in rather then on with the tile across and down image checked.Hit the composite button. 4). From the main screen go to draw. Leave everything alone except the fill color erase that and leave it blank and increase the stroke width to 2. Click draw.Now click the transform and leaving the radio button beside trim clicked hit the transform button-this performs the same functionas smartcrop at Gifworks. 5). Now hit the anotate tab. On the annotate page put your message in the text area. Use gravity-NORTH. For location I used +0+30 (I'm going to use a point size of 35, there seems to be some corelation between the y factor and point size...they are ussually quite close on the smaller point sizes.) I used a green for my fill and a red for my stroke colors and a point size of 35 with a density of 72 and a stroke width of 1. I chose from their font list-Black Chancery (or you can use an online ttf file in the text area below below their list much as you used the orna font for the hinges.I hear you might find on or two nice ones here. (unabashed self promotion).) Now click the annotate button. If it's not quite what you want click the back button and change things around until you are happy. 6). Output the image as a gif and take it to Gifworks.Now choose effects clone and add a 2 or 3.(you can choose edit flip horizontally and do another clone and then flip it back for the shadow if you like. Choose effects and shadow and use 1 or 2. Save it away in your file manager with your hinges, knob, and the statues you're about to do.

Statuettes 1).Find a few images you like.They should be mid sized-around100 to 150 pixels high and with no background.Snag them and save them in your file manager. Take the first one to Gifworks and load it up. On the main screen click edit and smartcrop it just in case there's any transparent border around your image. Now click effects and go to clone, select it. On the blue clone screen pick 2 or 3. and click the button. Now choose effects and shadow and add a 1 or 2 pixel border...your image should now look like it has a little depth to it. Save it and put it in your file manager. Repeat these steps for all the images you are going to use. Once you are done it's time to put your shadowbox together. This is the home stretch folks...If you want, take a break, grab yourself a cookie or some other reward for all your hard work....You deserve it!


The Final Touches!!!! 1). CCP the addy to the shadowbox you created and go to Image Magick. Load it into the main screen. From the main screen click the composite tab. 2). Now if you have everything in one directory, this should be quick and painless. CCP the shadowbox addy into the top textarea and erase the images name(shadowbox_blank.jpg was mine.) and put in top_hinge.gif. Set gravity to Northwest and loction to +10+55. Click the composite button and it should be on the upper coner of your frame. Hit the composite tab again, change top_hinge to bottom_hinge and the location to +10+343 and click the composite button. Bottom hinge is in place. Click composite tab again. Change bottom_hinge to door_knob and location to +215+195 and hit that composite button. Looking good now. Let's fill the shelves. 3). Click the composite tab and fill in the name of your first image.Now where you put it is up to you. The first co-ordinate should be at least +30 to get it inside the frame. The second co-ordinate will depend on which shelf you want your image on. Top shelf should be +125 , second shelf +225 third shelf +325. Add or subtract a couple of pixels if your image doesn't quite look like it's on the shelf to you. Move em around till you have them just right. When you do, click the colors tab. Now this is a personal choice thing but you might want to reduce your images colors here to make it a little quicker load.Frankly I think I over did mine a bit-that is 50 colors.I always use dither and global colors. Start at 100 colors and see what you think-100 we may only see 254 coors but computer users see them all and you want your image to look sharp if you look at it on a computer.Iage Magick works with quite a few more colors-try 16 million-that makes for an awfully heavy graphic. This should be your final step since all most all the effects at Image Magick add colors to your image and increase the kb's.Click the output tab and take your baby home.You are the proud creator of a personalized shadowbox.

So there you have it.You're own shadowbox. What you do with it is only limited by your imagination. Look around at other dingbat fonts...you may find a nice border font that would give a little flair to the top and bottom(I'd keep it around 25 pixel high to stay in proportion) How about a metal shadowbox. Or annotate your name and use the statuette method to make it look like a ceramic. If you find a nice candle animation crop the flame at gifworks and make a candle effect. It's up to you.Come on and put your imagination to it.


Now folks I don't claim any intellectual copywrite here or anything...You see the link at the top of the page...that person thought up the idea.All I'm doing is adapting it for msntv users and our online imaging tools. If you are going to create a whole mess of these and offer them for others to useon their pages and whatnot I applaud you for the time you are spending and your generosity.In the spirit of that generosity I would appreciate a link back from your site-if for no other reason then that the original creator of the tutorial gets credit.Let your conscience be your guide.
If you need any help, or get some great inspiration or modifications or just want to show off you can get me at jdverte@webtv.com .Now go and be creative.
Thus endeth the lesson!!!