Photoshop Web page template design for black atmosphere Tutorial

In this web design tutorial, you will learn to make an elegant and professional web page that can be used throughout the site, and we will use some of the basic tools in Photoshop software, such as brushes and layers. And below the tutorial includes the Html/css/javascript templates and materials for this page, which you can download for learning or use as well.

Let's preview the final results of this tutorial:

Tutorial Start:

The first step: New File Open PS software, click File-New command or CTRL + N key to create a new file, set width of 1020px, height 1180px, the background defaults to white, click OK;

Step Two: Create the navigation background we will start with the header of our design, so we first use the rectangular marquee tool, the canvas to create a new rectangular marquee, as shown in the picture, fill color #393939;

Step three: Decorate the navigation background ctrl+j copy navigation background layer, activate background layer copy, click Filter-Noise-add noise, parameter settings as shown in figure:

Then set the blending mode of the layer to overlay, with opacity set to 23%;

Fourth Step: Create Web logo and name for the logo in the tutorial, I used the Georgia font and design bold and italic, set ' SIX ' color for #ffffff, ' studios ' color for #f7e5c4, The picture next to the logo is the boxupload32 picture in the material. The style is as shown in the figure:

Fifth Step: Add the navigation link active link color I use the #dbd1be, the ordinary link uses the color is: #ABAAAA.

To make the active link appear more prominent, a rectangular box is added thereafter. Select the Rounded Rectangle tool, set the radius to 5px, the foreground color to #464646, and then add a rectangular background to the active link, as shown in the figure:

Add an inner shadow and stroke effect to the rectangular background layer, setting the parameters as shown:

Sixth step: Add background to the feature area at the top of our page layout, you need a feature area that shows the features of the site to visitors by playing slides. This area can also include the introduction of the site and so on, the first step we need to do is to use the rectangular marquee tool to select the area, and then fill in this rectangular selection of color #d3cab8.

Then you need to download

Texture picture, and put it on top of the featured area layer;

Step seventh: Remove those unwanted background textures in the sixth step of the diagram in the PS, we found that the size is larger than the feature area layer, so we need to cover the unwanted areas, hold down the CTRL key and click the feature background area layer, PS will automatically select the feature area selection.

Activate the texture picture layer, click the Add Mask button below to cover those unwanted areas, and then change the opacity of the layer to 35%.

Select the Horizontal Type tool, add text to the featured area, and make sure that the title text and body text are in different layers.

The text of the head can use #ffffff color, and the main part can use #2a2a2a.

We can add some styles to the title text:

Eighth step: Create "About Us" fillet button Select Rounded Rectangle tool, set radius of 5px, text color set to #404040, other styles can set themselves, here we also need to use the material in the picture of the circleright32,ctrl+ T set the size and move to the appropriate position.

Add a style to the Fillet button layer to make it more interesting:

Category:

• PS Getting Started Tutorial