Photoshop网页设计:杂志风格网站界面

作者:佚名 出处:tutu001 杂志风格也就是我们平时看到的报纸或杂志,主要特点是排版干净简洁,主要以区块对内容进行风格,这种风格应用到网站中后,也能制作出简洁大方的网站,而且这种制作方法主要在排版,无需多余效果。 本文推荐的这款杂志风格网站界面也是秉承了其特点,

Photoshop绘制木质纹理的网站首页模板

作者:佚名 出处:发现吧 在本文中,我将给大家演示如何使用飞溅的笔刷和少量新奇的技术制作一个木质背景的网站. 你可以定制为公司或者自己的网站. 另外, 还提供PSD 模板下载. 预览 先看最终结果 所需要的素材 1. 木质素材 2. 邮件与电话图标 3. 飞溅笔刷 4. 网点图案 在本教


作者:佚名   出处:tutu001

杂志风格也就是我们平时看到的报纸或杂志,主要特点是排版干净简洁,主要以区块对内容进行风格,这种风格应用到网站中后,也能制作出简洁大方的网站,而且这种制作方法主要在排版,无需多余效果。

本文推荐的这款杂志风格网站界面也是秉承了其特点,没有多余修饰,只是用虚线来分割排版,很适合一些博客网站借鉴

开始制作过程,首先我们要做的是设置好网格,因为主要步骤都是通过排版实现,在PS中建立一个宽1680px,高1100px的背景,随后左右各留出360px的空白区域,这样中间部分宽度就是960px。这是目前网站最流行的宽度设置
Photoshop网页设计:杂志风格网站界面插图 

之后我们将网站界面左右空白部分用灰色填充,留出中间的杂志网站容器区域,这样看起来更明显
Photoshop网页设计:杂志风格网站界面插图(1) 

Photoshop网页设计:杂志风格网站界面插图(2) 

我们将网站标志放在正中央,标志很简单,都是字母组成,使用comfortaa字体,中间文字使用绿色
Photoshop网页设计:杂志风格网站界面插图(3) 

添加导航菜单,还是只需要使用文字就行,导航文字颜色分别为#7b7c7c与#92a801
Photoshop网页设计:杂志风格网站界面插图(4) 

 


在导航菜单下面加上一段文字,我们想用其作为滚动新闻,在文字最后还可以加上两个小箭头,以后方便利用JS代码来对文字内容进行翻页浏览
Photoshop网页设计:杂志风格网站界面插图(5) 

然后在后面加上社会化标签与RSS,对于以内容为主的博客或杂志网站来说,社会化标签是很重要的,几乎每个此类网站都会使用,我们也不例外
Photoshop网页设计:杂志风格网站界面插图(6) 

接着用虚线进行区域分割,我们网站所有的布局区域都是统一用虚线分割
Photoshop网页设计:杂志风格网站界面插图(7) 

随后利用PS中的网格线来将网站界面划分成三栏,大小如下图标识
Photoshop网页设计:杂志风格网站界面插图(8) 

左侧栏是主要内容区域,以图文形式排列
Photoshop网页设计:杂志风格网站界面插图(9) 

为了区分突出每个标题与内容的独立性,每个图文区块都使用灰色背景进行区分,这样视觉上更出色,标题颜色也使用统一的绿色
Photoshop网页设计:杂志风格网站界面插图(10) 

之后为了让读者获得更好视觉体验,我们为每个标题右侧添加一个小图标,以表示这是一篇文章的标题,让其更醒目
Photoshop网页设计:杂志风格网站界面插图(11) 

中间栏内容以文字标题与内容介绍为主,标题颜色依然用绿色,这栏放的内容主要是推荐文章或并非最重要的内容
Photoshop网页设计:杂志风格网站界面插图(12) 

 


右侧栏主要放广告或其他你想要放的内容,这里我们选放上一些图标菜单,可以连接到对应的栏目与内容中
Photoshop网页设计:杂志风格网站界面插图(13) 

我们将用蓝色与绿色相间的小图标进行装饰,看上去效果不错
Photoshop网页设计:杂志风格网站界面插图(14) 

目前来看我们的网站布局如下
Photoshop网页设计:杂志风格网站界面插图(15) 

当然网站还有很多空白处,我们要让其感觉比较饱满,在左侧主要内容栏下加上两分栏的标题内容
Photoshop网页设计:杂志风格网站界面插图(16) 

在右侧栏菜单下加上蓝色背景的图文内容,使用一些淡色系的背景色与图文排列是很常用的一种网页设计技巧
Photoshop网页设计:杂志风格网站界面插图(17) 

继续加入内容,这里我们要遵循一个原则,尽量将不同区块内容在横向上都平行,这样网站看上去的效果会很舒服,比如下图中我们加入的一块广告区域就与左侧栏内容顶部平行
Photoshop网页设计:杂志风格网站界面插图(18) 

 


当然并非所有都要遵循平行原则,但主要区域还是做得整齐一点较好,这样避免视觉上的无谓干扰
Photoshop网页设计:杂志风格网站界面插图(19) 

