demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

SVG Export Settings For Adobe Illustrator

svg

Estimated reading time: 3 minutes

If you’ve created an illustration that follows the guidelines in my article on how to master Adobe Illustrator workflow for SVG production, you should now have a well-organized vector image ready for export.

Illustrator has long had strong support for ; last week Adobe added some new options to Illustrator CC, which I’ll include here. Whichever version you are using, there are three simple steps to exporting an SVG file from Illustrator:

Adobe Illustrator Workflow For SVG Production

svg

Estimated reading time: 4 minutes, 30 seconds

Previously I explored manually optimizing an SVG file by tweaking settings and cleaning up code by hand. While that’s a good thing to know – and very often a final necessary step – it’s more likely that most designers and developers will be building and exporting their SVG work from a vector illustration tool such as Adobe Illustrator.

In this article, I’ll look at setting up and working with Illustrator with the goal of producing useful, editable and highly compressed SVG graphics. In a follow-up piece, I’ll detail the best export options, including some that are exclusive to the latest version of Creative Cloud.

SciFi UI II: Hexagonal Buttons With Image Switching

svg / navigation

Estimated reading time: 3 minutes, 15 seconds

In a previous article I illustrated how to clip corners on rectangular user interface elements to make them appear “futuristic” using . A similar visual trope is to create UI elements as hexagons, shown in the example above. These hexagons are typically deployed as buttons: on hover, the images in the background of the buttons change. Recently, a reader asked how this kind of effect might be achieved with .

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.