Tutorials

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.

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.

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

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

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

By Rick, Color Charge

This tutorial explains how to create a energetic, vibrant, colorful wallpaper, like the ones available at Color Charge. These lines, which we’ll call Chroma were highly inspired by the iPod Nano Ad from 2006 and some Quantum Chromodynamics nerdery stuff. You will learn how to bend blurry shapes with Warp tool to draw the lines, beams, and steams. Then you’ll know how to add some glowing and vibrating color effects, and finally polish your drawing. Aside reading this tutorial, you’ll need Photoshop CS2 or CS3, and preferably a computer with a lot of memory and a larger screen to achieve that effect.

Download Photoshop file

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.

View Demos

Download Demo ZIP

«< 10 11 12 13 14 >