www.1495.comPhotoshop绘制简洁的带有云朵宗旨的网页,Photoshop绘制简洁而多彩的小说体现网页

作者:佚名 出处:发现吧

作者:佚名 出处:发现吧

www.1495.com 1

在本教程,你将会学习到如何在photoshop中创建简洁而多彩的作品展示页.
如果您仍然有疑问可以在评论里面提出. 除此之外, 记得所有的教程,
我们都提供psd文件以供下载。

在本教程你将学习到如何制作一个简洁的组合网页包含多云的标题.
如果你对于本教程有任何不懂的地方欢迎在评论中提出.
另外,记得所有的教程结尾均有PSD文件下载.

最后预览

最后结果

www.1495.com 2

www.1495.com 3

教程资源

教程资源

  • Blackout 字体
  • Mono图片集
  • Twitter Bird图标
  • Mono图标集
  • Lightning Bolt 图标

让我们开始吧

开始制作

  1. 第一件需要做的事情就是新建1020×1200像素的psd文档.
  1. 我们要做的第一件事就是新建ps文件,大小1020×1000.

www.1495.com 4

www.1495.com 5

  1. 使用填充工具(G), 将背景颜色填充为#AED6EE.

  2. 接下来, 我们需要在背景增加一点渐变. 虽然我们可以直接在背景层上面做,
    但为了后期转化为代码更加简单,我新建一个图层,绘制一个简单的矩形,填充白色:

  1. 使用矩形选区工具制作如下选区,填充颜色 #C9EFFA.

www.1495.com 6

www.1495.com 7

  1. 现在右击你的图层样板,在弹出的目录菜单中选择图层样式,勾选渐变叠加.
  1. 在图层面板右键根据下图增加图层选项.

www.1495.com 8

www.1495.com 9

www.1495.com 10

www.1495.com 11

  1. 开始创作头部, 我们需要创作自己的logo.
    选择你最喜欢的矩形工具,创建简单的矩形填充 #D4EF9F:

www.1495.com 12

www.1495.com 13

4.
在你刚才图层下面再建新的图层,在文档的空白处绘制出选区,填充颜色#535353.
这一部分将充当你余下文档的背景. 复制该层(Command+J), 然后回到原始图层.

  1. 为最新的矩形增加图层样式:

www.1495.com 14

www.1495.com 15

  1. 现在根据以下图层选项为原始图层增加灰色背景.
  1. 接下来需要为logo增加些文字. 颜色为#FFFFFF .
    接着为下一层增加图层样式:

www.1495.com 16

www.1495.com 17

www.1495.com 18

  1. 再次使用你最钟爱的矩形工具, 创建简单的矩形,填充颜色#416073.

6.接着在你的图层面板中选择复制图层接着点击滤镜>杂色>添加杂色.
在弹出的对话框里设置:

www.1495.com 19

www.1495.com 20

  1. 现在为最新的矩形添加混合选项:

7.降低复制图层的透明度为 65%, 混合模式更改为叠加.

www.1495.com 21

  1. 是时候制作你的云朵标头了.使用椭圆形工具创建椭圆然后按住
    shift键不断的增加你的选区 直到看起来类似这样:
  1. 我们的导航会保持相同的样式.使用 Helvetica字体,
    在连接旁边加上时尚的图标集.激活的链接带有颜色为 #2D4655的矩形.
    链接的颜色为#99CAEA, 图标集的链接为#AED6EE.

www.1495.com 22

www.1495.com 23

  1. 填充你的选区为#FFFFFF, 然后增加如下图层样式:
  1. 在导航的下面,
    我想显示最近的tweet.因为这个,所以我们需要用到椭圆形工具 (M).
    按住SHIFT键增加你的选区造型参考下图填充#FFFFFF:

www.1495.com 24

www.1495.com 25

www.1495.com 26

  1. 接着,为云增加淡淡的阴影.

www.1495.com 27

www.1495.com 28

www.1495.com 29

  1. 之后再添加填充文字, 增加twitter图标, 头部看起来应该是这样的:

10.对于 logo我使用Myriad Pro字体
颜色为#5EADC6. logo的小图标可以在上面下载.

www.1495.com 30

www.1495.com 31

  1. 对于我们的内容领域我们要看起来有几张纸上下堆叠,给它一个独特的外观.
    第一步先绘制如下矩形:
  1. 导航非常简单.
    所有链接的字体设置为Helvetica.我们激活链接的颜色为#FFFFFF,
    没有激活为#B64366.
    然后选择圆角矩形工具半径设置为15px绘制简单的圆角矩形:

www.1495.com 32

www.1495.com 33

  1. 接下来, 复制本层和移动我们的复制图层(Command+J)在原始图层上面.
    按下Command+T让你的复制层变透明 向右旋转,看起来应该像这样:
  1. 在你的圆角矩形上, 添加混合样式:

