• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页制作教程 > Photoshop中创建一个简洁大气的网站效果图

Photoshop中创建一个简洁大气的网站效果图

.................................................................................................................................................................

灵感来源于各种现代网站的设计风格,我们将创建一个干净、简洁大气的网站布局。主要内容为页码顶部的水平导航栏,丰富多彩的标题区域,两列的主要内容布局和网站页脚。

Picture-27

任何一个好的设计都是从纸上开始的,首先用铅笔的绘制出大致的布局。

wireframes

然后规划出一个布局效果图,观察并确定每个页面元素的最佳设计位置。

wireframe

在PS中创建一个新文档,我一般使用适合宽屏显示器大小的尺寸1680px宽。

Picture-1

首先创建导航栏。绘制一个和整个文档的宽度相同的矩形,用白色填充。双击图层打开图层样式,添加渐变从灰色到白色,混合模式为叠加。

Picture-2

下一步,绘制主标题和幻灯片内容展示区域。新建一个图层,绘制一个矩形,然后添加渐变从深紫色到浅紫色,混合模式为叠加。再稍微添加一个内阴影效果。

Picture-3

复制该图层,转化为智能对象,然后栅格化图层,执行滤镜>杂色>添加杂色,设置混合模式为正片叠底,不透明度降低到适合。这样添加一个简单的纹理。

Picture-4

复制公司的标识粘贴到导航栏前面,然后通过图层样式选项添加一些效果。可以添加一个渐变叠加和内阴影。

Picture-5

使用文字工具创建主导航文本,文字颜色为深灰色。

Picture-6

幻灯片主题区域是介绍网站的一个好地方,充满活力的背景颜色能够使访客将注意力集中在这个地方。在这个区域可以添加一些公司的主要介绍文字或者网站最重要信息。

Picture-8

在文字右边添加图片能够使访客更直观的看到网站的主题。

Picture-9

可以在图片的后边添加一个径向渐变制作出一种发光效果,这一额外添加的细节能够将元素从页面中分离出来。

Picture-10

下面开始创建主要标题,绘制一个矩形,填充渐变从灰色到白色。

Picture-11

根据参考线的指引,在左边我们会创建一个主要内容面板,用文字工具添加一些虚构的内容。改变大小和间距使其易于阅读。

Picture-12

主要内容区域的下方可以展示一些公司最新信息。标题链接应该突出一些,给用户的感觉是可点击的,所以可以改变标题的颜色和大小。

Picture-13

在主要内容右侧使用圆角矩形工具画一个方框。填充灰色。

Picture-14

双击该图层,添加图层样式,包括灰色到白色的渐变,灰色描边和一个内阴影。

Picture-17

在这个方框中可以添加一些元素包括一个小的截图和文本段落。

Picture-18

画一个圆角矩形作为按钮,添加一些渐变叠加如灰色到白色,与整体风格相符。

Picture-19

在按钮上添加文字。

Picture-20

将页脚与主内容区分开来,创建一个矩形,填充灰色。

Picture-21

画一个圆形,填充黑色到透明的径向渐变。按Ctrl + T变换形状,通过挤压和拉伸形成一个细长的影子如图形状。

Picture-22

放到合适的位置,然后绘制一个矩形选区,将阴影的上部分删除。

Picture-23

创建页脚,在页脚左边创建一个网站登录区域,选框填充灰色并添加内阴影。

Picture-24

页脚中间添加关于网站的介绍文字,文字大小要比网站主内容文字小一点。

Picture-25

最后在页脚右侧添加联系方式。

Picture-26

延伸阅读:10个步骤创建完美的网站布局

用photoshop制作一个简单的网页效果图

个人网站建设教程(一):photoshop制作网页效果图

本文链接:Photoshop中创建一个简洁大气的网站效果图

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流