简单制作LOGO

你的名字 2022-10-31 05:27 214阅读 0赞

> 本文参考: [Design a simple text logo in 15 minutes with Google Fonts and Figma][]

## 1. 灵感 ##

制作Logo可以先从一些专业网站寻找灵感，把自己想要的整体设计确认一下，有一个非常不错的网站，可以根据你的文字生成大量Logo的效果：

比如，针对 [PageHelper][]：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70]  
通过挑选自己喜欢的设计，我找到一个参考：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 1]  
一朵花中的PageHelper。

## 2. 素材 ##

素材分为两部分：

*  图标
 *  字体
 *  配色方案

### 2.1 图标 ###

使用 [flaticon][] 来搜索图标，在搜索图标的时候可以在过滤器中选择免费授权的图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 2]  
直接搜索flower时，花都挺简单，于是搜索 **chrysanthemum** 结果如上图。

挑选了下面这个图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 3]  
下载SVG格式。

### 2.2 字体 ###

在 [Google Fonts][] 输入自己的文字，查看不同字体的效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 4]

### 2.3 配色方案 ###

有很多种选择配色方案的方式，第一种就是直接从 [Color Hunt][] 选择一个自己喜欢的配色。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 5]

另外就是在 [flaticon][] 搜索图标时，挑选喜欢的配色图标作为参考。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 6]

## 3. 设计 ##

使用 [Figma][] 进行在线设计，创建一个免费帐号登录。

创建一个新的空白设计，选择下面 **Place image…** 按钮导入 SVG 图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 7]  
选择 **T**，输入文字 **PageHelper**。

Figma中提供了大量免费的字体，也可以选择自己本地的字体，如果从 Google Fonts 下载了字体安装到本地，在 Figma中使用时，需要先安装一个插件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 8]  
打开**字体设置**，在 Fonts 下面有一个下载链接，下载安装后会如下图所示：  
![在这里插入图片描述][20210222091426422.png]

因为导入的SVG图标，在Figma中可以方便的对图标进行各种可能的编辑。例如我选择的这朵花，可以修改每一个花瓣：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 9]

然后就是根据灵感加入自己的设计。下面是设计过程中的多个效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 11]  
最终参考上面那朵小红花的配色，做出了一个最终设计的方案：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 12]

## 4. 导出设计 ##

在 Figma中可以选择不同的层，对象，在右侧添加 **Export** 进行导出：  
![在这里插入图片描述][20210222092439349.png]  
导出可以选择倍率，格式，可以一次有多个导出。

最终的这个设计不一定让很多人满意，设计的整个过程才是本文的重点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 13]

> **其中花瓣代表了每一页，1，2，3，4，5，6代表了分页中的页码，左右两侧的 PREV,NEXT代表的上一页和下一页**

重复上述步骤，针对[新版通用Mapper][Mapper]也做了一个Logo：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 14]

> **一只和MyBatis小鸟有些像的小鸟落在了Mapper上**

[Design a simple text logo in 15 minutes with Google Fonts and Figma]: https://www.dinosaas.com/articles/design-a-simple-text-logo-with-google-fonts-and-figma
[PageHelper]: https://www.logosc.cn/make?n=PageHelper&s=&descr=
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70]: /images/20221024/9c3dfbbabcf6434082c8e82d546b0908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 1]: /images/20221024/2fdf02d13ca74760906e9dc38fc4cc39.png
[flaticon]: https://www.flaticon.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 2]: /images/20221024/c390242f12944c4c848008eb6bc6302a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 3]: /images/20221024/4c3f73d70ade42868640adf5b850a5d2.png
[Google Fonts]: https://fonts.google.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 4]: /images/20221024/840fc8414a904654978ae3f8f795cda1.png
[Color Hunt]: https://colorhunt.co/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 5]: /images/20221024/fb0bcf2ff30340bca4df7b1b656b7b01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 6]: /images/20221024/f5b9c665ac60462781c7b655cd58688f.png
[Figma]: https://www.figma.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 7]: /images/20221024/588ee4916c5c4ac5adf7ade8e2a92af8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 8]: /images/20221024/34489c1ef4e24a2ab54c5aef9381e042.png
[20210222091426422.png]: /images/20221024/8a38491e978a4bb6801160560d49a049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 9]: /images/20221024/831137eaee644e9f88d0327df644a994.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 10]: /images/20221024/990d06c7b4204f4faa4f61201a7f825d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 11]: /images/20221024/0c631e231c394cf3a79fb00a57727423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 12]: /images/20221024/0c334c1157aa4f489a1f7ac01e6ec033.png
[20210222092439349.png]: /images/20221024/43d5f5084b204d098e232f9cc9826385.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 13]: /images/20221024/aaded2abedd546028cc34438628d7a87.png
[Mapper]: https://github.com/mybatis-mapper/mapper
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzZWE1MzM_size_16_color_FFFFFF_t_70 14]: /images/20221024/f1f530ceb58b47098e3cc76b9a3586f4.png