操作方法 09 创建导航栏创建新组命名为navigation,置于 logo'组上方。 从顶部标尺拖出一条参考线, 直到距离画布顶端150px 的地方. 选择矩形工具(U)画出一直宽度为4px 的水平线,颜色为#e3ab27, 贯穿画布。增加导航链接文字,距离水平线 12px高距离左侧参考线 20px。 选择椭圆形工具画一个宽高分别为 72px *35px的矩形。 移动此图层到 'hover'下面. 使用转换点工具拉直底部圆角.。双击'hover'图层按钮打开图层样式对话框增加渐变颜色(左: #e5ad27, 右: #b27625)。选择横向排版工具(T), 选中文字, 'Home' 更改颜色#ffffff (白色)。 11 新建页眉新建一个组,命名为header。选择矩形工具 (U) 新建矩形宽和高分别为1200px *440px。 移动此图行到矩形,导航栏1px的地方命名为header bg。 双击 header bg层, 选择渐变图层样式增加渐变颜色(左: #2e2226, 右: #7a7556)。
13 创建特色项目选区。在header 组里面创建新组,命名为fp。选择矩形工具(U)创建大小为630px 乘以 340px , 距离header容器顶部和左侧10px的地方。给图层的颜色赋值为#000000 并命名为fp container。
14 从你的ps里导入一张图片放置在特色区域上面.，按选择 >全部 (Ctrl/Cmd + A), 然后 编辑 > 复制(Ctrl/Cmd + C)。 回到的网页设计。在fp container层上面新建图层,点 编辑> 粘贴 (Ctrl/Cmd + V) 粘贴你的特色项目图片。重命名为fp image ，右击fp image层选择剪切蒙版，现在图片只有在矩形区域可见。
17 标题设置字体: Arial, 颜色: #ffffff, 大小: 25pt自动反锯齿选项: 锐利描述设置:字体: Arial, 颜色: #a4a4a4, 大小: 12pt自动反锯齿选项: None
18 创建快速引用部分。 创建另外一个组在 header组内,并且命名为quick quote。选择椭圆形工具新建300px 乘以340px像素的矩形.。放置这个矩形到特色项目选区10px 的地方命名为qq container。复制之前制作的另外一个图层的样式.进入navigation'组, 右击hover层, 选择复制图层样式, 回到qq container'层,右击选择粘贴图层样式。
19 选择水平排版工具， 键入 Quick Quote在qq container'距离内容层顶部和左边 20px的地方。设置字体为Trebuchet MS 颜色为白色(#ffffff) 反锯齿选项设置为锐利。 使用椭圆形工具创建表单，选择椭圆形工具,设置半径为 3px。然后新建两个矩形大小为260px乘以 35px 颜色为白色 (#ffffff)。分别命名为 field1和field2，创建第三个矩形,大小为260px 乘以 75px 颜色为白色(#ffffff)命名为field3 ，使用文字工具分别写上各自标签。
23 选择文字工具增加文字, About SmashingDzine， 使用文章工具选择About文字,改变颜色为#b47825。选择Smashing文字,改变颜色为#2f2f2f， 增加简短描述和文字连接，参考以下设置。
24 增加多一个正方形， 选择矩形工具,颜色 #ffffff, 按住Shift键,维持比例绘制矩形,大小为88px 乘以88px。移动该矩形到距离左边矩形c01，10px 的地方,命名为border 设置描边如下。
25 创建另一个盒子,大小为82px 乘以 82px放置在border层中央 。命名为box 颜色改变为 #d5d5d5。选择content组的所有图层,进入图层> 新建> 创建组(Ctrl/Cmd + G) 命名为about。
31
创建新组在footer层,命名为 subscribe。选择圆角椭圆形工具(U) 创建矩形大小85px 乘以 35px.图层命名为subscribe btn。选择文字工具,拼写Subscribe样式Arial,Bold大小13pt， 选择所有层。选择椭圆矩形工具 (U)设置半径为3px。创建椭圆矩形为210px 乘以35px 应用白色为主(#ffffff)命名该层为email field。完成。
|
|
|
