Showing posts with label header. Show all posts
Showing posts with label header. Show all posts
Creating 3D Header For Website
Final view
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.
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.
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)
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.
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".
You can also create separation of navigation links using "Single Row Marquee Tool".
Done..!!
Tuesday, March 31, 2015
beautiful,
divider,
for,
header,
websites
0
comments
Beautiful Header Divider for websites
Beautiful Header Divider for websites
When you are going to design a website/ form design / UX / UI , you have to use dividers for better look of partitioning of website.. Using these dividers the visitor or user understands the partitioning of your website.. Here is the tutorial for better looking website header divider.
Final view
Step 1:
Create new file and fill background with dark gray color (Shft+f5 ---> color ---> Select Black color---> OK).
Make a new layer (Ctrl_Shft+N)
Select Rectangular Marquee Tool and Draw a line. Fill the line with darker gray color than background.
Step 2:
Now go to Blending Options (Fx) and select drop shadow property and make following changes.
Set
Blend mode = Normal
color = gray (Lighter than background [Important])
angle = 120 degree
Create new file and fill background with dark gray color (Shft+f5 ---> color ---> Select Black color---> OK).
Select Rectangular Marquee Tool and Draw a line. Fill the line with darker gray color than background.
Step 2:
Now go to Blending Options (Fx) and select drop shadow property and make following changes.
Set
Blend mode = Normal
color = gray (Lighter than background [Important])
angle = 120 degree
Opacity = 100%
Distance = 1
Speed and Size = 0
Distance = 1
Speed and Size = 0
Hit OK.
Done..!!
Subscribe to:
Posts (Atom)
- Follow Us on Twitter!
- "Join Us on Facebook!
- RSS
Contact