淘宝店铺banner设计简易排版参照模板图文教程简析超级实用

2011-12-28 16:50:31 作者：水墨来源：互联网

我发现我上次想的文案形状设计法还是很有效的，至少在我的工作中有起到很好的作用。

这种排版方法的关键在于让文案依照形状的走势来排版，整体效果是可以的，但是文案的排版精细度就不会太够。

为此我决定把这个方法再拓展一下。

在不考虑模特照片的情况下，我们可以把文案排版的元素分为以下七种：

字形、方向、颜色、数字、英文、纹理、框架。

然后我按照设计的难易顺序来排个参照序列。

一、斜向排版&竖向排版&横竖混排

有倾斜的排版视觉效果是非常直接的

促销广告053 敏捷设计之超级淘宝店设计简易排版参照模板

斜向排版范例

特点：倾斜角度不要超过45°，否则影响视觉效果。另外一旦采用斜向排版，建议把所有文案内容都采用斜向排版，否则看起来不协调。

促销广告025 敏捷设计之超级淘宝店设计简易排版参照模板

竖向排版范例

特点：竖向排版适合做有文化底蕴的东西。

焦点图025 敏捷设计之超级淘宝店设计简易排版参照模板

横竖混排范例1

促销广告031 敏捷设计之超级淘宝店设计简易排版参照模板

横竖混排范例2

特点：横竖混排非常考验排版能力，属于高端技巧，虽然很难排出效果，但是偶尔尝试一下也未尝不可。

二、双色排版及三色排版

如下图所示的设计图在淘宝还是比较常见的，问题的关键是你有没有掌握里面最核心的设计方法。我把这种排版简洁视觉效果突出的方法归纳为双色排版和三色排版。当然，关于色彩的排版设计并没有那么简单，我只是出于高效排版的需要所选择这样一种排版方式作为我的设计参考模板。

促销广告078 敏捷设计之超级淘宝店设计简易排版参照模板

双色排版范例

特点：文字隔行排版，且两种颜色对比强烈。

促销广告015 敏捷设计之超级淘宝店设计简易排版参照模板

三色排版范例

特点：这里的文字颜色有三种。一个背景色，一个白色，一个黄色，这种颜色排版方式颜色对比强烈但又很协调。我们自己做图时可以采用另外的对比色，背景色和白色可以作为基础色。

教程排行榜: 30个基于jQuery框架的幻灯滑块特效设计的网站实例; 30个基于jQuery滑动门技术的网站欣赏; 10个优美精致简约风格的导航菜单欣赏及点评; 38款网页设计应用的JS拉洋片幻灯效果欣赏; 最新收集的50多个专业设计公司网站欣赏; 40+设计独特超漂亮的水平导航网站欣赏; 全球65个设计出众的设计师个人博客欣赏; 35套精美绚丽的创意酷站设计欣赏; 国外颇具特色的电子商务网站设计欣赏(上); 国外颇具特色的电子商务网站设计欣赏(下); 21个精美漂亮的网页幻灯片应用案例欣赏; 20个设计精致漂亮的Photoshop网页设计教程; 网页UI之Banner广告条设计案例赏析; 2011年网站设计的新趋势; 手绘风格的15款超级漂亮网站欣赏; 24个很漂亮用CSS3实现的文本效果演示及教程推荐

下载排行榜: 带标题显示拉洋片式的jQuery滑动幻灯特效插件; 带标题和数字导航的JS焦点幻灯特效代码; 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 支持幻灯、相册、滚动、TAB选项卡等效果的...; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 31款简单实用的CSS+JS下拉菜单脚本; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 简洁效果多图切换flash幻灯焦点图代码; 基于jQuery实现的瀑布流布局列表特效代码; 3D立体效果金字塔环形旋转的flash+xml相册代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 兼容firefox和IE的QQ、淘宝旺旺在线客服代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 能自动弹出对话信息框的QQ在线客服代码; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...; 很好看的带缓冲效果CSS下拉菜单导航代码