Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

about organization ICON #3

Open
pea3nut opened this issue Feb 25, 2018 · 13 comments
Open

about organization ICON #3

pea3nut opened this issue Feb 25, 2018 · 13 comments

Comments

@pea3nut
Copy link
Member

pea3nut commented Feb 25, 2018

@SC068

@SC068
Copy link

SC068 commented Feb 25, 2018

看到了

@pea3nut
Copy link
Member Author

pea3nut commented Feb 25, 2018

背景信息

先说下必要的背景信息。

简单来说就是我想写个博客系统,但是因为牵扯到很多东西(比如博客的数据导入导出、博客的主题等等),所以创建了一个 组织 来把与博客有关所有的项目都放在这个组织。而这个组织叫做Foxzilla,而博客系统的名字叫做Fireblog

名字的来源为著名的火狐浏览器(Firefox)与其支撑组织(Mozilla)。我超级爱这个组织(Mozilla),它是一个非盈利基金会,打造了FireFox来与Google Chrome、Microsoft IE对抗,目的在于维护互联网的健康,使任何单一的群体不能垄断互联网。

总之很伟大就是了。

而我非常有幸在2017.7-2018.2期间,与Mozilla Beijing进行实习。但是因为种种原因,我最终签了百度,没有留在Mozilla Beijing。于是,感到非常惋惜的我,便将项目与组织名命名为 FireblogFoxzilla 来进行纪念。


总结一下:

  • Fireblog - 开源项目名
  • Foxzilla - 将Fireblog相关项目聚集起来的开源组织

而这个issue讨论的则是 组织 的图标

关于 Foxzilla 名字

因为 Foxzilla 本身不是一个单词,因此目前刻意的改变了其中字母的大小写,一方面我觉得可能会更美观一些,另一方面希望可以强调出 Foxzilla = FireFox + Mozilla

关于 Foxzilla 的拼写我已不打算更换,但是单词内部的字母大小写可以服从图标而进行改变

关于图标

目前想到的包括2张图:

  1. 仅图标
  2. 图标和文字

下面是开源项目 Vuejs 的图标和图标+文字

vuejs-logo-without-text

vuejs-logo-with-text

关于设计风格

因为项目名和Firefox紧密相关,因此设计风格倾向于Photon(Firefox 57采用的设计风格) 或许 是一个好主意。

因为项目名和组织名高度类似于的Firefox与Mozilla,那么与Firefox和Mozilla的Logo相类似 或许 是个好主意。

设计内容

因为组织名叫做Foxzilla,其中的fox自然是狐狸,而zilla来源于Mozilla,而Mozilla的Zilla据说是来自于怪兽Godzilla

所以我一开始考虑的是一个简单的狐狸侧脸,样式类似于 FireFox OS 的狐狸脸

一眼能看出 Fox 的感觉,而且也挺简洁。或许还可以让眼睛发出红色光芒来体现出怪兽的感觉。。。


其实具体的东西我没有太想好,限制条件比较少,其中大部分内容都由你来想吧,毕竟我没有专业的设计基础,想的东西可能与一个“好的设计”大相庭径,而我自己还不知道。

@SC068
Copy link

SC068 commented Feb 27, 2018

忘记说的一个非常重要的点

一个很可怕的事情 等我做完才发现 我忘记问你要尺寸和一些格式标准了,所以这次的结果仅供参考,
请在下一个帖子上注明尺寸(像素*像素)

关于草图

前面两天我找了点时间 根据你的描述 画了一些草图(当然比较潦草的黑白剪影 并没有细化) 并且从草图里面挑选出了几个具有辨识性的图案
我全部采用了图标+文字的形式 根据我自己的判断排了下序
排序是从左到右从上到下(比如第一排的两个我觉得是比较好的)
如果花生觉得不满意,那么请把要求再写详细以便于我进行参考,我重新画草图
最近忙着赶同人社团的稿子,所以并没有用特别多的时间来做这个草图

