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)

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

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...

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%.

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..!!

Create blurred backgrounds for website or blog

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 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.