S网设计教程VI在 hotosho 中创建一个食物博客布局

PS网页设计教程VI——在Photoshop中创建一个食物博客布局

作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。

本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。 约定：

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数

例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77 例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

In this tutorial I will show you how to use one of the latest vectors pack from Grafpedia to create a clean and appetizing food blog layout in Photoshop. I’ll show you how to create a kitchen tablecloth pattern in Photoshop, how to create an image slider and how to use vectors in a web layout.

在本教程中将展示如何在PS中创建清爽、勾人食欲的食物博客网站，要用到从Grafpedia下载的矢量图形包。我将展示如何创建厨房桌布图案，如何创建图片滑块，如何在布局中运用矢量图形

Introduction

In this tutorial we will use the 960 Grid System. Go ahead, download it and unzip the archive file. Then open the “960_grid_12_col.psd” file in Photoshop (you will find it inside the “photoshop” folder which is located inside the “templates” folder). 简介

在本教程要用到960布局系统。下载并解压该布局文件。然后在PS中打开

960_grid_12_col.psd（你将会在photoshop文件夹下的templates下的子文件夹找到它） After you open the .psd file in Photoshop you will see 12 red bars. That is the grid system that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” group.

当你在PS中打开psd文件后，你会看到12条红色的横条。这是布局系统要用到的，你可以通过点击12 col Grid组前的眼睛图标去隐藏这些横条

During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see its exact width and height. This .psd file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.

在本教程中将要求您创建具有一定尺寸的形状。打开信息面板（点击：窗口 > 信息），当您创建一个形状时您将看到其确切的宽度和高度。此.psd 文件包含一些参考线将非常有用。要激活它们，点击：视图 > 显示 > 参考线，或使用快捷键 Ctrl + ;。一般我需要的是，隐藏红色横条和当我需要时才激活参考线。

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

现在在960布局系统的上方，我们即将开始创建实在的网页布局，让我们开始教程吧 注：在本教程中，将不使用960布局系统，原因不多讲了，所以本翻译教程和原教程的操作还是有一点差别的 Step 1

We’ll start by increasing the size of our document to give us enough space to work with. Go to Image > Canvas Size and use the settings from the following image. 步骤1

首先要调整文档到合适的大小。点击：图像 > 画布大小，按照下图进行设置

由于没有用960布局系统，故此步为新建文档，尺寸：1200px*1400px，如下图所示：

Go to Layer > New Fill Layer > Solid Color and use the color #fbe0b1. Then right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below.

点击：图层 > 新建填充图层 > 纯色，颜色： #fbe0b1。在该图层上鼠标右键选择转化为智能对象。然后，点击：滤镜 > 杂色 > 添加杂色，参数设置如下图所示：

Step 2 – Creating a pattern for the background 步骤2 - 创建背景图案

Create a new document (Ctrl/Cmd + N) with the size 80px by 80px. Select the Rectangle Tool (U) and create a rectangle with the size 80px by 40px and the color #b52a51 at the top of your document. Name this layer “horizontal” and set its opacity to 20%.

新建文档（Ctrl/cmd+N），尺寸：80px*80px。用矩形工具在文档的顶部新建一个矩形（0，0），尺寸：80px*40px，颜色： #b52a51。命名次图层为horizontal，设置不透明度为20%

Create another rectangle with the size 40px by 80px in the left side of your document. Name this layer “vertical” and set its opacity to 30%.

在文档的左边新建另一个矩形（0，0），尺寸：40px*80px，颜色： #b52a51，命名此图层为vertical，设置不透明度30%

Select these two layers and hit Ctrl/Cmd + G to put them inside a group. Name the group “pattern” and set its opacity to 30%.

选中这两个图层，然后点击Ctrl/Cmd + G使他们在一个组里面。命名此组为pattern，设置不透明度为30%

Click on the eye icon of the “Background” layer to hide it. Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document and go back to the first one.

点击背景图层前的眼睛图标隐藏该图层。然后点击：编辑 > 定义图案，给你的图案取名并点击确定。然后，你可以关闭本文档，回到前一个文档

Step 3 – Applying the pattern to the background

Create a new layer and fill it with white using the Paint Bucket Tool (G). Name this layer “pattern” and set its Fill to 0%. Then double-click on it to open the Layer Style window and use the settings from the following image for Pattern Overlay. 步骤3 - 给背景添加图案

新建图层，并且用油漆桶工具填充，颜色白色。命名此图层为pattern，设置填充为0%。然后双击打开图层样式窗口，按照下图设置样式