Making Simple Portfolio Website Home Page

23:39 Vallabh 4 Comments

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

Example..



Website home page example



Done..!!

4 comments:

Create a Lomography style wallpaper

03:02 Vallabh 3 Comments

Create a Lomographic wallpaper


Lomography is a analog camera movement and community. Also called as experimental film photography. This image contains different color combinations



Final view


making lomography wallpaper


Step 1: 
Take image in photoshop to give a lomographic effect. (See this photo)






Step 5:

- Make a duplicate layer of this image by pressing Ctrl+J.
- Go to Image ---> Adjustments ---> Gradient Map and select black white color combination and hit OK.



Gradient map for lomography image


Add gradient



Set this layers Opacity to 25%.

Adjust Opacity



Step 3:

- Make a new layer (Ctrl+Shft+N).

- Select Brush tool and select large size round brush..
- Set color to orange and paint on the new layer where you can see the sun light..


brush strokes by orange color


- Set the mode of this layer to Soft Light and Opacity to 70%.


Soft light mode



Step 4:

Similarly make a new layer and add some greenish and blue color strokes by brush..


Blue and greenish color strokes



Set this layers style to Soft Light and Opacity to 25%.


Photoshop tutorial for lomographic effect



Step 5:

- Now merge all your layers (Select all layers and press Ctrl+E)
- Select Blur tool from toolbox and set 

Mode = Normal and
Strength = 20%

final view - lomography image


Done..!!




3 comments:

Creating Dreamy Image in photoshp

03:17 Vallabh 9 Comments

Creating Dreamy Images in Photoshop

Creating Dreamy Images in Photoshop



Final View

Dream image -photoshop Tutorial


Dreamy Photo gives images a soft romantic feel. This is a superb effect for enhancing photography..

Step 1

Take a image in photoshop to make it dreamy.. (Click Here to see this photo)







Step 2


- Create a new layer (Ctrl+Shft+N).
- paint the background with black color..
- Go to Filter ---> Render ---> Lens Flare , and drop a lens from left top to right bottom.

Add lens flare


Hit OK


Lens flare


- Set this layers mode to Screen.


Set layer mode to screen


Step 3

- Now get one Bokeh type image. and take it in to the project..


Add bokeh image


- Make this layers mode to Screen and set opacity to 30%


after adding bokeh image



Step 4
- Now Create new layer (Ctrl+Shft+N).
- Paint background with brown color.. (Shft + F5 --->  color ---> select brown color ---> OK)



brown fill


- Make this layers mode to Screen.
- similar way make a new layer again and fill it with pink color, and set its mode to Screen.. and make the opacity of pink layer to 30%..


creating dreamy images in photoshop

Done...!!


9 comments:

Make Your Own Action In Photoshop

23:59 Vallabh 3 Comments

Make Your Own Action In Photoshop


Make Your Own Action In Photoshop


Photoshop Action is nothing but the bunch of the steps. While editing a photo in photoshop, you have to made minimum four - five steps.. But when you require these steps  to edit each and every photo then, besides doing these steps for every photo Make A Action and play the same action for every photo.. you will get same effect..

At every time you apply the Action for a photo, these 4-5 steps will be automatically done because these steps are saved in to your action.


Step 1: 

Take the  Image in Photoshop to edit. (Click Here to take this photo)



Original photo





Step 2: 

Now go to "Window --- Action" 


make  own action in photoshop


You will get following window and default actions in it.
Click on the "New Action" button shown by arrow. (below the action window)


Create new action


Step 2:

Name Your action as "Test" and click 'Record'



Name the action


( When you click on the record button your action is started recording, when you complete the job/editing then click on "stop" button.. The action will be automatically saved. )

Step 3:

Now I've started the recording..
Select Crop Tool from tool box.. and crop the Image..

Crop the image

This Crop step is now recorded by the action.. Now Stop the Action..

Stop recording

When you stop the Action recording, It will be saved and appear in Action window.

Action saved



You made a Action Successfully...
Now we will see how to use this Action..

Step 4:

Now Take the image to edit..


make action


Go to "Window ---> Action".
Click on "Test" action in the action window..
And click on Play button below the action window..

You will get the image cropped of exact size you will saved it..

make your own action - Photoshop tutorial

Done--!!


Note :- I've used only 1 step(Cropping) for this action. but you can add your steps to it.. Only remember that you will record all the steps..

3 comments:

Using Blurred Images For Website Background

23:39 Vallabh 45 Comments

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

45 comments: