← Back to 2 - 3. Painting with Color
Continue to 3 - 1. Typography →
← ← Jump back to Design Demo: Medieval Scroll Index

Main Points

If you're thinking we skipped page 2-4, you're almost right. It's about layout changes so I placed it with the layout discussion. If you're more interested in the process of web design check out 2 - 4. Polishing the Layout.

In The Principles of Beautiful Web Design, Jason Beaird describes color, phase two, as the place where many good designs end; in fact this is precisely what prevents them from being anything more than just "good" designs. To take the design to the next level, we want to give the design a physical sense of feeling. It may be on a monitor, but you want visitors to believe they could reach out and feel the variation in your webpage. Even though they're only looking at it, a flat design and one with a visual sense of touch adds a whole other dimension. You are literally adding depth visually, and providing the illusion that it's a design that can not only be seen but touched as well. There is a richness to the end product that comes with executing texture well in the design, and that is exactly why this is so important.

Texture Ideas

OK, so how do we get a sense of feeling out of a piece of paper. After all, that's all this design is really trying to mimic. Well, I have a couple of notions. One, you'll note that even in the placeholder images, the wood grain of the table is a key part of the design. The paper mimics the screen, and does some pretty interactive things from one page to the next, but the table background helps put that paper back into a less technological context. It helps evoke the simpler, more old-fashioned emotions I'm going for; where you can lose yourself in a good book for hours... even if you have to turn your monitor on to do it. The page edges are also something I've wanted to play with. I've no idea if I can get that to work given that the corners of the page slide along the side images and have to match up at each point, but I intend to experiment in Photoshop a little bit. The table and the border at the edge of the paper are critical elements in my texture plan.

The paper is also a key element in my plan. To say that it's only paper is misleading, paper has visual depth to it, paper has feeling. To see what I mean look closely at the writing surface of the historical examples that I collected on page 2 - 2. Final Color Palette. Remember, the amazing mesh impression from the papermaking that can be seen in the Tractatus de Sphaera. Therefore, I intend to play with visual textures to add variety to the look of the paper, along the image borders and also as a background image for the entire page. Right now, I'm using a simple background color, and while that should remain as a backup in case the image isn't served properly, I'd like to add depth that the paper texture would bring. I also want to experiment with the shadow gradients for the scroll curls; right now they look glaringly like the illustrations that they are; they feel out of place next to the realistic wood grain of the table. If I could get a good photo of real curls and do a color replace in Photoshop to bring it to Bright Ivory, I think that would be ideal.

I've also seen opportunities to apply other textures on top of the paper. There is a substantial amount of visual feeling, if not physical feeling, to aged documents. The Ayer Vocabulario in particular is interesting on this score. There is subtle underwriting; something similar with the opacity turned down sufficiently to avoid distracting from the text might be a nice decoration to the background image with the page texture. There are also age-related discolorations on the parchment, especially near the edges. I have two extraDivs applying the right hand corners; their <span> elements are not spoken for and I can apply images to the edge of the page or I can add in a new extraDiv to do the job. By adding another background image, I may be able to add some variation to the edge of the document without sacrificing the stability of the image border's behavior.

