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

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

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

【 tulaoshi.com - PS 】

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

设计步骤如下:

第一步:

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

第二步:

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

[next]

第三步:

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

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

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

效果如下

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

[next]

第四步:

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

效果如下:

100%比例下的效果如下:

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

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

延伸阅读
标签: PS PS教程
这是一篇教您如何制作Windows Vista风格的漂亮图标的教程。主要应用了Photoshop中的选框工具绘制图形,并使用图层样式来表现图标的质感。教程中使用了Photoshop CS3中文版作为示范,但实际上Photoshop 6.0以上的版本,其实现和操作方法都基本是一致的。 图1 效果图 1)新建一个 256 × 256 像素的透明背景图像文档。将第一个...
标签: PS PS教程
xhtml+css网站重构web标准等等之类的文章太多了,我就不重复了,发个最简单的制作xhtml+css页面的方法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到。 开始吧: 1、打开photoshop cs2 ,打开设计出的网站首页。用切片工具切好。   2、点 文件-》存储为web所用格式 快捷键为ctrl+alt+shift+s ,点右上倒...
标签: Web开发
CSS文件的链接方式 ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有三种: 1)类比如“.RedText”、“.BlueText”和“.BigText”等等 2)标签针对原有HTML标签做的重新CSS定义 3)高级伪类、定义了ID的元素,以及综合性定义 CSS规则的应用 ...
什么是格式塔? 格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。形状和图形在德语中是Ges...
来源:照片处理网 最终效果图   原图   自从2006年Adobe公司推出CS3以来,已经一年多了,从最初的测试版到今天的扩展版的正式推出,使Photoshop用户受益匪浅,今年使用cs3进行图像处理应该是主流了。还在使用7.0版本的朋友们赶快升级吧。要知道从7.0到CS3中间已经升级过好几个版本了。7.0后是8.0、9.0,如今的CS3已经是...

经验教程

63

收藏

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