Create a Portfolio Website From Scratch Using Photoshop

, , Leave a comment

In this tutorial you will learn how to create a Portfolio website template layout. If you have any questions about this tutorial be sure to ask in the comments. I Hope that you can go through in this tutorial and learn a few techniques.

Here is what we will be making

Step 1: Setting The Document Size

Create a new 1200X800 pixels document. Use background color white. See the below image to check your settings.

Step 2: Creating The Background

Right click on the layer 1 and choose blending option. Add below blending option.

Gradient Overlay

Step 3 : Organizing The Folders

In order to future redesign and easily locate the elements you have to organize the folders. 
Create new Folders and name them as shown below.

 

step 4 : Enable Rulers

 

Step 5 : Using Rulers

Using rulers create guid line like below

 

 

Step 6 : Using Text Tool(T)

Inside the Top folder create new layer. Select Type Tool(T) and type text as shown in the screen. See the below image to check your settings.

 

 

step 7 : Create selected Link

Using Rounded Rectangle Tool, draw rectangle.  See the below image to check your settings.

 

 

Step 8 : Create Selected Link background

Add below blending option

Gradient Overlay

 

Inner Shadow

 

Step 9: Change the selected Link text color

change the text color to ‘#275200’.  See the below image to check your settings.

 

 

Step 10 : Create Logo

Inside the Top folder create new layer. Select Type Tool (T) and type text as shown in the screen. See the below image to check your settings.

 

 

Step 11: Create the Banner

Inside the banner folder create new layer. Select Rectangular Marquee Tool and draw a rectangular 1002 X 250 pixels. See the below image to check your settings.

 

 

Step 12 : Create Banner Effect

Select Rectangular Marquee Tool and draw a rectangular 1002 X 50 pixels. See the below image to check your settings.

 

 

Step 13

Select Elliptical Marquee Tool, set Feather 20px and draw a circle like below. select the rectangle which you have created in step 12 and press Delete. See the below image to check your settings.

 

 

Step 14

Duplicate the layer. and place the rectangle top.  See the below image to check your settings.

 

 

Step 15: Create About Us column

Inside the aboutUs folder create new layer. In your first column Select Type Tool (T) and type text as shown in the screen. 

 

 

Step 16: Create Read More button

Follow the step 7 to step 9. See the below image to check your settings.

 

 

Step 17

Inside the Services folder Create About Our Services and Inside the news folder Latest News Column

 

 

Step 18: Create Footer

Inside the footer folder create new layer. Select Rectangular Marquee Tool and draw a rectangular 1002 X 75 pixels and follow the step 13. See the below image to check your settings.

 

You will get this result.

 

Step 19

Select Type Tool (T) and type text as shown in the screen. 

 

That’s it. If you have questions or suggestions, feel free to drop a comment. I hope you enjoyed this tutorial!

Share this: