当前位置:首页ps教程Photoshop设计一张古典的的网页效果图
Photoshop设计一张古典的的网页效果图
°
  • 素材类型: 资源-素材
  • 上传时间:

本教程主要用Photoshop设计一张古典风格的网站模板,设计师们的作品集网站是他们在网络上的自我表现,绝大多数情况下这些网站表现了设计师的个人风格。有很多种方法来创建作品集网站,下面一起来学习吧。

首先,让我们看看最终的效果

Photoshop设计一张古典的的网页效果图

1. 首先打开960 PSD。把画布尺寸变成 1440 x 1220。我们改变画布的话饮食,这样我们就可以应用大尺寸的纹理素材作为背景。

Photoshop设计一张古典的的网页效果图

2. 创建一个新图层,命名为bgfill,填充颜色 “#aa926a”

Photoshop设计一张古典的的网页效果图

3. 打开纹理,复制并且粘帖到我们的画布中

Photoshop设计一张古典的的网页效果图

4. 创建一个新的图层,命名为 gradient。选择渐变工具,选择线性渐变,从前景色到透明。从画布的头部到底端按住shift键拖拽渐变。

Photoshop设计一张古典的的网页效果图

5. 这就是我们现在的效果

Photoshop设计一张古典的的网页效果图

6. 好了,我们在画布的边缘部分仍然想要一些纹理效果。这是为了宽屏幕用户(1600+resoulation)考虑的,这样在宽屏下看网站不会太枯燥。利用矩形选区选择一个狭窄的区域然后填充渐变。

Photoshop设计一张古典的的网页效果图

7. 现在的效果

Photoshop设计一张古典的的网页效果图

8. 好了,我们要把纸张的纹理放置在页面的中间。记住要在头部的位置预留出一定的空间。好了,这就是我们现在的效果。利用标尺对其页面的边缘。

Photoshop设计一张古典的的网页效果图

9. 我们要给这个纸张添加一些阴影,以增强真实效果。按照下面的参数进行设置

Photoshop设计一张古典的的网页效果图

10.好了,这就是现在的样子

Photoshop设计一张古典的的网页效果图

11. 我们要在这个纸张上添加一个分割,利用刚刚下载的笔刷就可以了

Photoshop设计一张古典的的网页效果图

12.我们需要在头部添加一些细节,让它看起来不会太空。我们可以利用花形状的笔刷。 14. 我们要应用到一些混合属性。双击图层打开图层属性面板,找到图案叠加,载入叫做 Grayscale patterns的图案。下面是相关参数。

12.我们需要在头部添加一些细节,让它看起来不会太空。我们可以利用花形状的笔刷。

Photoshop设计一张古典的的网页效果图

14. 我们要应用到一些混合属性。双击图层打开图层属性面板,找到图案叠加,载入叫做 Grayscale patterns的图案。下面是相关参数。

Photoshop设计一张古典的的网页效果图

15. 现在的效果。

Photoshop设计一张古典的的网页效果图

16.利用矩形选区创建四个菜单,填充不同的颜色。保证这几个菜单图层在纸张图层的下面。我用的是渐变颜色,字体选择的是Italic.

Photoshop设计一张古典的的网页效果图

17. 我们添加了一些内容

Photoshop设计一张古典的的网页效果图

18. 利用形状创建两个箭头。用任何一个 grunge bursh轻轻的擦除形状,让他们看起来有一些纹理。

Photoshop设计一张古典的的网页效果图

添加斜面与浮雕,参数如下。

Photoshop设计一张古典的的网页效果图

19.我们仍然需要添加两个内容分割线。用之前应用过的笔刷来绘制分割线即可。

Photoshop设计一张古典的的网页效果图

20. 好了,添加一些图标和文字。保持图标的透明度在50%。

Photoshop设计一张古典的的网页效果图

字体为Skecth Rockwell,设置内阴影,参数如下。

Photoshop设计一张古典的的网页效果图

21. 添加必要的文字,版权部分等等。这时候我们就得到了最终的效果。

Photoshop设计一张古典的的网页效果图

这是内容页看起来的效果。

Photoshop设计一张古典的的网页效果图

下载地址和交作业请到论坛:http://www.missyuan.com/viewthread.php?tid=441447

温馨提示:

文章标题:Photoshop设计一张古典的的网页效果图

文章链接:https://www.4tu.cn/photoshop/45415.html

更新时间:2024年09月04日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
ps教程

Photoshop创建一个透明玻璃按钮教程

2024-9-4 10:18:37

ps教程

Photoshop简单网页效果图教程

2024-9-4 10:19:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