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

Photoshop
Photoshop 调出人物照片梦幻的橙色调
Photoshop 一个立体的五角星快速制作方法
photoshop 合成梦幻的雪山一角
Photoshop 调出风景照片强对比的蓝黄色
photoshop 自定义图案给多斑的人物磨皮
photoshop 利用图层样式制作简单的玉环
photoshop 鼠绘梦幻的仙界奇观
photoshop 磨皮美白教程 晶莹剔透肤色照片
Photoshop文字动画 简单的倒计时
关于Fireworks 和Photoshop两者之间比较(图片优化的比较)
Photoshop 快速打造另类的暖色照片
Photoshop 打造熊熊燃烧的烈焰人物
Photoshop 残缺的水晶字效果
Photoshop 超可爱的爱心小灰兔
PhotoShop 给人物调出淡黄质感肤色
photoshop 让宝宝模糊照片变清晰教程
PhotoShop 为美女染出绚丽长发效果
Photoshop 几步制作美丽的雪景
PhotoShop 神奇的天空光线照射下来特效
PhotoShop 鼠绘漂亮的国外金发美女

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


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

参考上一篇:

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

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

最终效果图:

 

第二十一步:新建蓝色矩形
  1. 在组“导航”下新建组(图层>新建>组),组命名为“案例”,再新建组放置在“案例”中,并命名为“背景”
  2. 选取矩形工具(U),颜色设置为#219aad,创建宽度为983px,高度为273px的蓝色矩形,(提示:打开(按 F8)信息面板,查看宽度和高度),设置此图层的透明度为55%,命名为“bg4”
3. 在photoshop中打开在上篇中一开始要保存的第二张图片“像素化的蓝色矩形”,把图片移动到此文档中,并且覆盖蓝色 矩形,同样也设置透明度为55%,命名为“bg3”.
4. 按住ctrl键,点击“bg4”中的矢量蒙版缩略图以选中此蒙版

 

5. 新建图层,放在“bg3”上方,命名为“bg2”,选取渐变工具(G),画一个颜色#56b8e5到透明的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区
6、新建图层,放在图层“bg2”上方,命名为“bg1”,选取矩形选框工具(M),像下图一样创建选区,宽度为983px,高度43px
7、选取渐变工具(G),画一个颜色#0f2b42到颜色#2a607f的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区

第二十二步:“注册”与“了解更多”

 

 

  1. 新建组“注册按钮”,放在组“背景”上方,选取圆角矩形工具(U),设置半径2px,像下图一样新建圆角矩形(82*38),并设置如下图一样的图层样式(注意:shap2图层的透明度是100%)

     

     


 

2.  重复步驟1,建“了解更多”的按鈕,并且增加一层,添加箭头,选取自定义形状工具(U)中的第二个箭头形状,像下图一样创建箭头

 

第二十三步:

1. 新建组,命名为“左箭头”,放在组“了解更多按钮” 上方,选取椭圆工具(U),新建颜色为#406F94的圆,并设置“内阴影”和“描边”的图层样式

 

2. 新建图层,选取自定义工具(U)中的箭头形状,创建白色箭头,并设置图层样式“阴影”,透明度为50%
3. 重复步骤2,在右边也创建同样的箭头

 

第二十四步:

1. 在组“案例”中新建组,命名为“图片”,在组里放置一张小图片,双击图层,设置如下图的图层样式“外发光”

2. 新建组,选取字体工具(T),在蓝色矩形左边添加文字说明(这个得自己发挥了),组命名为“文字”。

第二十五步:创建内容区

1. 新建组,放在组“案例”下面,命名为“内容”,在此组里再新建一组“阴影”,选取矩形工具(U),创建一白色矩形(983*181),图层命名为“白色形状”,透明度为90%

2. 像二十一步中的第4点一样,选中“白色形状”的图层蒙版,然后新建图层,命名为“头部阴影”,选取渐变工具(G),画一个颜色为#8f8f8f到透明的渐变,方向为选区的头部到选区的底部,设置图层透明度为50%,然后选取移动工具(V),按键盘上的向下的方向键两次。
3. 新建图层,选取矩形选框工具(M)像下图一样新建选区(273*180)。选取渐变工具(G)画一个颜色#8f8f8f到透明的渐变,然后取消选区,以下图为参考。
4. 添加图层蒙版(图层>图层蒙版>显示全部),使用大一点的黑色软笔刷(我用的是27px),涂在阴影中间部分上面,设置图层透明度为30%,命名为“垂直阴影1”,复制(ctrl+j)图层“垂直阴影1”,移动至右边,重命名为“垂直阴影2”。
5. 选取线条工具(U),新建重1px,颜色为#aebcc7的水平线,将图层转换为智能对象(右击图层,在下拉菜单中选择“转换为智能对象”)图层命名为“水平线”。
6. 选取字体工具(T),编辑网站内容,您也可以使用图片或别的来替换

第二十六步:创建网站底部内容

1. 新建组“底部”,并新建图层,选取矩形选框工具(M),新建选区(982*88)。
2. 设置前景色为#555555,选择一大的软笔刷(我选的是100px),沿着选区头部边缘进行涂画,撤消选区,设置图层透明度为50%,并命名为“渐变”。
最终的“渐变”将是这个样子:

 

3. 新建图层,选择单行选框工具,新建一选区,并以白色填充。按ctrl+d撤消选区。转到菜单 图层>图层蒙版>显示所有,选取一大点的黑色软笔刷像下图一样遮住图层,以下图为参考。设置图层透明度为15%,命名为“直线”。

 

 

4. 添加底部文字说明。
这个大制作终于完功了,里面的字体设置什么的还需要各位看客们多担待!最终效果图: