澳门新葡亰赌全部网址▎导航站

这里是这个设计练习的背景,并且专业的网站布

来源:http://www.tackaberrytimes.com 作者:家居宠物 人气:196 发布时间:2019-10-02
摘要:营销+设计双学习的Sketch特制教程!今天这篇教程非常棒的地方是既能熟悉Sketch的操作技巧,还能学会邮件营销的精髓。作者巧妙地将营销与设计的关键点结合起来讲,绝对大有收获的一

营销+设计双学习的Sketch特制教程!今天这篇教程非常棒的地方是既能熟悉Sketch的操作技巧,还能学会邮件营销的精髓。作者巧妙地将营销与设计的关键点结合起来讲,绝对大有收获的一篇教程。推荐练习。

作者:佚名 出处:龙骑士博客

前言

在本Photoshop教程里,我们将制作一个优秀,简介,并且专业的网站布局. 我们完成的网页布局可以应用到个人或者团体的网站.

如果你曾经参加过每周邮报的设计工作的话,你就会知道毫无疑问这是营销策略中的关键一环,它们能够帮助我们和潜在的用户建立直接联系。但是,我们必须格外注意如何设计它们,以使得能够吸引收件人的眼球,最重要的是达成我们的营销目的。

先让我们看看待会即将完成的网页.

这里是这个设计练习的背景:想象我们是一家提供在线课程学习的公司,我们想要与我们的潜在用户取得联系,向他们展示我们的平台能带来的好处。在这种情况下,我们可以使用Sketch设计一个简洁的但有效的邮报来达到我们的目标。

图片 1

我们将使用到Sketch中最常用的几个功能来创建我们的视觉稿,你将会惊讶于这是如此的简单!

图片 2

最终效果:

准备你的photoshop文档

图片 3

1 创建新的 Photoshop文档 (Ctrl/Cmd + N)根据下图.

素材打包 微盘下载

图片 4

做好准备

设置单位和标尺

为了顺利完成这篇教程,你需要下载这些附件。在这个压缩文件中,你可以找到我们在后续步骤中将会使用到的一些文本和图像。

2 确保你使用像素为单位, 它是网页设计的标准尺度. 从前置选项的windows对话框设置标尺 (Ctrl/Cmd + K); 点击单位和标尺,确保你所有的设置跟下图相同.

我将会使用Helvetica Neue字体作为默认字体,但是如果你没有这种字体的话,尝试使用Helvetica或者是Arial作为代替。

图片 5

注意:要做一名负责任的设计师!我的意思是:记得使用描述性的文字重命名图层并将它们编组来组织内容,你的同事会感谢你的,相信我。

为内容区域增加指导

好了吗?我们开始吧!

3 激活photoshop的标尺,从查看 > 标尺里头. 按下Ctrl/Cmd + R固定标尺的可见度. 也可以通过打开窗口> 信息 (快捷键: F8). 通过选区工具,信息面板可以反馈不是有用的信息. 按下M字键, 选择矩形选区工具在画布的左上角绘制出一个120px宽的小盒子.你可以调整选区的大小通过信息面板.现在从左边开始,根据面板显示的宽度拖动参考线到如图的选区右侧.

设置绘图板

图片 6

第1步

4 移动选区到画布的右边缘. 分配另外一条参考线到选区左侧.

让我们从创建新的绘图板开始。在菜单中选择插入——绘图板或者在工具栏中选择。现在在Sketch的画布上拖动绘制一个620*3000px的绘图板。如果你觉得这很难,记得你可以使用屏幕右侧的观察器面板来调整参数。你同样可以在左侧的图层列表中改变绘图板的名字。

你的画布看起来应该是这样的:

图片 7

图片 8

提示:设计邮报时通用的宽度是500-600px。

创建logo

第2步

5 现在我们开始创建LOGO. logo只是添加的应用颜色渐变效果所以很简单. 创建新的组 (图层> 新建 >组)并且命名为logo.

现在我们来添加一些参考线以便为我们正确地放置元素来提供参考依据,以达到平衡和稳定的设计效果。我们应该讲参考线放在什么位置呢?

6 选择横向排版工具 (T)切换到大写字母 键入SMASHING (或者你网站的名字) .

邮报可以有很多种设计方式,最简单的一种就是使用一栏式布局,由一个接一个的方块形成垂直式文档流,这种布局方式能够允许我们用一种简便的方式引导用户。而且,一栏式的布局结构也更加利于我们为不同的屏幕做适配。

