Branding 跨境独立站品牌形象设计常用工具推荐

Shopify 后台里有一项 Branding 的设置，是通过网站的Logo，色彩搭配，Banner图，Solgan标语，以及品牌描述来确定并且展现品牌形象的。品牌形象的设计不仅仅会用在我们的独立站，不管是Shopify还是WooCommerce或者其他任何程序搭建的独立站，还会应用到各个社交媒体渠道的账户设置，发布的图片或者视频的视觉效果上；日常邮件营销的邮件风格设计上；以及产品包装，各种发货时放在包裹里面的营销卡片的视觉效果上；等等。

我们需要保持线上线下全网品牌视觉效果的统一。因此，在独立站建站前期，一项重要的工作就是确定品牌形象。我们大部分人都不是专业的设计师，很多时候都是依据我们的个人喜好来设置的。这里我介绍几个工具和方法，帮助我们独立站卖家能更快确定自己网站和品牌的形象设计。

网站色彩搭配的选择

网站色彩该如何搭配？我的第一反应是参考竞争对手的网站色彩搭配。尤其是所在行业里面的大站的网站配色。比方说做眼影唇膏之类的产品，我们就可以参考 Colourpop，Kylie Cosmetics，Morphe 这些行业里面相对比较知名的网站色彩搭配。他们的网站色彩搭配可能是针对受众，依据色彩心理学啥的，通过专业人员设计出来的吧，应该不会像我一样直接一拍脑袋瓜随便选几个颜色就搞定了的。

ColorZilla – 提取竞争对手网站配色

Colorzilla 之前有写过一篇文章专门介绍过，这里就不再赘述具体的使用方法了。

借助 ColorZilla, 我们可以一键提取网页任意一点的16位进制颜色代码，或者批量提取网页上所有颜色的代码。然后再把这些代码应用到我们自己的 Logo 设计，网站主题设置里面。

图片[2]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

个人觉得，如果只是单纯的提取网站配色， ColorZilla 是最简单实用的工具。

Canva – 提取任意图片的配色

Canva 也可以提取图片的配色。所以我们可以把竞争对手的网页截图下来，放到 Canva 里面提取网页颜色。如下图，将要提取颜色的图片添加到画布之后，点击画布空白处，然后点击菜单栏中的颜色设置，在左侧的颜色选项栏中就会出现“Photo Colors”的选项，点击任意颜色，就可以把该颜色应用到画布或者指定元素中去。

图片[3]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

不过，如果图片色彩很复杂，Canva 的这个功能用起来就会有点吃力了。

对 PhotoShop 来说，提取图片颜色更是小菜一碟，但是如果仅仅是为了提取网页颜色，ColorZilla 就足够了。

Coolors – 流行色彩搭配

Coolors 是一个在线色彩搭配工具。我们可以参考 Coolors 提供的各种配色方案，来确定我们品牌的一整套的配色方案。我们也可以使用 Coolors 随意DIY出自己的一套配色方案。

图片[4]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

例如我的网站使用的配色方案就是上图第一行中间的配色方案，把鼠标放到具体的色块上之后，就会显示该色块的16位进制颜色代码。点击该代码就可以直接复制该代码。

图片[5]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

点击上图右下角的“•••”，在选项中选择“Open in the generator”, 还可以对配色方案进行调整。

不管使用以上哪种方法吧，我们都可以最终获得一组自己网站或者品牌形象的配色方案。个人建议一组配色方案的颜色数量控制在5个以内。把这一组的配色方案的颜色代码记录下来，后面我们在设计网站 Logo，Banner图片，设置网站主题，营销邮件，以及各个社媒渠道的图片视频素材时都会用到。

品牌 Logo 的设计

如果对 Logo 的要求不高，我们可以使用 Hatchful 或者类似的工具快速生成一款 Logo 出来。如果稍有要求的，可以使用 Canva 来制作 Logo，Canva 内置的素材比 Hatchful 多的多，功能也更强大，出来的效果要比 Hatchful 好很多，而且 Canva 不仅仅可以制作 Logo，它可以制作各种图片素材，甚至是视频素材的。

如果对 Logo 要求很高，也可以在天猫淘宝，或者 Fiverr 上找国内外专业的设计师，按照我们的要求定制 Logo 出来。https://www.fiverr.com/logo-design

这里以美版 Canva 为例。

登录 Canva 后台之后，右上角 “Create a design” 下拉选项中选择 Logo 或者 Custom Size。这两个入口进入的页面会有些不同，选择“Logo”的话，Canva 会推荐非常多的 Logo 设计。而选择 Custom Size，则是我们完全自由 DIY Logo 设计。

图片[6]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

