Saturday, 22 February 2014

Making Pie Chart / Graph in photoshop

Making Simple Pie Chart - Graph in photoshop.

Pie Chart -Infographics

Final view

Making pie chart in photoshop

Step 1: 

Create new file in Photoshop.
Fill it with white color (Shift+f5  ->  color).

Add rulers at middle of the screen
By selecting Circular shape tool  add circle from center. (press and hold 'Shft' and 'Alt' key while drawing circle for perfect shape)

Add rulers at middle and draw circle from center

Step 2:

- Make 3 duplicate layers of this layer.

Duplicate layers

-By double clicking on Layer each Thumbnail, color each circle.

Circles with different color fill
Step 3:

- Select upper layer (filled with red color), and selecting Polygonal Lasso Tool, make a selection from center of circle.

Make a selection for masking

- ow add Layer mask to this layer by clicking on 'Add Layer Mask' icon near the layer style icon.

After masking

- Similarly Select another layer (Yellow color circle), and make a selection with Polygonal Lasso Tool, and add layer mask

Make a selection for layer mask

Layer Masking in Photoshop
- Similarly add masks to all 4 layers. Your graph and layers looks like this.

Masked layers

Step 4:

- Select 1st Layer (Red colored circle), go to layer style and select Inner Glow.

Layer style - Inner Glow in photoshop

- Now Right click on this layer and select option "Copy Layer Style"

copy layer style

- Select other layers one by one, and by right clicking on them, select "Paste Layer Style"

Layer Masking in infographics -pie chart

Step 5:

- Select Circular Shape tool, and by pressing and holding 'Shft' + 'Alt' draw a circle  smaller than original circle, form center in white color.

Pie Chart free PSD, freebie

Step 6:

- Go to layer style and give some outer shadow with black color.

download pie chart psd


Download Free PSD of Pie-Chart.


More about Author

Saturday, 15 February 2014

Making Simple Speedometer in Photoshop. (Free PSD)

Making Simple Speedometer in photoshop.

Making Simple Speedometer

Final view

Speedometer freebie, free psd

Step 1: 

Create new file in Photoshop (500px - 500px).
Fill it with Gray color (Shift+f5  ->  color)

fill Gray Color in photoshop file

Step 2:

- Select Costume Shape Tool form tool box, Select hollow circle, and draw a shape.

Coustome shape selection

hollow circle

draw hollow circle

- Name it 'Layer 1'

Step 3:

- Make a duplicate layer of this layer (Layer1_copy). and make this layer invisible.

- Select 'Layer1', and make Fill to '0'.

Fill 0

- Go to layer Style, and give Inner Glow and, Outer Glow.

Inner Glow

Outer Glow

After styling layer

Step 4:

- Now take a round shape tool, and make circle just bit bigger than the hollow circle.
and make fill to '0'.

New circle
fill 0

- Select Text Tool, and move courser towards edge of circle, When Courser icon changes click on it, and enter the bars. that is ' | '.

Take course to this point, couser change its shape

Type the text. set Marks

Step 5:

- Now select "Layer1_Copy" layer. Fill this hollow circle with "Green" color.

New hollow circle withe green color

- Select Polygon Lasso Tool, and make the selection as shown.

Make selection with polygon lasso tool

- After making selection, Click on Mask (Add layer mask).

Add layer mask

- the layer will see like this.

After masking

Step 6:

- As same, Make more 2 layers with different colors, And add layer masks to them.

add tow more circles with different colors, and mask them

Step 7:

- Select Circular shape tool and draw a small circle in center, fill it with black color.

make a center

- Select rectanguler shape tool and draw a  rectangle with black color for making pointer/arrow of Speedometer.

Add rectangle for drawing pointer of speedometer

- Select Direct selection tool, By clicking on upper corner points, make them closer to look like pointer.

Set pointer of speedometer

- press (Ctrl+T) for transform, and set the arrow position.

Photoshop tutorial for making Speedometer


Download Free PSD of Speedometer.


More about Author

