Update Boxes
This tutorial was done in Paint Shop Pro 7 but should be easy enough to translate into any layers capable graphics program. The html in this tutorial utilizes div layering which is not accessible to older browsers. But the end result is soo cute its hard to care really lol j/k ;)
|
It's not as hard as it looks! Honest :) Only two pages of tutorial so it can't be that bad! XOXO Manda |
||
This tutorial is designed specifically as an update box but the technique can be used for toyboxes, dollhouses, etc.. I'm not going to get too specific about the design of the update box, this is mostly about the html that follows. But to start us off..
Let's open a new canvas - size 300 x 300. Choose your foreground color and background color based on the color scheme of the site you are making this update box for. I don't really have a site in mind but who knows, maybe what I come up with here will inspire a new set ? *Ü* A girl can hope ! lol
Now you can make your updates box any shape you
like... I generally prefer to stick with the rectangular shapes but go with
whatever you like. Just keep in mind your updates are going to be in the center
of the image so you want to have some space there to accomodate them. To keep
it simple for the purpose of this tutorial Im going to use the shapes tool 
to make a rectangle ... So here is what mine looks like...
For the moment, I need to get rid of the excess canvas so I am going into SELECTIONS >> SELECT ALL >> FLOAT >> DEFLOAT then into IMAGE >> CROP TO SELECTION so the transparent area around my rectangle is now gone....
I like a lot of canvas area, so we will definitely be increasing the canvas size to 300 x 300 again, but for now just follow along :) Go into SELECTIONS >> SELECT ALL again.. Then to MODIFY >> CONTRACT and make it 10. Now go into LAYERS >> NEW RASTER LAYER name it INSIDE BORDER if you like :) Now floodfill with your foreground color. SELECTIONS >> MODIFY >> CONTRACT >> 1. Add a new layer - name it INSIDE. Now you can floodfill this with any color you like. Since I am using lighter colors, white works well for me. So this is what I have for the moment :
Now if you have a theme or character that your site is based around, this is where we start incoporating it into the design. I think this is going to be a valentine's set eventually ( maybe heh heh dont hold me to it lol!!! ) So I am going to add some hearts but first we have to add a new layer :) ... The first hearts I want to add are going to be in the center of the white area. I am going to lower the opacity though so it will still be possible to read the updates heheh.. So after lowering the layer opacity to 31 this is what I have
Now I am going to add a new layer and add some small hearts along the left border. REMEMBER, it is probably best to keep most of your design to the left since your scroll bar will be on the right ( those this is not a hard and fast rule, there are ways around it, but this is a simplified tutorial lol )
Add a new layer and put whatever text you want to add :) I normally just add Updates to the box somewhere :)
Im going to animate mine, just like in the calendar tutorial, we are using a table cell properties to set this up so you just make this image as you would any other :) So this is what mine looks like :)
Now that we have the graphic made, let's move on to the html ...
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