这里是筛选过的草图(只决定了一个大概的形状)

default

关于花生做的图标

花生的图标非常的直白 而且容易辨认 已经到达标志设计的标准了
但是按照图标设计的视觉上来说
根据我自己学到的东西
图标需要的是抽象的东西,太过于具象的东西会偏向俗气(比如给书起名,你直接起《狐狸》显然这本书在标题上面是不会给人留下特殊印象的,视觉亦是如此)

关于我的想法(图中的1,2,7三个草图)(其余几个草图如果花生想要解释的话就请另外我说)

关注的点:
1.狐狸
2.怪兽
3.简洁的表示
所以按照这几个点 我抽取了怪兽和狐狸的特征重合的地方,因为现在很多电影和动画还有游戏上 对怪物的眼睛会有一个很标准的参考 就是兽瞳(吸血鬼,狼人等),狐狸(或者说所有捕食者)的眼睛都会偏向于这个形状(草图1,2,7),所以我把重点放在了眼睛上面,一种生物,只要眼睛变成了红色,那么就是异常的(怪兽)。所以草图中的1,2,7这几个图案配色如果只用黑 红两种颜色来表示那么就会达到效果(所以图标建议上面红黑配色,如果有其他想法你再和我说),还有 我个人不建议用曲线或者圆形来制作这个图标,因为尖锐的角度和支线可以给人一种危险的感觉,更加符合主题。

关于我自己的方面

因为我是学平面设计的但是专业成绩很差,而且没有标志设计方面的经验,完全在用绘画方面的理解在制作图标,所以可能做的东西达不到你的效果,如果有什么不满意的地方,请尽管提出你的看法。

@pea3nut
Copy link
Member Author

pea3nut commented Feb 27, 2018

后面的那些图标略鬼畜。感觉正脸太过于接近于表情包、Emoji:fox_face:之类的东西,所以还是算了。一个狐狸正脸我认为不是一个好主意。侧脸或许可以考虑。

说实话我觉得应该仅图标看来效果。拿第一行第一列的那个来说,确实看起来相当不错。但是如果拿掉文字,可以说辨识度太低,就是一个平行四边形+圆形,没什么存在感。第一行第二列的,貌似图标和文字牢牢的耦合在了一起。无法拆分。(其他图标也或多或少有这个问题,文字和图标拆开后会有些问题)

关于使用尖锐,这个看上去不错。

关于使用眼睛瞳孔。我觉得是个不错的思路,足够抽象又有代表性。但是瞳孔在缩小后呈菱形的不仅仅是狐狸,猫也会这样,这个生物学中有详细的数据可以找到的。不过我比较担心,如果配上血红,是否会*恐怖过头让人感到不适?

另外,主题不是Fox+Godzilla,是一个开源项目,是一个博客系统。

而关于图标大小。反正都是矢量图你怕什么?如果不是矢量图,我想512*512是一个足够的尺寸。


总结:

  • 仅发图标来看效果,文字后加
  • 图标和文字耦合太严重,某些图标拿掉文字后辨识度太低(首当其冲的就算第一行第一列那个)
  • 尖锐或许是个不错的注意
  • 瞳孔或许是个不错的主意
  • 狐狸正脸:fox_face:略鬼畜,我想这个可以pass掉了

@SC068
Copy link

SC068 commented Feb 27, 2018

嗯 好的 那么我会根据你的要求重新制作草图(每一次根据你的要求缩小范围)
由于最近比较忙 那么我暂时决定每2-3天给你发一次方案
没理解错的话关键词是 尖锐 瞳孔 不要让人感到不适 然后再符合一个博客系统的图标
然后请告诉我 死线的时间

@SC068
Copy link

SC068 commented Mar 2, 2018

草图

qq 20180302235923

简单的描述

