banner的排版布局

banner的排版布局

参考其他网站Banner布局

上节课我们利用分割线对网页的header和body部分进行了区域的划分,那么从这节课开始我们将着手网页设计的重头戏:body部分Banner的排版布局。

Banner具有宣传展示、广而告之的作用,它可以为企业、产品或者人带来相应的转化率。Banner不仅体现了网页的中心意旨和主要的情感思想,同时也凸显了网页的整体布局与风格定位。Banner设计是网页设计里不可或缺的一部分,对网页的整体设计起到了重要的作用。

我们先来了解下Banner设计上的注意事项:

①Banner设计区文字不能太多,简明扼要即可。

②广告语要简洁明了,可以让人第一时间捕获你想要表达的重点。

③图片不需要太复杂,选择的颜色数尽量要少,文字尽量使用黑体等粗壮的字体,浏览时要一目了然。

④Banner 的显示尺寸非常有限,所以不能摆放太多产品,一般保持在4-5个效果最佳,产品展示地太多在视觉效果上会大打折扣。

以上介绍的几点基本可以适用于类似淘宝、京东等电商平台的banner设计。

我们这次学习的是科技媒体类的网站则相对简单些,实际只需要一块比较显眼的位置用于展示我们重要的新闻就可以。

我们先来参考下其它科技媒体网站的Banner排版样式,然后再确定我们Banner的位置。

如36kr

如虎嗅网

我们可以发现它们的banner图基本是新闻内容中的图片,右侧留有一块活动海报的位置 。它之所以这么排版肯定是有一定原因的,而且这两个网站也有很多类似的地方。

而我们设计的时候千万不能拍脑袋去做任何事情,网站中每个板块都是根据我们产品业务及用户需求所产生的,所以在新建画布之前就要确定好我们想要的内容和布局。而我们现在想要做的具体的布局以及尺寸我们在2.2中也已经提前画出来了。


划分Banner位置

确定好我们要放的内容之后,我们需要创建矩形来放置banner图片。

我们现在开始创建矩形:长530像素x高300像素,色值为#e5e5e5,将其矩形图层命名为banner矩形1。

用移动工具将矩形移至距离header底部分割线20px的位置 ,左侧对齐参考线。我们可以借助上节课学习的创建精准参考线的技巧来确定位置

“视图-新建参考线”,“取向”选项中选择创建水平参考线,“位置”选项中输入102像素(导航栏80px+分割线2px+20px),创建出距离header底部20px水平位置的参考线。

有的小伙伴可能会觉得,创建精准参考线的时候还需要计算位置选项中的像素,有些麻烦。这个时候我们就可以借助矩形框选工具来辅助我们划分参考线。

在这里需要再插入两个小知识点,PS的放大缩小功能以及抓手移动工具。

这两样工具虽然很简单,但是我们经常在PS的设计中配合使用,可以为我们的设计带来很大的便利。

PS的放大缩小功能

我们经常会在PS里处理很小的东西,例如框选距离的时候就需要把画布放大了来看。

我们可以使用PS放大镜的功能,选中之后在画布上使用。

放大镜的快捷键是【Z】,默认是放大状态,按【ALT键】不放,鼠标指针就变为缩小,点击图片缩小就可以了。

也可以借助键盘【ctrl】+ 【+】 为放大图片,【ctrl】 + 【-】 为缩小图片。小键盘【+】【-】和字母区【+】【-】都可以使用。

还有一个比较实用的按钮就是选中放大镜之后在PS工具选项栏上,直接选择你需要显示的画布大小。

若需要显示实际画面大小可选100%,适应屏幕和填充屏幕呈现基本差不多的效果。看到这里大家可以自己动手点点就知道效果了。

抓手移动工具

当图像的尺寸很大或是使用放大工具而不能显示全部图像画面时,我们就可以借助抓手工具来移动画面。该工具还可以用来放大缩小画面。

当我们选择抓手工具后,按住Alt键可以单击可以缩小窗口,按住Ctrl键单击可以放大窗口。当画面放大后,我们就可以使用抓手工具单击并拖动鼠标进行画面的移动了。

此外,使用绝大多数工具时,按住键盘中的空格键都可以切换为抓手工具。使用除了缩放、抓手以外的其他工具时,按住Alt键并滚动鼠标中间的滚轮也可以放大缩小画面。

到这里其实大家会深深地体会到,PS里的很多功能可以通过多种方式去实现,至于挑选哪一种,可以看自己的实际情况,可以挑选自己用着最顺手最习惯的方式。

借助放大镜以及抓手功能将画布放大后,我们使用框选工具框沿着header分割线的下面框选出20像素高的距离,然后拉出参考线,步骤如图所示:

接下来我们来画其它几个放置banner图片的矩形:

创建矩形:长250像素x高140像素 ,色值为#e5e5e5,将其图层命名为banner矩形2

移动到第一个矩形的右上方,保持左右垂直距离为20px,我们还是用创建精准参考线或者框选拉参考线的方法:

视图-新建参考线,“取向”选项中选择创建垂直参考线,“位置”选项中输入860像素(左边空白310px+大矩形530px+20px),创建出距离第一个矩形图层20px位置的垂直参考线。