Saturday, 11 May 2013

Making Simple Abstract Background

Making Simple Abstract Background in Photoshop

Creating Simple Abstract Background For Your PC 


We all know that all the operating systems like XP, W7,vista, Ubantu, Mac are comes with default desktop backgrounds. Among these backgrounds 2 or 3 are abstract type, very colorful, having nice lightning effect..

Its very easy and simple to make our own background image for our PC. Let's see how to make Abstract background in Photoshop. 


Final view

Making Abstract Background in Photoshop

Step 1: 

Create new file and fill the background with Black color (Shft+f5 ---> color ---> select black color ---> OK)
fill background with black color

Step 2:

Now make a new layer (Ctrl + Shft + N) name the layer.
Select Brush tool from tool box with blue color and paint on newly created layer.

rough sketch with blue color

Go to filter ---> Blur ---> Gaussian Blur and make the full radius Blur. and hit OK.

Guassian Blur

Step 3:

Again Make a New layer (Ctrl + Shft + N).
and now select brush with pink color. and make some rough sketch on newly created layer.

rough sketch with pink color

Make a Blur same as above... Go to filter ---> Blur ---> Gaussian Blur and make the full radius Blur. and hit OK.

Step 4:
Similarly repeat process until hole background will be covered with different colors.

colorful background

Step 5:
Now Make a new layer and Select the Ellipticle Marquee Tool from tool box. and make large circle by selecting on layer.
select circle by ellipticle marquee tool

Now select the Gradient fill tool. And select only one color gradient (White color).

one color Gradient fill

After selecting white color gradient, hit OK.
and drag cursor little bit longer from the edge of the circle.

For making color lightning shades

Step 5:
Press Ctrl+T for transform this layer. adjust the layers height and width.
And Change the layers mode to Overlay
make two duplicate layers of this layer by pressing Ctrl+J. 
Select each individual layer and adjust it wherever you want..

photoshop tutorial - Making Abstract background

Tuesday, 16 April 2013

Making Simple Portfolio Website Home Page

Making Simple Portfolio Website Home Page

Making Simple Portfolio Website Home Page.

Final view

simple portfolio wesites home page design

In the Last lesson we seen that how to make Blurred Background images for Web-form Design, Now we see a simple web-page Home screen design Using Blurred Background...

Step 1: 

Get Image in Photoshop to Blur.. And add Gaussian Blur to the image so that it will be used as our home screen background.. (Click Here To download this image)

Original Photo

Go to Filter ---> Blur ---> Gaussian Blur and make following change in radius..

Gaussian Blur - background for website

Step 2:

- Now we have our background..

- Go to View ---> Rulers make a arrangement of the layout columns and rows by dragging..
   (You can also make web template without rulers but for accurate result, distance, spacing rulers are    used).

Marking with Rulers

Step 3:

- Add Your Title Or Logo between upper two rulers...

Add Title at middle

Drop Shadow to Title.. Go to Belnding Options (fx) ---> Drop Shadow.
And make following changes..

Give shadow to title

Step 4:

- Now make a new layer and Select the Custome Shape Tool From Tool box. (Right click on Shape tool)..

- Now Right Click on the Layer You will get different Shapes.. select One and Drag the cursor towards bottom.
- Note : Remember while dragging cursor press and hold Shift key for accurate Shape..
- (if necessary) Press Ctrl+T for transforming the image and adjust it in to middle two rulers..
- Add the different symbols as icons of your links..

Add custome Shapes

- Now Add the Link Text in the below ruler to shape we have added by selecting Horizontal Type Text tool..

- Make a new layer and select footer ruler by Rectangular marquee Tool and fill it with black color.. (Shft_f5 ---> color ---> select black color ---> OK).
- Make this layers opacity To 20%.

Add text and Footer to home pahe

As shown above drop shadow for each object we have added..

As this, You can also add many shapes and links to your homepage..

You can make any type of website home page using Blurred Images backgrounds.. The home page may have a Image in right and text in left , for better look slider etc..


Website home page example