Photoshop中创建简洁专业的网页设计(3)

19 从你的ps里导入一张图片放置在特色区域上面. 按选择 >全部 (Ctrl/Cmd + A), 然后 编辑 > 复制(Ctrl/Cmd + C). 继续回到我们的网页设计.在”fp container”层上面新建图层,点 编辑> 粘贴 (Ctrl/Cmd + V) 粘贴你的特色项目图片. 重命名为”fp image“. 右击”fp image”层选择剪切蒙版. 现在图片只有在矩形区域可见(“fp container”). 根据如下所示调整你的图片.

20 进入 编辑> 变形>角度(Ctrl/Cmd + T). 从选项条, 点击旋转框,键入-4按下两次调整图层. 继续选择该图层(“fp image”), 设置图层样式为亮度.

21 现在我们开始为特色区域图片创建标题和描述.选择矩形工具(U)创建矩形大小为630px乘以 90px,颜色为#161718. 改变图层不透明度为90% 命名为”title bg“. 如下放置图片.

22 创建矩形630px乘以 1px颜色#命名为“title horizontal line“. 放到内容的顶端命名为 “title bg” 层.

23 根据以下所示,设置矩形内的标题和描述.

标题设置:

字体: Arial, 颜色: #ffffff, 大小: 25pt自动反锯齿选项: 锐利

描述设置:

字体: Arial, 颜色: #a4a4a4, 大小: 12pt自动反锯齿选项: None

创建“快速引用”部分

24 创建另外一个组在 header组内,并且命名为”quick quote“. 选择椭圆形工具新建300px 乘以340px像素的矩形. 放置这个矩形到特色项目选区10px 的地方命名为”qq container“.

25 下一个步骤我们将会复制之前制作的另外一个图层的样式.进入”navigation” 组, 右击”hover”层, 选择复制图层样式, 回到”qq container” 层,右击选择粘贴图层样式.

26 选择水平排版工具. 键入 “Quick Quote“在”qq container” 距离内容层顶部和左边 20px的地方. 设置字体为Trebuchet MS (或者其他web保险字体) 颜色为白色(#ffffff) 反锯齿选项设置为锐利. 我们将使用椭圆形工具创建表单. 选择椭圆形工具,设置半径为 3px. 然后新建两个矩形大小为260px乘以 35px 颜色为白色 (#ffffff). 分别命名为 “field1“和”field2“. 创建第三个矩形,大小为260px 乘以 75px 颜色为白色(#ffffff)命名为”field3“. 使用文字工具分别写上各自标签.