Main Points

Well, almost done. Now we need to finish up the final imagery. The placeholder images we have so far have done a good job of being quick and easy and conveying the idea of the final design. But now it's time to whip it into shape to use for the production site. All of our images, mostly CSS background images need to be completed. I need to polish my base imagery, the paper background texture and the table background texture. The paper background will be used as a background image for the page, but also as a source for paper texture in the page border. The page border will also need the wood grain table background as a source image to work with. Then we need to integrate those two sources into the border and stitch the boundary together as realistically as possible, not to mention using drop shadows and gradients to provide realistic lighting effects. We also need to convert our one "image", the form's "Contact Us!" image needs a paper texture background. I'd also like to decorate it a little more. We're inviting people to get in touch, and with the public domain fonts we have available I could do a script gallery. Writing scripts were the first way that people could communicate with each other over long distances and across generations. I think it'd be cool to decorate our call to contact by adding characters from the first scripts ever developed by our ancestors. Once final images are edited, we can consider any necessary polishing.

Paper Background Editing

I'm starting out with background #3 as my place holder image. I'm applying it behind everything else so that it shows through unless I cover it up with something else. It's pretty close to the final product that I want; I like the color, paper texture and well balanced underwriting. I tried redoing the image from scratch with a much smaller swatch, but didn't like how even the text came out. I wound up going back to my place holder, which really only suffered from the fact that the background wasn't even. Therefore, I cut a larger swatch from my placeholder that's still "relatively small" and of fairly even color. I combined this with a nice uneven section of four text lines from the Ayer Vocabulario, and I made some additional adjustments to smooth out the color a bit more.

