Make A Vanity License Plate Image


Enter the text you'd like on the plate - letters and numbers, dashes (-), ampersands (&), and plus signs (+)

Avatar / Image

Thanks to: R.T.'s Blank plates for the plate images.

Thanks to: 15q.net for the plate text colors.


Technical Details

Objective

The objective of this was to have fun, and refine my XHTML/CSS and ImageMagick skills.

Input Area

The input area uses a sprite for the background, overlaid with a white mask of 70% opacity to make it easier to see the text input. The color of the text in the text input is inherited from the CSS for the state.

ImageMagick command to create the mask:

convert -size 235x65 xc:white -alpha set -channel A -evaluate set 70% mask.png

State Color Codes

The state color codes were translated from .css into .js with sed:

Generate color list .js from .css - sed "s/\.\([A-Z]\{2\}\){color:\(#[A-Z0-9]\{6\}\).*/\1='\2'/i" stylesheets/plates.css > colors.js

Copyright © 2011 Betsy Gamrat