Showing posts with label website. Show all posts
Showing posts with label website. Show all posts
Thursday, April 2, 2015
background,
blurred,
for,
images,
using,
website
0
comments
Using Blurred Images For Website Background
Create Blurred Images For Website Background
Final View
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 dont need to go and find blurred images for background.. Lets see how to Blur image using Photoshop..
Step 1:
Take the 2-3 Color combined Image in Photoshop to edit.
Now go to "Filter ---> Blur ---> Gaussian Blur"
Make the following change in the radius..
Radius = 72 pixels (Adjust the radius)
You can also Use different images for website background..
Here is the image which contains more than three colors in it.. it looks awful..
Besides this you can use 2-3 colored backgrounds for websites and blogs..
one more example for background :-
After Blur this Image, It results in to
Done--!!
Making Login Form
Color Combination is the main thing in web-Design, Making Forms , web-pages.. Use proper and effective color combinations for web design for better looking.. Here we can see how to Design a Login page for your website..
Final view
Step 1:
Create new file and fill the background with #3E3E3E color.
Create new file and fill the background with #3E3E3E color.
Step 2:
Make a new layer (Ctrl+Shft+N)
Select circular select tool and create circle on the Layer.
Select circular select tool and create circle on the Layer.
Right click on circle ---> Select Inverse.
And fill the Selected area withe color #02A4E0(Shft+f5 ---> color).
And fill the Selected area withe color #02A4E0(Shft+f5 ---> color).
Select eraser tool and erase the left side area.
Step 3:
Now Go to Blending Options ---> Drop Shadow.
Change the angle to 0 degree.
Change the angle to 0 degree.
Now select Horizontal text tool and Type the Sign In text at left corner with weight Bold..
Now with regular font weight type "User name" and "Password" Text.
Step 4:
Make New Layer (Ctrl+Shft+N).
Select Shape tool ---> Select Rounded corner rectangle .
And drag mouse below User name and Password field with white color.
Make New Layer (Ctrl+Shft+N).
Select Shape tool ---> Select Rounded corner rectangle .
And drag mouse below User name and Password field with white color.
Step 5:
Select Horizontal type text tool, Select larger font ant Type GO/Sign In/ Login.
Drop shadow to this button/text with increase in size.
Select Shape tool and Select arrow from shapes, drag mouse on right corner.
Now select text tool and type forgot password below input Password field.
Drop shadow to this button/text with increase in size.
Drop shadow to arrow from Blending options ---> Drop Shadow.
Done..!!
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..!!
Monday, March 30, 2015
home,
making,
page,
portfolio,
simple,
website
0
comments
Making Simple Portfolio Website Home Page
Making Simple Portfolio Website Home Page.
Final view
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)
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).
Step 3:
- Add Your Title Or Logo between upper two rulers...
- Add Your Title Or Logo between upper two rulers...
Drop Shadow to Title.. Go to Belnding Options (fx) ---> Drop Shadow.
And make following changes..
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..
- 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%.
.jpg "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..
Example..
Done..!!
Subscribe to:
Posts (Atom)
- Follow Us on Twitter!
- "Join Us on Facebook!
- RSS
Contact