Web Design Tutorials: Photoshop, HTML, Flash, PHP

Photoshop Tutorial – How to Create Sleek Button Design in Photoshop

Today we are going to create a sleek button design in Photoshop; this is very useful on websites that has call to action. We will use bright colors and dark background to add the effect. Bright button colors attracts attention to the readers, that’s why it is best to use on call to action buttons. This is best for membership sites and E-commerce websites that the user need to sign up or buy a product. Here is the...

Photoshop Tutorial – Vista Styled Button

Step 1 Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515. Step 2 Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a fixed shape of 300 by 50 pixels in the middle of the document. Right click the shape and click make selection. Select the gradient tool and set...

Photoshop Tutorial – Basic Sleek Button

Step 1 First up create a new document – I’ve made sure that I have lots of room to work with so I chose 540 by 440 as my size. Fill the background with a dark gradient or just a solid colour (Edit > Fill and use a colour like #262626) if you don’t know how. Step 2 Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and use the settings below. Left click somewhere in the...

Photoshop Tutorial – High Detailed Plastic Navigation Bar

Final Result Preview Step 1 Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Create a new document sized 800×259px with background color (#8caab8). Select foreground color (#e1e8eb), create a New Layer and draw linear gradient (Foreground to Transparent) from top to the bottom of the canvas. Step...

Photoshop Tutorial – Menu bar

A Photoshop tutorial to create a menu bar Step 1. Start off by making a new Photoshop document. Choose the rounded rectangle tool, set the radius to 12 pixels, and create a wide rounded recntalge, as shown below, It doesn’t matter what colour it is because we’ll be creating a gradient...

Photoshop Tutorial – Multicolored Menu Bar

Step 1. Start off by making a new Photoshop document. Choose the rounded rectangle tool, set the radius to 12 pixels, and create a wide rounded recntalge, as shown below, It doesn’t matter what colour it is because we’ll be creating a gradient with the shape next. Step 2. Choose dark maroon (6f1300) for the foreground color and a lighter shade for the background color (c82e00)....

Photoshop Tutorial – Create a slick glowing button

Every designer, whether he is a beginner or a professional will someday, in his career create icons for his client or his portfolio. Creating icons can be extremely fun, provided you do it the right way. Most importantly, you should learn the basic principles of icon design first, the importance and functions of icons on web sites and in user interfaces. This might take a long time but trust me, its the right way....

Photoshop Tutorial – Button design trend: Light grey simple

I’ve made a short and easy Photoshop tutorial, on how to make a button in this style. This is a total beginners tutorial, if you have some experience you will be bored. First create a new document File > New, give it a width of 400 pixels and a height of 55 pixels. Set the background to transparent or white, just what you prefer. Create guides so there are three rectangles with a height of 45 pixels and a...

Photoshop Tutorial – Home Button

Create a new photoshop file, zooming in to 200% and then make grey circle, using the elliptical marquee tool. Contract (select > modify > contract) the selection by 4 pixels and fill it with a pale blue. Contract the selection by another 4 pixels and then fill it with black (a). a) b) c) Step 2. Now contract the selction by 1 pixel (a). Create a new layer and then fill...

Photoshop Tutorial – Wooden Button

This tutorial will show you how to make a simple button in photoshop with some basic effects Step 1: Create a new canvas of about 800×800 pixels with white as background color, select Rectangle Tool(U), right click on its symbol and select “Rounded Rectangle Tool”  Step 2: Draw a rounded rectangle on your canvas, you can use any color you like for your rectangle  Step 3: Now apply some blending...

Photoshop Tutorial – How To Make Skype Logo

Create a new file that would have 400×400 px and 72 dpi. Paint it in black, exactly the same way it is done below. Select the next instrument to represent three circles (keeping pressed the Shift button represent firstly the upper circle, then the middle one and finally the lowest one) with the sizes indicated next picture. Blending Options-Gradient Overlay Gradient’s parameters. Copy the new made layer 2...

Photoshop Tutorial – Glossy Website Button

This tutorial will teach you a step by step “how to create a glossy website button”. Open your Adobe Photoshop ——————————————————————– 1. Click “File” and click...

« Previous Entries Next Entries »

Powered by WordPress | Designed by Elegant Themes