Web Design Tutorials: Photoshop, HTML, Flash, PHP

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 – How to create a Falling Apart text effect

In this tutorial I will show you how to create a cool Fall in Pieces text effect with a nice metal texture. The text will look like it was cut in pieces by a laser sword and now it`s falling apart. Don`t worry if you are a beginner in Photoshop, I will explain everything step-by-step. Final Result Step 1: Create a new canvas First open Photoshop and create a new image (File > New…) with the size around...

Photoshop Tutorial – Sharp Fold Text Effect

This tutorial will explain how to create a sharp fold text effect, by converting the Text layer into a Shape layer, adding and moving a couple of anchor points, and using a simple Gradient Fill with different Blend Modes. The Final Result: Notes: * the software used in this tutorial is Adobe Photoshop CS5 Extended * the size of the final result image is 1024 * 768 * you might want to check the Basix Page to see...

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

Photoshop Tutorial – How To Design An Email Template Special Christmas

Notice that I attached to this tutorial, the psd source file used to create this template. Click here to download it. STEP 1 Create the document Open Photoshop software, then go to menu File>New and enter a name, width and height definition of your new picture (600×1500) and finish by clicking on the OK key. Create a new layer and name it Top. Use now the Rectangular Marquee Tool (M) to create an active...

« Previous Entries

Powered by WordPress | Designed by Elegant Themes