这是修改之后的一些想法 每个图标你可以理解成一个大类 如果在这些里面 你如果找到满意的 我会根据这个图延伸的来制作多个更加详细的草图方案(所以说其中每个图形都是可以做变换和延伸的),我也具体说不出其中很多个的意思,大概就是你觉得那种形式看上去舒服就行 有几个图标只是单纯追求一种形式感来画出的一个图形(图形含义需要在后面的深化中加入进去)

一个小故障

因为sai这个软件是直接用内存运行的 ,中间出了一次奔溃导致找不回进度了,所以很多方案其实丢失了

这次的想法

关于你上次提到的狐狸正脸的问题 我基本上在这次的草图制作过程中都回避了,所以用了上次的兽瞳 尖锐 还有我自己加入的狐狸的身体的元素 也参考了一些其它的比较商业化的LOGO做了一些形式感强但是意思还不明确的图形
所以有待于细化。
排序这次没有做 因为我觉得每个人对图形的感觉不一样 我个人觉得还行的是第一行第二列 第三行第三列 第二行第三列
第五行第一列 第四行第三列 最后一行第二列
关于图形和狗 狼类似的问题 后面着色和特征细化之后应该会解决

花生要做的

觉得草图不满意 告诉我问题 我重画
如果有感觉不错的形式 选出来 我开始做延伸(这样 就是等于缩小范围了)
如果有其他的意见或者看法 也请写出来告诉我

@pea3nut
Copy link
Member Author

pea3nut commented Mar 2, 2018

以文字为基础加工,我认为不是个好主意(如第一行第三列)。

你说不错的大多是黑色剪影。但是说实话草图太草,无法看出细节,导致我看剪影都感觉很糟糕。我觉得只有细节完善好,剪影才有魅力。拿我的头像来说,实际上在眼睛部分,剪影也是微微有眼睛凸起与凹陷。

有些图像太过大众化,首当其冲的还是第一个。图形构造简单,而且还轴对称+中心对称。一眼看上去感觉略幼稚。

我觉得其中不错的是倒数第二行第一列的那个,去掉文字,看起来不错。而且因为瞳孔形状不是对称的了。

default

但是感觉也有些太简单。这些图后期要上色吗?上色后说不定会好很多,比如这个图的中间瞳孔是红色的,我觉得可能会比较不错。只是瞳孔、狐狸、怪兽的暗示性不太明显。

@pea3nut
Copy link
Member Author

pea3nut commented Mar 11, 2018

h p 6_ 51ko3 jqx kuq 8

目前应该有3件事需要做:

  • 修改中间瞳孔为红色
  • 调整左上角和右下角的衬线,使其看起来没有那么粗糙
  • (可选) 瞳孔位置看起来有些别扭,似乎需要调整

@SC068
Copy link

SC068 commented Mar 11, 2018

嗯 好的 我知道了。
真的很抱歉,最近真的太忙了,每天被主催叫过去训导,晚上也一直在修图 你放心 这几天肯定弄好它!

@SC068
Copy link

SC068 commented Mar 23, 2018

qq 20180323235919
FoXZilla确定稿

@pea3nut
Copy link
Member Author

pea3nut commented Mar 23, 2018

图片基本Okay,接下来是文字部分。

经过讨论,文字继续沿用 FoXZilla 大小写规则。文字加在Logo右侧,尽可能的直接选用一款字体不再进行二次加工。注意,选用的字体要可以随项目遵从MIT协议。

@SC068
Copy link

SC068 commented Mar 24, 2018

qq 20180324174522

@SC068
Copy link

SC068 commented Mar 25, 2018

文件已经打包成rar上传到百度网盘
image

AI和SVG文件是源文件。
其中的PNG文件和JPG文件在源文件导出后用笔刷进行了主观处理(源文件里有些转折的过渡会稍有不自然那些转折我稍微涂了一下)
下载地址:
网盘链接:https://pan.baidu.com/s/1-StTO4EI1G-iFrtIQwvg4g 密码:owhd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants