Create a beautiful website template design in Photoshop

Have you ever been tempted to paint your beautiful layout, but you didn’t know how? To be honest, a few years ago I had the same problem. I surfed the Internet, ran across beautiful layouts and hoped that someday I would “grow up” to them. Today I can declare that I have grown, and I will teach you that! Open the program and let’s get started!

Materials for the lesson:

Step 1

All the layouts I’ve worked on are based on the markup. 960 GridSystem. So, first of all, we download the markup source from the official site 960.gs. You will find in the archive two types of sources – 12_col and 16_col. As you guessed, you are my brainy, these are columns. If your layout has 3 columns, choose 12_col, for 12 is divided by 3. If 4 columns, you can choose both 12_col and 16_col. Then you will see everything yourself.

Step 2

Before you open the source and get to work, we must at least in the head, and better on paper, plan our future layout. That’s what happened with me.

Step 3

Now we are ready to begin. Open up sixteen_col.psd, we press Image > Canvassize (Image – Canvas Size) and change the size to 1200×1700. Fill with white.

Step 4

Now create a rectangle at the very top of the layout, as shown in the picture. Height – 80 pixels. Fill with color #dddddd.

Step 5

Create a layer on top of the rectangle layer. Holding Ctrl, click on it. A selection should appear around the rectangle. Choose soft brush by size 600 pixels, change the color to white and click a few times above the middle of the selection, as shown above. Thus, we drew quite nice flare.

Step 6

Create a new layer. Draw a rectangle again, only narrower and darker, as shown above.

Step 7

Draw a large rectangle 500 pixels below the top height in 575 pixels, as shown above. Fill it with gradient through layer styles (settings shown below) fromd2d2d0 to #ffffff.

Step 8

Now we draw a highlight, as we did in the fifth step. We will often use this technique and I will often send you to the fifth step, so remember the algorithm.

Step 9

On the new layer, create another rectangle and through the layer styles fill it with a gradient from # 2787b7 to # 258fcd. The settings are shown below.

Step 10

Add a dark blue line using Drop shadow (Shadow) with the Multiply blending mode. Opacity (Opacity) – 65, Angle (Angle) – -90, Distance (Distance) – 1 px, Size (Size) – 6 px. After that, on the new layer, create a one-pixel white horizontal line right below the dark blue. You can use this technique in your future work.

Step 11

On the new layer create a rectangle with a height of 50 pixels, as shown in the figure. This will be a navigation unit. Add a shadow through the styles:

Step 12

Time to work on the navigation. Using the Rounded Rectangle tool (Rectangle with rounded corners) with a radius of 5 pixels, draw a rectangle as shown above, fill it with the color # f6a836 and apply the following styles to it:

InnerShadow (Inner shadow). Color: #ffffff. Blend mode (Overlay): Overlay. Opacity: 60%. Angle: 120. Distance: 7px. Size: 6px.

InnerGlow (Internal glow). Blend mode: Normal. Color: #ffffff. Size: 4px. The rest is the default.
Stroke (Stroke). Size: 1px. Position: Inside. Color (Color): # ce7e01.

Select the layer by clicking on it with the sandwiched Ctrl. We press SelectModifyContract (Allocation – Modification – Compress) and enter the value one pixel

On a new layer with the mode Overlay (Overlap) we paint a highlight, as in the fifth step, only we select a brush smaller. Add text. I used Arial.

Step 13

Let’s go to the search block. Using tool RoundedRectangle (Rectangle with rounded corners) 5 pixel radius draw a rectangle on the right side of the layout, as shown above, fill it with color #ddddddand apply the following styles to it:

InnerShadow (Inner shadow). Color (Color): # 000000. Blend mode: Multiply. Opacity: 9%. Angle: 90. Distance: 0px. Size: 6px.

Stroke(Stroke). Size: 1px. Position: Inside. Color: #dfdfdf.

I added the text, here’s how everything should look like.

We already have a lot of layers, it’s time to organize this business. Create a “search” group and drop the corresponding layers there. Later we will organize the rest.

Step 14

Add the login button using the same tools that we used to create the search field, only the button will be twice as short and of a different color. Place it under the search field, as shown in the figure.

Add a highlight, as in the fifth step.

The size of the brush should be much smaller. 45 pixels enough

Step 15

Logo and slogan you add yourself. It should be something like this.

Step 16

Let’s return to the organization of the layers. Let’s create the top_bar group and drop everything related to navigation, logo, slogan, search, etc. into it.

Create another group – “header”. There we will add everything that relates to the cap.

Step 17