最后我们再用虚线来分割三分栏内容,一般来说如果用虚线分割会增加网站视觉上的干扰系数,所以虚线左右空白部分最好都留有10px以上的区域,这样可以减少虚线产生的视觉干扰,同时又能让网站看上去整齐丰富
Photoshop网页设计:杂志风格网站界面插图(20) 

[url]www.tutu001.com[/url]最后完成效果如下
Photoshop网页设计:杂志风格网站界面插图(21) 

 




作者:佚名   出处:tutu001

杂志风格也就是我们平时看到的报纸或杂志,主要特点是排版干净简洁,主要以区块对内容进行风格,这种风格应用到网站中后,也能制作出简洁大方的网站,而且这种制作方法主要在排版,无需多余效果。

本文推荐的这款杂志风格网站界面也是秉承了其特点,没有多余修饰,只是用虚线来分割排版,很适合一些博客网站借鉴

开始制作过程,首先我们要做的是设置好网格,因为主要步骤都是通过排版实现,在PS中建立一个宽1680px,高1100px的背景,随后左右各留出360px的空白区域,这样中间部分宽度就是960px。这是目前网站最流行的宽度设置
Photoshop网页设计:杂志风格网站界面插图 

之后我们将网站界面左右空白部分用灰色填充,留出中间的杂志网站容器区域,这样看起来更明显
Photoshop网页设计:杂志风格网站界面插图(1) 

Photoshop网页设计:杂志风格网站界面插图(2) 

我们将网站标志放在正中央,标志很简单,都是字母组成,使用comfortaa字体,中间文字使用绿色
Photoshop网页设计:杂志风格网站界面插图(3) 

添加导航菜单,还是只需要使用文字就行,导航文字颜色分别为#7b7c7c与#92a801
Photoshop网页设计:杂志风格网站界面插图(4) 

 


在导航菜单下面加上一段文字,我们想用其作为滚动新闻,在文字最后还可以加上两个小箭头,以后方便利用JS代码来对文字内容进行翻页浏览
Photoshop网页设计:杂志风格网站界面插图(5) 

然后在后面加上社会化标签与RSS,对于以内容为主的博客或杂志网站来说,社会化标签是很重要的,几乎每个此类网站都会使用,我们也不例外
Photoshop网页设计:杂志风格网站界面插图(6) 

接着用虚线进行区域分割,我们网站所有的布局区域都是统一用虚线分割
Photoshop网页设计:杂志风格网站界面插图(7) 

随后利用PS中的网格线来将网站界面划分成三栏,大小如下图标识
Photoshop网页设计:杂志风格网站界面插图(8) 

左侧栏是主要内容区域,以图文形式排列
Photoshop网页设计:杂志风格网站界面插图(9) 

为了区分突出每个标题与内容的独立性,每个图文区块都使用灰色背景进行区分,这样视觉上更出色,标题颜色也使用统一的绿色
Photoshop网页设计:杂志风格网站界面插图(10) 

之后为了让读者获得更好视觉体验,我们为每个标题右侧添加一个小图标,以表示这是一篇文章的标题,让其更醒目
Photoshop网页设计:杂志风格网站界面插图(11) 

中间栏内容以文字标题与内容介绍为主,标题颜色依然用绿色,这栏放的内容主要是推荐文章或并非最重要的内容
Photoshop网页设计:杂志风格网站界面插图(12) 

 


右侧栏主要放广告或其他你想要放的内容,这里我们选放上一些图标菜单,可以连接到对应的栏目与内容中
Photoshop网页设计:杂志风格网站界面插图(13) 

我们将用蓝色与绿色相间的小图标进行装饰,看上去效果不错
Photoshop网页设计:杂志风格网站界面插图(14) 

目前来看我们的网站布局如下
Photoshop网页设计:杂志风格网站界面插图(15) 

当然网站还有很多空白处,我们要让其感觉比较饱满,在左侧主要内容栏下加上两分栏的标题内容
Photoshop网页设计:杂志风格网站界面插图(16) 

在右侧栏菜单下加上蓝色背景的图文内容,使用一些淡色系的背景色与图文排列是很常用的一种网页设计技巧
Photoshop网页设计:杂志风格网站界面插图(17) 

继续加入内容,这里我们要遵循一个原则,尽量将不同区块内容在横向上都平行,这样网站看上去的效果会很舒服,比如下图中我们加入的一块广告区域就与左侧栏内容顶部平行
Photoshop网页设计:杂志风格网站界面插图(18) 

 


当然并非所有都要遵循平行原则,但主要区域还是做得整齐一点较好,这样避免视觉上的无谓干扰
Photoshop网页设计:杂志风格网站界面插图(19) 

最后我们再用虚线来分割三分栏内容,一般来说如果用虚线分割会增加网站视觉上的干扰系数,所以虚线左右空白部分最好都留有10px以上的区域,这样可以减少虚线产生的视觉干扰,同时又能让网站看上去整齐丰富
Photoshop网页设计:杂志风格网站界面插图(20) 

[url]www.tutu001.com[/url]最后完成效果如下
Photoshop网页设计:杂志风格网站界面插图(21) 

 



作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部