或者用框选工具沿着banner矩形1的右边框选出20px的距离,然后拉出参考线,如下图所示:

利用相同的方式,我们选中刚刚创建的矩形,【Ctrl】+【J】复制一个一样的矩形图层,命名为banner矩形3,沿着大矩形底部拉出一条参考线,将复制出的小矩形放置到与大矩形底部对齐的位置,如下图所示:

图层整理的技巧

做到这一步的时候往往我们右侧的图层就会多很多,为了后面设计的时候图层不混乱,清晰有条理,这时我们就需要进行图层的命名和分类分组。我们可以将图层按照类别放在不同的组中后,当关闭图层组时,在图层面板里就只显示图层组的名称。图层组可以像普通图层一样移动、复制、链接、对齐和分布,也可以合并,以减少整个设计文件的大小。

注意,图层组的整理一个非常重要的习惯,这将会为你的网站设计带来很多便利。

加选图层创建图层组

我们先把已有的图层命名好,然后先把header部分的多个图层选中,可以按住【Ctrl】键进行加选,接着使用快捷键【 Ctrl】+【G】进行打组。打组的意思就是把这些图层归类放在同一个组里,你也可以理解为新建了一个文件夹然后把图层都放在这个文件夹里。一个组里可以套另外一个小组,这种多级结构的图层组我们称之为嵌套图层组。你可以像我这样把相同部分再打个组,然后给整体的这个文件夹命名为header。

header图层整理好之后,我们按照这样的方法把body部分的三个banner部分都打组,这样我们的设计稿就可以更有条理。编组之后,可以单击图层组前面的三角图标关闭或者重新展开图层组,如下图所示:

当图层组越来越多时候,我们还可以在图层的眼睛位置给重要的图层组加一个颜色作区分,这样我们在后期修改和找图层的时候比较方便。选中需要加颜色的图层组,点击鼠标右键,选中想要标记的颜色即可。

在图层面板中创建图层组

我们上面用到是加选图层从而创建图层组的方法,而当我们单击“图层”面板中的创建新图层组的按钮可直接创建一个空的图层组。之后我们再点击创建图层按钮时,所创建的图层将位于该图层组之中。

如果想要在创建图层组时设置组的名称、颜色、混合模式、不透明度等属性参数时,可以执行图层→新建→组的命令,在对话框中设置相关的属性。

将图层移入或移出图层组

当我们需要调整图层组里的图层时,我们可以对图层组里的图层实行移入和移出的操作。将一个图层拖入图层组内可将其添加到图层组中。将图层组中图层拖到组外可以将其从图层组中移出。

移入图层组

移出图层组

取消图层编组

当我们想要解散取消一个图层组时,可选中该图层组,点击菜单栏:“图层→取消图层编组”即可。或者使用快捷键:【Ctrl】+【Shift】+【G】。

如果想要连同图层组里的图层一起删掉,那么可以直接选中该图层组,右击,执行“删除该图层组”即可。或者直接将该图层组拖拽到“图层”面板里删除图层按钮上即可。

本节课中讲的小方法都是我从实际经验中总结出来的,这些技巧能让你在以后的PS的学习过程少走些弯路。而这些技巧可以用过多种方式来实现,我们在操作过程中要学会融会贯通。


创建剪贴蒙版添加图片

接下来我们要学习的是图层更高级的一个功能:创建剪贴蒙版

这个光靠字面了解的话,很多人不知道是什么意思,我们在实践中来学习这个知识点。

首先我们找一张好看的新闻图片作为我们的banner的图片,这张图在做网站效果图的时候比较重要,它有支撑网站门面的作用,但不是最后实际网站访问的效果,目前只是做展示效果。

我们将找好的照片直接拖拽到我们的画布上,或者在素材网站上直接右键复制图片,然后在PS画布上使用快捷键【Ctrl】+ 【V】就可以复制过来了。

放到画布之后,我们并不是直接使用自由变换命令将其图片进行放大缩小,这样会导致图片变形,而是利用我们刚刚说的创建剪贴蒙板功能。我们想要把图片嵌入到最大的矩形图层中的区域里面显示,那么要先将图片的图层移至该矩形图层的上面。

这里我再补充一个提高效率的方法,我们在复制图片粘贴到画布的时候,不能一下子就放到剪贴图层的上面,还需要我们手动调整图层位置,在图层很多的情况下就非常麻烦!我们可以先选中画布中的图层,然后再从网页上复制粘贴图片到画布,这样粘贴过来的图片都会自动放置到之前选中的图层上面。

接着我们选中图片图层,右键点击创建剪贴蒙板,或者按住ALT键,这时候图片图层会出现一个向下的箭头。这时候该海报所图片显示的位置只能在下面矩形图层有颜色的区域范围之内。所以作为创建剪贴的图层必须要有颜色,什么颜色并不重要,关键在于可以方便地识别。

这个时候我们再进行图片的自由变换,使用快捷键【Ctrl】+【T】,然后按住【Shift】键进行等比缩放至合理位置。

底部衬托的渐变色

接下来我们需要在这张banner图片上加一个新闻报道的标题。

