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

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

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

【 tulaoshi.com - PS 】

最终效果如下

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

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

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

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

输入文字

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

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

123下一页

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

上一篇： Photoshop网页设计：华丽的房地产网站首页效果
下一篇： photoshop设计网页：多媒体网站布局

看过《Photoshop设计网页：某杂志的网站界面》的人还看了以下文章更多>>

Photoshop设计简洁大方的网页界面

标签： PS PS基础

今天，我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山，咱直接切入正题吧，菇凉帅哥们有兴趣的话，可以打开PS跟着做哟。开始设置的文件打开一个新的文档：外形尺寸1200×1640像素，分辨率为72像素/英寸。我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构，可以看出页面最终的雏形，不过在设计过...

Photoshop设计网页音乐播放器

标签： PS PS基础 ps平面设计教程 ps去水印教程

来源：活力盒子作者：Luycas 本教程的效果图制作的非常小巧，很适合用到一些可以播放音乐的网页中。制作方法也比较简单，播放器的每一个部件基本上都是用图层样式来表现立体及浮雕效果，只要注意好图形的层次关系，我们就可以分层来完成效果图。最终效果 1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色tulaoshi的油漆层，添...

Photoshop设计网页股权发布专题页面

标签： PS PS基础

通常设计师接到设计任务时，如果没有跟创意点相符的原画素材，这时候就需要自己动手。下面给大家介绍一下关于素材再创造打造场景氛围的例子。下面是一个老玩家分红利的页面，要求有股票、红利一些元素在页面中体现，所以联想到用工作台场景来展现，这样可以更容易的把一些带有股票、红利的元素融入到场景中,再根据构思，寻找一些图片素材，提...

超酷设计：老外是如何设计网站的？

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

文中的这些图片都是国外网页设计师进行网页设计的手绘草稿，仅供参考，虽然不一定每个网页都需要这样设计，不过从设计流程来看，一些大型网站的设计师也会采用先手绘出样稿形式进行设计。这种手绘形式的设计稿对于初期讨论有较大的作用，相比用PS等软件制作出的设计稿更容易标注与讨论。希望这些原型图可以帮助你迅速找到设计的灵感。

Photoshop设计Wordpress主题网站界面教程

标签： PS PS基础

通过这个教程，你将学到如何设计一个独特的wordpress主题界面来展示你的内容。此界面布局完全适用于商业网站。如果你想将这个psd文件转化为wordpress主题的话，要求你对css、php有深入的了解。欢迎来到Grafpedia网站的另一个教程，通过这个教程，你将学到如何设计一个独特的wordpress主题界面来展示你的内容。此界面布局完全适用于商业网站。...

查看更多精彩>>