At the moment, our hat looks too ordinary, so we will add some lighting effects, as we did in the fifth step. Create a new layer, change the blending mode to Overlay (Overlap).

Remember next? Yes yes brush in 600 pixels and the highlight is ready. To add depth, you can change the color to black and click a couple of times with the brush at the bottom of the block. Try it!

Step 18

In this step, I will explain how to create a reflection effect. To get started, take two images (I used screenshots from Safari my two other portfolio layouts), reduce one and put it behind the other. Duplicate both layers and using FreeTransform (Free Transformation) mirror one first and then another duplicate. Now move the duplicates a little lower. Next, create a square selection from bottom to middle of the first reflected duplicate and use SelectModifyFeather (Allocation – Modification – Feather) with a parameter of 30 pixels or a bit more. Above, you see what should be about. Press the key several timesDelete and get a beautiful reflection. Repeat the last action with the second duplicate

Create a new layer with overlay mode. Overlay (Overlap) and apply the technique described in the fifth step.

This is how the cap should look like after adding text and buttons. With this, I think you can do it yourself. Do not forget to place all new layers in the “header” folder.

Step 19

If you have already watched the preview of what we have, you have already seen the cute tabs. I will focus on this in more detail, and it’s worth it. Create a rectangle shape with rounded corners 70 and radius ten pixels Now we have to “straighten” the bottom corners and make them straight. Choosing a tool DirectSelection (Selection Node) and click on our form. Click on the vertical point and drag down, hold Shift. So far so good, but so far the form is still deformed. See a little pen? Click on it and drag it up.

Is done. Not bad, huh? Repeat step with lower right corner.

Step 20

Choosing a tool Line (Line) wide one pixel

Step 21

Draw gray dividers by holding Shift, so that the lines are perfectly vertical.

Step 22

Add icons and text for tabs. I used Ray Cheng icons from WebAppers.com. When one tab is active, the others should be inactive. Need to come up with something. I discolored all inactive icons and made them a bit transparent.

Step 23

To further highlight the active tab, we will make a white background behind it. To begin, select the desired tab.

It should be like this.

We draw a white background with a small soft brush (it is not necessary to completely paint over white).

Step 24

Add a shadow. Create a dark gray rectangle behind the tabs, as shown above.

Add a vector mask to the layer by clicking on the corresponding icon.

We take a large soft black brush and begin to erase the upper part of the rectangle. We get a nice shadow behind the tabs.

Important! Draw a single pixel gray line right below the tabs. Add the vector mask again and use the brush to erase the ends of the line to smooth them.

This is how the whole thing should look like in the end.

Step 25

Let’s take the content of the first tab. We need to add a picture, title and text. It seemed to me a good idea to make such an interesting effect. Draw a white rectangle with a single-pixel frame and a small shadow, as shown below.

Duplicate the layer several times and place each duplicate in its own way, scrolling them clockwise, then against.

Place the image on top. Do not worry, if it will stick out beyond the framework – we will correct it. Select the top rectangle and apply SelectModifyContrast (Selection – Modification – Compress) with 5 pixels parameter. Select the layer with the image, click on the icon QuickMask (Quick Mask) at the bottom of the window with a list of layers.

This is what the layers should look like.

Step 26

Do not forget about the organization of layers. This is how I do it.

Having worked with the texts and headings, we get something like that. Moving on.

And a little more about the organization.

Step 27

Block with reviews. I thought that it should be large, so I made it the entire length of the main unit. Draw a rectangle 220 height pixels with a single pixel gray frame.

Draw another rectangle lighter, stepping back from each side 10 pixels each. Do not forget about the frame.

It remains to add text.

Step 28

Time to work on the footer. Draw a dark gray rectangle with a height of 400 pixels at the very bottom of the layout.

Step 29

And again, the effect of the fifth step.

Step 30

Add another rectangle in height. ten pixels above the footer and add two lines above and below this rectangle.

Step 31

At the bottom of the left room for another navigation. Duplicate the navigation block from above and reduce its height to 40 pixels We place the duplicate block to the bottom. If you do not have enough space in the layout, click ImageCanvasSize (Image – Canvas Size) and increase the height of the layout.

Step 32

Over the duplicate navigation, add a white separator line.

Step 33

Add content to the footer, focusing on the markup.

Step 34

And once again take the time to organize the layers. That’s how it is with me.

And you’re done!

Here are screenshots of the remaining pages:

Hope this tutorial helped you. Remember, focusing on the little things, you can create truly great work.

Thanks for attention!

Like this post? Please share to your friends: