Glorious sprites

Step-by-step tutorial to create icons for UI, applied via sprite for links with roll-over. While the menu will reflow for mobile, this does not include the toggle, please see the 'toggle it!' tutorial for details on how to get that set up.

step 1: the icon

Our menu consists of 3 links, leading to the 3 steps outlined on this very page. Let's create a roll-over which brightens up those 3 numbered links with a little visual touch.

Our links will feature the simple number in a circle as default (1), and change the visual for hover (2) as well as on focus (3).

Let's go.

Open a new vector file, considering the amount and size of individual icons to include; or download this .ai file to work with.

screenshot of file

The file measure 3 times the 512px square, i.e. we have an overall size of 1536px x 1536px. This is probably a little large for your average UI icon :D but we might want to use this particular visual for more...

Create a grid of 3x3 squares of 512px x 512px and add the number in the centre of each, aligning it within your given layout. Your file might look similar to the screenshot of the sample file.

NOTE: the sample file includes 2 artboards: one for the sprite and one for working on the graphics, called 'WIP'. When saving your sprite image for web, make sure to export only the one artboard.

step 2: the sprite

Next up, we'll add our visual touches to the interactive states of our links.

Create your graphics

For the perfect fit, keep an eye on your guides, ensure that your icon with all its details will fit your planned proportions. For menu links, have fun but be consistent and clear.

view of all icons in full sprite file

Our links will change colour of the number, will show the graphic in addition and for a bold focus state, the circle will be full colour with white text colour.

While editing your visuals, keep an eye on your grid!
Zoom in+out / outline+preview

NOTE: while working on the finer details - add the sprite image to your links to preview early. At this point, it can be useful to keep the layer with the grid visible on export. This will help refine the alignments and you can tweak your CSS until it looks right. Then export the clean file, ready for use on the site ~ easy :)

optimise & optimise some more.

For the best results, make sure to edit your vectors, clean with few points is best — and save in various formats. Optimise the final file for weight, compressing PNGs and cleaning SVG code. The final step will be the same regardless of file format.

step 3: the link

Ready to get the sprite set up and working. Add a typical navigation to your HTML page - or download these sample files which are a stripped-down version of this very page without the sprite image applied.

<!-- START navigation -->
<nav>
	<ul>
		<li><a href="#one">step 1</a></li>
		<li><a href="#two">step 2</a></li>
		<li><a href="#three">step 3</a></li>
	</ul>
</nav>
<!-- END navigation -->	
						

Apply sprite

We'll now tweak size and appearance of the links to accommodate our graphics. By default, the links are the size of their content. Now, the space needed will be larger as the visuals are added as background image via CSS.

nav li a:link, nav li a:visited {
/* link text */	
	text-decoration: none;
	font-size: 1.2em;
	text-align: center;
	text-transform: uppercase;	
/* sprite */		
	display: block;
	width: 128px;
	height: 128px;
	margin: 0 auto;
/* SVG fallback */		
	background-image: url(sprite-3step.png);
/* SVG */				
	background-image: url(sprite-3step.svg);
	background-repeat: no-repeat;
	background-size: 384px;
}
nav li a:hover, nav li a:active, nav li a:focus {
	color: #000;
}							
						

NOTE: while CSS shorthand should be used where possible, this scenario will yield better results if you declare the rules separately.

background-size: 384px;
= 3 times the size of our planned display size for the graphic, for the menu links this is 128px squared.

We now have applied our sprite as background image, and the links now all show the top left image of our sprite visual. This default is left in and will be set for each link individually.

Complete setup, inc roll-overs

Now to the mathematics... yikes.. :-P Next and final step will be to control the precise positioning of the large 3x3 square image file, revealing each square as required.

/* step 1 link */
nav li:first-child a:link, nav li:first-child a:visited {
	background-position: 0 0;
}
nav li:first-child a:hover {
	background-position: 0 -128px;
}
nav li:first-child a:active, nav li:first-child a:focus {
	background-position: 0 -256px;

}
/* step 2 link */
nav li:nth-child(2) a:link, nav li:nth-child(2) a:visited {
	background-position: -128px 0;
}
nav li:nth-child(2) a:hover {
	background-position: -128px -128px;
}
nav li:nth-child(2) a:active, nav li:nth-child(2) a:focus {
	background-position: -128px -256px;
}

/* step 3 link */
nav li:last-child a:link, nav li:last-child a:visited {
	background-position: -256px 0;
}
nav li:last-child a:hover {
	background-position:  -256px -128px;
}
nav li:last-child a:active, nav li:last-child a:focus {
	background-position: -256px -256px;
}						
						

Our links now show their respective numbers via a horizontal shift (to the left via negative values). On hover and focus states, the graphic is shifted by the same amount horizontally but also moved vertically (upwards via negative values).

And let's say you wanted to feature these numbers more than once... easy peasy now. To add the graphic before headings at a smaller size — or as large feature - adjust the size and alignment, sorted! ツ