LOGO 设计的准备和实践

本文记录了一次 logo 设计实践的准备和执行过程 👨‍🎨。

‍

什么是 LOGO

一个高度抽象（概括 🤡）、具有代表性的图像。

例如网站名称前的图像

‍

为什么需要 LOGO

作为一个用于快速辨识的，整体形象的象征或代表图像 🤺。

例如 emoji 表情、头像乃至国旗似乎都可以看作一种 logo。

如何在 GitHub 上识别哪些是国人开发的项目 : r/China_irl (reddit.com)

‍

LOGO 有哪些要求

以下是应尽可能考虑的通用项：

• 辨识度 🚧

  • 支持单色显示
  • 缩到极小后仍可辨识
  • 在模糊、低分辨率下仍有一定辨识度

• 友好度（加分项）

  • 色盲友好

‍

设计 logo 是越复杂越好，还是越简单越好？

‍

‍

LOGO 设计要提交什么

最终应交付的是至少一个矢量图，即用线和点（向量）组成的图像，特点是图像可以无损缩放，因为描述的是元素间的相对关系和属性 📐。

‍

而矢量图的格式很多，常见的有 AI（Adobe Illustrator）、SVG（Scalable Vector Graphics）

后续过程中将使用 PS 的钢笔功能绘制路径，并最终转换为 SVG 文件导出

‍

但设计一般并不是个一挥而就的过程，在不同的阶段应有不同完成度的最小可用作品（MVP）。

‍

例如进度从开始到交付前的成果大概如下：

• 探索创意阶段

  • 手绘并拍摄照片记录，用于提供和确认创意

• 效果确认阶段

  • 进一步完善细节，填充基本颜色，考虑最低成本下的辨识度

• 补充应用阶段

  • 确认最终效果、绘制为矢量图
  • 按应用情况提供多场景下的效果展示图（VI）
  • VI 即（Visual Identity System），视觉识别系统。是展示设计物特征和不同场景的使用规范，用于体现一个完整的表达体系。

‍

如果用于商业，可选提供含有水印的低分辨率照片。根据已付金额比例决定给出的作品完成度，最后再提交源文件。

‍

inflectiv.co

‍

LOGO 设计有哪些过程

‍

• 确认需求
• 搜集灵感
• 构思创意
• 绘制草稿
• 确认效果
• 完善提交

当然，更多时候是需要一个 logo 但没想好怎么弄，最后先贴一个抽象图形 🤯 等待后来者解释。

‍

图片来源：北信源官方微信

‍

‍

LOGO 设计实践

‍

下面以设计冰球协会征集冰球联赛 LOGO 需要的 LOGO 为例。

‍

确认需求

因为有明确的公告（文字需求），此处可大概提取出男冰联赛 LOGO 的主要需求：

• 彩色 LOGO

  • 体现运动的力量与速度的特点，融入中国文化元素

• 设计说明

  • 阐述 LOGO 设计的基本元素、理念、创意思路、表现形式与内涵。
  • 即说明 LOGO 包含什么，为什么设计、如何设计、设计成什么样与有什么深意

• 纸质邮寄或通过电子邮箱投稿

  • 邮箱地址：ciha-competition@icehockeychina.cn

‍

搜集灵感

包括了解设计目标 🏒 的背景知识、同类 LOGO。

‍

具体来说，我主要浏览了相应的百科、科普、相应的赛事照片、录像。

‍

• 查看相关的网站，如：

  • 中国冰球协会官方网站中的贴文
  • 在知乎等网站中搜索相关内容

• 得到一些关键词（大众视角）—— 在 Bilibili 搜索关键词，筛选观看数、收藏数后得出的阶段性结果

  • 冰球
  • 斗殴
  • 国歌
  • 颜值

• 进一步根据互联网查看相应内容

  • 执行者（冰球比赛中专门负责打架的队员）

  • 冰球装备

    • 冰球鞋

    • 冰球杆

    • 冰球

    • 护具

      • 门将的装备会更重，容易发现的是腿部的护具更宽

• 查看以往中国冰球的相关细节

  • 男子冰球队

    • 绰号：龙
    • 球队颜色：红黄白

  • 女子冰球队

    • 绰号：女龙
    • 球队颜色：黑红黄白

• 看了一场冰球比赛的感受

  • 滑

  • 肢体碰撞

  • 挥舞

  • 守门员

    • 门将

‍

‍

在以下网站中查看了关于冰球（Ice Hockey）运动的设计：

