Photoshop简洁网页美工教程

　　27 选择椭圆形工具创建方型大小80px乘以35px命名为"submit btn".

　　28 双击图层打开图层样式对话框 ,勾选左边的渐变叠加对话框. 点击渐变编辑按照如下变更颜色 .

　　29 选择文字工具,键入"Submit" 使用字体Arial, 粗体样式 大小为13pt. 选择"submit 按钮" 和 "Submit 文字").

　　30 在工具面板选择移动工具 在选项条设置水平居中和垂直居中.

　　创建主要内容区域

　　31创建新组命名为"content". 选择椭圆形工具(U).新建300px 乘以 175px 命名为"c01". 放置此层在距离头部30px 以下 距离左边参考线0px. 双击层,设置如下样式.

　　32 我们继续为该层填充内容. 选择文字工具增加文字, "About SmashingDzine". 使用文章工具选择"About" 文字,改变颜色为#b47825. 选择"Smashing"文字,改变颜色为#2f2f2f. 增加简短描述和文字连接. 参考以下设置.

　　标题设置:

　　字体: Trebuchet MS, 样式: Normal,大小: 24pt,反锯齿选项: 锐利

　　描述设置:

　　字体: Arial, 样式: Normal, 大小: 12pt,反锯齿选项: 无, 颜色: #767676

　　连接设置:

　　字体: Arial, 样式: Bold,大小: 13pt, 反锯齿选项:无, 颜色: #252525, 下划线

　　33 紧靠描述的地方我们将增加多一个正方形. 选择矩形工具,颜色 #ffffff, 按住Shift键,维持比例绘制矩形,大小为88px 乘以88px. 移动该矩形到距离左边矩形("c01″).10px 的地方,命名为"border". 设置描边如下:

　　34 创建另一个盒子,大小为82px 乘以 82px放置在"border" 层中央. 命名为"box" 颜色改变为 #d5d5d5. 选择"content" 组的所有图层,进入图层> 新建> 创建组(Ctrl/Cmd + G) 命名为"about".

　　35 复制"about" 组 命名为 "services". 再重新复制一组命名为"portfopo". 我们现在有三个组("about", "services", and "portfopo"). 移动最后的组("portfopo")到右侧的参考线.

　　36 在面板选中三个组,点击图层>分布> 水平中心分布.

　　37 变更 "services" 组 (center) 和 "portfopo" 组 (right) 如下.

　　创建页脚

　　38 新建组命名为"footer". 选择矩形工具(U)然后创建矩形大小为1200px 乘以100px 在我们布局的底部. 命名为 "footer bg". 复制 "header bg" 层的图层样式并且应用.

　　选择文字工具,写上版权声明文字,和链接,样式为Arial, 大小为12pt ,灰色(#dddddd).

　　40 我们开始在邮件增加邮件描述.创建新组在"footer" 层,命名为 "subscribe".选择圆角椭圆形工具(U) 创建矩形大小85px 乘以 35px.图层命名为"subscribe btn".

　　41 重复26步增加表单和标签.

　　42选择文字工具,拼写"Subscribe" 样式Arial,Bold大小13pt. 选择所有层("subscribe btn" 和 "Subscribe text").

　　43 重复28步创建按钮.

　　44选择椭圆矩形工具 (U)设置半径为3px.创建椭圆矩形为210px 乘以35px 应用白色为主(#ffffff)命名该层为"email field".

　　最后结果

　　最后结果已经完成,