Showing posts with label website design. Show all posts

Using Blurred Images For Website Background

Create blurred backgrounds for website or blog


Create Blurred Images For Website Background


Final View

Blurred Background

We all Know that, For better design of websites/Blogs everyone use the image for background. The web-designer use either pattern for the background (Repeat the image for background) or place a full screen Image as a background..

While using full screen Image for background, there are may be a chances of the attraction of visitors goes towards the background instate of content in the website. This is happens because of using sharp and colorful images for background...

For better look of website, generally use maximum two - three colors of background.. Means the background image not contains more than 2-3 colors.. It will results better look for website..

When you use image for a background as it is, the edges or sharpness of the image attract the visitors looks.. for this use Blurred Images for Background..

You don't need to go and find blurred images for background.. Let's see how to Blur image using Photoshop..


Step 1: 

 Take the 2-3 Color combined Image in Photoshop to edit.
Original Image


Step 2: 

 Now go to "Filter ---> Blur ---> Gaussian Blur" 
go to blur option


Make the following change in the radius..
Radius = 72 pixels  (Adjust the radius)

Adjust Image Blur

Blurred Image For Background


You can also Use different images for website background..
Here is the image which contains more than three colors in it.. it looks awful..

Awful Background

Besides this you can use 2-3 colored backgrounds for websites and blogs..

one more example for background :-

Three colored Background

After Blur this Image, It results in to

Better Three colored Background


Done--!!

3D Header For Website

Simple magazine cover design tutorial...

Creating 3D Header For Website 

Final view

website header



Step 1: 
Create New File and Paint background with the color which you are selected for website.
Go to view ---> Rulers.. You can get markings on corners of photoshop. Drag cursor from that marking on image to make our headers position. 


Here I make the header position(middle rectangle).



Step 2:

Create New Layer(Ctrl+Shft+N).
Select the Rectangular Marquee Tool and make a rectangle along our header area.
Then Press Shft+f5 For fill color in rectangle. and fill rectangle with White color.





Step 3:
Now Create New Layer above background layer and below the rectangle layer(Header)(Ctrl+Shft+N).
Select Elliptical Marquee tool and Create a round behind Rectangle(for making shadow). Make sure that the round is bit higher than rectangle.
Fill the round with black.(Shft+f5)




Step 4:
Go to Filter ---> Blur ---> Gaussian Blur. and set radius to 30PX.




Step 5:
Make a new layer above the Rectangle (Ctrl+Shft+N).
Select the Rectangular Marquee tool and select the white rectangles border for filling Gradient. 


Now Fill Gradient With Fill Gradient Fill Tool.





Step 6:
Select Horizontal Type Text Tool and Type Name Of Website or Header Title.




Right click on the text layer and click on Rasterize Layer.
Now go to Blending Options.
1) Gradient Overlay :-
Make a white and Gray Combination And feel style to linear.


2) Stroke :-
Set size of stroke to 1px and color to white.


You can also Smooth Give Bevel and Emboss From Blending Options By increasing Smoothness..


Step 7:
Now If you Want to add navigation Bar at bottom, You can just add text and drop shadow.
You can also create separation of navigation links using "Single Row Marquee Tool".


3d website header

Done..!!
Subscribe to: Posts (Atom)