您当前的位置: 首页 » HTML/XHTML/XML编程 » 三步走实战网页广告条制作
三步走实战网页广告条制作
论坛链接
广告条（banner）是我们在浏览网页的过程中遇到的最多的网页元素之一了。笔者结合阿里巴巴和taobao的一些广告条，在此总结一些网页广告条制作的实用方法，希望对大家有些帮助。
首先是把所有元素都堆上去，文字图片，然后参考设计的内容定一个颜色。
笔者把广告条分为两类：
一类是产品展示型，主要是对客户需要展示的产品做一个排版和设计。
二类可能是一个活动，没有产品展示，需要自己发挥更多。
我们先来说说第一类：
客户提供的产品一般分两类：一类是有完整外观的，比如这双nike；他本身就有一个很好的外形轮廓，一般这种都把产品单独扣出来进行制作。
另外一类就是没有明显外形特点的，比如下面的床上用品。这样的素材其处理方法就会有些特别。让我们来看例子。
第一步：整个环境的设计
从图中可以看到：在边角用到的简单图形文字很快的就表现出了你想表达的东西，让人一目了然。这个点题的图形一般出现在两个角上，相对产品会显得比较大；但这也不绝对，我们需要灵活运用。
另外，在颜色上拉一个渐变也会产生光线照射的感觉，能有效地丰富层次感。
如果基本元素的位置都放好了以后，如果觉得背景还是太过简单，我们可以试试加一些样式。下面给出几个例子应该会对各位会有所启发。
在这个基本的环境搭建好以后，整个广告条的调子也基本确定了。接下来，我们只要把要展现的产品放进去就好了。
第二步：产品的展示
我们来分析一下前面用到的两张图。月饼那张图中，里面的月饼盒都有漂亮明显的外形轮廓，所以我们选择把他们抠出来处理。可能有些图形轮廓比较难抠，抠出来以后会有毛刺。笔者在这里用到的方法是加个外发光效果。本招操作简单但却超级必杀，问题马上解决。
床上用品这张，由于没有外形轮廓的特点，我们给他加了一个外框来让几个物品摆放的时候感觉更加整齐。另外如果前面一种抠出的效果排布起来还是感觉凌乱，或者产品本身比较迷你的话，我们也可以考虑加一个统一的背景来增加统一感（如下面两张图）：
第三步：字体的选择和样式设计
这个方面本人一直比较关注。字体选择得正确，往往就能把把握住整个广告条的风格。一个广告条上的文字一般有大有小，要突出的字应当大一点并加个样式；有些需要活泼气氛的不妨把字都独立出来，做个旋转效果，这样下来便会有相当好的效果。
请注意，字体样式和效果的使用要有节制，同一个广告条内的文字效果一般控制在3种以内，太多了会给人以眼花缭乱的感觉。下面举例一些字体及样式的设计给大家做个参考（主要就是渐变/描边/做产生立体感的白细线）。
最后，希望本文能对各位朋友有所帮助，祝大家都能设计出精美实用、令人赏心悦目的广告条作品。
首先是把所有元素都堆上去，文字图片，然后参考设计的内容定一个颜色。
笔者把广告条分为两类：
一类是产品展示型，主要是对客户需要展示的产品做一个排版和设计。
二类可能是一个活动，没有产品展示，需要自己发挥更多。
我们先来说说第一类：
客户提供的产品一般分两类：一类是有完整外观的，比如这双nike；他本身就有一个很好的外形轮廓，一般这种都把产品单独扣出来进行制作。
另外一类就是没有明显外形特点的，比如下面的床上用品。这样的素材其处理方法就会有些特别。让我们来看例子。
第一步：整个环境的设计
从图中可以看到：在边角用到的简单图形文字很快的就表现出了你想表达的东西，让人一目了然。这个点题的图形一般出现在两个角上，相对产品会显得比较大；但这也不绝对，我们需要灵活运用。
另外，在颜色上拉一个渐变也会产生光线照射的感觉，能有效地丰富层次感。
如果基本元素的位置都放好了以后，如果觉得背景还是太过简单，我们可以试试加一些样式。下面给出几个例子应该会对各位会有所启发。
在这个基本的环境搭建好以后，整个广告条的调子也基本确定了。接下来，我们只要把要展现的产品放进去就好了。
第二步：产品的展示
我们来分析一下前面用到的两张图。月饼那张图中，里面的月饼盒都有漂亮明显的外形轮廓，所以我们选择把他们抠出来处理。可能有些图形轮廓比较难抠，抠出来以后会有毛刺。笔者在这里用到的方法是加个外发光效果。本招操作简单但却超级必杀，问题马上解决。
床上用品这张，由于没有外形轮廓的特点，我们给他加了一个外框来让几个物品摆放的时候感觉更加整齐。另外如果前面一种抠出的效果排布起来还是感觉凌乱，或者产品本身比较迷你的话，我们也可以考虑加一个统一的背景来增加统一感（如下面两张图）：
第三步：字体的选择和样式设计
这个方面本人一直比较关注。字体选择得正确，往往就能把把握住整个广告条的风格。一个广告条上的文字一般有大有小，要突出的字应当大一点并加个样式；有些需要活泼气氛的不妨把字都独立出来，做个旋转效果，这样下来便会有相当好的效果。
请注意，字体样式和效果的使用要有节制，同一个广告条内的文字效果一般控制在3种以内，太多了会给人以眼花缭乱的感觉。下面举例一些字体及样式的设计给大家做个参考（主要就是渐变/描边/做产生立体感的白细线）。
最后，希望本文能对各位朋友有所帮助，祝大家都能设计出精美实用、令人赏心悦目的广告条作品。