当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > PS教程:绘制清新的色彩生动的网页布局(1)

Photoshop
photoshop 合成身披盔甲的青蛙
Photoshop 可爱的漩涡字效果
Photoshop 超酷的油画效果
Photoshop 去除照片中的杂物
photoshp 合成燃烧的飞弹
Photoshop 水晶卡通人像图标
Photoshop 绘制矢量风格地球
photoshop Sketch master外挂滤镜绘制国画
震撼视觉的人物照片艺术设计
Photoshop 网页布局设计的关系
Photoshop 风景照片梦幻的金色调
Photoshop 给美女头像美白及润色
Photoshop 彩色的彗星字效果
Photoshop 打造一张颓废风格爱情壁纸
Photoshop 给美女加上质感肤色
photoshop 鼠绘个性美女头像
Photoshop 黑白美女头像上色
超详细人物转手绘效果 眼睛部分处理
Photoshop 可爱女孩转成大眼的芭比娃娃
Photoshop 帅哥照片个性的暗黄色

Photoshop 中的 PS教程:绘制清新的色彩生动的网页布局(1)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-01   浏览: 817 ::
收藏到网摘: n/a

此教程将教您如何用photoshop创建清新、色彩生动的网页布局。在此我也非常感谢来自ThemeForest原布局设计者Kuntiz,在他的允许下才能完成这篇教程。

 

以下是创建过程中所需的图片:

第一步:新建文档 

    1200px * 750px,选择渐变工具(G),对背景图层从上(#792700)到下(#000000)新建渐变,如下图所示:

第二步:添加色彩

  新建图层,选择笔刷工具(B),选取直径为300px的软笔刷,分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部,图层命名为“颜色”。如下图所示:

  

 

第三步:添加纹理

  打开一开始保存好的“绿叶”图片,使用移动工具(V),移动到当前文档内,右击新图层,选择“转换为智能对象”,然后转到菜单:滤镜>艺术化>胶片颗粒,滤镜>像素化>马赛克,参照下图的设置,最后设置此图层的“混合模式”为“差值”,透明度为30%,图层命名为:“纹理”。如下图所示:

 

第四步:为内容添加黑色背景

    新建图层,选择圆角矩形工具(U),设置3px的半径,创建一个黑色圆角矩形框,双击图层,弹出“图层样式”对话框,如下图一样设置“阴影”,最后设置此图层的透明度为70%,图层命名为:“黑色形态”,如下图所示:

 

第五步:添加组管理图层

  按住ctrl键,选择目前为止创建的所有图层,进行图层编组(ctrl+g),组命名为:背景,如下图所示。

第六步:创建更多组

   新建组(图层>新建>图层编组),组命名为:主页,在“主页”内再增加一个组,组命名为“logo”,如图所示:

 

第七步:创建logo和网站副标题

  在“logo”的组里新建图层,选取字体工具(T),书写您的网站名字,颜色为#f4f4f4。双击图层,按照下图设置图层样式,“斜面与浮雕”,“外发光”,“渐变叠加”。然后再新建图层编辑网站副标题,颜色为#eeeeee。
 

第八步:创建”注册“,”登录“按钮

  现在将在布局的右上角创建两个按钮。
  新建组,命名为“注册|登录”;选取圆角矩形工具(U),像我一样创建圆角矩形;双击形状图层,弹出图层样式对话框,如下图进行设置。
  设置前景颜色为白色,用字体工具(T)在按钮上编写“注册|登录”,设置字体层的透明度为75%。

 

第九步:创建1px高的蓝色水平线

  新建组,命名为“导航”,新建图层,选取单行选框工具并在文档新建1px高的选区,以颜色#406f94进行填充,使用矩形选框工具(M)删除超出黑色矩形的选区,设置透明度为40%,层命名为“横线”。

第十步:给导航添加渐变

  新建图层,选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区,转到滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为“渐变”,且在渐变与横线之间留出1px的距离。

上篇先到这,下周咱们继续!