Complete WordPress Theme Guide ¹⁸¹

Nov 8, 2008 • Tutorials → WordPress

Based on a recent poll I've conducted, many readers are interested in learning how to build a custom WordPress theme. So, in upcoming posts on Web Designer Wall, I'm going to write a complete WordPress guide on how to install WordPress and customize theme. Below is a table of content of the guide (links will be updated as soon the posts are published):

Chapter 1: Installing WordPress Locally

Chapter 2: Building Custom WordPress Theme

Chapter 3: Moving and Exporting WordPress

How to: CSS Large Background ⁵¹³

Oct 20, 2008 • Tutorials → CSS

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

Adobe Illustrator Shortcuts ²³⁰

Jul 19, 2008 • Tutorials → Illustrator

If you liked my previous article on Photoshop shortcuts, you'll probably find this post useful. Here are 26 Illustrator shortcuts that can help you to speed up productivity. I use most of them (in fact, I can't work without them). Most of shortcuts listed in this article aren't documented in the software, so keep reading and you’re sure to find at least one new trick to put up your sleeve. Enjoy!

Note: this article is written in Mac Illustrator CS3 format. If you are using PC, Cmd key = Ctrl key and Opt = Alt.

Photoshop: Hand Drawn Design ²⁸³

Jun 29, 2008 • Tutorials → Photoshop 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.

CSS Decorative Gallery ⁵⁵⁴

May 27, 2008 • Tutorials → CSS, design

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).

View Demo Gallery

Download Demo ZIP

Parallax Gallery ²⁷²

Apr 25, 2008 • Tutorials → Flash, Photoshop tutorials

In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images.

View Demo Gallery

Download Demo ZIP

jQuery Tutorials for Designers ^1,180

Feb 29, 2008 • Tutorials → CSS, Javascript

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don't know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I'm not going to get into the details of the CSS.

Note: the version used in this article is jQuery 1.2.3

View jQuery Demos

Download Demo ZIP