How many square feet is your project? As simple question you say, it’s AxB=C and other geometry equations we all learned in the 4^th grade. But what if your project is going to be leased out? Or owned as condos, but have common spaces? Do elevators count? Commercial spaces can have complex considerations for dividing up the area’s between the common areas, areas belonging to the building owner, and area’s leased to tenants. Thankfully there is BOMA – Building Owner & Manager Association – to set a standard to follow. I’m going to go over the types of building areas and some tips on how to measure them using AutoCAD. In general Area counts can go on a separate layer they you can freeze and turn off when not needed. Use an obnoxious color you can’t miss, so you can remember what they are for, and in AutoCAD set it so it is a “Non Printing Layer” in the layers options.

Gross Square footage:

This is your overall building size following the exterior perimeter of the building following the outer finish. This is used by building codes and authorities to establish your buildings’ square footage. If you are going to rent the building in whole, you could use this measurement, especially if the lease allows modifications to the building exterior, and the renter is responsible for all exterior maintenance. If however, the landlord is covering the maintenance and exterior of the building you would look at shell and core square footage.

Shell & Core:

If the lessee is only responsible for the area inside the building, the gross square footage is measured differently. The lessee area is measured up to the exterior wall, and halfway through windows that make up more than 50% of a room’s wall area. If there is a common area, elevator or other shaft the lease line would end at the exterior of the walls surrounding those areas. If there is another tenant the demising wall each share the wall equally. A way of figuring this out in CAD is to use a polyline and the “in-between” snaps. Start at a corner and follow the lease area as above. You can use the “in-between” snaps to get between the inside and outside of window openings, wall intersections and other areas.  Always make sure to use the “close” command to make it a full polyline object. Using properties one can get an exact area take off.  To get the landlord’s area you must be a little tricky. Start the poly line on the outside corner and follow the perimeter, but when you get back to the start point stop short so it doesn’t automatically close, go to the inside edge of the lease polyline. Follow it back along that line to the start point. Close the polyline as normal then zoom in on the part where you stopped short, edit the polyline so you can move that point back to the “start” area. The polyline object is a big “C” shape essentially. This polyline will now give you the total area of the building’s shell.

Net Square footage:

Net square footage is the area of the space minus the walls, columns, chases and shafts that go through the space. Think of it as the area of the carpet.  This has couple of ways of being measured in CAD too. Start on an inside corner and measure around as above, but at doorways go halfway between the walls. To deduct columns and other objects in the middle of the space, drop the polyline down to the center of the column (Good old “midpoint” snap and “O-tracking”) follow around the object back to where the line dropped down, place a point there and continue back up to where you dropped down, and continue around the space. Another useful tool is “Bpoly” command in AutoCAD that will drop a polyline into an enclosed space – like the “Hatch” command can cover an area. However – there is some planning involved. To get columns and other objects included correctly draw a line that connects them to a wall. Lines between doors must made to enclose the room, and other objects like text, hatches, leaders must be turned off (freezing is probably better though). When all of your objects are linked you can drop the “Bpoly” command, then erase your guides. This may take some trial and error to get it right, but it can be very handy to do take-offs very quickly.

Definitely pick up the BOMA standards guide and review it, it is a great resource and you can help your commercial clients make sure they are renting and leasing the correct amounts of space.

This week, I’d like to share a useful website with everyone, Color Scheme Designer.  I use this site with just about every project these days.  It’s quite simple.  First, decide a color to start with.  Plug the number in, and you are provided with a list of colors that relate and/or look good with your original.  The site is most useful when figuring out colors for a website project, but can be used for just about any graphic design project.  You may even be an interior designer looking to find some colors for your next project, this would work.  The site works with web based colors so you will be using a six-digit number referred to as a hex triplet of a hexadecimal number.

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. The color white would be referred to as FFFFFF.

To begin, let’s take the blue color from the Blueprint for Design logo at the top left of this site.  The hexadecimal number is 558FAB.  On the Color Scheme Designer website, click the area I have highlighted with the red box in the below image.

