banner代码编写(网页设计banner代码)

首先banner设计的四大注意事项:

1、如何使banner设计具有创意2、从banner设计的角度谈如何3、网站banner设计的常用尺寸4、什么是banner设计?

一般来说,网站制作一个banner分为两个部分,文字和辅助图。虽然辅助图站的面积比较大,但如果不加入文字说明的话,客户就会看不懂你做的banner要表现什么、要说明什么,所以文字是整个banner的主角,我们在制作banner的时候特别要注意对文字的处理和摆放。

banner的设计质量严重影响着整个网站页面的质量,一个好的页面、好的banner能够吸引浏览者的眼球。虽然banner只是网页页面中一个小元素,但是这个小元素往往能够起到关键性的作用。所以在进行banner设计时需要引起足够的重视。

下面我们开始设计一张Banner图。

1、新建一个大小为3125*2183像素的画布,网页浏览一般分辨率设置为72就可以了,我这边设置的是300是为了更清楚的展示图片。没错,分辨率越高,制作出来的图片就越清晰,相反分辨率越低,图片就越模糊。(如下图)

banner代码编写(网页设计banner代码)

画布设置好了之后,我们接下来需要做的是明确主题和需要展示的产品或者需要展示的信息。下面是需要放入Banner的产品,如图:

需要注意的是,上面的薯片素材有的是PNG格式,有的是白底的JPG格式,PNG格式可直接拖到画面使用即可,JPG格式就需要先抠图,意思就是把白底去掉。(抠图属于最基本常识就不在此演示了)接下来就切入正题了。要设计Banner或者是海报之类的画面,背景选取是很重要的。下面背景是我自己做的,主要运用的是矩形工具 渐变(如图)

下方留了一条白,再重新画一个矩形 渐变工具,形成一个倒影效果。如图:

下面继续,画个椭圆

1、添加图层样式里面的描边,描边大小17像素,位置外部,混合模式正常,不透明度100%。如图:

2、添加图层样式里面的内发光,混合模式改为滤色,不透明度35%,杂色0%,方法柔和边缘,阻塞0%,大小29像素,品质等高线,范围50%,抖动0% 如图:

3、添加图层样式里面的渐变叠加,混合模式改为正常,不透明度100%,样式径向,角度-4度,缩放100%。如图:

整体效果如图:

(是不是很丑,哈哈)

下面再在原来的基础上添加一些元素。如图运用椭圆做一个底座。

运用到的工具如图:

最后的效果是这样的:

加个阴影,使得底座效果更立体。阴影也是用椭圆工具,然后用模糊滤镜,再调低不透明度,将阴影放在底座的图层下方。效果如图:

再加点其他小元素,让整个画面变的更有质感。效果如图:

到这一步,背景制作完成,现在需要做的是将前面我们提到的薯片素材一个个嵌入到画面中,如图:

将拖入的薯片素材加上投影,目的是为了让产品更融入背景,更有立体感。具体参数如图:

投影不需要一个个添加,只需要设置好第一个投影参数,直接拷贝图层样式后粘贴图层样式即可。按以上操作分别拖入其它薯片素材后再添加一些泡泡素材,让画面充满活力,效果如图:

下面再给banner加上主标题和副标题,主标题字体需要比副标题大,且更醒目。主标题为:乐事到家 快乐相伴 副标题为:满38减8元 所用字体有:方正综艺简体(一般最好不要用方正字体,因为容易被告),思源黑体。

效果如图:

标题字体需要设计一下,我这边为了省事直接就加了个投影和创建了一个剪切蒙版,效果如图:

接下来就是写扫尾工作,我在设计网站找了一些散落的薯片素材加入画面,其实两处素材是一样的,只不过是转换了一下角度,让画面更加对称一些,也让整个画面更加美观一些。这个主要靠自己的想法。

最终效果如图:

最后我总结一下设计网页Banner时需要注意的问题:

1、banner设计中的文字注意事项一般来说,网站制作一个banner分为两个部分,文字和辅助图。虽然辅助图站的面积比较大,但如果不加入文字说明的话,客户就会看不懂你做的banner要表现什么、要说明什么,所以文字是整个banner的主角,我们在制作banner的时候特别要注意对文字的处理和摆放。

①分清主标和副标,从主次上来说,主标为主,字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满,比较集中。

②如果主标太长,需求方不舍得删文字的情况下,对主标中重要关键字进行权重,突出主要的信息,弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

③如果需求方整体文字太短,画面太空,可以用一些加入一些辅助信息丰富画面。如加点英文,域名,频道名等。

3、Banner的“重量”要轻。以468×60的Banner为例,最好是15K左右,不要超过22K。而88×31的Banner最好在5K左右,不要超过7K太大的会引起网页打开速度,导致浏览下降,这里面也有个量的问题,太多的广告而影响浏览者浏览网页,导致反感这也是一个问题。所以放广告条的时候要考虑到广告的大小和多少,还有就是搭配问题。

4、从banner设计上来看,需要注意:

①Banner的文字不能太多,用一两句话来表达即可。②广告语要朗朗上口,可以第一时间的让人捕获表达的重点。③图形无须太繁杂,文字尽量使用黑体等粗壮的字体,否则在视觉上很容易被网页其他内容淹没。④图形尽量选择颜色数量少,能够说明问题的事物。⑤如果选择颜色很复杂的物体,要考虑一下在低颜色数情况下,是否会有明显的色斑。⑥尽量不要使用彩虹色、晕边等复杂的特技图形效果,这样做会大大增加图形所占据的颜色数,增大体积。⑦产品数量不宜过多。很多广告主总是想展示更多产品,少则4-5个,多则8-10个,结果使得整个Banner 变成产品的堆砌。Banner 的显示尺寸非常有限,摆放太多产品,反而被淹没,视觉效果大打折扣。所以,产品图片不是越多越好,易于识别是关键。

最后,感谢大家耐心的阅读。

发表评论

登录后才能评论