Fancy Sliding Form with jQuery

Automatic Image Slider w/ CSS & jQuery

Animate Panning Slideshow with jQuery

s3Slider

How to Create a Simple iTunes-like Slider

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

A Bullet-Proof Content Viewer

Automatic Infinite Carousel

Nivo Slider

loopedSlider

Simple Underwater Scene in Photoshop

In this tutorial I will show you how to create a underwater scene with some bubbles and light effects. We will use the Brush Tool to create the bubbles and basic tools and filters for the rest of the effects. The whole process won’t take more than 45 minutes and as usual you can download the Photoshop file in the end of the tutorial.

Creating Retro Folded Typography

In this Photoshop tutorial, we’re going to create retro-looking text that seems like it’s constructed using folded strips of paper. We’re going to step away from the computer a little bit and use a real model as a reference for our project.

How to Create a Photo Realistic Camera

In this tutorial we will demonstrate a powerful combination of vector shapes, layer styles, and manual drawing to create a photorealistic camera. So realistic you’ll think it’s just an ordinary photo.

Making a Book of Magical Playground Scene

This tutorial will show how to create a fantasy book scene. We will be using various advanced Photoshop techniques to make the composition as realistic as possible.

3D Water Text Effect with Repoussé in Photoshop CS5

In this tutorial I will show you how to create a water text. Even though it might look complex it’s a very simple effect. We will be using the new Repoussé then some stock photos to create the effect.

Elegant 3D Text Effect in Photoshop

In this tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths.

Design a Multimedia Website Layout in Photoshop

In this tutorial you’ll learn how to use photos, brushes, and textures, and 3D objects to design a creative multimedia website layout in Photoshop.

Hexagon Bokeh Effect in Photoshop

In this tutorial I will show you how to create a digital bokeh effect with hexagons. We will use the brush engine, patterns, blend modes and basic filters to achieve this effect.

3D Layered Text Effect

In this Photoshop tutorial, you’ll learn how to create a 3D text effect using actions, basic transform operations and filters.

Design a Multimedia Website Layout in Photoshop

In this tutorial, you’ll learn how to create a isometric microchip icon using basic drawing tools and transformations.

Create a Distressed Vector Typographic Poster Design

Starting with custom made type in Illustrator, we’ll move our vector graphics into Photoshop for some serious distressing with Photoshop brushes, blending modes and more!

The Creation of “Lost in Memory” Epic Fantasy Artwork

In this tutorial, you’ll learn the the steps taken to create this epic Fantasy Style artwork “Lost in Memory” in Photoshop. It’s a combination of a meteor effect, some matte-painting tricks plus lighting effect in this tutorial.

Create Abstract Fake 3D Objects in Photoshop

This tutorial will demonstrate how we can use the Pen tool to create abstract vector shapes that form into a beautiful piece of fake 3D artwork.

Create a Sleek and Stylish MP3 Player

In this tutorial you’ll learn how to create a sleek, stylish, and simple MP3 interface in Photoshop to play audio files for your Flash projects.

Create a Photo Realistic USB Cable

In this tutorial you’ll learn how to draw a photo realistic USB cable using Photoshop’s pen tool.

How To Create a Pure CSS Polaroid Photo Gallery

Creating a Bubble Coda Style with CSS3

Accordion using only CSS

How to Create a Fancy Image Gallery with CSS3

CSS3 Hover Tabs without JavaScript

Create a JQuery Content Slider Using Pure CSS

How to Create a Valid Non-Javascript Lightbox

Pure Css Data Chart

Bubble Effect with CSS

CSS Image Switcher

Pure Css Line Graph

CSS Image Switcher

Pure CSS Timeline

Tutorials

How to Make an HTML5 iPhone App

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Design & Code a Cool iPhone App Website in HTML5

Coding A HTML 5 Layout From Scratch

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Have a Field Day with HTML5 Forms

Designing a blog with html5

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Structural Tags in HTML5

Coding a CSS3 & HTML5 One-Page Website Template

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

Cheat Sheets

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML 5 Pocket Book

