What You'll Be Creating During this tutorial I'm going to walk you through the process of creating sophisticated web element styling in Photoshop, but without employing a single image file in your finished website. When we're done, you'll have a single page layout with all the UI elements you see in the preview image above, using nothing but CSS3, Base64 code and font icons. By creating a "no image" design you can keep your load time and HTTP request count to an absolute minimum, whilst achieving the highest possible level of flexibility in your UI elements. Pure code UI elements can be quickly and easily tweaked via CSS in ways static images can't without being manually edited and re-exported. To make this all happen we'll be employing four key resources: CSSHat Photoshop plugin made by Source which generates CSS3 directly from Photoshop layers. PNGHat Photoshop plugin, also made by Source , which converts any image into Base64 code. LESS CSS preprocessor that makes coding a bazillion times easier *. FontAwesome A popular collection of font-based icons.
↧