典型的web2.0网站界面制作步骤详解(=).docVIP

步骤 17 现在我们来创建一个“read more” 按钮，运用圆角矩形工具 (U) 创建一个大小为 100×30px，半径为5px 的圆角矩形，用任何颜色填充。 参考下面图像，给图层添加图层样式。 运用椭圆工具(U)创建一个15×15px的椭圆，填充颜色为： #4d4d4d.为了能够正确地对齐，我们先选择椭圆所在的图层和矩形所在的图层，当两个图层都被选定，单击对齐水平中心。 按下 “+”, 填充白色 (#ffffff) 位置如下图所示。 输入文字 “read more” ，字符设置如下： 字体类型: Tahoma (get it from here)字体大小: 12px字体粗细: Regular反锯齿设置： None颜色: #ffffff 添加阴影。参考下图设置。 步骤 18 创建一个垂直的分隔符，运用直线工具(U) 创建两条紧挨着的线，填充颜色值为 #ffffff – #b3b3b3. 对齐这两条线如下图所示 不要忘了组织你的图层，看一下我的图层。 步骤 19 重复三次以上两个步骤，然后效果如下图所示！ 步骤 20 让我们来创建一个分隔符 在50px之后拖拽一条新的参考线。 用椭圆先框工具 (M) 创建一个选区如下图所示： 设置前景色为(#000000)，然后按下 Shift+Backspace填充选区，将图层命名为“separator_bg”。 为了使它有模糊的效果，执行文件 模糊 高斯模糊– 半径：3px. 选择 “separator_bg” 图层，创建一个选区然后删除。 单击添加图层蒙版标志然后设置渐变编辑器为黑，白，黑。 用渐变工具 (G) 根据下图所示拖拽一个线性渐变。 降低图层透明度度为50%。 用直线工具(U) 在分隔符顶部创建两条水平线，把place them right above the separator.填充颜色为：#b3b3b3 – #ffffff ，然后为他们添加同样的图层蒙版。 步骤 21 我们现在要制作下方的内容区域，距离50px 拖拽一条新的水平参考线。 输入标题，字符设置如下： 字体类型： Rockwell字体大小： 30px字体粗细： Regular反锯齿设置：Smooth颜色： #81aa48 如下图所示拖拽两条新的水平参考线。 输入一些文字字符设置如下：字体类型： Arial字体大小： 14px字体粗细： Regular无锯齿设置：None颜色： #505150 距离160px拖拽一条新的参考线作为内容区域的下边界。 步骤 22 输入另一个标题和文本，字符设置同上个步骤。 用键盘输入一个引号，字符设置如下：字体类型：Arial字体大小：200px字体粗细：Regular反锯齿设置：Smooth颜色： #505150降低图层透明度度为50%。 输入一些你自己的或者是引用的话，字符设置如下字体类型： Arial字体大小：14px字体粗细：Italic反锯齿设置： Smooth颜色：#81aa48 步骤 23 为了创造一个垂直的分隔线，我们创建两条紧挨着的线，线条颜色分别设置为：#ffffff – #b3b3b3. 确定你的图层组织起来，看一下我是怎么组织它们的。 步骤24 像左边一样输入另一个标题 （尝试着写一些东西代表团队，比如，我写下了“Our Team”) 用矩形工具 (U)创建一个90×90px 的矩形，然后以任何颜色填充，命名这个图层为“photo1_holder”。这个区域将会作为团队成员的展示区。执行描边，参考如下图所示。 放置团队成员的一张图片，命名这个图层为“photo1″，确定图层 “photo1″是在“photo1_holder”图层的上方，然后右击 “photo1″图层选择添加剪贴蒙版，你会看到如下图所示的样子。 步骤 25 输入一些关于团队成员的文字，字符设置如下：字体类型： Arial字体大小：14px字体粗细：Regular反锯齿设置 Smooth颜色：#7ba344 我们将创造社会媒体图标。先从博客开始，输入“t”字符设置如下： 字符类型： Pico-Black (get it from here)字体大小：30px字体粗细： Regular反锯齿设置：Smooth颜色： #2fcfff参考下图设置执行描边。 让我们再创建一个LinkedIn的连接图片！输入“in”并设置以下文字属性： 字体类型： Myriad Pro (get it from here)字体大小：30px字体粗细：Bold反锯齿设置 Smooth颜色：#0081ac Facebook!? 输入“f”并设置以下文字属性： 字体类型： Klavika (get it from here)字体大小：