As I worked on the design, I'm playing with another idea for page texture. There is banding in the Topkapi Scroll which could work in this design, although it would require exact control. If the left side and right side borders are images with the same height as the paper background I'm applying, they'd line up and I could create a Topkapi band horizontally across the scroll; it would even repeat vertically down the page. I can easily clear the top side of the image border just by placing the band more than 100px down the image. The bottom border will appear at varying heights that are impossible to control. There are two mitigating techniques I can think of. One is having a very light band so that if the bottom border cuts through the middle of the band, it doesn't look weird. I do not have high hopes for this technique, however, I could also use a band with a relatively small height (and a background image that's comparatively very tall and just accept that on the odd occasion it will be cut and look bad.

Skip to Main Points

Texture Experiments

To adjust the page color to my Bright Ivory, #FFF0CD, I tried using the replace color tool. The result was a horrible blocky mess. After a number of experiments, I finally arrived at a different, reasonable solution.

First, I faded the paper texture dialing down the opacity until it was just a ghost. Then I selected the paper, created a new layer and filled the selection with my bright ivory. The paper texture has reduced opacity so it must be above the fill color and finally I created an extra swatch of bright ivory on screen for comparison. The swatch is important because the semi-transparent texture combines with the color underneath producing a different color, not the Bright Ivory I want. With the fill color selected and the RGB version of the hex color written down (255, 240, 205), I manually adjusted the fill color typing in numbers for the RGB values in the color picker until the combination produced the 255, 240, 205 value I wanted.

Immediately, my first problem was that a mix of any two colors was not going to get me to the maximum value of 255. I therefore applied a brightness / contrast adjustment layer and turned up the brightness in order to achieve the 255 red value I needed. The brightness then messed up the swatch I had, so I needed to remove it from the influence of the adjustment layer. While I could have simply moved it to the top of the stack, I chose a more object oriented approach. I selected the fill color rectangle, inverted the selection, clicked the layer mask icon for the adjustment layer and used Ctrl+Del to fill the selection with my background color, black. That hid the effects of adjustment layer from anything except what I wanted it applied to. It took 10 seconds, and can be reapplied just as easily if the shape of my selection changes.

At first I was trying to get the flatter sections of the texture to the Bright Ivory to let the texture provide shading. While I succeeded in my aim, it had the effect of making the color look darker than my Bright Ivory. While I probably should have skipped that phase in the first place, it was only after I saw the results that I realized my problem was due to the relativity of color that Josef Alber's describes in his book, Interaction of Color. This is something you just have to eyeball, nudging the color values a little up and a little down until it "looks" right. The shading of the page texture not only adds texture, it changes the hue. I forgot to take that into account.

I'm trying a quick and dirty trick to get all the edges to line up. Like the wood grain this is a fairly subtle pattern, so I don't think I'll get caught by replicating it. The left side was significantly darker than the right, so I took my original image, copied it, flipped the copy and stuck it end to end with the original so that my "new" image is twice as wide with the right and left sides of the original image matching up with themselves. I think it may line up top to bottom ok, but if not, I'll try the same trick flipped vertically. Finally, I copied the text from a clip of the Ayer Vocabulario, copied it sufficiently to fill the background image and then turned the opacity down below 10%. This mimics the look of underwriting, and is virtually unreadable so as not to interfere with the text content that will appear on top of it. Note that this is cheating. I'm using underwriting in the design which is a feature of parchment, however, I using a very distinctive paper texture to give the background depth. Paper doesn't have underwriting so this combination is illogical. Somehow, I will try to live with myself, I think the look is very cool.

Skip to Main Points

Final Texture Notes

First, I tried working with the table and adjusting it to the Rich Chocolate color of my other borders. This failed miserably, and made the wood look very unnatural. Therefore, I kept the natural look of the original wood even though it doesn't precisely match the color palette I laid out. When I get more heavily into the images as our final step, I'll need to balance the light intensity so that it's more even and at that point I'll try to hold it at a shade or tint of my palette, but that seems premature at this point when I'm not polishing. I've also experimented with the page edges and I like the original results best. The edges are straight but soft so that it both accents the boundary while making it a little fuzzy. That soft look is repeated again and again throughout the mechanics of getting the elements of the page to slide attractively at different sizes and resolutions, so it looks very organic in the design to use that look for the borders. So much for ragged paper edges.

For the paper, I liked the results of using the reference I discussed at first, the heavy mesh impressions from the Tractatus de Sphaera. I had some challenges getting it to look right, but I left the flat background color on the image border so you can compare it to the flat Bright Ivory along the borders. (this is exactly how I assessed how well I was doing.) Like the wood grain, there are variations in light that are too intense. I'll either have to take a different swatch, a smaller swatch that is more even, or apply some adjustment layers to remove some of the light variation, but that is a job for later when the design is more complete. This is definitely the basics of what I'm going to use for the page texture, and aside from the image editing, this was all that was necessary.

html {
background: url(../Images/PaperBackground3.jpg) top left repeat;
}

I've tried playing with changing the opacity of the illustrated scroll curls and playing with the Liquify gallery to make the paper texture warp to the appropriate shape. Opacity has not worked well so far, I may try some more effects. The texture of the paper however is much too subtle for Liquify and simply disintegrates during movement. I will most likely have to get a better reference photo and / or try to combine it with the Tractatus texture.

I was also able to get some overlay paper effects to stick properly. First, the underwriting turned out to be as easy as I had hoped. I simply took some text from the Ayer Vocabulario, and turned the opacity down under 10%. The effect is quite attractive. And this CSS style rule made the stain from the edge of the same source play nicely with the span from extraDiv4.

#extraDiv4 span{
background: url(../Images/AyerVocabularioStain.gif) no-repeat;
position: absolute;
width: 200px;
height: 124px;
top: 5em;
right: 38px;
}

I used a .gif so the image would use transparency to blend with the underlying background. By positioning it absolutely I could specify exactly where it should go and the width and height properties are set to the image size. This worked right out of the box, so I was very happy. The only caveat is that the image rode over the top of the clock box when the width of the browser narrowed. Resetting the z-indexes solved the problem. The main z-index used to be 2, but I needed to set the z-index of the #clockBox div to 2 and the others have to be above it, so I changed that to 5. Also, #clockBox needed to take position in order for the z-index to work; since I didn't want it to wander off, I used position: relative and didn't specify an offset so it stays put.

#siteWideNavbarWrapper, #specificNavbarWrapper, .navButton, .navMenu, #pageLinksWrapper, #footerWrapper, #mainBodyWrapper, #headerWrapper {
z-index: 5;
}

#clockBox {
position: relative;
z-index: 2;
}

So with the exception of the illustrated scroll curls, everything in principle seems to be all set. I learned a lot about the important of reducing the amount of variation that these designs will tolerate and the corners are still a concern. I'm thinking I might be able to make the top left corner align by making it the same size as the paper background so that it simply tiles with that image. I also have the option of applying just the table and fuzzy border to the image sides / corners rather than trying to get all that paper to line up. Getting everything to line up bottom and right edges will definitely be hardest. Specifically, I need to homogenize the texture of the paper and table a bit more, and make the hue of the Ayer stain look appropriate to the background. I've also introduced a gap in the top and bottom borders in IE6, but since everything else is good I want to call this good. I'll debug that first on the next page, and then on with phase 4, Typography.

Skip to Main Points
← Back to 2 - 3. Painting with Color
Continue to 3 - 1. Typography →
← ← Jump back to Design Demo: Medieval Scroll Index