“Create a design” 选择 Logo 之后，会创建一个 500 x 500px 的图片，如下图。通过 Canva 后台左上角的“Resize”按钮，以及下载时“Size”选项，我们可以随时对图片尺寸进行调整。在页面左侧会出现非常多的 Logo 模板，我们可以通过搜索关键词来获得更相关的 Logo 形象。例如做宠物用品的话，可以搜索 Pet, 做猫咪相关的产品的话，搜索 Cat，然后再从其中选择一个喜欢的素材。

图片[7]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

点击选好的素材就会添加到右侧的画布里面。我们可以根据我们已经选好的配色方案，对 Logo 配色进行调整。建议至少生成两套配色 Logo 方案，如上图。纯白背景的 Logo 可以下载为透明背景的 PNG 文件。点击上图 Logo 上方的 “Duplicate Page” 可以快速复制出一个新的Logo出来，然后再对其进行配色方案的调整，当透明背景的 Logo 不适合的时候，我们可以使用深色背景的 Logo。

设置好之后，打包下载所有的 Logo 图片备用。Canva 也会实时自动保存我们的设计，后面我们可以随时回到 Logo 的编辑页面，继续对这些 Logo 进行调整或者修改。

“Create a design” 选择 Custom Size 之后我们可以自定义画布尺寸，然后在左侧边栏 Elements 选项卡搜索关键词，可以找到很多的Logo素材，然后结合我们上面完成的色彩搭配方案，随意DIY出Logo，并下载备用。

图片[8]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

无论免费版和是付费版的 Canva，我们生成的 Logo 都是可以直接商用，放到自己的网站和各个社媒渠道的。只不过很多的素材免费版 Canva 用不了。我们可以单独花钱购买素材，也可以购买 Canva Pro 版，来解锁所有素材的使用权。

我自己是购买了 Canva 会员的，除了网站前期设计 Logo，Banner 会用到之外，Canva 还可以一键移除图片背景，这个功能对于设置统一背景的产品图片来说非常好用。后面日常的邮件营销邮件设计，节日图片设计，社媒渠道 Instagram，Pinterest, TikTok 的图片和视频素材的生产，Canva 也是一个非常赞的助手。要不要购买 Canva 会员，看自己预算和 Canva 的使用频率吧。

网站 Banner 以及各种 Banner 图的设计

使用 Canva 制作 Logo 之后，其他各种类型的图片制作信手拈来。Banner 图的制作也非常简单，在创建画布之后，Canva 会自动推荐成千上万的 Banner 模板给我们选择，我们可以通过搜索关键词来提高模板推荐的相关性。例如搜索 Cat 都是猫咪相关的模板，搜索 Christmas 都是圣诞主题的模板。

图片[9]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

点击模板之后可以快速应用模板到画布里面，上图中的每个元素都是可以编辑的，我们可以按照选定的配色对模板进行调整和修改。如下图，把我选定的配色方案应用到色块里面，修改文字之后，生成的 Banner 图片。

图片[10]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

Canva 生成的所有图片都是实时保存，后面可以随时修改的。所以如果上面的图片放到网站上之后，大小颜色或者文字位置不适合的话，我们可以随时回来进行调整。

尤其是当图片要当到网站首页的 Banner 里面的时候，建议不要在图片中添加文字，同时要把我们要重点表达的内容放在图片的正中间，因为很多完整主题的PC端和移动端都会调用同一张图片，这样，无论在移动端还是PC端，图片都可以正常的显示。例如，上图在PC端可以正常显示完整内容，但是在移动端可能会像下边左侧图片一样，只显示一部分文字内容。右侧图片则是把主要内容显示在图片中间部分之后，无论是移动端还是PC端，都可以正常显示内容。

图片[11]-Branding 跨境独立站品牌形象设计常用工具推荐 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

品牌标语 Slogan 和品牌描述

品牌的标语和描述可以帮助客户更直观的了解我们的独立站业务，了解我们是做什么的, 以及我们要传达什么样的理念。例如

Nike “Just do it”；
Amazon “Work Hard. Have Fun. Make History”, “Earth’s most customer-centric company”;
Adidas “Impossible is Nothing”

这个没啥说的，有一些免费工具可以生成 Slogan, 不过工具生成的大部分 Slogan 都是生搬硬套的，读起来很别扭。只能从里面挑选合适的了。例如我翻出来的一个: “The Cat Supplies Universe.” 和 “Just do it” 比起来平平无奇，甚至过于寡淡，但是凑活着用吧，啥时候想到更好的，换掉就行了。

当然，我们也可以在 fiverr.com/slogan 上花上三五十美金找老外帮我们出几个点子。