a House gets to be more of a home when you personalize it. I spent the early hours of today unpacking boxes and came across a number of pictures to hang on the wall. I can tell you, when downsizing from 2400 sqft to 1100 sqft, there are a lot less walls for pictures. I have not found homes for everything (there are some obvious pieces not yet on display) but I filled a number of open spaces in the main living area.

do you recognize any of these ?

Many hours at the computer today yielded a kitchen design. More important than being just “a” design it’s pretty close to "the" design that will go into the farmhouse project. I needed to figure out the cabinets so I could start to make the materials list for building them in the new shop. I needed both numbers and sizes for the base and wall units as well as their configuration – doors vs drawers, panels vs glass vs stained glass, etc.

(Disclaimer: The cheap drafting software I used did not allow me much flexibility so things like the kitchen island, which will have space under the counter for the stools, can’t show it and I was also not able to depict stained glass panels at the top of the upper cabinets.)

The first step was to get the real dimensions from the site (then account for the finishing materials – the 5/8" sheetrock on the walls, the 3/8" engineered hardwood flooring and the 5/8" sheetrock ceiling).

I then had to account for "immovable objects" – the stove and range hood, the kitchen sink, and the electric in the floor for the island. All of the cabinetry fills in the spaces left over.

Once I had all the cabinets defined, I started drafting the plans for the shop. Thus far, I have all of the carcasses designed. I plan to get a relatively inexpensive sheet of finish plywood to see how accurate the plans really are

A few design results …

The counter tops and the kitchen sink will [hopefully] be soapstone.

The pantry, in the far right corner, will be composed of 3 28" wide tall cabinets for a total of just over 40 linear feet of shelf space. that should take care of most of my dry goods and canned goods.

All of the kitchen’s base cabinets will have drawers.

All of the upper cabinets will and under cabinet lighting, shelves and an extra panel at the top which will have a back lit stained glass panel. To be honest, I’m not fond of upper cabinets and hoping most everything will fit in the base cabinets. I’ll use the upper cabinets for the 175 glasses.

I spent another weekend working on the farmhouse project. The framers are nearly done and now all of the trades are coming in to do their rough-in work. Monday will be a bit crazy as the framers will be working on the second floor while the electrician, plumber, and geothermal contractors all have the first floor and shop area.

Since there will be a good deal of electrical work for the shop area, I really did need to finish my framing. I had all but two of the bays done but the two remaining were horrific because they contained large steel cross bracing plus one had a door and the other had a window. Fortunately, I had the opportunity to borrow a nail gun from one of the framers so at least I would not be hammering everything together. Unfortunately, all of the special cut-outs for the cross bracing meant every stud was a custom cut. In the end, the two bays took as long as all the others. That was Saturday.

I expected to spend Sunday working on paperwork and updating the floor plans. Then, when I woke up on Sunday I thought about all of the “filler walls” and considered that framing nail gun just sitting idle. So, I made another run to the lumber yard and got back to work. I framed out the end wall for the paint booth and framed the side wall near the hangar door so the electrician has a place to run the control wiring for the “big door”.

I did manage to get some of the floor plan work done. And, since I got a comment asking about what it looked like, here it is. If you compare it to the draft design, you will notice a few changes. There is an extra window in the kitchen. Also, in the early draft, the residence was 33’-6” x 46’-6” (exterior dimensions) so with the small footprint of the actual construction, quite a few things changed inside – well, actually, early everything !

The actual framing shows the front of the residence at the bottom. The kitchen is lower left and the living room is lower right. Along the doors to the office and the bedroom are on 45° angles with the wetroom in the middle. In the kitchen, the long narrow area is for the pantry cabinets and the deeper pocket is so a standard refrigerator will be flush with the pantry wall. The spiral stair is just for reference. The real spiral staircase requires a full 360° to ascend to the second floor. The very top of the picture actually represents a portion of the shop. Across the top from left to right is the utility room, the shop-side bathroom, and the paint booth.

I’ll get around to updating and posting the floor plan with the kitchen cabinets and appliances in place as well as the bathroom fixtures. After that, I probably won’t have much free time to do the 3D rendering and such as I own a number of the subcontracts and will be very busy !

My Thinkpad T61p widescreen has a very high resolution – 1920×1200 – but the physical screen is only 13 inches wide. This equates to approximately 18 characters per inch when using a word processor and when reading many web pages. Even with setting the operating system for things like “use large fonts” etc, most pages display tiny fonts. I will admit some of this is my eyes but it is most predominant on this high DPI display. The majority of the trouble was when reading web pages so I started increasing the font size in Firefox, first just hitting “CTRL-+” and then latter, installing the NoSquint plug-in. What I noticed was that some sites were making bad assumptions about the display font size. This manifested itself in text running into other text or text overlapping graphics. The problems begin when a web designer assumes both horizontal and vertical  screen real estate. When text can wrap and expand, pages work pretty well. Even when layout needs to be better managed, it’s possible to leave some “breathing room”. Obviously, accommodating for a wide range of scaling is not reasonable, it’s not out of reason to allow for 20% or even 50% increase. Here are some examples …

The most common errors occur in the banner of a page. The three examples above – IRS.com, CNN.com, and MSNBC.com were all viewed at 120% 0f normal. The IRS website loses an entire line of links. Without moving the cursor under the button bar, a user would never even notice there is an entire row of links. Over at CNN, there is left aligned text together with right aligned text and anything in between gets crushed. MSNBC has a search box in the banner and it grows left into the corporate logo while the “sign in” to MSN space falls off the right.

Amazon.com does a pretty good job at handling display changes. The image on the left is at 120% and the one on the right is 150%. The “Shop Departments” menu on the homepage was not as forgiving. The text can expand beyond the underlying graphic.

Probably one of the more interesting is the pop-up on Microsoft.com. The “Click to Install” text is not part of the button and thus can wrap onto a new line and below the button’s graphics.

In most of these cases, the issue is the web design separates text from graphics but expects them to stay in lock-step. In early web design, the solution was easy – the text was part of the graphic. This practice fell out of favor as accessibility became a priority. Screen readers can read the text of a webpage but can not read graphics. There are a number of ways to address screen readers – “alt text”, “tags”, alternate pages, and separating the text from the graphics.

It’s easy to make a graphical and visually appealing web site. It’s more difficult to make it accessible. Screen reader support has been the big priority. Color support has been another priority. I think text size should get more attention.

The advent of mobile devices, higher resolution screens, the UMPC fad, and web TV, dictates we revisit the construction of web pages. Perhaps HTML has reached the extent of its applicability. It may be time for some structured XML to focus on web sites with multiple possible renderings.

I struggled with the quickest way to mock up the kitchen cabinets so I could get an idea of what design I’d like and what paint colors or species of wood I might want. Given the kitchen will last a long time, I want to get something I will like for a long time.

I have been using GIMP for a few months now (a hold over to my stint on Linux). It does just about everything you could imagine. One thing I struggled with was the correct procedure for using masks. I knew what masks were meant to do but I didn’t exactly know how to create them or use them. Having now slogged through the process a few times, it’s pretty obvious.

If you are a GIMP user and have not figured out layer masks yet, you can read the steps I outline below and watch the tutorial video. Hopefully, you will have a better working knowledge of layer masks after this.

Here are the steps in the tutorial:

1. Create the “Base Image” – I started with the the original all white image or a door. If you don’t have a white image, any monochromatic image will do. You just desaturated it to make it black & white and them bump up the contrast or use the levels tool to make the lightest part pure white. I bumped up the brightness and contrast just a bit so the brightest parts where nearly full white.
2. Create the “Shading” – I made a layer copy of my base image and converted it to an alpha channel using “white” so I ended up with a layer that was just the shadow lines of the pencil detail, the door and drawer gaps, and the the inset panels.
3. Create the “Inset Mask” – I made another copy of the base image. I created two paths, one each that followed the inset panels. I then created a selection from the paths. If the areas are nice and uniform, you could use the rectangular or ellipse selections. Any method of creating a selection will do. I inverted the selection and used the erase tool to remove everything but these two panels.
4. Create “Horizontal Mask” for the door parts that have horizontal wood grain – I made another copy of base image. I used a series of rectangular selections to cut away (make black) the stiles of both the face frame and the door and drawer as well as the panels. This process is to identify the parts that would be made of wood with the grain running vertically. I then selected all of the black areas, inverted the selection, and filled with white. This will later be used as a mask.
5. Create “Vertical Mask” for the door parts that have vertical wood grain – I made a copy of the mask. I inverted the color. this will later be used as the complementary mask.
6. As a separate image, I found an photo of vertical bamboo. I did the necessary touch-up, scaling, and duplication, until I have a square image that was slightly larger than the largest dimensions of my base image.
7. Back in my project, I created a transparent layer and then copy/paste the bamboo image and anchored.
8. Return to the bamboo image, I rotate the square image 90 degrees. Back in my project, I created another transparent layer and then copy/paste the bamboo image and anchored. I now have two bamboo layers, one vertical and one horizontal.
9. On each bamboo layer, I create a simple layer mask and choose “white” as the type.
10. With one bamboo layer at the top, I select the corresponding horizontal / vertical mask, “copy”, then select the bamboo layer (and also click on the white mask of the layer) again, and “paste”. I finish the masking by anchoring the mask to the bamboo layer.
11. Move the other bamboo layer to the top and repeat the steps using the complementary mask.
12. I hide all layers other than the two bamboo layers and the alpha shading layer. I move the shading layer to the top.

These steps work for the rendering that are all one type of wood. I did not use the “insert mask” in this case. The two tone rendering takes a couple extra steps. I needed one more bamboo layer with the contrasting color. I move it to the top, add a layer mask of “white”, select the insert mask payer, “copy”, reselect the top bamboo layer, and “paste”. Then I move this bamboo inset layer just below the shading layer.