do you recognize any of these ?

(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.

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 !

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 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.

Here is the results – all natural, all carbonized, and two tone. Below the image you will find the process I used.

Edit: rather than mix a design discussion with a tutorial, I have move the latter to a post of its own.

The internet has really helped in the areas of “decision making”. The biggest tool has turned out to be Google’s image search. The kitchen cabinets and wetroom tiling are two good examples. Here is a page of results from my search of custom kitchen cabinets. In one instance, I used the search too look for layout ideas. A later use of the same search was to investigate ideas of door and drawer styles. Lately, it has been colors. The page of thumbnails lets me quickly discard color combinations without even seeing the full size pictures. I quickly open a tab for anything that *might* be interesting. After I have 10 or 15 tabs open, I start to page through them and discard the obvious misses. I whittle the list down to a few and then bookmark those in a folder. I repeat this a few times. Then I walk away to do something else. The next time I feel like picking up the task, I open my browser again and have it “open all bookmarks in the folder”. Then I page through the tabs and discard any that no longer interest me and start making notes of the rest. I’ll usually repeat this filtering a few times until I have a very small number of choices, any of which I would be happy with.

When the time comes, I’ll use the same technique for choosing the cabinet hardware.

On side note – I found an image of a simple door, photographed strait on. This is turning out to be a huge asset. I loaded it into GIMP (an open source equivalent to Photoshop) and preceded to clean it up and make make a black & white image from it. Next, I created a series of layers.. There are four primary layers – the whole base image, just the door&drawer inserts, horizontal wood grain, and vertical wood grain. The horizontal grain is cropped to the rails and the vertical covers the stiles and recessed panels. The combination allows me to simulate any combination of colors as well as painted vs wood finishes. The grains are just alpha channel – no color. I then can copy the base and insert images and color them numerous different ways.  I can turn on/off the wood grain as well. (All of this still does not mean I have settled on the final choices.) Sooner or later I should post the process in more detail but that will have to wait.

I used this same technique when researching wet rooms. I blogged earlier that wet rooms are much more common in the UK than here in the USA. I needed to learn all I could and it turned out using Google’s image search, made it easier to distinguish the websites that had the relevant information.

To visualize the various tile patterns, I created the diorama. The photo was an early attempt and the “pebbles” are much too large but it conveyed the idea pretty well. I left the wall with the door open to make it easier to look at and to photograph.

If you bored, feel free to print out the flat sheet (click for a larger image) and cut out the diorama.