Step 11

To create our shadow, we’ll start by duplicating the two layers “pic” and “pic_holder”.

While having the two duplicated layers selected, go to Edit > Free Transform, and adjust the height to: -100.0%

步驟11

建立圖片陰影，我們首先複製pic和pic_holder兩個圖層

當複製好的兩個圖層選中的時候，點選：編輯 > 自由變換，調整高度為-100%

 

While we’re still selecting the two duplicated layers right-click on them and choose Convert to Smart Object; call this layer “shadow”. and make sure to place it at the bottom.

在複製的兩個圖層上右鍵選擇轉換為智慧物件，命名為shadow。然後移動圖層到原圖片的下方

 

Select “shadow” layer then click on Add layer mask (at the bottom of the layers panel)

選擇shadow圖層然後點選新增圖層蒙版（在圖層面板的底部）

 

Choose the Gradient Tool (G) and with a black, white linear gradient drag from down to top.

選擇漸變工具，選擇黑-白線性漸變，從下往上拖動（下圖中紅線所示，從下往上拖動）

 

You should have something like this!

效果如下：

 

Step 12

We need to add a description to our image. so we’ll create a selection of 240x25px, and fill it with this color value: #1a1919, This will work as the description background.

步驟12

需要給圖片新增一個說明文字。所以我們要建立一個選區，尺寸：240px*25px，用顏色： #1a1919填充，這作為說明文字的背景。

用矩形工具新建一個矩形（105，419）替代本步驟，顏色： #1a1919

 

Write some description with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #82aa48

 

按照下面的設定新增說明文字：

• 字型： Arial
• 字型大小： 15px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： #82aa48

 

Make sure to keep your document tidy!

請務必保持您的文件整潔 ！

 

Step 13

Make another copy of the featured design image and align it to the right.

步驟13

在特色區域的右側重複的新增另一張圖片

 

We’ll make the center image a bit bigger, so make a selection of 340x200px, align it like the following, and fill it with any color.

We’ll also give it a Stroke. use the following image for reference

我們在中間新增一個大的圖片，建立一個大的選區，尺寸：340px*200px，按照下圖擺放，用任意顏色填充

給它按照下圖新增一個描邊。

用矩形工具建立一個矩形（340，270），顏色任意。並按照下圖新增描邊樣式，替代本步驟

描邊的顏色： #3d6013

 

給當中的圖片塊新增圖片和陰影

 

And here’s what we’ve got!

這是目前的效果

 

Make sure to organize your layers and to group them. I personally have created three separate groups. here’s how they look

組織你的圖層，併合理的歸併為組。我把三張圖片的各個圖層分別歸併為3個組

 

Step 14

Let’s create our sliding button! we’ll start by creating an Ellipse of 50x50px using the Elliptical Marquee Tool (M), and filling it with any color.

Now give it some layer styles according to the following image

步驟14

要建立滑動按鈕！用橢圓選擇工具建立一個橢圓選區，尺寸：50px*50px，用任意色填充

直接用橢圓工具建立一個橢圓（28，220），尺寸：50px*50px，顏色任意。

按照下圖給該圖層新增圖層樣式

描邊的顏色： #6f9941

漸變編輯器的顏色： #ffffff，#f3f3f3

 

With the Custom Shape Tool (U) create an arrow and give it the following layer styles

用自定義形狀工具建立一個箭頭，並按照下圖新增圖層樣式

內陰影的顏色： #3c3c3c

漸變編輯器顏色： #619145，#8cb352

 

 

Make another copy of the arrow and align it to the right

在右邊複製一個箭頭

 

Step 15

Let’s work on the content area. start by creating a selection of 1020x815px

Click Shift+Backspace to fill your selection with this color: #e8e8e8

步驟15

接下來要建立內容區域。首先建立一個選區，尺寸：1020*815

按Click+Backspace用顏色#e8e8e8填充選區

經後面的步驟測算，此處應該是1020*810

建議：直接用矩形工具建立一個矩形（0，530，1020，810），顏色： #e8e8e8

 

