PhotoShop Yag

How to design notebook spiral in Photoshop

Ravi — Sun, 10 Apr 2011 12:35:44 +0000

In this Photoshop tutorial, we will design notebook spirals. Its very easy.

Final Preview

Before I start the tutorial, lets see the final image of the this tutorial.

So, now let’s get started.

Step 1:

Here is a sample notebook image. We will add spirals between left and right side of this notebook pages.

Select rectangle shape tool.

Draw a small rectangle shape as shown below in white color.

Step 2:

Apply following layer style to this rectangle shape.

So, it looks like this now.

Step 3:

Create a new layer just below this rectangle shape layer.
Select a soft brush tool with #000000 color and about 22 px master diameter size. Now apply brush at both end of this rectangle shape.

We will repeat this to make more spirals.

Create Favicon Icon for your website

Ravi — Sat, 09 Apr 2011 15:32:51 +0000

Favicon is a small icon of of your website of size 16 x 16 px that appears inside the browser’s location bar and bookmark menu. It is a very good way to brand your site. If there is no favicon icon, browser will use a default icon.

In this tutorial we will learn how to create a favicon icon for our website.

Step: 1

Create a new document of size 16 X 16 px and transparent background.

Step: 2

Zoon it to maximum. Select a color and using pencil tool make some design.

Step: 3

Save the icon as favicon. ico Your favicon icon is ready.
You can link this favicon in your website by adding below code before tag.

7 best Photoshop web layout tutorials of March 2010

Ravi — Sat, 09 Apr 2011 08:32:46 +0000

Below I have collected some best Photoshop web layout tutorial of March 2010.
Create a Blog Web Layout With 3D-looking Elements in Photoshop

Learn how to create a Sports Car layout in Photoshop

Design a nice looking wordpress theme

How To Build a Stylish Portfolio Web Design Concept

CREATING NICE AND CLEAN TRANSPORT COMPANY TEMPLATE – FREE PSD

CREATING NICE AND SLEEK ZENGARDEN TEMPLATE IN PHOTOSHOP – FREE PSD!

Create a movie video streaming website

Design a nice looking wordpress theme

Ravi — Sat, 26 Mar 2011 18:09:48 +0000

Today we are going to design a nice looking WordPress theme layout. Layout is 980 px fixed width. You can download the layer PSD file of the layout at the end of tutorial.

Final Preview

Before I start the tutorial, lets see the final image of the template layout we will design in this tutorial.
So, now let’s get started.

Step 1:

Create a new document of size 1000 X 1200 px and transparent background.

Fill the background layer with color #e3e3e3

Step 2:

As we are going to make this theme 980 px fixed width, we will leave margin of 10 px from both left and right side. For this we will create two Guide.
Create first guide.
View >> New Guide.. >> Vertical >> position 10 px

Create second guide.
View >> New Guide.. >> Vertical >> position 990 px

Step 3:

In this step we will make header region. Select Rectangle Marquee Tool.

Make a selection of about 260 px height for header region.

Fill the selection with #4e6578 color using Paint Bucket Tool.

Step 4:

Make a diagonal line pattern as explained in this post. This is going to take only 2 minute.
How to create a Photoshop diagonal line pattern

After you have made a diagonal line pattern, fill the selected part with this pattern.
So, it looks like this now.

Step 5:

In this step we will add some cloud using some cloud brush in header region. Download some free cloud brush, and add few clouds in white color in header region. Below you can see how I have added few clouds.

Step 6:

In this step we will add logo.
Create a new layer for logo and select Text Tool.
Write Site Name using following font style.
Font Family: Brush Script Std
Size: 48 pt
color: #051c2f and #ffffff

Apply following layer style to this logo text layer.

So, it looks like this now.

Step 7:

In this step we will add site description text. Create a new layer and select text tool.
Write your site description just below site name in color #051c2f and font Kartika.

Apply following layer style to this text layer.

So, it looks like this now.

Step 8:

In this step we will add a menu bar for WordPress pages.
Select Rounded Rectangle Tool with 8 px radius.

