Create a light texture web design in Photoshop

As a coder, the art base is weak. We can refer to some of the mature Web page PS tutorial, improve their design capabilities. To apply a sentence, "read the 300 Tang poems, not poetry will be yin."

This series of tutorials from the online PS tutorials, are foreign, all in English. I try to translate these excellent tutorials. Because of the limited translation ability, the details of the translation has yet to be examined, I hope the vast numbers of netizens to enlighten.

Conventions:

1, this article's software is the Photoshop CS5 version

2, the original screenshot of the tutorial is in English, I on the basis of the re-production, the Chinese version of the picture

3, the original text of some operations did not give the parameters. I measured some parameters in the case of repeated tests, showing in red text. Some of the wrong parameters, directly displaying the correct parameters in red text

For example: (90,22,231,77), which indicates that the coordinates of the upper-left corner of the rectangle are (90,22), width 231, 77 high

For example: (90,22), which indicates that the coordinates of the upper-left corner of the rectangle are (90,22), and that the other two parameters of the rectangle have been specified in the tutorial

4, at the end of the tutorial will be attached to my experience. Some are optimized for some of the steps in the tutorial.

In the Web design tutorial, we'll be creating a light textured Web page layout. I'll show you how apply subtle textures into web layouts, how to create a seamless diagonal mosaic Te a tabbed content area to the "Services" section.

In this page design tutorial, we will create a light texture of the page layout. I'll show you how to add subtle textures to the page layout, how to create a seamless diagonal stitching pattern, and how to create a content area for the tabs in the "Services" section.

In this tutorial, we'll use the 960 Grid System to organize and arrange the elements for our web layout. Before we begin, download it to your computer.

In this tutorial, we will use the 960 grid system to organize and arrange the elements of our web page layout. Before you start, download it to your computer.

Unzip the archived file you are downloaded, go to the "Templates" folder and then go to "Photoshop" folder. You'll find three. PSD files. Each of the files contains a grid with columns. In this tutorial we are using the columns grid.

Unzip the downloaded file and point to the Photoshop folder under the Templates folder. You will find that there are 3. PSD file. They contain 12 columns, 16 columns, 24 column grids, respectively. In this tutorial, we use the 12-column grid

The. PSD files have some guides already set up, which would be very useful. To activate the guides, go to View > Show > Guides, or use the shortcut Ctrl/cmd +;.

. The PSD file already contains some of the set grids, which can be very useful. To activate the grid click: View > Display > Grid, or with shortcut keys, Ctrl/cmd +;

During This tutorial your need to create shapes with specific dimensions. To the exact size of a shape or selection while your are creating it, open the Info Panel by going to Window > Info. The width and the height of your shapes and selections would be displayed in this panel.

In this tutorial, you will need to create a shape with a specific size. When you want to see the exact size in the creation process, click on: Window > info, open the Info panel. The width and height of your shape or selection will be displayed in this panel.

Now, we covered the basics of using the 960 Grid System, we can move on to creating the Web layout. Let ' s get started!

Now that we've discussed the basics of using a 960 grid system, we can continue to create a network layout. Let's get started!

Step 1:creating The Background of the Web Layout

Step 1: Create a background for a Web page layout

Open the "960_grid_12_col.psd" file in Photoshop. Then go to Edit > Canvas Size and set the "width to 1200px and the" height to 1900px. You can adjust the height later in if you need more spaces for the Web layout.

Open the 960_grid_12_col.psd file in Ps. Then click: edit (should be image) > canvas size, then set width of 1200px, height of 1900px. If the page layout requires more space, you can adjust the height of the page later.

Since the translation tutorial does not use the 960 layout system, this step is changed to new document, size: 1200px*1900px

Now we'll change the color of the background-light gray. With the ' Background ' layer selected, click on the little black lock icon from the top of the Layers panel to unlock this Layer. Then change the color of the background layer to #ededed.

Now, we want to change the background color from white to bright gray. When the background layer is selected, click on the small black lock icon above the layers panel to unlock the layer. Then change the color of the background layer to: #ededed

Because it is a new document, double-click the background layer instead to unlock it

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add noise and set the Amount to 1, the distribution to Gaussian and tick the Monochroma Tic box.

Right-click on the layer and select Convert to Smart object. Then click: Filter > Noise > Add Noise. Set the quantity to 1%, set to Gaussian distribution, tick "monochrome".

Step 2:creating The Header

Step 2: Create the head area

We'll create a simple header with the name of the Web layout and some social media icons. Create a new group and name it Header. Then Select the Type Tool (T) and write the name of your layout. I used the font Gotham Bold with the size 42pt and the color #707679. Align this layer with the grid, as you are in the image below.

We will use the name of the site and some social media icon to create a normal head area. Creates a new group header. Then use the Word tool to write the name of your layout. I use font: Gotham Bold, font size: 42pt, Color: #707679. Align your layout with the following figure

Double-click on your text layer to open the Layer Style window with the settings from the following image.

Double-click your text layer to open the Layer style window and set the layer style in the following figure

Now we'll add the social media icons. Download This set of icons and open the RSS, Twitter and Facebook icons in Photoshop (or no other icons your want to inclu De in your design). Use the "Move Tool (V)" To "move" these "icon into" your Web layout document and put them on the right side the Web layout. Leave a distance of 10px between icons.

Now, we're going to add some social media icons. Download the icon set, and then open the RSS, Twitter, and Facebook icons (or other icons you want) in PS. Use the Move tool to move these icons to your page layout document and place them on the right side of the page layout. Keep 10px spacing between each icon

Select all this layers, hit Ctrl/cmd + G to group them and name the group "social Icons".

Select the layers of these icons, press Ctrl/cmd + G to classify them as a group, and name the group as social icons

Step 3:creating A diagonal stripe pattern classification:

• PS Getting Started Tutorial