文档库

最新最全的文档下载
当前位置:文档库 > ps 制作网页首页

ps 制作网页首页

最终效果图

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

ps 制作网页首页

在photoshop中新建文档

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

ps 制作网页首页

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

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

ps 制作网页首页

创建页面背景

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

ps 制作网页首页

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

ps 制作网页首页

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

ps 制作网页首页

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

ps 制作网页首页

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

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

10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.

ps 制作网页首页

11 保持该图层仍为选定状态,点击图层>图层蒙版>显示全部。

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

ps 制作网页首页

13 右键单击图层“gradient” ,在弹出的菜单中,设定转换为智能元件。

14 点击滤镜>杂点>添加杂点。根据下图设置参数。

ps 制作网页首页

15 新建一个图层,用画笔工具(B),选择白色的软笔刷,直径为300px,在你的画布顶端,画一条白线。

16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.

ps 制作网页首页

17 在bg图层上面,新建图层。点击键盘上的D,设置成默认的前景背景色(前景白色,背景黑色),然后点击滤镜>渲染>云彩。

18 在图层面板上,右键单击该图层,在弹出的菜单中,设置该图层为智能元件。命名该图层为“texture“.

ps 制作网页首页

19 保持图层”texture”仍未选定状态。点击滤镜>模糊>动感模糊,根据截图进行参数设定。

ps 制作网页首页

20 然后点击滤镜>锐化>锐化。

21 给图层”texture”添加蒙版,点击图层>图层蒙版>显示全部。

22 选择渐变工具(G) ,从画布底部到顶端,拖拽一个黑色到透明的渐变。23设置图层渲染模式为叠加,设置图层透明度为40%。

ps 制作网页首页

设置主要内容的背景

24 双击“bg” 图层,打开图层属性面板。根据下图进行外发光的参数设定。

ps 制作网页首页

25 新建图层,设置前景色为#2A2009, 选择画笔工具(B) ,用一个比较硬的直径为25px的画笔,在你的圆角矩形的下边缘,画一个圆。

26 在图层面板中右键单击该图层,设置图层为智能对象。

27 然后点击编辑>自由变化(Ctrl + T) ,根据下图进行变形。

ps 制作网页首页

28 点击滤镜>模糊>高斯模糊,按照下图进行参数设定。

ps 制作网页首页

29 设置该图层的渲染模式为整片叠底,透明度为30%。最后,给该图层命名为”shadow“, 把这个图层放在bg图层的上面。

创建导航条

30 好了,接下来,我们来做导航条。选择矩形工具(U) ,设置颜色为#D8D8A5.

31 在你之前创建的那个大的圆角矩形中,创建一个高为60px的矩形,命名该图层为“navigation bar“. Note: 打开信息面板(F8), 这样你就会看到你所创建的矩形的高度。

ps 制作网页首页

32 双击图层“navigation bar” 打开图层属性面板,按照下图设置参数。

ps 制作网页首页

33 你可能注意到,我们刚刚创建的矩形并没有圆角。为了纠正这个小的细节,我们应用剪辑蒙板(clipping mask)这个概念。右键点击图层“navigation bar” layer, 选择创建剪切蒙版。

ps 制作网页首页

34 好了,我们接下来要做的是,创建当前页的按钮。选择矩形工具(U), 设置颜色为#A6A43F, 创建一个高为60px的矩形。

35 设置透明度为15%,命名该图层为”current page button“.

36 然后向下设置剪辑蒙板。

ps 制作网页首页