Drop Down Menu

Tuesday, September 25, 2012

Hexidecimal color

Many years ago when the internet was first available to the general public, and most people thought it was the latest fad, the internet didn’t have color.  Anything you saw online had a grey screen with black type. You could surf a topic and get to the end of available pages for that topic quickly.  Of course we have gone quit far in a short amount of time.

The color system put into place for the internet is called hexadecimal color which is a combination of letters and numbers put together to represent a specific color.  Anyone that has worked in offset printing has worked with CMYK (Cyan, Magenta, Yellow, Black) or Pantone color systems, and hexadecimal is a color system providing web safe colors.  Although color has come a long way there are still some hues that don’t convert nicely to viewing on a screen so it is important we always choose from web safe colors for anything that will be viewed digitally.

I personally use Photoshop, Fireworks or Illustrator to choose my hexadecimal colors but not everyone can afford these programs.  There is a way to calculate the color code using RGB (red, green, blue) values.  An RGB color is going to have a value that ranging from 0 to 255.  For example this color used 175 red, 40 green and 40 blue.

To convert this to a hexadecimal color I would use a formula that looks something like this one:
R/16 = X + y/16
G/16 = X + y/16
B/16 = X + y/16

Or for the color we have our formula would look like:
175/16  = X + y/16
40/16     = X + y/16
40/16     = X + y/16

The whole number will be ‘x’ and the remainder as a decimal would be ‘y’.
175/16  = 11 + 0/16
40/16     = 2 + .5/16
40/16     = 2 + .5/16
Take the decimal point number times 16 to get a whole number.
175/16  = 11 + 0/16
40/16     = 2 + 8 /16
40/16     = 2 + 8/16

So if we take out our calculations we have:
11, 0, 2, 8, 2, 8

Numbers are represented in 1 – 9, but we have 11 as one of our calculations.  Starting with 10 we replace the number with the coordinating letter for that number.
10 = A, 11 = B, 12 = C, 13 = D, 14=E, 15=F  (it doesn’t go higher than 15).

So our hexadecimal color would be: B02828

The color converted nicely from our original.

Ok, so you don’t really want to go through all this effort to choose colors so I suggest finding a color chart online. Not usually as complete of an option as calculating but will at least get you rolling visually with color.  I recommend using  http://w3schools.com/html/html_colors.asp.

Happy Coloring!  ;)

Tuesday, September 18, 2012

Template Discounts!

Just wanted to share this discount on templates at http://website-templates-store.com/ for whatever your project calls for: Flash, CMS, Websites and much more.

Hurry, The offer ends 9/30.

Really someone not so  savvy in design can grab a template for a low cost and then customize.  It could be a great budget solution.

Tuesday, September 4, 2012

Adobe Illustrator - Artboards

I was designing icons for an eLearning project and had to build a button with different states.  I had started all in Adobe Illustrator, lately my program of choice, and thought about using layers to build each state in, but what a hassle having to switch to each layer screen to work. Then it struck me, why not use Artboards for each state.  I can line up all the Artboards  in one window and go from one button to the next without having to make extra clicks and I can duplicate Artboards for altered states.  Then I started thinking of so many uses for Artboards; multipage website layouts, two sides print brochures, and even something text heavy like a newsletter.

By default Illustrator opens with one Artboard, but there are two places additional Artboards can be added.
When you launch any new document there is a set-up panel that can be edited with the number of Artboards you wish to add, among other things.

Or you could already have the document open and want to add Artboards.  In that case click on Windows from the main navigation at the top and click on Artboards from dropdown.  This will add an icon to the control palette on the right.  Click the icon to open the window, and clicking the little paper icon at the bottom will add an Artboard.

Maybe you need to resize an artboard, or have them all different sizes, no problem.  Click the Artboard Tool from the tool palette on the left.  Notice how one of the Artboards now has little handles on it.  Just click and drag to the size you desire.

With the Artboard Tool still selected click on the other artboard to select it and edit as desired.  You can even click on either Artboard and drag it to a different place in the window.

One of many features that I use is setting the rulers to Global or Individual. What that means is I can have a ruler for each Artboard or a ruler that spans all of the Artboards. This is a big help with laying out a multipage document.  You can also flow copy across all of your artboard pages or whichever ones you wish.

Try using Artboards for your next project!