7 进入字符面板, 设置字体为Arial, 样式为粗体,大小为 42pt. 设置反锯齿选项为锐利颜色为#101112. 你同样可以在激活文字工具之后在工具栏更改.

但是,为了达到教学的目的,我们将要做得多一点,我们将采用三栏式布局。

图片 9

激活标尺并且开始创建参考线。选择视图——标尺,现在在水平标尺上的30px、200px、225px、395px、420px还有590px处单击,你可以点击并拖动标尺来移动它的位置。,你同样可以对参考线这么做。要删除参考线,点击参考线并拖动它们到标尺的后方。

8 双击打开图层面板对话框. 选择图层渐变, 点击渐变设置如下图显示设置.

图片 10

图片 11

设计标题栏

9 将SMASHING 图层移动到距离顶部35px距离左侧参考线0px 的地方. 你可以使用移动工具配合方向键使用. 复制文字图层(图层 >复制图层). 移动复制文字到 SMASHING 的右边,更改为Dzine. 重复步骤6, 7, 8 但颜色有些不同 (左边颜色: #b27625, 右边颜色: #e5ad27).

我们邮件的标题是十分重要的。它是我们与用户的第一接触因此我们应在此直接说明我们的定位。还有一种很好的设计就是展示公司的名字并且在CTA按钮后面加上一条标语来鼓励用户注册或者获取关于更多有关于我们的信息。

10 选择水平排版工具(T)在logo下面增加口号.

首先我们增加一条前标题(preheader),一条简单的文本提醒我们的用户来给予这封邮件适当的权限以防邮件的内容无法正确的显示。

图片 12

第1步

11 最后logo效果如图所示. 激活/撤销参考线, 进入视图>显示 > 网格或者使用快捷键Ctrl/Cmd + ;

选择文本工具并且在绘图板上单击以加入一条文本,注意观察器面板已经显示了当前文本的属性,输入Problems viewing this email? View it online。

图片 13

将它的颜色调整为#8FA6B3,并将大小调整为11px,现在我们选择View it online部分并将它的颜色调整为#FF736D,保持它的选择状态并点击颜色旁边的选项按钮,将它的装饰选项选中下划线。

创建导航栏

图片 14

12 创建新组命名为navigation,置于 logo 组上方. 从顶部标尺拖出一条参考线, 直到距离画布顶端150px 的地方. 选择矩形工具(U)画出一直宽度为4px 的水平线,颜色为#e3ab27, 贯穿画布.

将文本移动到离上方边缘30px处。

13 增加导航链接文字,距离水平线 12px高距离左侧参考线 20px. 选择椭圆形工具画一个宽高分别为 72px *35px的矩形. 移动此图层到 hover下面. 使用转换点工具拉直底部圆角. 双击hover图层按钮打开图层样式对话框增加渐变颜色(左: #e5ad27, 右: #b27625).选择横向排版工具(T), 选中文字, Home 更改颜色#ffffff (白色).

图片 15

图片 16

第2步

创建联系我们选项

使用矩形工具创建一个620*500px的矩形并且将它放置在文本图层的下方,下边缘距离文本30px,在观察器面板中将它的颜色修改为#F5F7F8,取消边缘选项的勾选来移除它。

14 下一步我们创建联系我们选项 在设计的右上角( logo的相反方向). 下载电话图标 放置在接近右侧参考线的地方.图层命名为 phone icon. 选择水平排版工具(T). 在图标左侧增加一个电话号码字体 Arial, 大小20pt 颜色#292929.

图片 17

在电话号码下面增加描述性文字,字体:Arial, 粗体, 大小 11pt颜色#595959.

第3步

图片 18

打开这篇教程附带的icons svg文件。选中这些图标并将它们复制粘贴到我们的文件当中,我们将要用它来装饰我们标题的背景。

新建页眉

我将这些icon放在了X= -50和Y = 0的位置(注意看观察器面板中的选项),但是你可以按你喜欢的方式放置。

15 现在我们开始创建顶部区域,新建一个组,命名为header.

图片 19

16 选择矩形工具 (U) 新建矩形宽和高分别为1200px *440px. 移动此图行到矩形,导航栏1px的地方命名为header bg. 双击 header bg层, 选择渐变图层样式增加渐变颜色(左: #2e2226, 右: #7a7556). 如下图所示.

提示:你可以看到我们的icon的有些部分超出了绘图板的范围因而Sketch将它们自动隐藏了,不奇怪,程序知道你正在使用绘图板来限定你的设计区域所以它隐藏了超出了绘图板的部分。试着将所有的icon移到绘图板之外,你会发现整个就显示出来了不是吗?不要忘记再把它放回去哦。

图片 20

第4步

17 使用矩形工具新建一个新的矩形 (U) 大小为960px * 360px. 移动到距离header bg层顶端40px,距离左边参考线0px的地方. 命名图层为header container.

在图层列表中我们选中icon图层和你先前创建的矩形,用工具栏中的按钮将它们合并为一个组。将这个组移动到图层列表的最底部并将它命名为背景或类似的什么,然后使用左边的小箭头将图层内容隐藏起来。

图片 21

图片 22

创建 特色项目 选区

选择那个矩形然后选择图层——作为遮罩层使用,快看!Sketch会使用这个矩形遮盖住所有在图层列表中位于其上的图层,如果我们先前将我们需要被遮盖的元素和遮盖的图层进行编组,我们就不会影响到编组外的图层了,非常有用的小技巧!

18 接着我们准备开始创建 特色项目 选区. 在header 组里面创建新组,命名为 fp.选择矩形工具(U)创建大小为630px 乘以 340px , 距离header容器顶部和左侧10px的地方.给图层的颜色赋值为#000000 并命名为fp container.

现在你应该有了如下图形式被遮盖的icon了:

图片 23

图片 24

19 从你的ps里导入一张图片放置在特色区域上面. 按选择 >全部 (Ctrl/Cmd + A), 然后 编辑 > 复制(Ctrl/Cmd + C). 继续回到我们的网页设计.在fp container层上面新建图层,点 编辑> 粘贴 (Ctrl/Cmd + V) 粘贴你的特色项目图片. 重命名为fp image. 右击fp image层选择剪切蒙版. 现在图片只有在矩形区域可见(fp container). 根据如下所示调整你的图片.

第5步

图片 25

打开logo svg文件然后将它们粘贴到你当前的文件当中,我知道它太大了,所以到观察器面板中将它的大小改为90 x 31px,将它移动到X = 265,Y = 100的位置。

20 进入 编辑> 变形>角度(Ctrl/Cmd + T). 从选项条, 点击旋转框,键入-4按下两次调整图层. 继续选择该图层(fp image), 设置图层样式为亮度.

图片 26

图片 27

第6步

21 现在我们开始为特色区域图片创建标题和描述.选择矩形工具(U)创建矩形大小为630px乘以 90px,颜色为#161718. 改变图层不透明度为90% 命名为title bg. 如下放置图片.

新建一个文字图层并将它的宽度设置为560px并将它移动到X = 30,Y = 220的位置。现在编辑文本,输入Your place to discover real world skills,将它的属性设置为磅数=粗体,颜色= #424242,大小= 48,行高= 45和对齐=居中,并仅仅将real这个词改为斜体。

图片 28

图片 29

22 创建矩形630px乘以 1px颜色#命名为title horizontal line. 放到内容的顶端命名为 title bg 层.

第7步

23 根据以下所示,设置矩形内的标题和描述.

现在我们来设计我们主要的动作按钮。绘制一个220*45px的矩形,在观察器面板中将它的半径设置为30,改变填充颜色为#D92B2B。将它放置在标语文本的下方,两个元素之间隔开50px距离。

标题设置:

图片 30

字体: Arial, 颜色: #ffffff, 大小: 25pt自动反锯齿选项: 锐利

第8步

描述设置:

如果我们不在按钮上写字这个按钮就是没有用的。我们需要一段呼告文本,一小句话来聚焦我们的目的并吸引用户的注意力。我很乐意多谈一些这种营销手段,但是我们还是快一点做教程吧。我们创建一个文本图层然后输入Join us from 10$/month。

字体: Arial, 颜色: #a4a4a4, 大小: 12pt自动反锯齿选项: None

将它的属性更改为磅数=粗体,颜色= #FFFFFF和大小= 15。然后将它移动到X = 225,Y = 375的位置,就在我们的圆角矩形之内。

图片 31

我们待会还要用到这个按钮,所以将它保存为一个符号似乎是个好方法。将文字和矩形图层编组并在工具栏中点击创建新符号,注意在图层列表中,文件夹的颜色由蓝色变成了紫色。

创建快速引用部分

图片 32

24 创建另外一个组在 header组内,并且命名为quick quote. 选择椭圆形工具新建300px 乘以340px像素的矩形. 放置这个矩形到特色项目选区10px 的地方命名为qq container.

第9步

25 下一个步骤我们将会复制之前制作的另外一个图层的样式.进入navigation 组, 右击hover层, 选择复制图层样式, 回到qq container 层,右击选择粘贴图层样式.

我觉得我们需要增强背景图片和文本的对比关系,所以我们来做一点小小的改变。选择图层列表面板,展开背景组并复制那个你用来遮盖icon的矩形,将它复制到组的顶端,然后在观察器面板中将它的混合模式调整为加亮并将不透明度调整为50%。最后你的结果应该类似于这样:

图片 33

图片 34

26 选择水平排版工具. 键入 Quick Quote在qq container 距离内容层顶部和左边 20px的地方. 设置字体为Trebuchet MS (或者其他web保险字体) 颜色为白色(#ffffff) 反锯齿选项设置为锐利. 我们将使用椭圆形工具创建表单. 选择椭圆形工具,设置半径为 3px. 然后新建两个矩形大小为260px乘以 35px 颜色为白色 (#ffffff). 分别命名为 field1和field2. 创建第三个矩形,大小为260px 乘以 75px 颜色为白色(#ffffff)命名为field3. 使用文字工具分别写上各自标签.

我们的标题完成了!

图片 35

设计我们是谁方格

27 选择椭圆形工具创建方型大小80px乘以35px命名为submit btn.

现在我们已经吸引了用户的注意力,我们需要更多地讨论下我们自己和我们的服务了。我们是谁?我们是做什么的?我们需要用一种直接和简明的方式来回答这些问题,试着展示我们的服务的优点。

28 双击图层打开图层样式对话框 ,勾选左边的渐变叠加对话框. 点击渐变编辑按照如下变更颜色 .

第1步

图片 36

创建两个新的文本图层,将它们的宽度调整为480px,你可以输入你喜欢的随便什么东西,但是我是用了你将会在附件中找到的文本。

29 选择文字工具,键入Submit 使用字体Arial, 粗体样式 大小为13pt. 选择submit 按钮 和 Submit 文字).

完成了,现在来调整它们的位置和属性。

30 在工具面板选择移动工具 在选项条设置水平居中和垂直居中.

图片 37

图片 38

第2步

创建主要内容区域

绘制一条100px长的线条并且将宽度设置为2px,描边颜色设置为#E24A4A,将它放置在两段文本之间,和两者各隔开25px的距离。记住:如果你在移动元素的时候按住Alt键你就会看到元素之间以像素表示的距离大小。

31创建新组命名为content. 选择椭圆形工具(U).新建300px 乘以 175px 命名为c01. 放置此层在距离头部30px 以下 距离左边参考线0px. 双击层,设置如下样式.

图片 39

图片 40

第3步

32 我们继续为该层填充内容. 选择文字工具增加文字, About SmashingDzine. 使用文章工具选择About 文字,改变颜色为#b47825. 选择Smashing文字,改变颜色为#2f2f2f. 增加简短描述和文字连接. 参考以下设置.

选中这条线和文本图层然后将它们编组,记得组织你的图层并将它换一个名字,我用了first-block。

图片 41

图片 42

标题设置:

选择Search for online…这个文本图层,在观察器面板中点击创建一种新的文字样式。对第二段文字也采取相同的操作。现在,所有采取这个样式的文字都会随着你修改某一段文字的样式而跟着改变。

字体: Trebuchet MS, 样式: Normal,大小: 24pt,反锯齿选项: 锐利

图片 43

描述设置:

注意:记住Sketch并不能保存在一个图层内有不同参数的文字样式。

字体: Arial, 样式: Normal, 大小: 12pt,反锯齿选项: 无, 颜色: #767676

第4步

连接设置:

打开highlights-icons svg文件,复制这三个icon然后将它粘贴到你的文件中来,使用你已经绘制的参考线来对齐它们,如果你使用三列布局的话。不要将它们放的太过于贴近上面的方格,将它们之间隔开大约40px,如果你需要帮助,请看下面的图片:

字体: Arial, 样式: Bold,大小: 13pt, 反锯齿选项:无, 颜色: #252525, 下划线

图片 44

33 紧靠描述的地方我们将增加多一个正方形. 选择矩形工具,颜色 #ffffff, 按住Shift键,维持比例绘制矩形,大小为88px 乘以88px. 移动该矩形到距离左边矩形(c01″).10px 的地方,命名为border. 设置描边如下:

第5步

图片 45

创建三个170排序宽的文本图层,然后使用Helvetica Neue Bold字体,大小= 15、行高= 18、颜色= #424242并且对齐=居中。将它们放置在离icon30px的位置,然后输入下面这些文字!

34 创建另一个盒子,大小为82px 乘以 82px放置在border 层中央. 命名为box 颜色改变为 #d5d5d5. 选择content 组的所有图层,进入图层> 新建> 创建组(Ctrl/Cmd + G) 命名为about.

图片 46

图片 47

又一个方格完成了!

35 复制about 组 命名为 services. 再重新复制一组命名为portfolio. 我们现在有三个组(about, services, and portfolio). 移动最后的组(portfolio)到右侧的参考线.

设计新课程方格

图片 48

邮报的一个通常的功能就是发送最新的文章或者读者会感兴趣的内容。所以在我们的呼告内容和自我介绍内容之后,让我们创建一个方格来展示我们最新的一些教学课程吧!

36 在面板选中三个组,点击图层>分布> 水平中心分布. 点击 查看一下大图.

第1步

图片 49

复制你已经制作完的first-block组,并将它放置在前一个方格的下方,中间隔开40px,然后修改这段文本,现在应该像下面这样:

37 变更 services 组 (center) 和 portfolio 组 (right) 如下.

图片 50

图片 51

第2步

创建页脚

选择素材文件中的lessons文件夹然后通过插入——图片将它们导入到当前的文档当中,现在你有了7个图片,620px宽。我们将一个保留为原来的尺寸,讲别的都缩小以适配我们的三列式布局。

38 新建组命名为footer. 选择矩形工具(U)然后创建矩形大小为1200px 乘以100px 在我们布局的底部. 命名为 footer bg. 复制 header bg 层的图层样式并且应用.

图片 52

图片 53

第3步

选择文字工具,写上版权声明文字,和链接,样式为Arial, 大小为12pt ,灰色(#dddddd).

让我们来为这个图片添加一些文字。插入三个文字图层,复制如下的文本,然后将它们的属性如下设置:

图片 54

图片 55

40 我们开始在邮件增加邮件描述.创建新组在footer 层,命名为 subscribe.选择圆角椭圆形工具(U) 创建矩形大小85px 乘以 35px.图层命名为subscribe btn.

第4步

41 重复26步增加表单和标签.

我们需要更多一些文本图层来展示我们剩下的其他课程。让我们在做一遍:插入三个心文本图层,输入随便什么或者是从夫附件中粘贴过来。将它们的属性和位置按照下图中所示进行设置,然后在进行五遍类似的操作完成剩下的5个。

42选择文字工具,拼写Subscribe 样式Arial,Bold大小13pt. 选择所有层(subscribe btn 和 Subscribe text).

图片 56

43 重复28步创建按钮.

另外一个方格完成了,现在花点时间来组织你的图层面板,然后前进到下一步!

44选择椭圆矩形工具 (U)设置半径为3px.创建椭圆矩形为210px 乘以35px 应用白色为主(#ffffff)命名该层为email field.

图片 57

图片 58

再来一遍

图片 59

我知道这个邮件很……长,但是这没有关系!用户们知道向下滚动,所以在下方在此添加一次我们的诉求目的会是一个好的主意,他们不必再滚回页面顶部。

最后结果

你还记得你复制过的first-block吗?再复制一遍,将它移动到课程方格的底部,隔开40px然后将它的内容修改为如下所示:

最后结果已经完成, 点击预览.

图片 60

图片 61

第2步

教程未完,请看下一页!

插入一个620x243px的矩形然后用#F5F7F8的颜色填充。现在增加一个新文本图层并将它的内容和属性修改为如下图所示的样子:

图片 62

第3步

选择插入——符号来插入我们先前设计的用户呼告按钮,将它放置在前一段文本的底部。

图片 63

我们就要完成啦!

设计页脚

好的,现在我们已经完成了我们几个主要的方格和一个呼告按钮了,接下来,我们要增加一些次要信息并且更多地一些内容。接着,我们会在此谈论我们的诉求,重复呼告。现在是时候完成页脚设计并结束我们的教程了!

第1步

创建一个620*130px的矩形,将它用#555E68颜色填充并放置在用户呼告按钮的下方,接下来,创建一个620x45px的矩形并以#383E44颜色填充,你做完的效果应当如下图所示:

图片 64

第2步

插入logo-white文件并且将它移动到X = 265,Y = 2787的位置。

图片 65

第3步

让我们加入最后的文本吧,然后采取如下图所示的设置:

图片 66

这不是不必要的,但是你可以调整绘图板的高度来截取你真正能够读到的部分。你可以在图层面板中选中它并且在观察器面板中调整它的高度,我将他改为了2937px。

这是我们产品的最终效果!

图片 67

本文由澳门新葡亰赌全部网址▎导航站发布于家居宠物,转载请注明出处:这里是这个设计练习的背景,并且专业的网站布

关键词:

最火资讯