【ANSI Art】手把手教你做一个果壳的logo(庆祝新版主页上线特别版本)
ANSIArt 力学博士,科技工作者 2013-01-22 22:15
请支持我【举办ANSI Art 作品展】的@ANSIArt
【万有青年养成计划入围方案】举办ANSI Art 作品展 http://www.guokr.com/post/430952/
为了庆祝果壳改版,支持我们的计划,并给各位朋友一个ANSI Art的基本入门,@castellio 特别绘制了一个果壳网 logo 的 ANSI Art ,下面是一个简单的流程,请围观,请投票。
-----------------------------------------------------
先看一下成品的样子(果壳的logo就不贴了,抬头就能看到)
◣
◣ _ ▎
▅▆▇█▍ ▁█▂▃ ◢
▋▏▄ ▅▊ ▂▃█▃▄▎ ◢
▊▎▄ ▅▋ ▊▃▃▄▄ ◢
▉▄▅ ▅▆◣◢▂▃▄▊▊◢
▂◢ ◥◣ ◣▇▃▋▅
▃ ▆◤▋◣▃ ▉▏ ▍ ◢ ▎
▆▃▅ ▅ ▅◤◣▅
▆▃ ▅ ◢◣ ▎
◢ ▌ ▁ ▊ ▆▂◢ ◢ ◣▁
▊▅ ▊▌▊▌ ◤ ◤ ▊▅ ▊▌◢ ◢
◤▌◤▌ ◤ ▊▌▊ ● █◤ ◤ ▊▊▌
这在 ANSI Art 中一般称为色块图,组成图案的方式主要是运用
︳▏▎▍▌▋▊▉▁▂▃▄▅▆▇█◢◣◤◥
这20个字符,配合上16颜色搭配的前景、背景颜色而组成的图画。
有点儿类似于用七巧板来拼图,只是这里可以的素材较多,画幅也相对大。
知道了基本原理,还需要有一个工具。
对于 Windows XP 的用户,建议下载 AnsiEditor_2.03c.full完整版
http://ansiart.org/17500
对于 Windows7 的用户,建议下载 AnsiEditor 3 Beta 2 http://ansiart.org/17503
http://img1.guokr.com/thumbnail/NqTWuvSAhAxoeWiUP_6g17HYSI8DIqQuwLnfQujcfE7aA
gAAPwIAAFBO_592x466.png
如果您只想稍微玩一玩,可以访问 http://ansiart.org/web-ansieditor ,这是一个在
线的 Flash 版本的简化编辑器。
http://img1.guokr.com/thumbnail/v_oKbVEMtKETOYsvkwtmKMWeH7G9EKDy998HFjHgWaNFB
QAAgwIAAFBO_592x282.png
好了,工具齐备,就可以开始画画了。
(再多啰嗦一句,这个工具使用非常简单,基本上和 Windows 自带的画笔操作类似,选
取前景色,背景色,移动光标的位置,在特殊字符框内选择您要用的字符就可以了。对
于ANSIEditor来说,鼠标左键选择前景颜色,鼠标右键选择背景颜色)
1、先画出“果”字上边的“田”,在右上角处稍微有些变化
▅▅▅▅
▅ ▅▊
▅ ▅▊
2、调整“田”字的边缘,和logo基本一致,上大下小
▅▆▇ ▉
▏▄ ▅▊
▎▄ ▅▋
3、向下继续写
▅▆▇ ▉
▏▄ ▅▊
▎▄ ▅▋
▅▅ ▅▅
4、将“果”字写完,注意撇、捺的写法与区别。
▅▆▇ ▉
▏▄ ▅▊
▎▄ ▅▋
▅▅ ▅▅
◢ ◥◥
▆◤ ▃
5、调整了一下“木”字的横,使其有些变化
▅▆▇ ▉
▏▄ ▅▊
▎▄ ▅▋
▄▅ ▅▆
▇◢ ◥◥
▆◤ ▏ ▃
6、写“壳”上半部的“士”
▅▆▇ ▉
▏▄ ▅▊
▎▄ ▅▋
▄▅ ▅▆
▇◢ ◥◥
▆◤ ▏ ▃
7、继续写“壳”字
▅▆▇ ▉ ◢
▏▄ ▅▊ ▅▅█▅▅
▎▄ ▅▋ ▅▅ ▅
▄▅ ▅▆ ▅▅▅▅▅
▇◢ ◥◥ █
▆◤ ▏ ▃
8、完成“壳”字
▅▆▇ ▉ ◢
▏▄ ▅▊ ▃▃█▃▃
▎▄ ▅▋ ▃▃▃▃
▄▅ ▅▆ ▃▃▃▃█
▇◢ ◥◥ █▃█
▆◤ ▏ ▃ █ ▅█
◢◤
9、调整“壳”字,使笔画产生角度
_
▅▆▇ ▉ ▁█▂▃
▏▄ ▅▊ ▂▃█▃▄
▎▄ ▅▋ ▃▃▄▄
▄▅ ▅▆ ◤▂▃▄▊
▇◢ ◥◥ ▇▃ ▅
▆◤ ▏ ▃ ▏ █◤
▅◤
10、微调(大家来找茬,到底调整了哪里呢?)
_
▅▆▇ ▉ ▁█▂▃
▏▄ ▅▊ ▂▃█▃▄
▎▄ ▅▋ ▃▃▄▄
▄▅ ▅▆ ◤▂▃▄▊
▇◢ ◥◥ ▇▃ ▅
▆◤ ▏ ▃ ▏ ▍ ◤
▅◤
11、加些高亮的白色,使字看起来更有层次、立体感
_
▅▆▇█▍ ▁█▂▃
▏▄ ▅▊ ▂▃█▃▄
▎▄ ▅▋ ▃▃▄▄
▄▅ ▅▆ ◤▂▃▄▊
▇◢ ◥◥ ▇▃ ▅
▆◤ ▏ ▃ ▏ ▍ ◤
▅◤
12、加上果壳的域名
_
▅▆▇█▍ ▁█▂▃
▏▄ ▅▊ ▂▃█▃▄
▎▄ ▅▋ ▃▃▄▄
▄▅ ▅▆ ◤▂▃▄▊
▇◢ ◥◥ ▇▃ ▅
▆◤ ▏ ▃ ▏ ▍ ◤
▅◤
◢█ ▁_ ▊▌ ▁ ◢█ ▁_
▊▅ ▊▌▊▌ ◤ ◤ ▊▅ ▊▌◢ ◢
◤▌◤▌ ◤ ▊▌▊ ● █◤ ◤ ▊▊▌
13、画背景,同时移动了“果壳”两个字的位置,使它们基本在中间位置
◣
◣ _
▅▆▇█▍ ▁█▂▃
▏▄ ▅▊ ▂▃█▃▄ ◢
▎▄ ▅▋ ▃▃▄▄ ◢
▄▅ ▅▆◣◢▂▃▄▊ ◢
▇◢ ◥◥ ◣▇▃ ▅ ◢
▆◤ ▏ ▃ ▏ ▍ ◢◢
▅◤◣
◣
◢█ ▁ ▊▌ ▁ ◢█◣▁
▊▅ ▊▌▊▌ ◤ ◤ ▊▅ ▊▌◢ ◢
◤▌◤▌ ◤ ▊▌▊ ● █◤ ◤ ▊▊▌
14、背景补完,同时给域名也加上亮色
◣
◣ _ ▎
▅▆▇█▍ ▁█▂▃ ◢
▏▄ ▅▊ ▂▃█▃▄▎ ◢
▎▄ ▅▋ ▃▃▄▄ ◢
▄▅ ▅▆◣◢▂▃▄▊▊◢
▇◢ ◥◣ ◣▇▃ ▅
▃ ▆◤▋ ▃ ▏ ▍ ◢ ▎
▆▃ ▅◤◣
▆▃ ◢◣ ▎
◢ ▌ ▁ ▊ ▆▂◢ ◢ ◣▁
▊▅ ▊▌▊▌ ◤ ◤ ▊▅ ▊▌◢ ◢
◤▌◤▌ ◤ ▊▌▊ ● █◤ ◤ ▊▊▌
15、给“果壳”二字在加些阴影,更加具有立体感了。完成!
◣
◣ _ ▎
▅▆▇█▍ ▁█▂▃ ◢
▋▏▄ ▅▊ ▂▃█▃▄▎ ◢
▊▎▄ ▅▋ ▊▃▃▄▄ ◢
▉▄▅ ▅▆◣◢▂▃▄▊▊◢
▂◢ ◥◣ ◣▇▃▋▅
▃ ▆◤▋◣▃ ▉▏ ▍ ◢ ▎
▆▃▅ ▅ ▅◤◣▅
▆▃ ▅ ◢◣ ▎
◢ ▌ ▁ ▊ ▆▂◢ ◢ ◣▁
▊▅ ▊▌▊▌ ◤ ◤ ▊▅ ▊▌◢ ◢
◤▌◤▌ ◤ ▊▌▊ ● █◤ ◤ ▊▊▌
怎么样,应该比较简单吧?不过实际自己制作的时候可能刚开始没那么容易,还需要多
加练习才能习惯。期待看到您的作品。
最后再将前面的动作连贯起来看看这个logo是怎么产生的吧。
http://ansiart.org/temp/guokr.gif
发信人: percyshelley (Can Spring Be Far Behind@rygh)
标 题: 果壳网标志绘制过程
发信站: 水木社区 (Sat Jan 19 12:17:08 2013), 站内
ANSI Art teaches you step by step how to make a nut shell logo to celebrate the launch of a special version of the new homepage
ANSIArt Ph.D. in Mechanics Science and Technology Workers 2013 01 22 22:15
Please support my @ANSIArt exhibition of ANSI Art works
Wanyou Youth Development Program finalist plan holds ANSI Art exhibition http: www.guokr.com post 430952
In order to celebrate the revision of Guoke.com, support our plan and give all friends a basic introduction to ANSI Art. @castellio specially drew an ANSI Art of the Guoke.com logo. Here is a simple process. Please watch and vote.
Let’s take a look at the finished product first. I won’t put the Guokhu logo on it. You can see it when you look up.
This is generally called a color block diagram in ANSI Art. The main way to form a pattern is to use
These 20 characters are combined with 16 colors of foreground and background colors to form a picture.
It's a bit like using a jigsaw puzzle to do puzzles, except that there are more materials available and the frame is relatively large.
Now that you know the basic principles, you still need a tool
For Windows XP users, it is recommended to download the full version of AnsiEditor 2.03c.full
http: ansiart.org 17500
For Windows7 users, it is recommended to download AnsiEditor 3 Beta 2 http: ansiart.org 17503
http: img1.guokr.com thumbnail NqTWuvSAhAxoeWiUP 6g17HYSI8DIqQuwLnfQujcfE7aA
gAAPwIAAFBO 592x466.png
If you just want to play around a little bit you can go to http: ansiart.org web ansieditor which is a
Flash version of the streamlined editor
http: img1.guokr.com thumbnail v oKbVEMtKETOYsvkwtmKMWeH7G9EKDy998HFjHgWaNFB
QAAgwIAAFBO 592x282.png
Okay, now that you have all the tools, you can start painting.
One more word, this tool is very simple to use. It is basically similar to the brush operation that comes with Windows. Select
Take the foreground color and background color, move the cursor position, and select the character you want to use in the special character box. That's it.
For ANSIEditor, the left mouse button selects the foreground color and the right mouse button selects the background color.
1. First draw the field above the word "fruit" with slight changes in the upper right corner.
2 Adjust the edge of the word "田" to be basically the same as the logo, making it bigger at the top and smaller at the bottom.
3 Continue writing down
4. After writing the word "guo", pay attention to the writing method and difference of "捺"
5. Adjusted the horizontal direction of the word "木" to give it some changes.
6 Write the upper half of the shell
7 Continue to write the word "shell"
8 complete word shell
9. Adjust the word "shell" to create an angle for the strokes.
10. Fine-tuning. Let’s find fault. What exactly has been adjusted?
11 Add some bright white to make the words look more layered and three-dimensional.
12 Add the domain name of Guoke
13. When drawing the background, I also moved the positions of the two words "nutshell" so that they are basically in the middle.
14. Complete the background and add bright colors to the domain name.
15 Add some shadows to the word "nutshell" to make it more three-dimensional. Completed
How about it? It should be relatively simple. But when you actually make it yourself, it may not be that easy at first. It still requires more
It takes more practice to get used to it. Looking forward to seeing your work.
Finally, let’s connect the previous actions together and see how this logo came into being.
http: ansiart.orgtempguokr.gif
Sender: percyshelley Can Spring Be Far Behind@rygh
Title: Guoke.com logo drawing process
Sending site: Shuimu Community Sat Jan 19 12:17:08 2013 , within the site