Posts Tagged ‘design’

CSS: Gradient Text Effect

// July 1st, 2008 // No Comments » // Tutorials

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.
(more…)

Share This Post

Typographic Contrast and Flow

// July 1st, 2008 // No Comments » // Tutorials

As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast.
(more…)

Share This Post

How to Design Mini Icons

// June 30th, 2008 // No Comments » // Tutorials

Numbers of people have asked me how to design my popular Mini Pixel Icon pack. In fact, they are relatively easy. All you need is just some basic Photoshop skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use them to create a full collection. This is the technique that used to create over 320 icons within a day.
(more…)

Share This Post