With the Single Row Marquee Tool (M) create a 1px selection, place it like the following image, and fill it with white (#ffffff).

Now you’re having perfect pixel details!

用單行選擇工具建立一個1px的選區，按照下圖擺放，用白色填充

現在你獲得完美的單畫素元件

建議：用直線工具畫一條水平直線（0，530，1020，1）比較簡單，顏色： #ffffff

 

Step 16

We need to set upper borders to our content area. therefore we’re going to drag a new horizontal guide after 50px. 
Download this Icon set: Basic Set – Pixel Mixer and place of them like the following.

步驟16

我們需要設定內容區域的邊界。我們要在之前的水平參考線之下50px拖動一個新的水平參考線

下載圖示：Basic Set – Pixel Mixer，並按下圖擺放

 

Drag a new horizontal guide at the bottom of the icon, leave 20px then drag a new one.

在圖示的底部拖動一條水平的參考線，往下20px再拖動一條水平參考線

 

Now Write some heading with these settings:

• Font Family: Rockwell
• Font size: 29px
• Font weight: Regular
• Anti-aliasing setting: Sharp
• Color: #81aa48

 

按照下面的設定新增頭部文字：

• 字型： Rockwell
• 字型大小： 29px
• 字型樣式： Regular
• 消除鋸齒樣式：銳利
• 顏色： #81aa48

 

Drag yet another two guides according to the following image

按照下圖拖動另兩條新的水平參考線（一條在文字的底部，一條再往下20px）

 

Write some text with these settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #2f3235

 

按照下面的設定新增文字：

• 字型： Arial
• 字型大小： 15px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： #2f3235

 

Drag more three guides according to the following image

按照下圖拖動3條水平參考線（一條在文字的底部，一條往下20px，一條再往下30px）

 

Step 17

It’s time to create our “read more” button. With the Rounded Rectangle Tool (U) create a rectangle of 100x30px and 5px radius. and fill it with any color just for now.

步驟17

該是建立read more按鈕的時候了。用圓角矩形工具建立一個圓角矩形（100，790），尺寸：100px*30px，半徑為5px，用任意顏色填充

 

Give this rectangle some layer styles. use the image below for reference.

按照下圖給這個圓角矩形新增圖層樣式

斜面和浮雕中的高光模式的顏色： #7da841

漸變編輯器的顏色： #66923e，#76a150

 

 

With the Ellipse Tool (U) create an ellipse of 15x15px and fill it with this color value: #4d4d4d. 
To align it correctly select its layer and the rectangle’s layer then click Align vertical centers while having both layers selected.

用橢圓工具建立一個橢圓，尺寸：15px*15px，顏色： #4d4d4d

為了精確的對齊，選擇該圖層和圓角矩形的圖層，然後點選垂直居中對齊（點選：圖層 > 對齊 > 垂直居中）

 

Type “+”, fill it with white (#ffffff) and place it like this

輸入+，用白色顏色填充，按下圖擺放

 

Write the word “read more” with the following character settings:

• Font Family: Tahoma
• Font size: 12px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #ffffff

 

按照下面的設定新增文字read more：

• 字型： Tahoma
• 字型大小： 12px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： #ffffff

 

Give it a drop shadow. use the image below for reference

給文字新增投影。按照下圖設定投影，投影的顏色： #7c7c7c

 

 

Step 18

To create a vertical separating line, With the Line Tool (U) create two vertical lines next to each. and fill them with these values: #ffffff – #b3b3b3.

步驟18

建立豎直分割線，用直線工具建立兩條緊挨著的豎直直線（（270，600，1，200）和（271，600，1，200））。顏色分別是：#ffffff和#b3b3b3

 

Align your line like the following image

按下圖排列你的直線

 

Don’t forget to organize your layers. take a look at mine!

別忘組織你的圖層。就像我一樣。

 

Step 19

Make three copies of what we’ve created in the previous two steps. and have something like this!

步驟19

複製上面兩個步驟的3次。完成如下圖

 

Step 20

Let’s create our separator. 
Drag a new horizontal guide after 50px

步驟20

建立水平分隔符

在之前的水平參考線下方50px處新建一條水平參考線

 

With the Elliptical Marquee Tool (M) create a selection like the one below.

Set your foreground color to black (#000000) then click Shift+Backspace to fill your selection. call this layer “separator_bg”.

如下圖，用橢圓選擇工具建立一個橢圓選區

設定你的前景色為黑色（#000000），然後按Shift+Backspace填充你的選區。命名此圖層為separator_bg

建議：用橢圓工具建立一個橢圓（30，870，960，10），顏色： #000000

 

To make it looks blurry, go to Filter > Blur > Gaussian Blur – radius: 3px.

要看起來模糊一點，點選：濾鏡 > 模糊 > 高斯模糊，半徑：3px

 

While selecting “separator_bg” layer selected, create a selection like the one below then hit delete.

當separator_bg層被選中的時候，按下圖建立一個選區，並按delete。按Ctrl+D取消選區

 

Click on Add layer mask icon. and set your gradient editor to black, white, black.

點選新增圖層蒙板圖示。並設定你的漸變編輯器為：黑-白-黑

 

With the Gradient Tool (G) drag with a linear gradient according to the following image.

按照下圖用漸變工具拖動一個線性漸變（從右向左水平拖動，拖動的時候按Shift）

 

Reduce the layer Opacity to 50%

調整該圖層的不透明度為50%

 

With the Line Tool (U) create two horizontal lines on top of each other and place them right above the separator. 
Fill them with #b3b3b3 – #ffffff and add the same layer mask to them.

用直線工具建立兩條水平直線（（30，868，960，1）和（30，869，960，1）），在剛才的那個分隔符的正上方

填充他們的顏色分別是#b3b3b3和#ffffff，並新增和分隔符同樣的圖層蒙版