Photoshop设计网页:某杂志的网站界面

2016-03-19 01:57 0 1 收藏

今天图老师小编给大家展示的是Photoshop设计网页:某杂志的网站界面,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - PS 】

 

最终效果如下

 

下面让我们用线框来着手布局。下图就是我们绘制的简单布局,这么做的目的是要确定每个元素的位置。确定主导航栏包含几个部分、以及最新增加的内容在主页面中的展示位置。

新建一个文件,宽960px、高1200px。这对于屏幕分辨率为1024*768的朋友来说是黄金尺寸。前景色设为#85848c,背景色设为#414048. 拉一个径向渐变当背景如下图所示。


新建图层,重命名为“Header”。使用钢笔工具,绘制帽子形状的路径如下图。右击“Header”图层,选择“混合选项”。勾选“渐变叠加”,选择”线性渐变”,把从上到下的颜tulaoshi.com色设为#242429-#363640。
技巧:使用钢笔工具绘制直线的同时按住Shift键,能保证线的平直度。

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

新建图层,重命名为“Containers”。使用颜色#2e2d33继续根据之前设计好的草图,绘制线框。

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

输入文字

新建图层,重命名为“Nav Divider”。使用铅笔工具绘制垂直分界线。选择铅笔工具,直径设为1px,颜色#000000,绘制另外一条1px的垂直分割线。然后绘制另外一条,颜色#6e6f74。

按Q进入快速蒙版模式,点击“渐变工具”,选择“反射渐变”,拖拽出一个小的反射渐变如下:

123下一页

来源:https://www.tulaoshi.com/n/20160319/1901014.html

延伸阅读
来源:活力盒子 作者:Luycas 本教程的效果图制作的非常小巧,很适合用到一些可以播放音乐的网页中。制作方法也比较简单,播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果,只要注意好图形的层次关系,我们就可以分层来完成效果图。 最终效果 1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色tulaoshi的油漆层,添...
标签: PS PS基础
通常设计师接到设计任务时,如果没有跟创意点相符的原画素材,这时候就需要自己动手。下面给大家介绍一下关于素材再创造打造场景氛围的例子。 下面是一个老玩家分红利的页面,要求有股票、红利一些元素在页面中体现,所以联想到用工作台场景来展现,这样可以更容易的把一些带有股票、红利的元素融入到场景中,再根据构思,寻找一些图片素材,提...
标签: PS PS基础
今天,我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山,咱直接切入正题吧,菇凉帅哥们有兴趣的话,可以打开PS跟着做哟。 开始设置的文件 打开一个新的文档:外形尺寸1200×1640像素,分辨率为72像素/英寸。 我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构,可以看出页面最终的雏形,不过 在设计过...
标签: PS PS基础
通过这个教程,你将学到如何设计一个独特的wordpress主题界面来展示你的内容。此界面布局完全适用于商业网站。如果你想将这个psd文件转化为wordpress主题的话,要求你对css、php有深入的了解。 欢迎来到Grafpedia网站的另一个教程,通过这个教程,你将学到如何设计一个独特的wordpress主题界面来展示你的内容。此界面布局完全适用于商业网站。...
标签: Web开发
在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓功夫在诗外,网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计...

经验教程

118

收藏

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