Hello Guys! What’s Up! This time we are going to make a tutorial about making themes that can be used for business or corporate, or as portfolio. We will share several techniques in this tutorial, including noise, shadow, pattern and lighting, and will be many pictures (few words) in explaining this tutorial step by step so that this tutorial can be easily understood by everyone. Sounds great? Okay, let’s get started!

(PSD Included! and It’s free!)

Tutorial Details

• Program: Adobe Photoshop
• Difficulty: Beginner – Intermediate
• Estimated Completion Time: 2 Hours

Tutorial Resources

• The Silence of the Lambs: Nurtanrioven
• Baltc Sea: Greckas
• Stonehenge: Wouter9522

Step 1 Setting up Our document

Start with making a new document of 1200px by 1850px.

Important: make sure that our ruler and guide are activated because they are used as guide in this tutorial. Make sure that the red boxes are ticked.

Now it’s the time to make the guide, so that we can see that our theme is in 960px. View > New Guide.

Next, we will make background into layer. Right click the Background Layer and choose Layer From Background, rename Layer 0 into Background.

Folder in photoshop is very helpful in developing a theme so that we can store much when there are numerous and complex layers.

Step 2 Making Header

The header’s interface that we are looking for is:

Before we make box for header, we need to change Foreground Color into #333537 so that we will not forget to change it later.

Now choose folder Header > Box and make a box with Rectangle Tool (U), change the name into Box.

Make a size of 1200px by 100px, look at the following picture for details.

We will give some noise for header to make it lively. Look at the menu and choose Filter > Noise > Add Noise.

When the pop up shown up, click OK button. And fill Amount with 0.8.

Awesome! Now we have made box for header. Now we will make the menu.

Step 3 Making Menu

This time, we will make menu for navigation, Select Text Tool (T) :

make vertical guide(like what we did before) 1056px and select Text Tool (T), make menu like the following.

Step 4 Making Logo

In this logo, we will make it from Text. Select Text Tool (T) and write Herozon.

Step 5 Making Light on Header

If we look at header, we can see a scattered light in middle between Logo and Menu? Am I right?

This is where brush plays it’s role. Now select Brush Tool (B) and change the size into 1200px.

And brush in the middle between logo and menu.

To reduce the light radiance, change blend mode menjadi overlay.

Make sure that brush layer in Light and Box Header is in Box folder so that the light will be upon the box.

Great Job! Imperceptibly, we have finished the header including menu and logo. Let’s Move On!

Step 5 Making Slider

In this step, we will try to do the following:

Now open image from resource images mentioned above, make guide horizontal of 205px and 707px then crop the stock image.

Crop Tool:

Do as following:

Then drag the picture to the previous photoshop. Just drag it.

Set the position on Guide Horizontal 151px.

We will make shadow below the stock image. Select Rectangel Tool (U) then set the size into 534px by 73px. Change the color with black and name it dark.

Then Transform the box perspectively. Edit > Transform Path > Perspective.

Do as following:

If we let it be like this, it will look weird, so we need to make the box blur. Filter > Blur > Gaussian Blur.

Cool! Now we have made the slider.

Step 6 Making Slogan and Quote

Slogan that we want to achieve:

First of all, we will make slogan, select Text Tool (T), and Write “We design products that people love and works”

Next, we will make Button Quote, Select Rounded Retangle Tool (T), and make the Radius 10px and the size 214px by 52px. The colours are free to choose, and rename the name into Button.

Right click on button layer and choose Blending Options, settings are like following:

Inner Shadow:

Gradient Overlay:

Stroke:

Time to make circle, choose Ellipse Tool (U), make a circle of 40px by 40px.

Right click on circle layer and choose Blending Options, settings are like following:

Inner Shadow:

Color Overlay:

The next step is making Arrow, choose Custom Shape Tool (T) and choose Arrow 9.

And picture above circle layer of 38px by 30px.

Right click on arrow layer and choose Blending Options, settings are like following:

Drop Shadow:

Inner Shadow:

Gradient Overlay:

Stroke:

We will make Get A Quote text, this is very easy. Select Text Tool (T), write ” Get A Quote “. The color are free to choose, either black or #000000.

Right click on Text layer and choose Blending Options, settings are like following:

Outer Glow:

Color Overlay:

And the last one is line, select Line Tool (U) dan make it 960px with color #ffffff and name it with Line 1 then duplicate , move down keyboard 1 time, and change the color into #999999.

Huraaaaa! We are done with the quote, let’s move to services!

Step 7 Making Services

Select Retangle Tool (T) and make box of 216px by 168px with color #c1c1c1.

Duplicate into 4 box. Tidy up the box by using the distribute horizontal center. Select all the boxes and make sure that box 1 and 4 are on the left side and right side, then click distribute horizontal center.

Great! Next, we will put image on the box, but before that, we need to make sure that the image are located in the middle of the box with right angles. Select layer into active and choose Select > Modify > Contract the fill it with 7px.

Fill with Paint Bucket Tool (G), plain water, or #ffffff.

Choose image from resource and open image with photoshop, then resize it according to the white box we have made before, after that, delete the white box. We don’t need it.

Repeat the steps above to box 2, 3, and 4 . Make it until the image order suit the services pictures above.

Next, we will make, services Text and descriptions. Select Text Tool (T), write “Services” for title and “Sed ut perspiciatis unde omnis isteanea natus error sit voluptatem accusantiumn doloremque laudantium, totam reoapera aperiam, eaque ipsa quae ab illo invena” for description.

And repeat the steps above for 3 other services.

That’s it! We are done with services. Let’s move to footer!

Step 8 Making Footer

Footer are divided into 2 Boxes, first is the upper Box dan second is the lower Box. Select Rectangle Tool (U) and make Box of 1200px by 513px.

And make the second box, with size 1200px by 100px. Put it on the bottom.

We will make Title on Footer, select Text Tool (T) and write POPULAR.

Next we will make diagonal pattern under the Text POPULAR.

Make a new document of 6px by 6px. Zoom until a column is seen as 1px. Select Pencil Tool (B) and do the following.

Afterthat we must defined it as pattern. Edit > Define Pattern. Change the name with herozon-pattern.

Now it’s the time to see how the pattern works. Select Rectanguler Marquee Tool (M) and make it with size of 215px by 7px.

Select Brush Tool (B), we have ever used Brush on step 5 while making light on header, but now we are not using foreground but pattern. Select Dropdown choose Pattern and choose our previous Pattern.

This is what we have made.

Our next focus is making Menu on popular. Select Text Tool (T) and Type Dictum and make 2px line below with Line Tool (U). Make it like following:

Then make menu for the others.

For distance:

We are done with popular, now duplicate it into 3.

The next step is making RECENT WORKS, Duplicate Title Popular, and Line Pttern. After than select Rectangel Tool (U), make box of 96px by 85px. Duplicate into four.

The last step, we will make copyright and line. Select Text Tool (T) and Line Tool (U). Make line of 1200px by 1px.

Awesome, you have done a great job! Congratulations! We are done now.