Photoshop CS3教程:设计制作网页页面隔竖线

2016-01-29 19:29 19 1 收藏

Photoshop CS3教程:设计制作网页页面隔竖线,本例介绍使用Photoshop CS3设计制作网页页面隔竖线,教程主要是通过对1像素的竖线使用渐变叠加设置完成最终效果,希望能给朋友们带来帮助~~

【 tulaoshi.com - PS 】

设计工具为PS CS3,先看做好的效果图:

设计步骤如下:

第一步:

用形状工具或者选框工具设计出菜单的背景来,如下图:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

第二步:

新建一个图层,用缩放工具放大到1000%,用画笔在这个新建图层上画出一条适当长度的1px竖线,颜色为#ffffff;如下图:

[next]

第三步:

给这个图层加"渐变叠加"这个混合选项,设置如下:

1处的颜色为白色竖线的下端附近的背景颜色值,2处的颜色为白色竖线的上端附近的背景颜色值,3处的颜色为#d7d7d7。

效果如下

[next]

第四步:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

复制这个图层,用箭头工具将复制的图层向左移动1px,修改渐变参数,如下图:

效果如下:

100%比例下的效果如下:

剩下的工作就是加上文字与复制图层及排版的问题了,这里不细说了。

来源:http://www.tulaoshi.com/n/20160129/1509535.html

延伸阅读
标签: Web开发
CSS文件的链接方式 ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有三种: 1)类比如“.RedText”、“.BlueText”和“.BigText”等等 2)标签针对原有HTML标签做的重新CSS定义 3)高级伪类、定义了ID的元素,以及综合性定义 CSS规则的应用 ...
标签: PS PS教程
课程总览 在本课程中,朋友们将学习到以下内容: •• 如何通过Photoshop CS3 进行网站首页的版面设计 •• 各种网页版面元素的设计技巧和方法 •• 如何进行网页的切图以及切片的属性设置 •• 如何创建与Flash 整合的FLV 视频 •• 在Dreamweav...
标签: PS PS教程
这是一篇教您如何制作Windows Vista风格的漂亮图标的教程。主要应用了Photoshop中的选框工具绘制图形,并使用图层样式来表现图标的质感。教程中使用了Photoshop CS3中文版作为示范,但实际上Photoshop 6.0以上的版本,其实现和操作方法都基本是一致的。 图1 效果图 1)新建一个 256 × 256 像素的透明背景图像文档。将第一个...
标签: PS PS教程
本文由 中国 八宝猪 原创,转载请保留此信息! 原图和效果图: [next] 夏天到了,很多同學一定都出去旅游拍照了把。拍照的时候天气一定会很好,太阳会很明媚,一不小心相机拍出的照片就会曝光过度,不用怕,今天我就教大家如何將曝光、偏灰的相片改回夏天的顏色。 首我們用PS3打開“小凡的夏天”這張照片,執行,濾鏡—銳...
标签: PS PS教程
上一篇: Photoshop CS3实例教程:网站首页之主体的制作 因为相对于主体来说,内容部分并不是很容易出彩,所以其设计比主体更加需要清晰的思路,并非常考验制作者的耐心。通常情况下内容部分的主要工作都是在Dreamweaver 中,所以这里我们在Photoshop 中所设计的只是一个供参照的外观。 1. 在页面的右侧用矢量矩形工具绘制一个淡绿...

经验教程

971

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部