First of all, let me explain that these framing have unlimited uses but they are large and the image need to be compressed, sliced an diced or any combination of those to facilitate faster loading times.  These frames are slow loading if they are used as a whole without compression and should be used on pages that have no other images on them or your visitors will become discouraged and click away from the pages.

Next, I'll mention that these frames can be built of almost anything although the flourish dingbats lend an air of elegance and sometimes a baroque flair.  Here are samples of a few I threw together using flourish caps fonts and other stuff with small explanation of what I used.  This is a terrific place for all those Blade Pro presets I've posted at the Blading Basket.

I start with a font, tube, design - we'll work with the Fleurons font since most have that one.  I think it's one of the few dingbats that comes with most systems.  In fact, I'll pack it for download, just in case.

Sections
1. top and bottom ornamentation
2. sidebars
3. depending on the thickness of lines in the ornamentation, the upper and lower bracket
4. the frame opening backer texture and color.
5. drop shadow and build
6. the contents of the framing
 
 

TOP & BOTTOM ORNAMENTATION
step 1

First I find the font and then get a mental idea of what color and texture I'm after.  I am starting with a new image 400Wx600H with a transparent background;  I am using the Fleurons font and settled on letter 'i' for the shape.  After deciding on the shape, I test for the size (the size doesn't need to be an exact half of the width as it can be separated, added to or overlapping) by starting big - about 200.  There is not a 200 size to select, so you have to highlight the size number and type it in.  I also start with a white fill for testing the size.

Testing for the size:  Apply the font and move the selected image to the top left of the work area - see about where half way is and try to at least meet that point on the right.  Deselect the image, duplicate the layer, mirror the image from the 'Image' menu.  These steps will give you an idea of how it will look at that size.  Also while you are looking at it, you might just get an idea of how you want to fill the image and what color you would like to use - if it does, set the color now - or you can leave it white and change before SECTION 5.

step 2
I decided with the smoothness of the scroll I can use this size quite nicely with this dingbat at this size.  I also decided I wanted to use Blade Pro to get character and definition and that I wanted plenty of light play in it.  I set my fill to a silver gradient with a straight horizontal angle because it will have to transcend both top pieces, then hit the undo to get back to a blank work area.  I clicked for the font again, applied as was and clicked OK.

Deselect.  Now I look at the font with the gradient fill because if I don't like it, now is the time to jump back to the white fill.  It's okay, I see and know it can be brightened, colorized and bladed very easily.

step 3
Duplicate the layer;  mirror the image;  merge visible layers;  duplicate the layer;  flip the image;  merge visible layers.  Now you have your top and bottom shape.  This is where I like to experiment with the the color/texture because this is the main attraction of the entire framing.  Make sure anit-alias is unchecked and feathering is set to 0, select all, then float or set the selection.

Step 4
First I tried several different simple inner bevel selections and didn't find anything I liked  Nothing had enough elevation and contour to suit me, so I decided this one calls for Blade Pro.  I opened Blade Pro and tried several presets until I found one I liked.

I almost chose VerySpecial21 from set 21 because it would be so easy to colorize,
          

but I was looking for something that was more 'me', so I chose SoMe23 from set 23.

Couple words on BladePro for those who don't know.  Circled 1 is your access to the browser to find the folders you stuck all those presets in that you downloaded.  Circled 2 is where you can increase the size of the sampling.  With the image we're working with, it will try to crowd the whole image in - increase the sampling to 100% and slide the image down so you can see the top portion of the image.

Step 4 completes the 1st section of the build.  You don't want to do the Blading or beveling to the top half and then duplicate and flip because that makes the light path wrong on the bottom section.
SAVE image as a psp file.
 

SIDEBARS
Step 1
Most of the decisions her are a matter of personal preference.  Look at the top and bottom pieces (you will more than likely need to zoom the view out for a moment to see it).  Sidebars can be straight, swirled, thick, think - anything so there's a definite unbroken line down the side.

One of the things you might want to take into consideration here is how you intend to manage you final image.  If you intend to use it for an index of links, you might want to slice the image instead of using image mapping to allow you to use a tiled slice to add and delete index items - the other choice is image mapping where you just slap your text wherever you want it and then use the Image Mapper to set your links up.

I've decided I want thin straight bars on this one and will use the draw tool to draw the lines by setting it to straight line and width of 5 pixels ('antialias' and 'create as vector' are both unchecked) with the same gradient fill but the angle to 90% and the same preset from BladePro.

Step 2
Add new raster layer;  move layer under merged layer.
I'm picking my starting and stopping point as the ball on the left side of the ornament

