Bright layout for the site

This lesson describes the method of creating a colorful and bright layout for the site.

Materials for the lesson:



Part one

Step 1. In this rather short lesson, consisting of only 18 steps, we will create a beautiful, bright layout. Let’s start by creating a menu bar and content fields. And so, we create a new document in Photoshop with a size of 800×600 pixels., We make a black background. Choose Rectangle Tool (Rectangle tool) and create a gray (191b1b) rectangle.

The content section will be divided into two main segments. Choose Rounded rectangle tool (Rectangle tool with rounded edges), set a radius of 12 and create two dark gray (080808) rectangles with rounded edges.

Step 2. Now we will create a menu bar. On the palette Foreground (foreground palette) change the color to brown / orange (b21e00) and create a narrower rectangle with rounded edges.

Rasterize this rectangle by right-clicking on this item in the layers panel and selecting Rasterizelayer“(Rasterize the layer). This will add flexibility to working with the shape of the rectangle. Select the created rectangle by clicking on it on the layers panel and in the menu Select (Choose), by choosing LoadSelection (Load selection).

Step 3. Set the background color to orange (ff4a00), select Gradient Tool (Gradient tool) (ii) and click on Linear gradient (linear gradient) (iii)

Create a gradient effect in a rectangle by drawing a vertical line from the top edge of the rectangle to the bottom.

Step 4. Create a new group (in older versions of Photoshop, a set of layers), calling it “Menu” and put a rectangle with rounded edges in it. Create a peach (ffc981) rectangle with rounded edges on the previous rectangle, rasterize it and make a selection using the menu Select> Load Selection.

Step 5. Set the background color to orange (ff5e00), create Lineargradient (linear gradient) in the second rectangle with rounded edges.

For the text in this example, the parameters specified below are used.

Part 2.
Step 5. This is the second part of our lesson, in which we create a modern layout of the site. In this part we will create a site header. We use a wonderful sunset picture that was reduced to 900×675 pixels. As shown below, a small sunset picture was placed directly above the menu bar.

Step 6. Now we will decorate our hat a little, so that it looks more interesting. Let’s start with the pattern of bleached squares. Create a new group, call it “Squares on the left” and create a white square in it.

Step 7. In the panel of layers we reduce Opacity created square up to 60%. Now that we have one square, we can create a duplicate of this layer by right-clicking on this element in the layers panel and selecting Duplicate layer (create duplicate layer). In the duplicate, select another level of Opacity (Opacity), for example, set 40%.

Step 8. We continue to create duplicate squares, choosing different levels. Opacity for each square, placing the squares in the grid below.

Having finished filling the grid on the left, we make a duplicate of the “Squares Left” group, move it to the left side and reflect horizontally – Edit> Transform > FlipHorizontal (Edit> Transform> Flip Horizontally).

Part 3.
Step 9. This is the third part of our lesson, in which we create a bright modern layout of the site. In this part of the lesson we will finish the graphic work with the header of our layout. The figures used in the header can easily be created independently in Photoshop. However, in order not to spend a lot of time, we use wonderful free graphics that will help us get a great result. Of course, you can use any other graphic elements, perhaps even one of the great Vector Packs for Designers, created by Go media. Open up Image in Photoshop and move it right above the left squares. In the layers panel we change Blendingmode (Blend mode) images on “Screen“(Clarification). Thus, we remove the black color, but leave the outline of the figure.

Step 10. Move the image to the top left corner.

As you can see, our image does not look good against sunset, as part of the circle turned out to be cut off. We can fix this by using EraserTool (Eraser tool) (i) and SoftBrush Tool(soft brush tool) (ii) approximately 35 in size in order to erase the cut pieces.

Step 11. Be careful when erasing these parts so as not to erase the adjacent parts of the shapes. After that, create a duplicate curly graphics and move it to the upper right corner of the cap. We use Eraser tool (Eraser tool), to erase the cut pieces.

Step 12. Now we will create some more circles, which will mainly be used in the content headers. In the toolbar, select Custom shape tool (arbitrary shape tool). On the top panel, click on the down arrow (i) to see the selected group of shapes. Now click on the arrow to the right (ii) to see a list of such figures as arrows, ornaments, etc. We choose Shapes“(Figures). Now you should have a group of “figures”. Choose Circleframe“(Circumference) (iii)

Create a white circle on the spot where it was old.

Step 13. Using Magic wand tool (Magic wand tool) (i) make a selection (ii) inside the circle.

Squeeze the selection using the menu Select> Modify > Contract (Select> Modify> Compress) by 4 pixels., fill it with white using Bucket tool (Fill tool).

Step 14. Copy the new shape and move it to the right side.

Part four.
Step 15. This is the last part of our lesson, in which we create a bright modern layout of the site. In this part of the lesson, we will add content headers and put the final touches on the menu bar. In this example, the following parameters were used for the headers:

To create a frame, make a selection using text using the menu Select> Load selection (Select> Load Selection). Increase the selection using the menu Select> Modify> Expand (Select> Modify> Expand) 3 pixels. and fill the new layer with gray.

Step 16. Make a duplicate of our round shape and move it under the heading. Change its size using the menu Edit> Transform> Scale (Edit> Transform> Scale), we make some more duplicates, also we change their size in order to create a pattern.

Step 17. Create a few more headers, slightly changing the pattern. For the main text in this example, the parameters listed below are used.

Now we will add the final touches to the menu bar so that the menu is in harmony with the graphics of our site’s header. Click on the menu group in the layers panel and change Blending mode (overlay mode) on “Screen” (Lightening).

Step 18. The menu merges too much with the header, so we duplicate the menu group.

we change Blending mode (overlay mode) on Normal“(” Normal “) and reduce it Opacity up to 25%

Step 19. Now you should have the following on the screen:

Author: webdesign-tutorials

Like this post? Please share to your friends: