The indentations on the paragraphs were created with a transparent spacer Gif set to 10 pixels wide.

The The graphics used in the opening Flash file were created in Illustrator. I made one knot for the circular border, then duplicated it many times. I used circles for the triskel (the center knot). When I had the dimensions I wanted, I outlined the stroke, and used the Pathfinder filters to cut the shapes that I needed. Getting the triskel to look right took longer than I expected.

The word "Failte" was also rendred in Illustrator. I initially used a second image behind it to give the drop shadow, but I did not like how the black shadow showed through the front image in the transparent fade-in. I went back to Illustrator, and used the Pathfinder's Divide filter to cut up the image and its shadow. Now, since neither the black shadow or the yellow image are overlapping, the transparent effect of the fade-in functions properly.

I created the scroll image in PhotoShop. The parchment was created by adding noise to a white background, and adjusting the hue/saturation. I reduced the palette to four colors to reflect the pattern of real parchment. Since the image was still a bit grainy, I enlarged the image dimensions by 400%. The resulting pattern of expanded pixels was exactly what I was looking for. I further reduced the palette to two colors (a very pale yellow and white) to be less distracting.

I drew the outline of the rolled ends in Illustrator, and imported them into PhotoShop. I used the shapes as selections to copy my parchment pattern, then I added shadows and highlights with the air-brush tool.

After duplicating the ends and parchment layers, I merged duplicates and filled the image with a dark brown. I then applied a gauzian blur with a 5 pixel radius, and off set the new layer to create a shadow. I tried using the layers-effect shadow, but I felt that I had better control using my method.
I wanted the scrolls to appear as though they were resting on a wooden table. In PhotoShop, I filled a layer with a rich brown, added noise, and applied a motion blur.

Once I had the image finished, I cut it into nine parts to facilitate assembly in the HTML document. Each image was saved as a JPG at 75%. I saved four images as background patterns: the parchment, the page’s background, and the shadows to the left and right of the parchment. I needed the shadows and parchment saved as repeating backgrounds so that the image presented would keep its integrity as it expanded or contracted to accommodate texts of differing lengths.I copied a 200 x 200 pixel square of the parchment to use as a background for the illustrations presented with each poem. Each image was converted to a grey-scale image and saved as an alpha channel. Then I loaded each selection to a duplicated parchment layer, and adjusted the Hue/Saturation to give the images an antique ink appearance.

I used skills learned in the animation lesson to create the fade-in titles. I chose a brown text, because the inks used in medieval Europe were actually brown, not black. I also coded the text, via a Cascading Style Sheet, to be the same color brown.

I built the navigation interface according to the instructions in the "Roll-overs and Slices" lesson. I used an outline of Ireland with the background of my PhotoShop image to provide a window (layer effects: inner shadow) and used the same alpha channels as the images above the title to selectively adjust the hue/saturation of the outline. The images used in The Banshee and Let Ireland Remember are my own creations (you can see them at my portfolio listed below). The others I had gleaned from the web to use as alpha channels.

I needed nested tables to control the positions of the navigation interface and the scrolls.

I built the table containing the scroll’s cells to the precise widths of the slices from my PhotoShop document. Coding the widths allowed me to achieve two goals. The first goal was maintaining the integrity of the shadows to either side of the parchment. Since they are merely backgrounds, they would not “fill” a table cell as an image would. They will expand to fit the size of the cell. The second goal was to prevent the text from expanding beyond the image of the parchment.Within the cell containing the parchment background, I placed another table to hold the title and image, the text, and the author’s name. This table had no hard code for its size, since that would not expand beyond the set parameters of the cell in which it was contained. I also centered this table to keep the margins even on either side.

The music on the opening page is a WAV sample from Kim Robertson's New Leaves, from http://www.zendo.com/garden/harp3.html.

Tom Eagan
Home

Disclaimer:
This site was created in the BU 6305 Advanced Web Graphics class
at Middlesex Community College.
Contents used in accordance with the Fair Use Act.