Web Design Tutorials: Photoshop, HTML, Flash, PHP

Photoshop Tutorial – Design Studio Header

This will be your final result 1. First thing we need to do is create a new document. I started with a size of 1000×216. 2. What we want to do next is to add a gradient to our background layer. To do so, right click your background layer and then input the following blending options 3. Next we want to use our rectangle marquee tool to make a selection similar to the following and fill it with...

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 200×40px. This will be where we...

Photoshop Tutorial – Video Sharing Header

This is what the final result will look like, a nice clean header. 1. First thing we want to do is create a new document with the dimensions of 1000×190. 2. Using your rectangle tool for your tools pallet, make a rectangle similar to the following 3. Right click your rectangles layer, and choose blending options from the drop down menu and insert the following 4. Now using your rectangle marquee tool...

Photoshop Tutorial – Sleek Dark Header Design

1. First things first. We want to create a new document with the size 1024×205. 2. The next thing we would like to do is to add a gradient to our background layer. To do so, lets go ahead and right click your background layer, and choose Blending options from the drop down menu and insert the following 3. Next, we want to use our rectangle marquee tool to make a selection similar to the following and...

Photoshop Tutorial – Gaming Navigational Menu

In this tutorial you will learn how to create a professional, horizontal gaming navigational menu. This will be your final result 1. The first thing we need to do is create a new document with the dimensions of 1024×140. 2. Go ahead and fill your background layer with #000000 to start things off. 3. Next, we want to use our rectangle marquee tool, or our rectangle marquee tool to make a selection similar...

Photoshop Tutorial – How To Create a Stunning Vista Inspired Menu

Step 1 Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px. Step 2 Create a Rectangle (U) that fills the lower ruled area and label the layer “lower bar.” Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and...

Photoshop Tutorial – Create a clean hosting layout

In this tutorial I will show you how to create a simple and nice looking hosting layout in a few steps.  You can create this layout in almost one hour. It is very easy and the end result is quite good. You don’t have to be a professional designer to achieve a nice result. Create a new document with the following size: 960×900 pixels. I will use the following color for the background: #2a1f14 Now with Rounded...

Photoshop Tutorial – Awesome Login Page

Today in this tutorial you’ll learn how to design a awesome login page by using Photoshop. After completing this tutorial you can use this login page in your project as well. Either you are a beginner or a intermediate level photoshop user this tutorial will guide you step by step process that how to use photoshop tools better to create nice looking login page. I am sharing a full PSD and JPEG file of login...

Photoshop Tutorial – Create a Clean and Colorful Web Layout

Pen Tool can help you to create nice looking shapes for your web layouts. Using strange shapes and buttons can change the overall look of you layout. This layout can be used also for a wordpress theme if you know how to code it. As usual we will need to create a new document. To create a new document you need to press on CTRL+N and then you can set the size for this document. I will use as always the same size 960...

Photoshop Tutorial – Modern Clean Style Layout

Today i will show you how to create a clean style layout. You can see it in the following image Create a new document with a grey background: #464646 The size should be 760 x 770 px. Create a new Layer ( press SHIFT+CTR+ALT+N ) Select Rounded Rectangle Tool and draw a white rectangle ( use 10 pixels radius ) The next image is resized Add the following layer style With the same tool ( rounded rectangle tool )...

Photoshop Tutorial – Design a Simple, Industrial-Style Gaming Header

In this simple & easy tutorial I’m showing you how to make a grungy-styled gaming header, just like the one shown below! 1. Document / Settings Firstly, start by making a new document, I used a size of 400 x 400 pixels for this tutorial. Now create a background that will suit the graphic we’re going to make. Firstly, I added in a blue gradient of which the colors were #2084b1 and #193a4d, I then created a...

Photoshop Tutorial – Create professional patterns for navigation bar

Hello As i have told you i will try to add a tutorial each day. Today i will show you how to create a nice pattern for navigation bar. Open a new document in Photoshop This document should be 40×40 pixels and with a transparent background. Now create a new layer ( Press CTRL+SHIFT+ALT+N ) Select Paint Bucket Tool and fill this layer with black ( this layer we will delete at the end of the tutorial ) Now zoom...

« Previous Entries Next Entries »

Powered by WordPress | Designed by Elegant Themes