Draw a rounded rectangle shape in color #cbcbcb as shown below. It should end at right guide line.

Apply following layer style to this rounded rectangle shape.

So, it looks like this now.

Load rounded rectangle shape layer.

Contract the selection by 2 px.
Select >> Modify >> Contract
Now de-select the lower half.

Create a new layer, and fill the selected part with white color.

Now change opacity of this layer to 10%.
So, it looks like this now.

Now apply following layer style to this text layer.

It should look like this now.

Now we will add a vertical line between two links. For this select Line Tool and set color to #33343b. Now put a small line as shown below.

To just right of this line, make another identical line but in color #FFFFFF

Merge these two lines in one layer. And apply Motion Blur.
Filter >> Blur >> Motion Blur

Similarly create few more such lines and add after each link.

Step 9:

In this step we will add category menu bar.
Create a new layer. Select Rounded Rectangle Tool with 10 px radius.
Draw a rounded rectangle shape in color #abb4b9 starting from left guide line to right guide line.

Delete the lower part as shown below.

Apply following layer style this shape.

So, it looks like this now.

Now add some category links in this menu bar, just like we did for page menu.

Step 10:

Select Rectangle marquee tool and make a selection as shown below.

Select Gradient tool with Foreground to Transparent. Set foreground color to #bec3c9 and apply gradient in selected area.

Step 11:

We will use 300 px width for sidebar area rest 680px for post area. So, make a new vertical guide at distance 690 px.

Like in step 10, we will apply a gradient to separate sidebar.

To the right of this gradient we will add a vertical line in color #ebeaea.

Step 12:

In sidebar, we will add four 125 X 125 px advertising slots. So, select Rounded Rectangle tool with 6px radius and draw 4 shapes in color #c8c8c9 as shown below. Also, add 1px #FFFFFF stroke to each shape.

Step 13:

Below Ads, Type Blogroll in Arial font and 24 pt size and #505966 color.

Apply following layer style to this text layer.

Below text draw a straight line in color #c8c8c9

Just below this line, draw another line in color #FFFFFF

Using custom shape put a small arrow in color #505966
And using same color, type some text.

Similarly add few more links.

Step 14:

Add some text as post title in color #272c35 and 30 pt size.

Below the post title add a line just like we added in sidebar.

Below the line, add post details like date, posted by, category, comments.

Now add a 150 X 150 px post thumbnail image, and stroke the image with 5px and #b9b9b9 color.

Now some text as post text.

Step 15:

In this step we will add wordpress page number.
Select rectangle tool. Press and hold SHIFT key and draw 4-5 square shapes as shown below.

Step 16:

In this step we will add footer blocks. Select marquee rectangle tool and make a selection as shown below.

Fill the selected part with color #3c3c3c

Now fill it again with diagonal line pattern as we did for header.

Just like sidebar, we will add three blocks with some links in this footer region.

Step 17:

Fill rest footer part with color #000000

In this footer region, add some copy right text in color #dcdcdc

And in right side of this footer part, add some social icons.

Our WordPress theme is ready. Below is final image.

Below you can download PSD file of this wordpress theme layout.

How to create a Photoshop diagonal line pattern

Ravi — Fri, 25 Mar 2011 16:39:45 +0000

This is very basic tutorial. I was designing something, where I have to fill a part with diagonal lines. So, I made a diagonal line pattern in 2 minutes, and filled the part with the pattern. This is how I made the diagonal line pattern.

Step 1:

Create a new document of 3 X 3 px and transparent background. Zoom it to maximum.

Step 2:

Set foreground color to which you want to use as diagonal line. Now select pencil tool with 1px master diameter.

Step 3:

Place three diagonal dots as shown below.

Step 4:

Now, go to Edit >> Define Pattern, give a name and save it as a pattern.

You have made diagonal line pattern.

Design postage stamp social icons in Photoshop

Ravi — Sat, 19 Mar 2011 14:56:07 +0000

This is another Photoshop tutorial to design social icons. Today we will design postage stamp type social icons in Adobe Photoshop. At the end of tutorial, you can download PSD file and PNG files of all social icons.