因为我们不确定网站上线之后banner是什么颜色,是否会影响标题的识别阅读,因此我们需要做一个黑色透明渐变的图层来衬托出我们标题并保证其阅读不会被背景颜色的变换而影响。

在banner海报图片图层上新建一个图层,快捷键【Ctrl+Shift+N】,将该图层命名为黑色渐变

图层创建好之后,按住【Ctrl】键点击banner区大矩形,我们会得到该图层的颜色部分的选取,点的时候需要注意点击的是图层缩略图部分,如下图所示

得到选取之后我们再回到刚刚创建的黑色渐变图层中,在该图层上进行编辑

使用渐变工具,在渐变工具的工具栏调整渐变颜色。

给大家简单解释下渐变工具栏中几个按钮的意思:

线性渐变:顾名思义,颜色从一条线向另一条线渐变,可以是横线、竖线、斜线,但是必须两个是一样的。

径向渐变:意思就是以你点击的地方为圆心,从起点到终点颜色从内到外进行圆形渐变。

角度渐变:我个人理解就是从你划线的地方开始按照转一圈的方向来渐变。

对称渐变:颜色对称,也可以理解成线性渐变的升级版,也就是渐变出来的效果是对称的,你做一边的渐变,会给你补出另一边。

菱形渐变:跟径向渐变类似,就是径向渐变里的圆形改成菱形。

这些渐变的功能大家一定要自己动手去试试,这样才会有更加直观的了解!

点击渐变条会出现一个渐变编辑器的窗口,我们可以看到里面有很多PS预设的渐变样式,我们选第二个

名称为前景色到透明渐变,点击确定。

然后在黑色渐变图层选区中由下到上进行拖拽,如果发现黑色渐变图层没有出现banner大矩形的选取,那么需要重新获取下选区,这样的话我们画出来的渐变才会出现在这个选区之内。这里要注意,我们只是需要banner矩形的选区,而渐变的编辑是在黑色渐变图层完成。

由下到上拖拽后,我们得到一个底部是黑色上面是透明的渐变。我们使用自由变换快捷键【Ctrl】+【T】将其高度向下压缩到70px,我把渐变做出来的效果拖到空白处给大家看下。

其实就是一个530像素x70像素的矩形,只不过它是一个有渐变效果的图形而已。

底部衬托标题的渐变色已经有了,下面我们来添加下标题文字。

在黑色渐变图层之上用快捷键【T】创建一个文字图层:“2018国际体验设计大会为大家提供了全球视角”文字大小为24px,颜色为#ffffff,字体为微软雅黑。

我这里说的几个图层,谁在谁的上面一定不能弄错关系,否则你做出来的效果一定和我不一样。

文字添加后效果如下图:

接下来我们加入第二张图片,先选中banner矩形2这个图形 ,把图片粘贴复制到画布,就可以直接显示在该图层的上面,将第二张图片命名为海报2,然后利用同样的方法参考上面我们创建剪贴蒙版的方式,按住【Shift】进行等比缩放。

放好后我们就不用再去制作黑色透明渐变了,可以将之前做好的渐变图层直接【Ctrl】+【J】复制一个出来。将复制出来的图层移至图片上面,使用快捷键【Ctrl】+【T】向左缩进,使其宽度与背景宽度250px一致,高度下压到50px。

然后再添加文字图层,文字内容可自己先随意写一些,文字大小为20px,颜色为#ffffff,字体为微软雅黑。

当这里图片展示区域比较小的时候我们的文字标题基本不能完全显示,这时候我们可以在标题后面加上省略号。

第二个图片完成之后我们将已经完成好的banner1和banner2图层组分别再整理一下,再啰嗦一句,不管是PS学习还是平时的工作,大家都一定要养成整理归类的习惯,这样可以大大提高我们做事情的效率。

接下来我们做第三个图片的时候就不用重新再做一遍,网站设计中同样的样式我们完全可以通过复制出来修改,这样不仅可以保持样式上的统一性,同时更加方便有效率。

我们把banner2的图层组再复制一个出来,命名为banner3,并移动到确定的位置,再删除原来的banner3图层组,如下图:

这个时候我们只要修改图片和文字即可,找到banner3的图片图层,复制粘贴另外一张图片,同样进行等比放大缩小至合适位置后删除原来图层图片,再修改下文字图层中的文字。

下图就我们目前做出的效果:


知识点总结:

1、参考其他网站构建网站布局

2、利用创建剪贴蒙版功能添加网站图片

到这儿我们本节课的banner位置的3张图片就已经放好了,看着简单的三块位置其实也涉及了不少的PS知识。大家要认真地看,多操作,截止目前我所介绍的点还都不是非常复杂的,如果大家看到这里还是不太能看懂,或者操作的结果和我描述中不一样,那么只会是两个原因:一是没有边理解边动手操作,二是没有掌握我之前一直强调的通过其它方式去寻找答案的方法,大家继续再接再厉!

【banner的排版布局隶属于分类: 大猫概念

它起初由本站用户:smart于1年前创建。

它被收录于如下合集: pscast


大猫城堡轻舟网|苏ICP备18056753号-3|本站用户