为博客设计一个 favicon

为博客设计一个 favicon

风宇

favicon 一般用在网页标签的网站名称前面和书签图片中,用来更方便的分辨网站,之前用的 favicon 是一个像素风格的枫叶,是在网上找到的,虽然最终在网站上购入了原图(会员免费下载使用),不过为了个性化网站外观,所以打算设计一个简单的 favicon

设计完 favicon 后,索性偷个懒,直接把这个当作博客的 logo 和头像了,一举三得 😎

思路

设计风格

首先我需要确定下设计风格,本身我也没学过图标设计相关的软件,所以为了方便设计一个简单的图标,我打算设计一个纯色块构成的扁平风格的图标,不添加阴影,高光和渐变等设计元素

图标元素

然后要定下图标的大致设计元素了,使用卡通人物、抽象实物还是名称首字母,这里我没有犹豫当然是直接使用首字母进行简单设计了,毕竟零经验

我的博客名字叫Krazyu风宇,所以我打算使用字母 K 作为主要元素进行设计,如果可以的话,使用 KR 两个字母融合在一起,不然单纯的字母 K 很容易和网络上已有的图标设计风格重复

设计软件

可以用来设计图标的软件倒是很多,而我的需求很简单,所以理论上啥工具都行,不过恰巧我还有 Adobe Ai 的安装包所以直接使用 Ai 进行设计了

配色

配色的话我早就想好了,就是用博客的配色,橙红色 #FF4500,橙色本身我也比较喜欢,看起来够醒目和有活力的感觉

开始折腾

草图

由于我还不熟悉 Ai 的操作,所以我先用纸笔随便画画草图,画出大致轮廓和思路之后在使用 Ai 进行设计

草图
草图

就像草图这样,主体是一个字母 K,使用一个半圆遮挡形成 R 的上半部分,然后与 K 下面的留空组成字母R

成品

一阵折腾,最后成品就是下图了,在四周留空使视觉效果更好

初版
初版

微调

加入圆角设计,最终成品如下

成品
成品

总结

对于这个图标虽然总体满意,但是一点说不上来的,emmm,别扭,不过乍一看也还行

又进行了下微调,但是总有点别扭

暂时先用着,后续可能再次微调吧

  • 标题: 为博客设计一个 favicon
  • 作者: 风宇
  • 创建于 : 2023-08-21 19:25:51
  • 更新于 : 2023-08-21 21:36:25
  • 链接: https://krazyu.com/posts/30069/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论