Photoshop Web Design Tutorial: Food blog site Home

This tutorial teaches us to use Photoshop to create a gourmet blog page effect.

The main feature of this page is that the bottom of the table with the pattern of tablecloths, feel a little home atmosphere. Then with the simple layout, like a home feeling.

First look at the effect of the picture:

　　

1. Create a new document with a size of: 1200*1400px, and fill the background color: #fbe0b1.

Then perform the filter > Noise > Add Noise, and set the data as shown below:

　　

2. Create custom pattern

Press CTRL + N to create a new document of size: 80*80px.

Create a new layer again, name: horizontal. Select the rectangular selection tool to draw a size of 80*40 and fill: #b52a51. Set the opacity to: 20%.

Create a new layer name: vertical, use the rectangle tool to draw a 40*80 shape on the left and fill in: #b52a51. Set the opacity to: 30%.

Create a new group, put the two layers in, and name: pattern. and set the opacity: 30%.

Turn off the white layer's "eye", Edit > Custom pattern.

　　

3. Fill in custom pattern

Create a new layer name: Patten; and fill it with white, change the fill: 0%. Double-click the layer and select pattern overlay in the pop-up Layer Styles window to select the pattern we have customized in the previous step.

　　

4. The production of the top navigation

Creates a new group, "Top bar."

Create a new layer name: Top bar. Select the rectangular selection tool, draw a 1200*15 and fill the #a95858, as shown in the figure. Double-click the layer to add a shadow effect to the layer, its shadow: #473e2f.

Create a new layer name: 1px line. Select the lines (U) tool, draw a 1px line, and fill in: #8b4747. Place the position immediately below the rectangle.

Press Ctrl+j to copy the line layer, select the Move (V) tool, and shift to the top of the previous line. and change its color: #ca7373.

　　

[1] [2] [3] [4] [5] [6] [7] [8] [9] Next page