ps设计网站的界面(ps网页设计作品)-东辰网

ps设计网站的界面(ps网页设计作品)

本文主要介绍ps设计网站界面(ps网页设计)，下面跟着东辰网详细了解一下吧。

作者:匿名出处:tutu001杂志风格就是我们平时看到的报纸或杂志。其主要特点是排版干净简洁，内容以分块样式为主。这种风格运用到网站上之后，也可以做出一个简洁大方的网站，而且这种制作方法主要是在排版上，没有不必要的效果。

本文推荐的这种杂志式的网站界面也继承了它的特点，没有多余的修饰，只用虚线分割排版，非常适合一些博客网站借鉴。

要开始制作流程，首先需要做的就是设置网格，因为主要步骤都是通过排版来实现的。在PS中建立一个宽度为1680px，高度为1100px的背景，然后左右各360px的空白区域，这样中间部分的宽度为960px。这是目前网站最流行的宽度设置。

然后我们用灰色填充网站界面的左右空白部分，留下中间的杂志网站容器区域，这样更明显。

添加一个导航菜单，或者只使用单词。导航词颜色分别为#7b7c7c和#9A801。

在导航菜单下添加一段文字，我们想用它作为滚动新闻，在文字的末尾加两个小箭头，方便以后用JS代码浏览文字内容。

然后在后面加上社交标签和RSS。对于基于内容的博客或杂志网站来说，社交标签非常重要，几乎每个这样的网站都会用到，我们也不例外。

然后用虚线划分区域。我们网站的所有布局区域都由虚线划分。

然后利用PS中的网格线将网站界面分为三栏，大小标识如下图。

左栏是主要内容区域，以图形形式排列。

为了区分每个标题与内容的独立性，每个图形块都用灰色背景区分，视觉效果更好，标题颜色也是统一的绿色。

然后，为了给读者更好的视觉体验，我们在每个标题的右边加上一个小图标，表示这是一篇文章的标题，让它更加醒目。

中间一栏的内容主要是文字标题和内容介绍，标题颜色还是绿色。本栏目内容主要是推荐文章或者不是最重要的内容。

右栏主要放广告或者其他你想放的内容。

这里我们选择放一些图标菜单，可以连接相应的栏目和内容。

我们会用蓝色和绿色的小图标来装饰它，看起来不错。

目前，我们网站的布局如下。

当然，网站还有很多空白，要让它感觉更饱满，在左侧主要内容栏下加两点标题。

在右栏菜单下添加蓝色背景的图形内容，并使用一些浅色的背景色和图形排列，是常见的网页设计技巧。

继续补充内容，这里我们要遵循一个原则，尽量与众不同。块的内容在水平方向上是平行的，这样网站看起来会很舒服。比如下图，我们添加的一个广告区，平行于左栏内容的上方。

当然，并不是所有都要遵循平行的原则，但最好是让主要区域整齐，以免造成不必要的视觉干扰。

最后我们用虚线来划分三栏内容。

一般来说，如果我们用虚线来划分内容，会增加网站的视觉干扰系数，所以最好在虚线的左右空白部分留出10px以上，这样可以减少虚线带来的视觉干扰，让网站看起来整洁丰富。

[url][/url]最终效果如下。