ps 制作网页首页12 - 网页设计.docx

边。69群组所有关于丝带的图层，命名该群组为”ribbon

边。69群组所有关于丝带的图层，命名该群组为”ribbon“.70在图层”ribbonbackgro

T)添加一些文字。设置颜色为#EAEAB7.55你也可以添加一些小图标。如果你喜欢，可以去这里翻翻看

按钮call-to-action-28-51好了，我们要在色项目”的底部创建两个按钮。选择圆角矩形工

色为#A6A43F,创建一个高为60px的矩形。35设置透明度为15%，命名该图层为”current

最终效果图

看一看我们最终的效果图吧，看上去还不错:

在photoshop中新建文档

-1-

特“色项目”部分，自定义一个图案39好了，我们要创建一个图案。新建一个文档，文件

特“色项目”部分，自定义一个图案39好了，我们要创建一个图案。新建一个文档，文件新建(Ctrl+N

置图层透明度为40%。-11-设置主要内容的背景24双击“bg”图层，打开图层属性面板。根据下图进行

的矩形的上面，在图层面板上单击创建图层剪切蒙版。命名这个图层为“image“.-26-50选择文字工

转换点工具(默认图标是个小钢笔头，在这一组工具中可以找到)，单击这四个锚点。再次选择直接选择工具(A

1在photoshop中新建一个文档，尺寸为980px×830px.

2如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图标尺（Ctrl+R）可以显示标尺。

3在画布的四个边，分别拖拽四条标尺线。在这四条线中间，我们将绘制我们的页面。

创建页面背景

-2-

。56群组所有的文字和图标图层，命名太群组为”button1

。56群组所有的文字和图标图层，命名太群组为”button1“.57创建另一个按钮。-31-58为了

tionbar“.38选择文字工具(T)，给导航添加一些文字，用颜色#A6A43F.在这次的设计中，

),尺寸是5px*5px,透明背景。40设置前景色为#2A2009,在工具栏中选择铅笔工具(B)，在

A43F,创建一个宽940px高240px的圆角矩形。46设置图层透明度为50%，命名该图层为“fe

4选择圆角矩形工具(U),设置圆角半径为10px，设置颜色为#E0E0AC,在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为“bg“.

5好了，现在，我们将扩大我们的画布。首先，缩小我们的画布视图(ctrl+-)，然后点击图像画布尺寸(Alt+Ctrl+C)，然后根据下面的截图设置参数。

-3-

这样你就会看到你所创建的矩形的高度。32双击图层“navigationbar

这样你就会看到你所创建的矩形的高度。32双击图层“navigationbar”打开图层属性面板，按照

以关闭这个文件了。-21-创建特“色项目”区域42选择矩形工具(U),创建一个高为330px的任何颜

半径为8px，颜色为#E1E0C1，创建四个圆角矩形，大小为220px*110px.72设置透明度为

置图层透明度为40%。-11-设置主要内容的背景24双击“bg”图层，打开图层属性面板。根据下图进行

6再一次选择图像画布尺寸(Alt+Ctrl+C)，然后根据下面的截图设置参数。

-4-

置图层透明度为40%。-11-

置图层透明度为40%。-11-设置主要内容的背景24双击“bg”图层，打开图层属性面板。根据下图进行

边。69群组所有关于丝带的图层，命名该群组为”ribbon“.70在图层”ribbonbackgro

。命名该图层为“ribbonbackground“.-33-60选择圆角矩形(U),设置半径为10p

状减去区的按钮，创建一个圆角矩形。按照下面的截图进行操作。-36--37-62创建一个新的图层，右键

7在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景。

-5-

寸为610px*220px的矩形。这个将会是色项目”的图片的位置。，命名该图层为“imagebg.

寸为610px*220px的矩形。这个将会是色项目”的图片的位置。，命名该图层为“imagebg.”

模糊高斯模糊，按照下图进行参数设定。-15-29设置该图层的渲染模式为整片叠底，透明度为30%。

栏中选择渐变工具(G)，从你的画布底部向上拖拽一个从黑色到透明的渐变。可以根据下面的截图进行拖拽。1

性栏中点击从形状减去区按钮，然后创建一个矩形。如图。剪切掉我们不要的那部分。-38-67双击图层，打

8在背景图层上面创建一个新图层，命名为”gradient“.

9在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。

10设置该图层渲染模式为