I start my line dead center of the ball portion to hide the ends of the bars.  The second of a dual line start kist behind the swirl to the left of the ball area and goes straight down to the swirl just to the left of the ball on the bottom part.
The dual line created, I go to the layers palette, rename the merged layer to 'top/bottom' and hide the layer; duplicate the bottom layer; mirror the image;  merge all visible and rename this layer to 'sidebars'.

Step 3
Select all and set selection or float selection.  Apply same fill or color as you did to the top/bottom section (UNLESS you WANT a different color).  Deselect.

Save image.
 

UPPER & LOWER BRACKETING
Step 1
Add a new raster layer and move it below the other layers;  unhide the top layer.
Now it's time to stop and look things over again!  If there's a break in the pattern anywhere, you need to get rid of it by adding more grilling or cross bars.  See if you need them and where;  then decide where you want your background of the frame to change colors and use another layer to make short line to connect those points.  IF YOU INTEND to have the background the same as the page you put the image on, you could skip this part - just a matter of preference - I've done it both ways!

I have 4 breaks in the lines where the red 'X's are.

Step 2
I decided, all I need to do is close the ends of the dual sidebars, so I lowered the opacity of the top layer until I could see the ends od the bars and drew my lines after changing the angle of the gradient back to 0;  I left the line size the same. I made my connecting lines at the top and bottom of the left dual bar;  duplicated the layer and mirrored the image for the sake of uniformity, then hid the top two layers and merged visible layers;  selected all;  float or set the selection;  applied the same color fill as before and unhide the hidden layers.  Hopefully you can see with the top layer opacity still reduced, that the bars are connected completely.

With the opacity of the top layer raised back to 100%, you can't tell anything has been added.  Hide

Save image.
 

FRAME OPENING BACKER

Step 1
Add new layer and move it to the bottom.
With all layers unhidden, using the lasso selection tool set to POINT-TO-POINT with anti-alias unchecked and feather set to 0, outline a selection through the middle of the framing lines that you want for the frame background.
It's IMPORTANT to keep the line behind the middle of the framing so you have no ragged edges of background sticking out.

Step 2
Unsure of whether you want a background area to be a different color?  I always am, so once the selection is made, I save it to alpha channel and it is always right there for you to pull it up and apply the background color - so save the background outline to alpha channel (under the selections menu).  I will go ahead and fill mine with a background for the sake of the tutorial.  I filled it with a pattern tile I like that text is easily read through.  The alpha channel selection is insurance that I can remove or change it at any time.  Deselect.  Name that layer 'frame background'.

Add a new raster layer, move it to the bottom and name it 'background' for later use.  Hide the 'background' and the 'frame background' layers.

Save your image.

If you like your image and you think you might be able to change the coloring later, it is advisable to make a duplicate image using SHIFT/D or the menu Window/Duplicate to continue with and close the original image.
 
 

DROP SHADOW & BUILD

Step 1
Activate the top/bottom layer.
We are now going to add the drop shadows to each of the unhidden layers.  I find it makes it easier and neater than merging the layers and then add a drop shadow so that drop shadows fall like the different layers are soldered or welded on top of each other.

We will work top layer to bottom layer BECAUSE, obviously, the top and bottom pieces are the focal point of the total frame itself and you should judge the amount of drop shadow by that layer - then apply the drop shadow to the other two layers with the same settings.  Drop shadows are another one of the things that are a personal preference.  I like to keep the horizontal and vertical placement on these frames at 0, -1, or 1 so that the framing looks like all the layers are attached (welded or soldered) together - larger setting will make it appear that the individual layers have gaps between them.  The opacity and the blur are strictly a matter of individual preference of the creator.

Because I want it to appear that the frame is right on top of the background (just like a real frame would be), I am using 0 for my horizontal and vertical setting;  because I want the frame to seem very heavy or thick, I am setting the blur to 7.1;  I have set the opacity to 86 (just because it gave me the dimension I liked) and I am using black as the color of the shading to bring out the color.  I DID select all and set or float the setting and WILL do that for each layer just because it seems to do better for bring out the color then deselect after applying the shadow.

I did the top/bottom layer, then the sidebars layer, then the bracket layer.  Then I merge all visible layers and rename the new layer 'frame'.

Frame with no content

 

CONTENTS OF FRAME

Step 1
Add a new raster layer and move it below the frame layer;  name it 'work layer'.

Here is where you will start your fill of pictures, text or whatever you please, adding layer where you want them or whatever you can dream up.  Layers can be added above the frame layer to add jewels or flowers or whatever else you want.  You can even weave things through the frame work by duplicating the framing but any weaving in the actual framework should be done before you merge the frame itself.

This tutorial is just a starting place and the possibilities are endless.  My completed frame (image map) is at the top of the page with links to a couple samples.  The additions below are just an example of where you can start.  I used a white background to blend in with this page.

Finished.
 

Tutorial by CSGreen
March 15, 2003

Close window when Finished.