Flash Tutorial – Beautiful Advanced Preloader with Reflection

In this tutorial we will create an advanced blue preloader with beautiful reflection effect and a big easing text. This requires a little knowledge about animations and action scripting. Step 1 Create a new file with Action Script 2.0 and go to Modify – Document (CTRL+J) and do the settings below: Import to scene (CTRL+R) the two main images bar.png and bar_h.png and put the half bar under the full bar and align...

Photoshop Tutorial – Flickr Box

Learn how to use the tools in Photoshop to draw a Flickr thumbnail box. Step 1: Create a new document First of all create a new document 500 by 500 pixels. Now we are going to be filling the background with a dark brown colour, to do this go Edit > Fill and use Color with the colour number #2C241f. Step 2: Draw the box Secondly, we are going to be creating the actual box that we are going to be sticking...

Photoshop Tutorial – Vista Folder Icon

Learn how to make a Folder Icon with the new Vista style 1. Start by opening up a new 100px * 100px file 2. Create a new layer and using the Pen Tool draw something like this 3. Now let’s add some layer styles - Inner Glow - Gradient: #ffd46f to fff29e - Stroke: #f4c65b 4. It should look something like this now 5. Now duplicate the layer with the shape. Go to Edit -> Transform -> Perspective 6. Go to...

Photoshop Tutorial – Cute Drop

Make a bright and clean drop with the Custom Shape Tool and using some Gradients.   1. First make a drop using the Custom Shape Tool then right click over the layer and Rasterize Layer. 2. Double click over the layer or right click/Blending Options to open the Layer Style’s window and go to Gradient Overlay and use these colors for the gradient #67c2fc to #daf1ff. 3. Now go to Stroke and use change the size...

Photoshop Tutorial – Design Pricing Plan Boxes for a Hosting Company

1. Create a new document that’s 500px x 600px. Get the rounded rectangle shape tool & draw a shape like below. Double click on the layer to go into Blending Options and put in the options below. 2. Now using the rounded rectangle tool again create another shape for the heading, double click into blending options and put in the options below: 3. Now click down on the rounded shape icon until more options...

Flash Tutorial – Learn How to Create Horizontal Image Transition Effect

In this tutorial, you will learn how to create a horizontal blind image transition effect effect which will slowly reveal your picture from top to bottom in horizontal stripes. Each strip will also have a color filter applied to it. Tutorial Details Program: Flash CS5 Difficulty: All Estimated Completion Time: 40 Minutes Tutorial Assets The following assets were used during the production of this tutorial. Source...

Photoshop Tutorial – Create Clean and Fresh Button

Step 1 Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab the Gradient Tool from the toolbox and fill it as shown below: I decide to use this light gradient because it’s easier to demonstrate several important points in the next few steps. You can of course try out...

Photoshop Tutorial – Draw a Rather Cute, Unique Style “Play” Button

Step 1 Create a new document sized 1000 x 600px. Fill the background with the following gradient: Duplicate the background layer once, resize and rotate the duplicated layer, use a big soft brush to erase the left and right side, and position it as shown below: We now have a reasonably good-looking background to work on. Personally I feel sometimes a nice background help creating the mood we need to continue...

Photoshop Tutorial – Design a Delicious “Contact Me” Button

Step 1 Create a document sized 200px * 20opx with white background and 72 dpi (web graphic) – please note that this is the actual size of the button we will be making. Here I will show you a little trick: hit Ctrl + R to make the rule visible on the top and left edge, click on the ruler and drag a guide to the edges of our canvas, as shown below: Hit Ctrl + Alt + C and bring up the Resize Canvas window, then...

Photoshop Tututorial – Design a Delicious, Shining Circle Play Button

Step 1 Create a new document (size doesn’t really matter) with black background, add a new layer and paint a dark blue back light with a big soft brush: Create a new layer and draw a yellow circle in the centre of the canvas: Now let’s add some light and shadow for this circle – firstly select this circle layer, use a soft white brush to paint on the position shown below: Create another layer and use a soft...

Photoshop Tutorial – Apple Navigation menu

Learn how to create the newest Apple navigation bar that is being used at their site. 1. Start by opening a new 500px * 50px file. 2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px width and 35px height, and make a selection inside the canvas 3. Now, go to Select -> Modify -> Smooth and apply 3px radius. Create a new layer and Fill the selection with any color 4. Apply this layer styles to...

HTML Tutorial – CSS3 Spinning Social Media Icons

The HTML First we start off with our social media icons. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="spinning_icons">     <a href="http://www.twitter.com/paulund_" class="twitter" title="twitter">Twitter</a>     <a href="http://www.twitter.com/paulund_" class="delicious" title="delicious">Delicious</a>     <a href="http://www.twitter.com/paulund_" class="digg"...