O'Reilly logo

Creating Flat Design Websites by Antonio Pratas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Exporting and coding

As I said before, this step is where you would export and prepare any images needed for your pack. There are a few different ways of dealing with images. Be it an icon or a background, you should try to optimize your images as best as possible. A great way to reduce the size of images and speed up the loading of a page is by using CSS Sprites. Sprites were originally used for video games where a single image file would have several frames of an animation, which were then loaded, and changing the coordinates of the image shown would create the animation, just like in a traditional animation. The following screenshot shows Super Mario Bros. 3 Sprite Sheets:

This same technique is used for web and interface designs, by creating ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required