|
|
本例中我们利用photoshop设计制作一款清新、色彩生动的网页布局。在此我也相当感谢来自ThemeForest原布局设计者Kuntiz，在他的启发下我才能做完这篇教程。
下面是教程中所需的素材：
绿叶
像素化的蓝色矩形
步骤1：创建文档
1200px * 750px，选取渐变工具（G），对背景图层从上（#792700）到下（#000000）创建渐变，见下图：
步骤2：加上颜色
创建图层，选取笔刷工具（B），选择直径为300px的软笔刷，分别以红（#be4816）、黄（#c0952c）、蓝（#33afc6）三种色彩抹在背景层的上半部，图层命名为“色彩”。见下图：
步骤3：加上纹理
打开一开始保存好的“绿叶”照片，运用拖动工具（V），拖动到当前文档内，右击新图层，选取“切换为智能对象”，之后转到菜单：滤镜>艺术化>胶片颗粒，滤镜>像素化>马赛克，参照下图的设定，最终设定此图层的“混合模式”为“差值”，透明度为30%，图层命名为：“纹理”。见下图：
步骤4：为内容加上黑色背景
创建图层，选取圆角矩形工具（U），设定3px的半径，新建一黑色圆角矩形框，双击图层，弹出“图层样式”对话框，见下图相同设定“阴影”，最终设定此图层的透明度为70%，图层命名为：“黑色形态”，见下图：
步骤5：加上组管理图层
按住ctrl键，选取目前为止新建的所有图层，执行图层编组（ctrl+g），组命名为：背景，见下图。
步骤6：新建更多组
创建组（图层>创建>图层编组），组命名为：主页，在“主页”内再提高一组，组命名为“logo”，见下图：
步骤7：新建logo与网站副标题
在“logo”的组里创建图层，选择字体工具（T），书写您的网站名字，色彩为#f4f4f4。双击图层，按照下图设定图层样式，“斜面和浮雕”，“外发光”，“渐变叠加”。之后再创建图层编辑网站副标题，色彩为#eeeeee。
步骤8：新建”注册“，”登录“按钮
此时把在布局的右上角新建两个按钮。
创建组，命名为“注册｜登录”；选择圆角矩形工具（U），像我相同新建圆角矩形；双击外形图层，弹出图层样式对话框，见下图执行设定。
设定前景色彩为白色，用字体工具（T）在按钮上编写“注册｜登录”，设定字体层的透明度为75%。
步骤9：新建1px高的蓝色水平线
创建组，命名为“导航”，创建图层，选择单行选项框工具并在文档创建1px高的选区，以色彩#406f94执行填充，运用矩形选项框工具（M）删除超出黑色矩形的选区，设定透明度为40%，层命名为“横线”。
步骤10：给导航加上渐变
创建图层，选择矩形选项框工具（M）新建选区（提示：你可运用标尺），之后运用渐变工具（G）从底部到头部画一从#35423e到透明的渐变。按Ctrl+D撤消选区，转到滤镜>杂色>加上杂色，并按照下图执行设定。给此图层命名为“渐变”，且在渐变和横线之间留出1px的距离。
步骤11：编辑导航菜单 选择字体工具（T），并在导航栏上编辑菜单，这儿我应用的字体是Adobe仿宋体，之后双击字体图层，按下P1样设定图层样式。
步骤12：新建分隔线此时我们把在菜单栏中新建分隔线，创建图层，选择单列选项框工具，并在菜单的布局上单击一下，选择矩形选项框工具（M），并在选项栏上选取“交叉选区。
对新的选区以白色填充，最终按ctrl+d，取消选项框。最后结果见下图：
步骤13：双击上步创建的图层，命名为“竖线1”，并执行见下图层样式的设定。
步骤14：按ctrl+j拷贝图层“竖线1”，重命名为“竖线2”。选择拖动工具（V），单击键盘上的方向键，朝右拖动1px，并修改“渐变叠加”的设定。如下：
您的图会是如此：
按住ctrl，选取“竖线1”与“竖线2”，切换为“智能对象”，新图层命名为“分隔线”。
步骤15：新建蓝色高光 一，创建图层，放置在“分隔线”下，选择矩形选项框工具（M）新建像下P1样的选区
二，以色彩#35423e填充该选区，按ctrl+d撤消选项框，右击，在下拖菜单中选取“切换为智能对象” 三，去往菜单 滤镜>模糊>高斯模糊，并设定半径为4px 四，再次 滤镜>杂色>加上杂色，数量为0.7%，属性为第一选项，像步骤10那样设定 五，设定图层透明度为60%，命名为“高光” 照片最后为：
步骤16：为图层“分隔线”新建图层蒙板 选定图层“分隔线”，转到菜单 图层>图层蒙板>显示所有，选取渐变工具（G），创建一从黑到透明的渐变，方向是从上到中间。
步骤17：拷贝图层“分隔线”，“高光” 同时选中“分隔线”，“高光”这两个图层，运用拖动工具（V），按住alt+shift，移动两个图层中的对象至另一菜单和菜单之间，这就非常于拷贝“分隔线”，“高光”的操作，重复移动动作，依照您的菜单多少来拷贝
步骤18：为图层“分隔线”，“高光”编组 选取所有的图层“分隔线”，“高光”，按ctrl+g，执行编组，组命名为“分隔线”。 步骤19：为当前页面新建激活按钮 此时我们把为当前菜单页面新建一激活按钮，来区分其它的菜单按钮。选择矩形工具（U）并像下P1样创建矩形，并将这图层放置在“菜单”图层的下面，双击图层，执行“渐变叠加”的设定，图层命名为“激活按钮”，设定透明度为50%。
完成图：
步骤20：新建搜索框 创建组，命名为“搜索”，放置在“导航”组上方。选择圆角矩形工具（U），设定半径3px，前景色为#104f59，新建圆角矩形，命名新的图层为“文本区域”，透明度为80%。
选择矩形工具，在“文本区域”右半新建一矩形，并见下图执行设定图层样式“渐变叠加”，之后右击图层，在下拖菜单中选取“新建快速蒙板”，层命名为“按钮”。
选择字体工具（T），运用白色，在“按钮”上书写“搜索”两字，图层透明度为75%。
选择线条工具（U），运用色彩#123036新建直线，图层命名为“直线”，并放置在“按钮”图层下面，将此直线拖动在搜索框与按钮之间。
步骤21：创建蓝色矩形</STRONG> 在组“导航”下创建组（图层>创建>组），组命名为“案例”，再创建组放置在“案例”中，并命名为“背景” 选择矩形工具（U），色彩设定为#219aad，新建宽度为983px，高度为273px的蓝色矩形，（提示：打开(按 F8)信息面版，观察宽度与高度），设定此图层的透明度为55%，命名为“bg4”
3. 在photoshop中打开在上篇中一开始要保存的第二张照片“像素化的蓝色矩形”，将照片拖动到此文档中，并且覆遮蓝色 矩形，一样也设定透明度为55%，命名为“bg3”.
4. 按住ctrl键，单击“bg4”中的矢量蒙板缩稍图以选中此蒙板
5. 创建图层，放到“bg3”上面，命名为“bg2”，选择渐变工具（G），画一色彩#56b8e5到透明的渐变，方向是从选区底部到选区头部，之后按ctrl+d撤消选区
六，创建图层，放到图层“bg2”上面，命名为“bg1”，选择矩形选项框工具（M），像下P1样新建选区，宽度为983px，高度43px
七，选择渐变工具（G），画一色彩#0f2b42到色彩#2a607f的渐变，方向是从选区底部到选区头部，之后按ctrl+d撤消选区
步骤22：“注册”和“理解更多”
创建组“注册按钮”，放到组“背景”上面，选择圆角矩形工具（U），设定半径2px，像下P1样创建圆角矩形（82*38），并设定见下图相同的图层样式（留意：shap2图层的透明度是100%）
2. 重复步?1，新建“理解更多”的按?，并且提高一层，加上箭头，选择自定义外形工具（U）中的第二个箭头外形，像下P1样新建箭头
步骤23：
1. 创建组，命名为“左箭头”，放到组“理解更多按钮” 上面，选择椭圆工具（U），创建色彩为#406F94的圆，并设定“内阴影”与“描边”的图层样式
2. 创建图层，选择自定义工具（U）中的箭头外形，新建白色箭头，并设定图层样式“阴影”，透明度为50%
3. 重复过程2，在右半也新建一样的箭头
步骤24：
1. 在组“案例”中创建组，命名为“照片”，在组里放置一幅小照片，双击图层，设定如下图的图层样式“外发光”
2. 创建组，选择字体工具（T），在蓝色矩形左半加上文字描述（这个得个人发挥了），组命名为“文字”。
步骤25：新建内容区
1. 创建组，放到组“案例”下方，命名为“内容”，在此组里再创建一组“阴影”，选择矩形工具（U），新建一白色矩形（983*181），图层命名为“白色外形”，透明度为90%。
2. 像二十一步中的第4点相同，选中“白色外形”的图层蒙板，之后创建图层，命名为“头部阴影”，选择渐变工具（G），画一色彩为#8f8f8f到透明的渐变，方向为选区的头部到选区的底部，设定图层透明度为50%，之后选择拖动工具（V），按键盘上的朝下的方向键两次。
3. 创建图层，选择矩形选项框工具（M）像下P1样创建选区（273*180）。选择渐变工具（G）画一色彩#8f8f8f到透明的渐变，之后取消选区，下面图为参考。
4. 加上图层蒙板（图层>图层蒙板>显示全部），运用大一些的黑色软笔刷（我用的是27px），抹在阴影中间部分上方，设定图层透明度为30%，命名为“垂直阴影1”，拷贝（ctrl+j）图层“垂直阴影1”，拖动至右半，重命名为“垂直阴影2”。
5. 选择线条工具（U），创建重1px，色彩为#aebcc7的水平线，把图层切换为智能对象（右击图层，在下拖菜单中选取“切换为智能对象”）图层命名为“水平线”。
6. 选择字体工具（T），编辑网站内容，您也可运用照片或者别的来替换
步骤26：新建网站底部内容
1. 创建组“底部”，并创建图层，选择矩形选项框工具（M），创建选区（982*88）。
2. 设定前景色为#555555，选取一大的软笔刷（我选的是100px），沿着选区头部边上执行涂抹，撤消选区，设定图层透明度为50%，并命名为“渐变”。
最后的“渐变”把是这个样子：
3. 创建图层，选取单行选项框工具，创建一选区，并以白色填充。按ctrl+d撤消选区。转到菜单 图层>图层蒙板>显示所有，选择一大点的黑色软笔刷像下P1样盖住图层，下面图为参考。设定图层透明度为15%，命名为“直线”。
4. 加上底部文字描述。
这个大做终于完功了，里面的字体设定什么的还想要大家看客们多担待！完成效果图： |
|
窥视卡
雷达卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