Photoshop Tutorial – Design a Simple Yet Effective, Clean and Shining Button for Your Website

In this tutorial, I will show you the method I use to create a stylish, clean and shining button for your website in Photoshop. This method is extremely simple with no more than five steps, yet it’s very effective since you can use the button for a wide range of occasions. Along the way, the tools we will be using include the shape tool, layer blending options, brush and eraser tool. This tutorial is suitable for...

Photoshop Tutorial – Create Clean and Fresh Call-to-Action Button + Embossing Text Effect

In this tutorial, I will show you how simple it is to create effective, clean and fresh call-to-action button that will surely attract visitor’s attention, plus a super quick way to create this trendy Embossing text effect in Photoshop. Very easy tutorial, have a try! For those who haven’t yet came across the idea of “Call-to-Action” button – basically they’re buttons that you would want all your users...

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

In this tutorial, I will show you the process I took to create this rather cute, unique Style “Play” Button in Photoshop. It’s a simple (aimed for PS beginners) but fun tutorial, have a try The primary goal for this tut is to show you the functionalities behind the draw tools, selection tool and the use of layer blending options. I also added my own design ideas to make this play button a bit unique. Hope...

Creating Flash Menu

Though website design is a prerogative of professionals, still there is a lot that anyone could do only if he knew how to. Making a menu for a flash website is one of these things. To make one you need to have a tool and to know the procedure. Your tool is Photoshop (mine is CS3 version), and the procedure is described in every detail in the tutorial below. I tried to make it simple, so that even it is your first...

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

Photoshop Tutorial – Clean Two-Level Navigation

Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). To make the background less boring I’ve just added in some clouds (foreground and background colours: #33556e and #1e2a38) and applied a motion blur; both are accessible through the Filter menu. Step 2 Now we’ll make...

Photoshop Tutorial – Search Box

Step 1 One of the premium members suggested this tutorial. If you’d like to suggest a tutorial be sure to contact me First off create a new document to house the search box (or add it to one of your existing designs). I’ve filled the background of mine with the colour #2e3033. Step 2 Using the Rounded Rectangle Tool make a white rectangle with radius 10px and dimensions 200x40px. This will be where we enter...

Photoshop Tutorial – Navigation Bar with Rollover Buttons

Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver. Rollover the buttons below to see the final effect. Tutorial Details Program: Photoshop CS5, Dreamweaver CS5 Estimated Completion Time: 25 Minutes Now we have everything we need let’s begin. Step 1:- First we’ll design the main...