Roll Your Own Google Buttons

CSS3-Only Tabbed Area

Radioactive Buttons

Apple’s Navigation bar using only CSS

How to Build a Simple Button with CSS Image Sprites

Creating Dynamic Buttons With CSS3

How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS3 Chunky Menu

CSS3 Dropdown Menu

Pretty CSS3 Buttons

jQuery style menu with CSS3

CSS3-only horizontal drop line tab menu

Create a Clean and Classy Web Design in Photoshop

Create a Gnarly Snowboarding Themed Web Design

Awesome Portfolio Design

RocknRolla Blog Design

How to Create a Unique Wordpress Theme

Web Design Layout 11

Web Design Layout 14

How to Create a Clean Web 2.0 Style Web Design in Photoshop

Design a Beautiful Website From Scratch

How To Create a Clean and Colorful Web Layout

How to Make a Vibrant Portfolio Web Design in Photoshop

Create a Professional Web 2.0 Layout

Create a Grungy, Translucent Web Portfolio Design

How to Create a Unique Colorful Site Layout

Web Design Process: Zee Site

Create a Clean Modern Website Design in Photoshop

How to Make a Highly-Textured Site Layout in Photoshop

How to Make a Creative Blog Layout

Create a Watercolor-Themed Website Design with Photoshop

Create a Promotional iPhone App Site in Photoshop

You can check out the rest of the “Best of 2009″ series at the bottom of this article.

Create a Happy Sun Character

Logo Design Process and Walkthrough for Vivid Ways

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

Create a Cute Panda Bear Face Icon

Create incredible 3D type-based infographic art

How to Create Smoky Brushes and Type In Illustrator CS4

Create An Awesome Space Rocket Avatar in Illustrator

Create a Character Mascot with Adobe Illustrator CS4

Craft a Delicious Chinese Food Icon

How to Create an Alarm Clock Icon

Create a Stylized GPS Icon

Make 3D Yet Flat Looking Shopping Basket Icons

How to Create a Vector Light Bulb Icon with Inkscape

Create a Vintage TV Set Icon in Illustrator

Zee Logo in Illustrator

How to Create a Photorealistic iMac and Magic Mouse

How to Create Funky 3D Springs in Illustrator

Design a Cute Hamster Avatar

Create a Rolling Stones Inspired Tongue Illustration

Photo Manipulation

Creative Photoshop Animal King Photo Manipulation Tutorial

How to Mold Paint Splatter to a Face in Photoshop

Creating a Spy Fly Photo Manipulation

How to Create a Fantasy Landscape Photo Manipulation

Photo Manipulate a Falling Angel

Text Effects

How to Create 3D Text Blocks in Photoshop

Awesome Milk Typography Effect in Photoshop

Create Destructive Black and White Lettering with a Dramatic Splash Effect

How to Create Stunning and Bold 3D Text

Web Design

How to Create a Clean Web 2.0 Style Web Design in Photoshop

Design a Beautiful Website From Scratch

How to Create a Unique Colorful Site Layout

Create a Magic Night Themed Web Design from Scratch in Photoshop

Icon Design

Design a Stylish Mail Icon in Photoshop

Create a Leather-Textured, Realistic Briefcase Icon

How to Create a Basic House Icon in Photoshop

Create a Magnifying Glass Icon in Photoshop CS4

Retro and Vintage Effects

Create Vintage Traveler Diary in Photoshop

Create A Retro Cosmic Design in Photoshop

Super Cool Retro Poster in 10 Steps in Photoshop

Lighting Effects

How to make a Typographic, Retro, Space Face

Very Easy Heroes Eclipse in Photoshop

Create a Trendy Galactic Poster Design in Photoshop

Horizontal Scroll Menu with jQuery Tutorial

BBC Radio 1 Zoom Tabs

Spritemenu

Outside the Box Navigation with jQuery

Sexy Drop Down Menu w/ jQuery & CSS

A Simple and Beautiful jQuery Accordion Tutorial

Make a Mega Drop-Down Menu with jQuery