Final Preview

Before I start the tutorial, let’s see the final image of the social icons that we will design in this tutorial.

Step 1:

Create a new document of size 350 X 350px and transparent background.

Step 2:

Select rectangle tool.

Press and hold SHIFT key and draw a square shape in color #d7d7d7 as shown below.

Now Rasterize this square shape layer.

Step 3:

Select brush tool with following settings.

Step 4:

Load square shape.

Right click and select “Make Work Path..”

Step 5:

Select Pen tool. Right click again and select Stroke path >> Eraser

And then delete the path.

It looks like this now.

Apply following layer style to this shape.

Step 6:

Select Rectangle tool again. Create a new layer and draw another square shape in color #e7f3f9 as shown below.

Step 7:

Create a new layer and paste a social icon. Like here I am pasting twitter icon.

Step 8:

Now rotate all layer as shown below.

Step 9:

Create a new layer. Select Ellipse tool, and draw a elliptical shape in black color as shown below.

Apply Gaussian blur (Filter >> Blur >> Gaussian Blur) so it looks like a shadow.

Step 10:

So, our first social icon, Twitter icon is ready. Now just replace twitter icon by another social icons to make other social icons.

Below you can download PSD and PNG files of social icon set.

Design great looking curly social icons in photoshop

Ravi — Wed, 16 Mar 2011 14:07:04 +0000

Today we will design file type curly social icons in Adobe Photoshop. At the end of tutorial, you can download PSD file and PNG files of all social icons.

Final Preview

Before I start the tutorial, let’s see the final image of the social icons that we will design in this tutorial.

Step: 1

Create a new document of size 400 X 400px and transparent background.

Step: 2

Select rectangle tool and draw a shape as shown below.

Apply following layer style to this rectangle shape layer.

So, it looks like this now.

Step: 3

Select brush tool with soft rounded shape of 300 px master diameter.

Select white color and apply brush once on this rectangle shape.

Step: 4

Select Polygonal Lasso Tool

And select right bottom corner.

Rasterize the rectangle shape layer and cut the selected part (CTRL + X)

Step: 5

Create a new layer, paste the cut part as shown below.

Apply following layer style to this paste part.

So, it looks like this now.

Step: 6

Paste a social icon. Here I am pasting twitter icon.

Apply following layer style to twitter icon layer.

So, it looks like this now.

Step: 7

Load icon shape.

Using elliptical marquee tool, select upper half as shown below.

Create a new layer, and fill the selected part with #fff color.

Change layer mode to Soft Light and opacity to 20%. So, it looks like this now.

Our first social icon is ready. Now we will only change social icon, and make other social icons.

Below you can download PSD and PNG files of social icon set.

Design black button in photoshop

Ravi — Mon, 14 Mar 2011 12:21:51 +0000

In this photoshop tutorial we will design a shiny glossy dark black button.
Difficulty Level: Easy

Final Preview

Before I start the tutorial, let’s see the final button we will design in this tutorial.

Step 1:

Create a new document of size 300 X 300 px and white background color.

Step 2:

Select “Rounded Rectangle” Tool with 4px radius.

and draw a button shape in color #1c1c1c

Step 3:

Press and hold CTRL button and click on button layer. This will load button layer.

Now using Elliptical marquee tool, select half part of button as shown below.

Step 4:

Create a new layer and name it as glow. Fill the selection part with which color. Change layer mode to “Soft Light” and opacity to 40%. It should look like this now.

Step 5:

select “Line Tool” and draw a line in #FFF color as show below.

Apply motion blur (Filter > Blur > Motion Blur) to this white line.

Change opacity to 70%

Repeat this process and add such line on all rest sides.

Step 6:

Now using text tool, put some text on this button in white color. Our button is ready.
Hope you like the tutorial.

Design Blue Login Form in Photoshop

Ravi — Wed, 23 Feb 2011 07:53:27 +0000

In this photoshop tutorial, we will design a stylish web login form. We will be applying some layer effect.

Final Preview

Before I start the tutorial, let’s see the final image of the login form we will design in this tutorial.

