Dark design for the web site

This is a blog project in a dark color scheme, which is becoming increasingly popular.
Bright details on a dark background, plus a bit of your imagination and you are the author of the design for your personal blog!

This lesson focuses on the creation of key areas in the formation of a web site design. The methods and strategies used in this project could be applied in a different quality.

What attracts the attention of a website or blog visitor?
Let’s take a closer look at the result of the lesson. If you notice, the most bright and eye-catching area is the navigation area and the first post (the inscription is located at the top of the header). This is very important, because it allows visitors to understand what this site is about.

The next area that attracts attention is the banner in the upper right corner. The reason for this is that in the process of how the visitor will study the content of the site, he will see the name of the site, along with a brief description, as well as an important design element – the logo.
It is very important to immediately attract the attention of the visitor, since most people decide whether they like the site literally within seconds. And in these few seconds they should get enough information to decide whether to stay or not.

What else might attract attention? These are titles and titles of articles. They also give instant information about the content of the site.

Final image

Step 1. Now that we know what we are going to do and the design decisions behind us, we proceed to the process of creating our plans.

To get started, create a new document. Size is 1024px wide and 1200px tall. Although the main content will be in the center, 800px wide, this document size will show how the project will look on widescreen monitors.
Then fill our background with black.

Step 2. Let’s add a stroke and gradient to the background to give a depth effect. Select Area Tool (Rectangle) – (Single Row Marquee Tool) and select an area 400px below the top of the document. Fill the selection with a color (# 1b1b1b). Now add a gradient under the created line.

Select the foreground color (# 0d0d0d).
Then make the selection 1024px wide and 20px tall. Select Gradient tool (linear). Apply a gradient from foreground color to transparent.
Start creating a gradient on top of the selection and finish at the bottom.

Step 3. Let’s start creating a project header. Now, after we have designated a place for our header, we will give it a design.

Make the selection 800px wide and 225px tall. Fill the selection with black. Stroke 1px with color inside (# 0a0a0a). Make sure it is enabled Ruler (Ctrl + R). Set the guide to 512px, guided by the horizontal ruler.
This guide will determine the center of our header. Now drag the header so that its center coincides with the guide.
This will align your headline.

Let’s add external glow our headline. Layer Style> Outer Glow: Mode – Normal, Color – Black, Opacity-50%, Swipe-0%, and Size-29px. You will not notice this effect now, but later when we add graphics behind the title, you will see a shadow cast on it.

Step 4. We will not have a “floating” header, so we proceed to further actions – to the main part. Make the selection 800px wide, and the rest is the height of the header. Fill the selection with black and add internal stroke colors (# 0a0a0a), Layer Style> Stroke. Move the selection to 1px so that it overlaps the title.

Make sure that the central part of the layer is above the header, as we do not want the header to cast a shadow on the central part. Add a 10px bar filled with a gradient from (# 0a0a0a) to transparent using Layer Styles> Stroke.

Before we continue, make sure to group the layers. Put the layers with the header and the central part in the group “Home”. All other layers put in a group below the level and name it “Background”.

Step 5. Create a new group named “BehindHeader”. Place it between “Home” and “Background”. Create a new layer in this group. Select Tool Polygonal Lasso .

Select the triangular areas coming out of the header and fill them with a color (# 151515). This action will create rays of light. With this technique we will try to focus the visitor’s attention on the header. Rays must be located behind the header. To make it easier and faster, draw rays for one side, and then duplicate the layer with the rays and flip it horizontally Editing> Transform> Flip Horizontal.

Let’s create Radial Gradient from the center of the beam to the outside. Make it so that the gradient goes into the background. Select the foreground color is white and the background color is black.

Step 6. To create a heart logo in the upper right corner, load a few brushes. Some of them can be found here.
Let’s look at the basic process of creating colorful graphics. Choose a brush and color to match your design, then draw an image on a layer. Create a new layer above or below your previous one, depending on what color you want to see at the top, and choose a new color. Use another brush. You can draw other images, but each on a new layer.

Optionally, you can change the transparency of layers or layer styles. When creating graphics, you may find that it partially covered the main part of the header. Therefore, either remove the unwanted part, or apply a mask.
Experiment until you get what you like.

Step 7. Let’s tear ourselves away from the design by one minute and explore what we have at the moment. We have a background with a gradient that adds a depth effect to the design. We also have a main part and a shadow header.
We have a series of graphics, a logo, which is currently located behind the header and gives our project a unique look.

The components we still need are internal content, titles and descriptions, navigation, and lower links.

Step 8. Now that the area behind our header is finalized, we will begin work directly on the header. Create a new group above the layer with the main part and name it InsideHeader. Now, when we have our group, we duplicate the project, that is, everything that we did earlier in the upper left and upper right corners of the header.

Put the graphics in a new group. The problem now is that the layer still displays the outer sides of the header, and blocks our shadow effect. What we do is a ctrl-click on the thumbnail of the header layer. This action will highlight what we need. Now all we have to do is add layer mask (Add Layer Mask) to our InsideHeader group. Change the Opacity of the BehindHeader group by 90%.

Step 9. Place the text above the header and in the header itself. Create a logo or graphic object and place it on the left so that it draws attention to the main area. You can also add a gradient from foreground color to transparent. I used (# 030a0e). If you add a gradient, be sure to create a shadow that should be brighter than the gradient. For this, I used color (# 0b1316). This will add a transition between the title and the navigation.

Step 10. Select the layer with the title. Create a new Layer Style. Apply the options shown below. For Pattern overlaps I used a pattern of heraldic lilies, (you can find on the network). Create a layer mask by clicking on the button. Add Layer Mask in the layers palette. Be sure to apply a mask to the selected layer. Apply a radial gradient that goes from white to black. The effect is shown in the image below.

Step 11. To navigate, make a new group called Navigation. Create a selection of 35px in black under the main part of our header. Add a gradient with the foreground color (# 0c0c0c) to transparent (top to bottom). It looks good, but if we add a stroke of 1px in color (# 232323) at the bottom, we will make the transition between the banner and the main part.

Add text links. I used the font Verdana 18pt, bold.

Step 12. Now create a new group called “Data”. Create a new area 100px wide and 100px high. Create a new layer above. Select Tool Rounded Rectangle . Set the Radius to 5px. Draw a 50px by 50px rectangle. Add an external glow – Mode: Normal, Color: Black.

You can also use the rays of light that you created earlier, and place them in a smaller copy behind your rectangle. Add text to the rectangle. I used the 12px Verdana font and 24px bolded Verdana.

Add title and content .. I used the Verdana 30px font in white for the title, and Verdana (#dddddd) for the 12px text content. Links will have a color (# 36ade1).

Step 13. To create a sidebar (sidebar) use the Tool Rounded Rectangle , Radius 10, add a stroke color (# 080808) and add two gradients, from foreground color to transparent. Place one on top and one at the bottom of the sidebar.

Step 14. Finally, the last step, after which we will get the lower block of links. You can create it with the same technique used for the main part of the header.
Create a layer mask on the group so that it is 800px by 300px in size. Knead the image in the upper left corner of the block. Create small rectangles with arrows to use before the link text, as shown in the image below. There is also a dividing line between each link. In order to somehow separate the link area from the main part, apply a linear gradient from the foreground color to the transparent one.

Final result
We have a dark web design that is ready for layout. Remember that it is strategically important to correctly place graphics in certain areas to attract attention. Create your own unique designs containing bright colors.

Like this post? Please share to your friends: