您的位置:伟德app官方下载 > 房产楼市 > Photoshop绘制简洁的包含云朵主题的网页,Photosh

Photoshop绘制简洁的包含云朵主题的网页,Photosh

2019-09-23 11:06

作者:佚名 出处:发现吧

作者:佚名 出处:发现吧

作者:PS真功夫 翻译 出处:图片 1

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

图片 2

Photoshop教程:一款清新高雅的网页布局

最后预览

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

预览:图片 3在这篇网页设计教程中,你将学习如何设计优雅并专业的网页布局,我们将运用各种photoshop技巧,依靠图形工具和图层样式等基本操作来实现此布局。作为奖励,在教程结束后附有HTML/CSS/JavaScript的网站模板,完全免费下载。

图片 4

最后结果

网站模板

教程资源

图片 5

点击下图查看网站模板

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

教程资源

图片 6

让我们开始吧

  • Mono图标集
  • Lightning Bolt 图标

素材

  1. 第一件需要做的事情就是新建1020×1200像素的psd文档.

开始制作

  • 矢量社区媒体图标(下载)
  • 凌乱、自然灰褐色图案(下载)
  • 高清花纹笔刷(下载)
  • Mono图标(下载)

图片 7

  1. 我们要做的第一件事就是新建ps文件,大小1020×1000.

1、新建文档

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

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

图片 8

打开photoshop,新建尺寸为1020*1180px的空白文档。

图片 9

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

2、设置导航条背景

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

图片 10

选取矩形选框工具(M),创建有整个画布宽的选区,高度不要太高,然后用深灰色(#393939)进行填充(cmd/ctrl+F5),如下所示:

图片 11

  1. 在图层面板右键根据下图增加图层选项.

图片 12

图片 13

图片 14

复制(cmd/ctrl+J)刚新建的导航图层,并对其添加杂色滤镜(滤镜>杂色>添加杂色),如下设置:

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

图片 15

图片 16

图片 17

图片 18

然后更改图层混合模式为叠加,透明度下降到大约23%。

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

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

3、创建站点logo/名称

图片 19

图片 20

对于logo,我使用了粗斜样式的字体Georgia,用白色(#ffffff)编辑Six时,用米黄色(#F7E5C4)编辑Studios,对于图标,选用了Mono图标中的boxupload32图标,如下所示:

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

图片 21

图片 22

图片 23

4、添加菜单

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

图片 24

使用颜色(#DBD1BE)编辑激活时的菜单,正常状态的菜单使用颜色(#ABAAAA)。

图片 25

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

图片 26

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

图片 27

为了让激活状态下的菜单更加醒目,选取圆角矩形工具(T)创建一个圆角矩形(圆角半径为5px,前景色为#464646)放置在菜单图层下方,如下所示:

图片 28

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

图片 29,然后设置如下图层样式:

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

内阴影/'描边:

图片 30

图片 31

图片 32 图片 33

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

图片 34

图片 35

图片 36

5、添加展示区背景

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

图片 37

在布局头部,我们还要添加一个作品展示区,以幻灯片形式来播放图片,每张图片配有简单介绍和导航。在开始前,选取矩形选框工具(M)创建矩形,以颜色(#D3CAB8)进行填充。

图片 38

图片 39

图片 40

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

图片 41

下一步,下载凌乱、自然灰褐色图案(或其它图案)拖放到文档中,放在矩形图层上方。

图片 42

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

接下来我们要遮住一些不需要的纹理,在图层面板选中矩形图层,按住cmd/ctrl键,点击缩略图,创建一个自动选区,然后选中纹理图层,在下拉菜 单中点击添加图层蒙版,这样遮住了除选区外的所有区域,最后,撤消选区(ctrl+D),把纹理图层的透明度下降到35%。

  1. 对于我们的内容领域我们要看起来有几张纸上下堆叠,给它一个独特的外观. 第一步先绘制如下矩形:

图片 43

图片 44

图片 45

  1. 导航非常简单. 所有链接的字体设置为Helvetica.我们激活链接的颜色为#FFFFFF, 没有激活为#B64366. 然后选择圆角矩形工具半径设置为15px绘制简单的圆角矩形:

6、添加网站介绍

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

图片 46

使用水平字体工具(T),在展示区左侧添加网站文字说明,采用Helvetica 或Arial字体进行编辑,确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字在不同图层。

图片 47

  1. 在你的圆角矩形上, 添加混合样式:

图片 48

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

图片 49

为了使标题更加炫目,按如下设置添加图层样式:

图片 50

图片 51

阴影/'渐变叠加:

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

图片 52 图片 53图片 54

图片 55

图片 56

接下来,创建About us的圆角按钮。再一次选取圆角矩形工具(U),设置半径5PX,文本颜色为#404040,同时在右边有一个箭头图标(Mono图标集中的circleright32),重设它的大小以匹配按钮。

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

图片 57

图片 58

图片 59

在矩形图层上添加以下样式:

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

外发光/'渐变叠加:

图片 60

图片 61

图片 62 图片 63 图片 64

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

最后一步是在按钮右边添加花纹,就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷(资源区的上方),先设置前景色为#343434,选取画笔工具(B),找到花纹笔刷,在画布上进行一次点击,然后把图层混合模式改为强光。

图片 65

图片 66

图片 67

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

7、创建幻灯片区

图片 68

图片 69

选取圆角矩形工具(U),前景色为白色,半径为5PX,在展示区右侧生成一个圆角矩形。

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

图片 70

图片 71

图片 72

设置此图层的透明度为15%,以显示背景图案,接着添加阴影的图层样式:

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

图片 73

图片 74

图片 75

图片 76

此刻,我们需要在幻灯片区域添加图片缩略图,你可以找一个网站截图或其它图片,放在白色圆角矩形上方。我们得把图片四角变成圆角,在图层面板,按住 cmd/ctrl,点击白色圆角矩形的缩略图,创建一个自动选区,接着选择放图片的图层,去往菜单选择>修改>收缩,收缩10px,然后 执行选择>反选(cmd/ctrl+shift+I)反选选区,最后执行编辑>清除。

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

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

图片 77

图片 78

图片 79

接下来添加图片描述,在图层面板,按住cmd/ctrl,点击图片图层的缩略图,创建一个自动选区,新建图层,并以黑色填充选区,然后使用圆角矩形选框工具(M),选取新建的黑色矩形的上部分并删除。

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

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

图片 80

图片 81

图片 82

降低图层透明度到75%,添加简单的文字说明

原文地址

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

图片 83

转载自发现吧:

图片 84

8、在展示区底部添加分隔线

教程未完,请看下一页!

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

像步骤2一样在展示区底部添加一条灰色、水平分隔线,不同在于还要添加内阴影的样式:

图片 85

图片 86

  1. 现在增加如下样式:

图片 87

图片 88

设计的主内容区的时间到了!

图片 89

9、给主内容区添加背景

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

就像预览图一样,主内容区分布为三列,选取矩形选框工具(M),生成画布宽的选区,用颜色(#FBF5EA)进行填充。

图片 90

图片 91

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

主内容区的设计其实相当简单,但是要让人看出很简单也要花一定时间完成。我们将从左边开始,放置服务列表。

图片 92

10、添加列标题

图片 93

对于我们的列标题,从Mono图标挑选一个象征符号,并放在标题左边,使用字体Georgia和颜色(#323232)编辑标题文本。下一步,在文本底部添加弧线边界,这就要用到钢笔工具(P)了,像下图一样创建一条路径。

图片 94

图片 95

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

为了给路径描边,设置前景色为文本颜色(#323232),然后选择一个较硬的画笔工具,大小大约为3px。接着打开路径面板(窗口>路径),点击面板下方的用画笔给路径描边。

图片 96

图片 97

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

下面为曲线添加一点渐变,设置渐变叠加的图层样式:

图片 98

图片 99 图片 100

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

复制曲线图层,离原图层下方4或5px处,降低透明度到24%。

图片 101

图片 102

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

11、为左栏添加内容

图片 103

设置标题颜色为深灰(#323232),文本内容颜色为一种可读性的灰色(例如:#2A2A2A)。像创建About us 一样创建Read More按钮,对于中间这行,我改变了颜色,一种纯灰色(#484848)用于激活状态下的颜色。

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

图片 104

图片 105

12、为中栏添加内容

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

像左栏一样,添加标题和图标(另外合适的图标)。使用圆角矩形工具(U),设置半径3px,前景色为白色,生成一小型的圆角矩形,在矩形下方添加一些文本和描述。

图片 106

图片 107

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

接着为圆角矩形设置图层样式:

图片 108

外发光/'描边:

图片 109

图片 110 图片 111

图片 112

然后,在圆角矩形内添加与描述相配的图片。

图片 113

图片 114

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

13、为右栏添加内容

图片 115

像左栏和中栏一样,添加标题和图标。对于未激活的链接,采用深灰色(#353535)编辑字体,对于活动状态的链接,采用白色字体,并且创建深灰色(#353535)圆角矩形背景,半径也是3px。

原文地址

图片 116

翻译自:

14、设计时事通讯窗口

下载psd

选取圆角矩形工具(U),生成一个3px的圆角矩形,像第2步一样设置杂色滤镜。

教程未完,请看下一页!

图片 117

使用字体Georgia Italic编辑标题,从Mono图标中选择一个信封的图标,给此图标设置了颜色(#F7E5C4)叠加,创建了一个圆角矩形选框,用来输入用户邮箱,以白色填充。

图片 118

15、添加footer

一开始创建footer,就像创建header中的导航一样,只不过要比导航条高些。

图片 119

接下来创建一些链接,选取圆角矩形选框工具(M),生成如下图一样的选框,以深灰色(#323232)进行填充,里面用白色文字填充。

图片 120

然后把混合模式改成弱光,透明度降低到63%,以突出背景颜色。重复此流程,创建其它链接。

图片 121

最后一件事,选择一些社区媒体图标添加到链接上方,选择站点logo和copyright放在footer右侧。

图片 122

教程未完,请看下一页!

本文由伟德app官方下载发布于房产楼市,转载请注明出处:Photoshop绘制简洁的包含云朵主题的网页,Photosh

关键词:

  • 上一篇:没有了
  • 下一篇:没有了