Photoshop绘制优秀的专业的网站首页布局

15 现在我们开始创建顶部区域,新建一个组,命名为”header“.
16选择矩形工具 (U) 新建矩形宽和高分别为1200px *440px. 移动此图行到矩形,导航栏1px的地方命名为”header bg“.双击 “header bg”层, 选择渐变图层样式增加渐变颜色(左: #2e2226, 右: #7a7556). 如下图所示.

17使用矩形工具新建一个新的矩形 (U) 大小为960px* 360px. 移动到距离”header bg”层顶端40px,距离左边参考线0px的地方. 命名图层为”header container“.
先预览我们到目前为止的设计.
创建”特色项目” 选区
18 接着我们准备开始创建”特色项目” 选区. 在header组里面创建新组,命名为 “fp“.选择矩形工具(U)创建大小为630px乘以 340px , 距离header容器顶部和左侧10px的地方.给图层的颜色赋值为#000000 并命名为”fp container“.

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“. 使用文字工具分别写上各自标签.


27 选择椭圆形工具创建方型大小80px乘以35px命名为”submit btn“.
28双击图层打开图层样式对话框 ,勾选左边的渐变叠加对话框.点击渐变编辑按照如下变更颜色 .

29 选择文字工具,键入”Submit” 使用字体Arial,粗体样式 大小为13pt. 选择”submit 按钮”和 “Submit 文字”).
30在工具面板选择移动工具 在选项条设置水平居中和垂直居中.

最新评论