When all was said and done, there are five primary layers. A background color which shines through from underneath to give the proper base color to achieve my bright ivory. A second background color layer with my touch ups to even out the final color. A third semi-transparent layer with the page grain. A fourth layer to turn up the brightness to achieve the color I wanted (FFF0CD, can't be achieved without amping up the brightness to get red to full FF). A fifth layer has the text with the opacity turned down to 6% to mimic the faintness of underwriting. Then I use the following CSS to apply the image, it's virtually identical to what I had before, except that now I'm also supplying the proper background color in case the image is unavailable. It's bad form not to list your background color, because depending on your color combinations it's easy to lose contrast between your text and the background it's on.

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

Ayer Background Stain Editing

Here's another effect for the paper background...

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

In the top right corner of the scroll is a large discoloration eating its way in from the edge of the page. I spliced it together from the Ayer Vocabulario image and modified the color and texture to fit my page. Until IE6 falls by the wayside I'm going to use a .gif with transparency instead of the better looking .png, because .png fails utterly in IE6. It is very similar to the original placeholder image. I'm using the span of extraDiv4; it's absolutely positioned relative to the page, so I've placed it 5em from the top (so it's position scales with the design) and 39px from the right edge so the stain appears at the exact edge of the paper. I may have to adjust this a smidge based on the final image border. I then set the height and width to the image dimensions of the .gif I'm using. Since this is overlaid on top of another background image, I haven't specified a background color to fall back to. Not only would it hide the page texture if the stain image were unavailable, but it would wipe out the page texture anywhere the .gif is transparent.

The first change I made was to grab much more of the stain. My first attempt was 350px high, and had minute stains all the way across the full 200px width of the image. As it turned out this didn't work too well. The z-indexes were extremely troublesome as usual, so the flecks of stain covered up portions of the text. I removed the flecks of stain from a broad swatch of the bottom left corner and shrank the image from 350px to the current 275px height to prevent this interference. I also removed some more pixels around the edges to "shape" the stain. When I first started working with the enlarged stain, it was pretty obvious where the edges of the image were; now that I've finished, everything tapers nicely out so that the stain looks integrated with the page. I think it also retains a very organic quality; in fact, I thought it looked like Anatolia and the Eastern coastline of the Mediterranean, something I exaggerated in my shaping to keep that organic feel. Finally, I had on going problems with ivory colored halos around the pieces of the stain, which seemed to come and go from one save to the next. I was never really able to control this effectively, but rather than spend a lot of time trying to figure out why, I just saved several versions, and took the one where the effect was barely noticeable.

#pageLinks {
background: url(../Images/AyerVocabularioStain11.gif) top right no-repeat;
margin-right: -16px;
padding-right: 16px;
margin-bottom: -110px;
height: 275px;
}

OK, it required some rework, but by applying the Ayer stain to the mainPointsBoxout div instead of a span or flying div. I could get it to behave properly. This worked fine until I started testing screen resolutions, and the mainPointsBoxout is capped at the 70em width along with the body content. So at larger resolutions, this resulted in the "edge" stain lying in nearly the middle of the page. Therefore, I reworked this for the pageLinks section at the bottom of the page. The background statement and right margin and padding are identical to what I'd tried to apply with the main points. However, the page links though stable are too short to view the entire image. Therefore, I applied a height to show the entire graphic, and adjusted the bottom navbar with a negative margin-bottom on the page links. On the next page, 3-5 Reinventing and Polishing, you'll find the Ayer stain decorating the the bottom right section of the page.

[chroniclemaster1, 2009/08/30]

Skip to Main Points

Table Background Editing

I gave this an entire day of work, trying one technique with little success, trying something else but having no success at all. I gave up for the night (sometime around midnight) and started in again in the morning. I tried working on a small tiling chip that I could try to control much better. The first attempt I took a small section of table with fairly even light levels, and then took a similar swatch which I hid with a layer mask. Now with the “hidden” layer selected, I painted the mask white to eliminate any overt details in the wood grain. This was the easiest way to paint out details with a pattern. Usually I paint my changes on a separate layer, however, I had so little luck yesterday, that I questioned the wisdom in this case. I considered that maybe using the clone tool would work better if I worked in the midst of the changes and paint directly in and from the layer. So, I stole the curves adjustment I'd worked up the day before, duplicated all the layers and merged the duplicates into one composite layer of final product. This had seams and didn't tile properly, but it was already looking better than anything I'd achieved previously.

I copied this to another layer and then started painting. I grabbed a clone stamp and duplicated the right side of the tile on the left and the bottom edge of the tile on the top. I applied the clone stamp using a wavy stroke to break up the pattern, and this eliminated the worst of the seams in the image. Then I used a healing brush and started painting away the most obvious line that was left in the tile. I repeated this over and over, undoing any strokes that destroyed the appearance of wood, but keeping those that increased the subtlety of the pattern. I saved this under a new name, TablePattern1.jpg, so that I can return to yesterday's work if necessary, the TableBackground.jpg series. I already like it, but we'll see how it survives testing. That's what will tell the tale. As you'd expect from a small tile, the pattern is pretty easy to see. This is another reason homogeneity is so important, to minimize people's ability to discern overt patterns in the wood. It needs to look organic, but not like anything in particular. OK, after only about an hour's work, I think I've got what I'm going to use for the table. I'm sure the work I did yesterday was a big help to me, but I can't help thinking that I ran up a lot of blind alleys. *sigh*

OK, now that I've got all the gradients and everything working (see below), I'm even more impressed with these results. I'm having no problems merging between the sides and the corners. I know what to look for and I have a hard time telling. So using a small homogenous chip definitely seems to be the way to crack this challenge. To throw a wrench into the works, I can't help but think that maybe the table should be one background with the image border only of the paper; it could be applied around a container element. There doesn't seem to be a reason to attach the table background to the image border, it could lay underneath as a separate layer. Then homogeneity would only be required for the paper. Well, hindsight is 20 / 20, and I'm certainly not going to add another container element so I can add another layer of CSS, though it would be more object oriented (and probably would have been easier that way). I would like to try that, but this is where I have to drive for the finish by focusing on one design at a time.

Skip to Main Points

Gradient and Shadow Editing

To construct the image border, I started with the paper background swatch, turned off the text layer to remove underwriting (which I didn't want on the image border), and I had the paper half of the image border. I also turned the table pattern into a real Photoshop pattern using Edit > Define Pattern and then tiled it on a large rectangle behind all my other images in Photoshop. This gave me the table half of the image. Now it was just a matter of touch up work.

I'd hoped the realistic paper would create a realistic edge as well. I tried removing the black borders entirely, but the effect was less realistic. I straightened the black borders, several of which were off by a pixel and it created problems at the corners where different images overlapped. So I drew out some guides and zoomed in so that right from the first pixel the lines I applied with the Line Tool (U) laid directly on the guide. Then I stretched the lines the length I needed for my borders. Now I had the boundary between table and paper, and popped out all four sides of the image border (left, right, top, and bottom).

For the corners I needed more realistic gradients. I'd gotten a very illustrated look by creating my gradients from flat color to flat color, bright ivory to rich chocolate brown. It ran against the realistic look of the table background, but it wasn't hard to change. Taking the textured paper for a start, I placed it under the “illustrated” corners. Then I selected the original corner, clicked the layer with the textured paper, inverted the selection and safely painted away the excess. This gave me the paper texture in the corners, and the table background and borders were already in place. Now I applied my gradients from the rich chocolate brown to transparent. This way, the paper texture can be seen through the gradient. Having shaped the paper texture in the corners and applied the new gradients, I was able to bang out the corners of the image border. It's only a subtle difference, but it definitely unifies the design; now you don't notice it at all, which provides important visual breathing space. The flat color I previously had on the image border clashed definitively with the textured interior of the page.

Applying these last pieces of the puzzle required some final adjustments. I'd applied strong drop shadows around the bottom and right edges of the paper to add some three dimensionality. However, as soon as you crop the bottom or right sides (or the bottom right corner), you lose the part of the drop shadow at the top or left hand side. Using a clone stamp and checking the "all layers" box, I extended the shadow into the blind spots.

I had to shove the page forward link 7px inward to avoid conflicts with the Ayer Stain image. Now removed since the Ayer Stain has migrated elsewhere. [chroniclemaster1, 2009/09/08]. I played with the idea of using paper texture with all the rollovers, but for now I've decided to keep the flat color. Along with the sans serif typeface, it helps to identify and provide a unified feel to the digital ink on the page.

Editing New "Contact Us!" Images

I also needed to redo the the "Contact Us!" image; the font used needed to be redone using my new public domain fonts. Along the way, I made a couple modifications; one, the new paper background was added to match the webpage background. Two, I added some extra decoration. Four sets of characters celebrating the scripts of the first four civilizations to emerge on Earth: Sumerian (top left), Egyptian (top right), Harappan (bottom left), and Chinese (bottom right). Here are the normal and active / rollover states. The Chinese and Harappan were somewhat difficult to paint right; however, the Sumerian and Egyptian are from the extended Unicode portions of my public domain fonts. I typed them in, just like I typed in "Contact Us!" I love the power of Unicode!

Contact Us! Contact Us! Skip to Main Points