Archive for Tutorials

Photoshop: Hand Drawn Design

// July 2nd, 2008 // 1 Comment » // Tutorials

In case you haven’t noticed yet, the hand drawn style is one of the hottest design trends. There are several ways to create hand drawn images — you can create it from scratch in Photoshop or you can scan an actual hand drawn sketch. Personally, I like to use a scanned drawing because you get a realistic drawing texture. Here is a quick tutorial to show you how to create a hand drawn design in Photoshop using the blending mode and alpha channel.
(more…)

Share This Post

Simple Double Quotes

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

This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
(more…)

Share This Post

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

CSS: Decorative Gallery

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

Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).
(more…)

Share This Post

Advanced CSS Menu

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

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.
(more…)

Share This Post

CSS: The All-Expandable Box

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

In HTML, if you don’t specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it’s list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.
(more…)

Share This Post

Photoshop: Secret Shortcuts

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

It is proven that by using software shortcuts can boost up productivity. Here are 30 secret Photoshop shortcuts that I’ve learned from years of experience. Well, what I mean by “secret” is that these shortcuts are not documented in the menus. Keep reading and you will find how these shortcuts can speed up your productivity. I bet you don’t know all of them.
(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