Tutorials

This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the <li> element, then use the absolute position property to shift the nested elements down to cover the border. It is very flexible — you can easily change the layout by altering the border or background image. It even works when the browser’s font size is being scaled (increased or decreased).

View Demo Menu Design

This post will show you the design process of the Abstract Chinese Phoenix, one of my latest illustrations which was presented at the FOWD 2008 conference. I will briefly guide you through the process — from sketching to polishing. Hints and tips will be provided throughout the article. Most importantly, I’ll explain what inspired me for this piece of artwork. If you like this illustration, you may download a high resolution JPG for your desktop wallpaper.

This is a Photoshop tutorial on how to create a beautiful photo film strip, as seen in Apple’s iLife package design (’06 version) and DigitalMash website. The warp tool will be used to create the twisting effect (so, you need Photoshop CS2 or above to complete this tutorial). With the completion of this tutorial, you will be able build a photo strip with your own photos or artwork. Don’t miss out this fantastic feature!

View Final Image

Download Photoshop File

In the last two chapters, I talked about Installing WordPress Locally and Building Custom WordPress Theme. This chapter will cover exporting your local WordPress to a web host. Assume you are done with the local WordPress development, it is time to learn how to export and import WordPress. Then you can keep the local version for backup purpose and future development (ie. testing new themes, plugins, and upgrades).

This is the Chapter II of the Complete WordPress Theme Guide series. This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.

This is the first chapter of the Complete WordPress Theme Guide series. In this chapter, you will learn how to install WordPress on a local computer. By doing so, it will save you time from updating and previewing files (so, you don’t have to frequently upload files on every change). You can also use the local version to test new plugins, themes, and upgrades. This tutorial is intended for beginners who want to learn how to run WordPress locally.