jQuery look: Tim Van Damme

jQuery Feed Menus

Create a Good Looking Floating Menu with jQuery Easing

Here’s what we’ll be creating. Click on the image for a full preview.

Step 1

Create a new canvas in Photoshop, we’ll be working on a 250 x 180 mm sized canvas in RGB mode at 300 dpi. This is important because the values for filters that work on pixel sizes will need to be amended if you’re working on a different sized canvas.

Step 2

In Photoshop select the Gradient Tool (circled) and click the Gradient Editor (circled) on the Options Bar (Window > Options) to edit the gradient. Change the two colour values as in the screen grab, you’ll need to click the little colour tab and the rectangle marked ‘Color’. Enter the two values in the field marked ‘#’ in the Color window that pops up. Change to a Radial gradient in the Options bar and draw from the center outwards.

Step 3

Select the Horizontal Type Tool and a font you want to use. I’ve gone with a classic, if not overused, sans serif font called Avant Garde. I then did a version using Century (a serif font), which worked a lot better.

Type in SHINY and then go to Layer > Layer Style > Gradient Overlay and set up as in the Photoshop screen grab.

Then add a Stroke and an Inner Shadow layer style to the text using the screen grabs as guides.

It’s also worth mentioning that I had to reduce the Kerning in the ‘N’ and the ‘Y’ to even out the spacing.

Step 4

Create a new layer beneath SHINY, then select both SHINY and the new layer and go to Layer > Merge Layers. This will cause Photoshop to rasterize both the text and the Layer Styles so that we can build more Layer Styles on top. There’s possibly a better way to do this though simply rasterizing the text layer will not do this, not in CS2 anyway.

Then add a Gradient Overlay Layer Style as shown in the screen grab.

Repeat the layer merging process and add another Gradient Overlay (with the black and 50% black). Once again, repeat the merge process so there are no editable Layer Styles left on your text.

Your text should look something like the screen grab.

Step 5

Duplicate SHINY (Layer > Duplicate Layer) and apply an 8 pixel Gaussian Blur filter (Filter > Blur > Gaussian Blur) to the copy. Make sure the original is above it in the Layers palette.

Step 6

Duplicate SHINY (the un-blurred layer) and go to Filter Blur > Radial Blur. Set it to Zoom, Best quality and apply at 100%. Set start point to be centered at the bottom in relation to your text.

Step 7

The zoom isn’t quite the right size for our needs. Go to Edit > Free Transform to bring up the Free Transform bounding box. Hold shift whilst manipulating the corner points to constrain the aspect ratio.

Then add a Smart Sharpen (Filter > Sharpen > Smart Sharpen). Add a Layer Mask (Layer > Layer Mask > Reveal All) and erase the parts you don’t need using the Eraser Tool as set up in the screen grab. Rename this layer ZOOM_BLUR.

Step 8

Duplicate ZOOM_BLUR and set the copy’s Layer Blend Mode to Multiply.

Step 9

CTRL+Click on ZOOM_BLUR’s Layer thumbnail (not the Mask thumbnail), this will create a selection from it. Then go to Select > Inverse Selection.

Create a new layer beneath ZOOM_BLUR and call it FILL_LIGHT and fill it with White.

Apply the same Gradient Layer Style (don’t do the Inner Shadow or Stroke) as you did for the text in Step 3.

Create a Layer Mask and use the Eraser Tool to delete any unwanted areas. I find you get better results by reducing the Opacity of The Eraser Brush to around 30% and repeatedly chipping away at the mask so it blends. Use the screen grab as a guide.

Finally, reduce the Layer’s Opacity to 50% and move it below SHINY in the Layers Palette.

Step 10

Select the Line Tool. Set it to Shape Layers on the Options Bar, with an 8 pixel Weight. Draw in a white Line. Use Rectangular Marquee Tool to mark off a rectangle spanning the length of the line you just made.

Select the Paintbrush Tool and set up a big soft-edged brush. Take the Flow down to 21 and start to draw in some glow, making more passes over the edge that connects with the line. Use the Screen Grab as a guide.