A window will pop up to add your six digit color value.  Once you click OK, then the magic starts happening.  You are first introduced to the mono color scheme.  In our case, the colors are variations of blue.  (The image above shows this.)  Other viewing  options include; mono, complement, triad, tetrad, analogic, accented, and analogic.  Each one will give you a set of colors that, according to the color wheel, mathematically look good together.  For instance, after entering the color 558FAB, I then clicked on triad in the top left and this is the color chart I was given.

From here, there are a number of different things you can explore.  You can check the tick box in the bottom right to see what text looks like overlaid on the colors.  You can click ‘Color List’ on the bottom left to see what the numeric values of all the colors are.  You can even click on the links to the bottom right that say ‘Light Page Example’ or ‘Dark Page Example’ to see a mock up of a website with your selected color scheme.  Here is what my color choice looks like on a light page example.

Another great feature is the ability to export the color scheme you’ve created in various formats. A drop-down menu in the upper right contains all the export options.  I use Photoshop, and for most web designers, I suspect this is what you will use.  Here is how to do it.

A Quick Guide for Importing Color Palettes in Photoshop

1. Export your color palette from Color Scheme Designer and save to your computer.

2. Open Adobe Photoshop and open your Swatches tab. (Pictured below.)

3. Click on the drop down arrow at the right and choose Load Swatches.

4. Browse to the .ACO file that you saved from Color Scheme Designer and open it.

5. The selection of colors are now displayed.

Have you ever wondered how websites show their logo next to the URL at the top of browser windows? It’s quite simple to do in little time. Favorite icons show up in other places too. Bookmarked pages, on tabs in tabbed browsers, and as icons on your desktop for saved sites.

What You Need

You’ll need a few tools to get started. Adobe Photoshop or another type of design software is needed. You’ll also need the ability to save files as an Icon File (ICO). I found a great FREE plug-in for Photoshop at Telegraphics. Download and follow installation instructions.

Tutorial

Favorite Icons are small images. The actual size of the finished file will be 16×16. Because of the difficulty in drawing at such a small scale I’ll typically start off by creating a canvas in Photoshop at 64×64.

Next, start designing. Remember, it’s going to be smaller than what you see if you have scaled up for ease of drawing. I’ve found that simple graphics and one to three colors work the best. It needs to be a simple design.

When you’re done designing go to Image>Image size and change to 16×16. Make sure that Resample Image is checked and in the pulldown menu select Bicubic Sharper.

At this point you can see what your icon will look like. If it needs some more tweaking or the image doesn’t hold up at a small size, now would be the time to go back and correct it. To make sure that you are viewing the icon in it’s actual size go to View>Actual Pixels.

With the Icon completed it’s time to save. Go to File>Save as and name it favicon. This is important!  It has to be named favicon.ico to work properly and for browsers to find the file. You will then select Windows Icon (ICO) from the file format menu and save to your desired location.

Now, it’s time to upload the image. Connect to your website’s server and upload the image in the main directory. This is the root folder of your website. It can’t be in any folder. It should be where your home page (index.html) is located.

For some browsers, you’re done. Because of it’s name and location on your server, the browser knows what to do and how to view the image. Some browsers can be difficult so you may want to add a small amount of code to your site to be sure it’s seen. In the <head> section of your index.html add this bit of code -

<link rel=”Shortcut Icon” href=”/favicon.ico”>

Finally, save your modified page and upload the new files.

Viewing

Open up your desired browser and check out your site. If you don’t see the icon appear right away don’t worry. You may need to clear the cache in your web browser to “renew” the look of you site. Other browsers simply need you to hit “refresh” while others may want you to add the site to your bookmarks/favorites folder to actually see the icon appear.

Something Extra

If you’d like a little inspiration, check out this gallery of favicons.

A favicon generator.

-

Thumbnail photo courtesy of rob5408 on Flickr.