www.1495.com 34

www.1495.com 35

  1. 回到原始图层增加图层选项:

www.1495.com 36

www.1495.com 37

  1. 在云朵层后面, 我们将增加蓝色的条纹.
    选择矩形选区工具绘制简单的矩形如下不断重复直至跨越整个屏幕:
  1. 对于每一个项目, 我们需要为相同类别的作品集合增加预览图片.
    使用矩形工具,新建简洁矩形如下填充白色 #FFFFFF:

www.1495.com 38

www.1495.com 39

  1. 减低条纹的透明度为17%, 改变它的混合模式为柔光.
    接着增加一些你公司的描述性文字使用 Georgia字体
    颜色为#51656A.然后我使用了 Mono 图标集合的其中一个图标.
  1. 现在如图层增加样式:

www.1495.com 40

www.1495.com 41

  1. 对于内容区域我们再一次选择矩形选区工具
    根据下图绘制选区如下填充颜色为#FFFFFF.
  1. 所有你需要做的就是添加一个预览图象, 文字颜色为#416073,
    重复相同的步骤,看起来应该是这样的:

www.1495.com 42

www.1495.com 43

  1. 为你的矩形图层增加图层样式如下.
  1. 最后一步为我们的内容区域增加按钮.对于按钮的做法可以参照第14步.
    你的顶部矩形颜色为#D4EF9F, 下面的为#AFD465.

www.1495.com 44

www.1495.com 45

  1. 下一步是为每个选区创建标题.使用矩形选区工具绘制简单的矩形
    根据下图填充颜色为#000000.
    然后使用椭圆形选区工具绘制简单的圆形如下.选择上面两个图层并且合并.
  1. 为顶部矩形增加样式:

www.1495.com 46

www.1495.com 47

  1. 为这个层增加图层样式:
  1. 为你的按钮添加箭头, 和文字. 文字和图标的颜色必须为#2D4655.
    图标源自Mono图标集.

www.1495.com 48

www.1495.com 49

www.1495.com 50

23.用同样的手法制作 back 按钮,
增加一些文字显示你当前的也是,看起来应该是这样:

www.1495.com 51

www.1495.com 52

19.在圆中我插入 Mono图标集中的心形图标并且增加颜色叠加#BF637F.
字体为Helvetica,颜色#494949.

  1. 最后一步就是添加页脚. 我们想要看起来就像置身云端,
    所以使用椭圆形工具(M)制作选区然后按住
    SHIFT增加选区填充#FFFFFF.增加你的选区直到看起来这样:

www.1495.com 53

www.1495.com 54

  1. 接下来添加你代表性作品的缩略图展示, 然后在他们右边增加描述性文字.

25.在你的页脚增加文字链接 右边增加版权信息,最终模板完成:

www.1495.com 55

www.1495.com 2

  1. 为缩略图增加下面图层样式:

原文地址

www.1495.com 57

转载自发现吧:

  1. 我们需要给用户一个快速的选项一遍浏览我们所有的作品.
    因此我需要新建一个按钮长度跟主题相适应. 选择椭圆形选区工具,
    开始绘出选区如下,填充颜色#000000.记得按住 shift键增加你的选区.

教程未完,请看下一页!

www.1495.com 58

  1. 现在增加如下样式:

www.1495.com 59

www.1495.com 60

24.在按钮左侧增加 Georgia字体文字,颜色#2C86A2.
然后使用图标集中的箭头图标,颜色叠加#87C8DC.

www.1495.com 61

  1. 下一个区域我们需要重复步骤17,
    但是有一点不同的是为你的图层增加下列样式和不透明度降低为 68%.

www.1495.com 62

www.1495.com 63

www.1495.com 64

  1. 你的结果看起来应该类似这样:

www.1495.com 65

  1. 为最新文章列表增加云朵以适应主题.
    再一次选择椭圆选区工具绘制简单的选区如下记得按住SHIFT键.

www.1495.com 66

  1. 选区填充#FFFFFF, 然后为图层插入图层样式:

www.1495.com 67

  1. 接着在云朵里面增加简单的链接.

www.1495.com 68

  1. 对于联系表格,我先给你看我们制作的最终结果, 待会会展示如何制作.

www.1495.com 69

  1. 对于输入框, 使用矩形工具填充颜色为#3F3F3F. 然后为你的图层增加样式:

www.1495.com 70

  1. 对于send email 按钮,
    为你的图层添加如下图层样式,并且在上面加上白色的文字.

www.1495.com 71

www.1495.com 72

www.1495.com 73

www.1495.com 74

33.最后一件事就是增加简单的页脚最终结果如下:

www.1495.com 3

原文地址

www.1495.com,翻译自:

下载psd

教程未完,请看下一页!