How to Design Web Home Page in Photoshop

Hello, guys today we are going to show you “How to Design Web Home Page in Photoshop”. In this tutorial, you will learn how to design home web page in very easily. Don’t worry if you are new this is a step by step tutorial also have a screenshot of each step so you can practice it by your self by downloading project PSD file.

Resources

Images used:

Models by Frepik.com
Cup by Frepik.com
Laptop on table by Frepik.com

Fonts used:

Arial Regular
Bauhaus 93

Step 01

Open the photoshop software.
Go to the “File” menu and click on the “Open” option.
Now select the 960_grid_12_col from the file.
Then go to the “Image” menu and click on the “Canvas Size” option.
Change the size of the canvas according to your requirement.
Now click on “Adjustment Layer” button and click on “Gradient” option.
Change the gradient which you want to apply (the code of color which I used is given in screenshot).
Change the gradient type to “Redial”.

Step 02

Now right click on the same layer and convert it to “Convert to Smart Object”.
Now go to the “Filter” menu and click on “Filter Gallery” option.
Select the “Film Grain” option and click on ok.
Now go to “Tool Bar” and select “Rectangle Tool”.
Select the color which you want to apply.
Draw a rectangle as shown in the screenshot and name it “Rectangle 1”.
Now double click on the rectangle 1 layer “Layer Style” window will be opened.
Tick on the “Outer Glow” option and select the black color and click on ok.

Step 03

Now go to the “Tool Bar” and select the “Ellipse Tool”.
Draw a small circle and fill it with black and keep it at the center of the page at the bottom.
Now go to the “rectangle 1” layer and apply the “Add Layer Mask”.
Now press “Ctrl+I” to invert the Mask.
Press “Ctrl+J” to make the copy of the same layer and rename it “Rectangle 2”.
Untick the mask layer by clicking the rectangle shape in the same layer.
Now double click and change the color to black.
Press “Ctrl+T” and resize the black color layer by dragging toward up.
Now right click on rectangle 2 layer and click on “Clear Layer Style”.
Again make a small circle and place it on the black portion and apply layer mask.
Press “Ctrl+I” to invert the layer.

Step 04

Select the “Background Layer” and click on “Adjustment layer” button.
Apply the “Gradient” to the background layer.
Now go to the “Tool Bar” and select “Rectangular Marquee Tool”.
Make a selection as shown in the screenshot and apply “Layer Mask”.
Now go to the top layer and then place pic which you want to add in your web.
Again take “Rectangular Marquee Tool” and make a selection of the same layer(mean of the image layer).
Apply the layer mask to the image layer.
Make a copy of the image layer and place it at the top.
Invert the layer mask as I mention above (Ctrl+I).

Step 05

Now go to the “Tool Bar” and select the gradient tool.
Now select the “Mask” in the “image copy layer” and apply the gradient from the bottom toward the top.
Now our layout is ready so group all the layer and name it “Background”.
Take the “Horizontal Type Tool”.
Write the “Basic contents”(e.g HOME, ABOUT US, etc) and change the color and size of text according to your requirements.
Now add “Media Icons” parallel to the top text.
Go to the “Tool Bar” and select the “Rectangle Tool”.
Draw a rectangle change the color and place it under the “HOME” text layer.

Step 06

Now write your web or company name at the top of the web page.
Write the “Main Heading” according to your requirements.
Also, place about your company message, etc.
Take the “Ellipse Tool” and draw a circle under the “Our Team” heading.
Make a copy of the same circle according to your team members.
Now go to the “File” menu and click on “Place” option to place your team members image.
Place the image on the first circle and bring the cursor between the “Ellipse layer” and “Image layer”.
Now press the “Alt Key” you will see small “Arrow Downward” and left-click on the mouse.
Your image will be enclosed in the circle, adjust it.
Do the same for all images.

Step 07

Take “Rectangle Tool” draw a rectangle and change the color as I change to red.
Now write “Read More” on the red rectangle and place it under the message or where you need.
Again the rectangle and off the “Fill” option.
Take the “Text Tool” and write “All” in the rectangle(see screenshot 7.4).
Make the same box according to your requirements.
Now make a rectangle and fill it white make 4 copy of the same rectangle and place it’s the same as seen in the screenshot.
Now place the images inside the same rectangles as we did before.
Take “Text Tool” and write “Get In Touch” and place it at the bottom.
Make a rectangle and make a “Comment Box” like shown.
Here your “Web Page” is ready.

This is how the final result looks like