Select this layer and the line layer and merge them. Rename this layer TWINKLE and apply a Gaussian Blur (Filter > Blur > Gaussian Blur) as in the screen grab.

Step 11

Use the Eraser Tool (set up as in the screen grab) to delete the hard edges.

Duplicate TWINKLE and move it parallel. Duplicate it again and use the Free Transform Tool to rotate (90 degrees), resize and reposition.

Step 12

Create a new layer and fill it with black. Go to Filter > Render > Lens Flare and set up as in the grab.

Try and center the flare so all the elements line up on top of each other.

Adjust the Levels (Image > Adjustments > Levels) to knock out unwanted glow and increase the center. Then go to Image > Adjustments > Desaturate.

Select your four associated layers (TWINKLE and its two duplicates and the lens flare) and group them, call the group STAR.

Step 13

Use the Free Transform Tool to rotate, resize and reposition the star. Make duplicates of the STAR group and rotate, resize and reposition. As each element of the STAR group is on its own layer you can tweak each part of the star until you’re happy.

Create a new layer beneath all your STAR groups and call it GLOW. Select the Brush Tool and set up as in the screen grab, then draw some extra glow behind each star picking a brush size to match.

Step 14

Group all your image layers (except the background) together and call it SHINY. Duplicate this group and go to Edit > Transform > Flip Vertical. Create a Layer Mask for the group (Select the Group and go to Layer > Layer Mask > Reveal All) and use the Gradient Tool, set to Linear with white and black colours to mask off the bottom, creating a reflect effect. Reduce the Layer Opacity to around 50%.

Step 15

Now go grab your favourite old paper textures. These ones from bittbox are pretty good. I used paper2.jpg, pasted it into the document and moved it to the top of the layer palette. Change the Layer Blend Mode to Multiply.

It looks too dark currently so go to Layer > New Adjustment Layer > Levels, check the box marked ‘Use Previous Layer To Make Clipping Mask’ and set up as in the screen grab. To increase the texture, duplicate the paper layer, desaturate and set it’s layer Blend Mode to Hard Light. Drop the layers Opacity down to 58%.

Step 16

Select ALL of your layers and merge them together. Put this new layer at the top of the layers palette (we’ll keep the originals just in case). Duplicate this layer and desaturate it.

Then go to Image > Adjustments > Invert. Apply a 40 pixel Gaussian Blur, turn the layer Blend mode to Overlay. Add a Levels Adjustment Layer (Layer > New Adjustment Layer >Levels) as in the screen grab.

Step 17

Go to Mode > Grayscale. Select Flatten in the pop-up window. Then go to Mode > Bitmap and follow the screen grabs to deal with the Bitmap and Halftone Screen pop-up windows.

Once it has been applied, select the entire canvas and load it onto the clipboard (CTRL+C). Go to your History palette (Window > History) and click back to just before you changed to Grayscale Mode. Then paste the copied bitmap layer and move it to the top of the Layers palette.

Select the Magic Wand Tool and un-check the Contiguous box on the Options bar. Use the wand to select any patch of white on the bitmap layer, then delete all the white.

Step 18

Change the bitmap layers blending mode to Soft Light and it’s opacity to 80%. Then tweak the opacities of your other three final layers as shown in the screen grab. These should be your merged art layer, the copy which was desaturated, inverted & blurred and the Levels Adjustment layer. The copied art layer should also be set to Overlay.

Conclusion

That’s mostly it… But if you want to get proper old then head over to Deviantart.com or brusheezy.com and get yourself some dirty/grunge brushes and paint in a final layer of scuffs and dirt. Don’t use white but a creamy off-white such as #ddc8b3 as your foreground colour. This will add to the aged feel. It’s worth creating a new layer to draw on and experiment with your brushes.

WDL Premium members can download the source Photoshop file below.

Download the Photoshop source file

About the Author

James Davies writes tutorials for various magazines and websites when he’s not designing gig posters, t-shirts, catalogs, magazines, etc.