The Little Mermaid's syntax colors - creating a themed palette

Graphic design students often learn that color palettes can be extracted from any visual source. Photographs, Illustrations and any visual reference can be used to sample colors. We will use this technique here to create a visually-compelling and coherent syntax-highlighting color palette.

A few days ago, after I wrote about syntax color palettes, a friend reminded me that we used to have a syntax-color palette at work that I always referred to as being the little mermaid palette. I will try to recreate that palette in this tutorial.

During the tutorial, we'll extract a color pallete from a source image using Illustrator and then use Visual Studio 2003 to create a syntax highlighting pallete that matches the one we extracted. Let's get started.

Step 1: find a source image on the net and place it inside an illustrator document. draw a few matching rectangles and place them next to each other.


Step 2: Choose the rectangles one by one and use the eyedropper tool to pick up colors from the source image. Try to create a pallete that represents the primary colors of the source image.


Step 3: Open Illustrator's Color palette (Window Menu->Color) and set its color mode to RGB.


Step 4: The Color palette displays colors of the selected shape. We will use this window in the next steps to copy the RGB values of our colors into Visual Studio.


Step 5: After we've created a palette in Illustrator, we're ready to start applying this palette to actual code syntax in Visual Studio. Open Visual Studio and place the Illustrator and Studio windows next to each other (see image above). This placement will make it easier for us to copy the color values to Visual Studio. As a first step, we'll choose the text font. I use Tahoma Bold for all my syntax palettes.


Step 6: In order to apply the palette to the syntax colors in Visual Studio, we have to select each syntax element and assign the RGB values from the palette rectangles. We will start with the Text element because it determines the background of the entire palette. The Text colors are kind-of hard to get right, and you might need a few attempts to get those to work. When you think you can move on, start setting colors for the Identifier, Keyword and Comment elements. then click Ok. after settings those basic elements you could probably see if your palette is heading in a good direction. Continue on to define the Strings, Numbers, XML Doc & Tags and Collapsible Text.


Step 7: This is a screen-capture of the palette I created after quite a lot of playing around. I was trying to preserve the feel of the illustration, although I did not use the exact color proportion. The result is a coherent syntax coloring palette that would be very hard to accomplish without a visual reference.

Visual Studio 2003 does not have a palette export feature, but you can use regedit to export the FontsAndColors group to back up your syntax palette.

My Little Mermaid palette is available for download: here.

Update: a massive emacs syntax highlighting gallery: Link

Howto: create vector application mockups using Visio & Illustrator

Visio 2003 is a great tool for creating mockups of Windows XP user interfaces. It features a complete stencil that includes many common windows control that were re-drawn as Visio vector shapes.

However, by itself, Visio isn't always sufficient for creating an entire, detailed application mockup. such mockups often require graphics that are hard to produce on Visio alone.

This quick tutorial will show you how to create a detailed vector mockup using both Visio and Adobe Illustrator.

When you first start Visio, the Choose Drawing Type screen appears. choose the Windows XP User Interface drawing type from the Software catagory.


Design your application form using the common controls and shapes found in the stencils on the left. Drag a form first, followed by some buttons and panels. Note: most controls have options that can be set using the context menu.


Goto File->Save As and save your file as a SVG file. SVG stands for "Standard Vector Graphics". it's a file format used by many vector graphics applications to exchange drawings. We will open this file with illustrator for further editing. Copying and Pasting the contents of your mockup from Visio to Illustrator might seem quicker, but it doesn't produce well-organized results. (it seems to create redundant, inaccurate shapes.)


Open the .SVG file with Adobe Illustrator and edit it further. add some special graphics that could not be done in Visio. (here, I added a 3d pie chart and some quick toolbar icons). When initially opened, the file's content might be over-grouped, select your mockup form and hit Ctrl+Shift+G (Ungroup shortcut) until the mockup is completely un-groupped so you can work with it. You can also add another layer above the mockup and lock the layer holding the mockup for easier editing.


When you're done working on the mockup in Illustrator and ready to use it in another vector file (a Campaign Poster, in my case), make sure the Scale Strokes and Effects option is checked. (this option can be found in the Transform window - open it from Window->Transform.) when turned on, this option tells Illustrator to scale the line strokes and effects applied to each shape. It then allows the scaling of our mockup into any size, without damaging and line work or quality.


Finally, place the finished mockup into your desired vector drawing, scale it (proportionally - holding Shift) into the desired size. In the screenshot above I've used my mockup in an A3 sized poster.

Great work. We've just created a resolution independent mockup of our imaginary app. We can now make versions of it for our website, posters and T shirts.