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 – How to Create Dark Web Design

I’ve been seeing a lot of Dark Websites lately, and it inspires me to make one. Today we will create dark web design which we will do in Photoshop. I will show you how to achieve the look of dark websites and still look professional. Today we will create a dark web design and we will use our very good pal Photoshop, we will learn a few tricks like: Textured background Creating our own shadow Detailed line Light...

Photoshop Tutorial – Classic navigation menu

Step 1. Start off with a new document sized 500×80. Fill it with a cream colour. Create a new layer and using the rectangular tool with the colour code below create a shape: Step 2. Add to the new created shape a Inner Glow: This is what it should look like: Step 3. Use the rounded rectangular tool on a new layer create a shape like below using the same colour as the background. Grab the Burn tool with the...

Photoshop Tutorial – Clean White Navigation Bar

Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop. Preview of Final Results   Step 1 To start off with, create a new document, for the purpose of this tutorial I have chosen 500 by 200 pixels. Fill the background with a radial gradient from a medium-dark grey to a darker grey. You can do this by selecting the gradient tool from the tool box and...

Photoshop Tutorial – Create A Detailed Blue WordPress Blog Layout

Here is what we will making, click on image for full preview: Before we get started download first 960grid system for easy guideline creation. Open 960_download\templates\photoshop\960_grid_12_col.psd Ctrl + Shift + C to change the canvas size Step 1: Working with Header Lets make this tutorial organized. Rename the Layer1 folder to top_header and also rename the layer1 to top To start will make some guidelines...

Photoshop Tutorial – Globe Button for Your Website

I have a new one for you. Hope it will be useful in your new design. Let’s begin! Make a new document with the resolution 500×300 for this tutorial and fill this canvas with white color. Then select the Rounded Rectangle Tool (Radius: 30 px) and draw the next shape using the color of #d61d23. After that apply following layer styles to this layer: • Inner Shadow • Gradient Overlay Your button...

Photoshop Tutorial – Simplistic Interface Design

Learning how to design interfaces can be a daunting journey, hopefully with this beginners tutorial you’ll learn a few new tips and tricks to speed up the process. In this tutorial I’ll be showing you how to create a simplistic dark interface. What We’ll Be Creating Getting Started Create a new document (Ctrl + N) using the dimensions 600 x 530 pixels, then fill (G) your background layer with the color...

Photoshop Tutorial – Paint Splatter Navigation Interface Design

Paint Splatter Navigation Interface Design. Preview Step 1: Let’s start out by creating a new file. I used a 900×400 pixels canvas set at 72dpi, and I filled my background with #8A7676 color shade. In a new layer draw a long rectangle with #EE3E02 color shade and 686 x 41 px dimensions. Step 2: Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay...

Photoshop Tutorial – Header with tech look for your web design company

Hello I will show you today how to create a header for your web design company with a tech look As i have told you i will try to add a tutorial each day. This is my final result: Open a new document in photoshop. Size: 800 x 200 pixels Background: white Set the foreground color to #01b9f5 Set the Background color to #006696 Create a new layer ( press CTRL+SHIFT+ALT+N ) Grab Gradient Tool and draw a line from the...

Photoshop Tutorial – How to Create a LCD Monitor

In this tutorial I am trying to share some knowledge in Adobe Photoshop CS4. We are going to draw a LCD monitor by using Photoshop. We are not going to sketch it as it is pretty simple. I will explain all techniques along the tutorial so that every one can follow easily. So what are we waiting for? Let’s get started. Step 1 Open your Adobe Photoshop. Create a new document with 1000px x 1000px size. Step...

Photoshop Tutorial – Transparent Glass Lettering in Photoshop

In this tutorial, we’re going to use some super layer effects and a bit of extra magic to make a lettering style that looks transparent and stunning. Because there is so much use of layer styles, you need to download the sample PSD from the link at the bottom of the tutorial in order to follow along. Step 1: BACKGROUND LAYER To begin this tutorial, we’ll first give ourselves a nice background gradient. Now...

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