Step 1:

Create a new document of size 600 X 450 px and white color.

Fill it with color #464646

Step 2:

Select “Text Tool” and type Login Form using following font style.
Font Family: Arial
Font Weight: Normal
Font Size: 30p pt
Font color: White

Step 3:

Select “Rounded Rectangle” Tool with 10 px radius.

Draw a shape in color #01436c as shown below.

Apply following layer style to this shape.

It should look like this now:

Step 4:

Again select Rounded Rectangle” Tool with 5 px radius and white color. Draw a box as shown below.

Apply following layer style to this shape.

It should look like this now.

Step 5:

Select “Text Tool” and type Username inside this box in color #215884

Repeat these steps to create another box for password.

Step 6:

Now we will add two icon to show username or password is correct or incorrect.

Step 7:

Select “Rectangle Shape” tool.

Create a small square shape in color #FFFFFF as shown below.

Apply following layer style to this box.

To right of this box type “Remember Me” in white color.

Step 8:

In this step we will design Login button. Using “Rounded Rectangle” tool and radius 4px draw a login button in color #0170a3 as shown below.

Apply following layer style to this button shape layer.

It should look like this now:

Using text tool, type Login on this button in white color.

Step 9:

Select text tool again. Add forgot password link and Register link text in color #047fa2 as shown below.

Our login form is ready. Below you can download PSD file of this form.

Design Black Social Icons in Photoshop

Ravi — Tue, 22 Feb 2011 15:20:27 +0000

Today we will design dark black social icons in Adobe Photoshop. We will transform shapes few times to give 3D look. At the end of tutorial, you can download PSD file and PNG files (512 px and 256 px) of all icon.

Final Preview

Before I start the tutorial, let’s see the final image of the social icons that we will design in this tutorial.

Step: 1

Create a new document of size 512 X 512px and transparent background.

Step: 2

Select “Rounded Rectangle Tool” with 15px radius.

Create a new layer and name it as “Face One”. Press and hold SHIFT button and draw a shape as shown below using color #9b9b9b

Step: 3

Make a duplicate layer of “Face One” layer and name duplicate layer as “Face Two”. Change color of Face Two shape to #3e3e3e Move Face Two shape equally little top and left as shown below.

Step: 4

Using CRTL button select both Face One and Face Two layers. Free transform the layers using CTRL + T or (Edit >> Transform). Now rotate the shapes as shown below.

Step: 5

Create a new layer between Face One and Face Two layers and name new layer as “Bottom Corner”. Select “Pen Tool”

Using pen tool make a triangle path in left bottom corner as shown below.

Now right click and select “Fill path”.

Fill it using color #9b9b9b (Its same color we used for Face One shape)

Right click again and this time select “Delete Path”.

It should look like this now.

Step: 6

Create a new layer just above “Bottom Corner” layer and name it as “Top Corner“. Repeat step 5 to make top right corner. It should look like this now.

Step: 7

using CTRL button select Face One, Bottom Corner and Top Corner layers.

Now right click on any layer and select “Merge layers“.

Step: 8

Rename mered layer as “Bottom Face“. Press and hold CTRL button and click on “Bottom Face“ layer. This will load “Bottom Face“ layer.

Step: 9

Set foreground color to #ad8c2b and select Gradient tool with “Foreground to Transparent“.

Step: 10

Apply radial gradient in corners and Reflected Gradient in center. It should look like this.

Apply following layer style to this shape.

Step: 11

Select Face Two Layer and apply following layer style.

It should look like this now.

Step: 12

Create a new layer and name it as icon. Paste the icon which you want to make, like here I am pasting a Twitter icon.

Apply following layer to icon layer.

It should look like this now.

Step: 13

Load Face Two layer.

Create a new layer and name it as Glow. Select Elliptical marquee tool with Intersect with selection.

And make a selection as shown below.

Fill the selection with white color and change its layer mode to soft light and opacity to 30%.
It should look like this now.

Our first icon is ready. Now just change icon to make other social icons like RSS, Facebook, Digg etc