• Pinterest
• Ice Hockey :: Behance
• Ice Hockey | Dribbble
• ibxhockey
• 冰球 - 搜索结果 - 花瓣 (huaban.com)

‍

‍

‍

构思创意

这与搜集灵感的步骤通常不是割裂的，在建立对目标领域的认识时绘制的草图意味着一个初学者眼中会关注第一元素。

可以写下想法或用纸笔绘制草图：

此处是链接了手绘板在 画图 软件中绘制的草图

‍

在主要元素确认阶段，可以就着一两个关键词进行发散思考，即头脑风暴 🌪。

例如我的一些联想和发散如下：

• 冰球

  • 冰球杆

    • 挥舞

    • 棍棒

      • 孙悟空

• 中国文化

  • 敦煌

    • 飞天

  • 书法

  • 龙

    • 云雾

  • 水墨

  • 梅兰竹菊

    • 坚韧

  • 武术

  • 印章

  • 剪纸

  • 红色

    • 国旗

  • 五星

  • 熊猫

‍

绘制草稿

在这个阶段我初步确认了冰球和熊猫 🐼 的组成。

但前面的草稿画完后总感觉有心无力了，遂使用了绘图 AI 微软绘图进行了草稿灵感的探寻。

此处描述词的确认借助了你迟早要设计自己的标志，不如早点看看 - oooooohmygosh 这篇视频中总结的一些设计思路：

‍

• 加法：画面中加入图形

  • 强化标志立体感、空间感
  • 信息首作为标志主体
  • 提取主体信息作为抽象图形
  • 创作具象象征物进行图形融合

• 减法：已有画面中减去图形（负形）

• 多尝试更多的方案

• 提取想要表达的主体，提供解释空间

并最终绘制草稿如下：

‍

‍

确认效果

此处是在向群友确认了一些受欢迎的方案后，修剪 ✂ 了一些割裂的图形，完善了色彩和光影（体现立体感）。

‍

一般来说可能还要为 LOGO常出现的位置 提供一些示例图，但此处嫌麻烦没做。

注：logo 为北京昆仑鸿星冰球俱乐部 logo

以及此时可以进行 LOGO 的可用性测试了，此处我是使用了这个网站 logolab。

‍

‍

完善提交

‍

此处先简要描述使用 PS 中的钢笔工具 ✒ 绘制 LOGO 的方法。

以下展示是用在线 ps 截图的，好处是方便随处打开，坏处是一些快捷键效果不佳。

‍

以下是一些通用操作：

• 按住 alt + 鼠标滚轮缩放
• 图片超出屏幕范围后，按住 空格 并按下鼠标左键后拖动可实现拖动画布
• 选择画笔，快捷键 b 后，按下 Alt 可以在图片中吸色。

此处主要使用钢笔工具（P）和路径选择工具（A）即可。

‍

钢笔工具点击出两个锚点（连线）后，可以点击并拖动第二个点将拖出一个具有两个点的直线线段。借助该直线可以将锚点间的直线变为曲线。

‍

‍

需要注意的是，注意画出想要的曲线后，应按住 Alt 选中该直线需要链接第三个（即下一个）锚点的直线段，鼠标变为一个锐角后左键点击收起该线段，否则后续的连线的起始部分会被影响。

将钢笔工具的锚点链接回起始的锚点后，成功绘制了一个路径，此处建议新建图层后再在上方的工具栏中找到类似 建立形状 的选项以建立一个形状。

使用直接选择工具默认是选择整个路径，通过它可以更改当前路径的填充色或描线。

而点击它出现的第二个直接选择工具则允许你修改路径锚点的位置（曲度），删除端点（拖动出一个框，按下 Delete 删除框中的锚点）

最后选择导出 SVG 即可，软件中操作会复杂一点，不过不会太麻烦。

为避免太抠细节，此处我是开了个 A4 大小的画布后再用钢笔工具绘制的图形。

后续的提交内容则主要看需求了，因为附件似乎超出邮箱限制（公告要求邮件提交）。

个人是用网盘将相关文件全部打包后将分享链接贴在了邮件正文中了。

参考资料

• 如何交付一份合格的 LOGO 打包源文件？ – 123 标志设计博客
• 接了一个 logo 设计的私活，我需要提交什么文件？ - 林富华的回答
• VI 设计要怎么做？包括哪些内容？ - 康石石的回答 - 知乎
• 冰球中的四种主要射门技术 （附视频） (qq.com)
• 盘点冰球比赛一些有意思的地方 - 知乎 (zhihu.com)
• 在 Photoshop 中使用钢笔工具绘图 (adobe.com)