《第一行代码》这本书,自2014年首次出版以来,已经过去了6年的时间。在这6年时间里,这本书一共升级改版了3次,包括即将出版但还未出版的这次。

虽然每次改版升级,书的封面都会或多或少发生些变化,但是那个坐在电脑桌前敲击键盘的小人,以及背面那句“发誓要把世界写个明明白白”的豪言壮语却从未改变。

坐在电脑桌前敲击键盘的小人映射的是我们每一位热爱编程的读者,但他也是有人物原型的。很多人可能觉得那个小人的原型就是我,其实并不是,而是这本书第1版的策划编辑陈冰老师。

我是一个比较瘦的人,脑袋也不大,所以怎么看这个小人的形象都跟我不符。而陈冰老师是一个脸圆圆的头也比较大的人,所以他在为这本书设计封面时应该是以自身的形象来考量的。当然,也正是有了陈冰老师当初在CSDN上找到了我,才有了《第一行代码》这本书的诞生。

相信很多朋友都已经读过《第一行代码》的前两版了,可是你知道这本书的封面是如何创作出来的吗?一个好的封面是要经过设计师各种细心打磨,甚至要从好几个版本中精挑细选出来的。陈冰老师将这本书的诞生过程写成了一篇文章,后被我转载到博客上发表,但是绝大部分《第一行代码》的读者朋友们应该都是没有看过这篇文章的,因此我今天将它略微修改之后发表到公众号上,或许你们会对此感兴趣。

/   第 1 版   /

2013年的我刚刚毕业一年,仅仅在CSDN上发表了几篇技术文章,访问量不过几千,没有任何名气。时任图灵出版社副总编辑的陈冰老师在CSDN上找到了我,说他正在策划一个新的图书系列叫《第一行代码》,希望我可以来编写这个系列的第一本书。一切的不可思议都是从这里开始的。

不过那时的我只负责了内容的编写,其他图书出版的任何工作我都没有参与,包括这本书的封面设计也都是由陈冰老师一手操办的。

以下部分的第一人称 “我” 指的都是 “陈冰” 。

每一本好书的封面的诞生都不是轻松的事情。不仅不是轻松的事情,事实上正相反,几乎无一例外都是艰难的过程。但如果最终得偿所愿,一本书找到了它的封面,那这个艰难的过程就会有一个愉快的结果。

什么叫一本书找到了它的封面?就是当你拿到这个封面时,你大脑中有一个强烈的意识,不会有任何一个其他封面更适合这本书了。

这本书,我最初给它这个书名时,我就意识到这是个好书名,但对于给这个书名设计一个好封面而言,却是个极难的课题。《第一行代码》是我策划的一个给编程初学者看的系列,本书是这个系列的第一本书。

在策划这本书(这个系列)时,我就想好要有一个独一无二的形式上的突破,要给读者以新意和独特的阅读体验。为此,我决定给它引入一个经验值、升级与宝物系统,这是在此前的任何计算机图书(据我所知也包括其他所有类别的图书上)上都没有过的事情。

基于这些考虑,这本书的封面必须同时满足以下四个特点:

1. 应该庄重、可信、能让读者感到有一股内在的力量,让读者感到这本书所讲述的知识是可信赖的。

2. 有一种神秘感、带有一些魔幻现实主义的色彩,让读者感到这本书与其它书明显不同。

3. 让初学者有亲切感,IT感也必须在其中体现,让读者感到这一场景他非常熟悉,有认同感。

4. 要有绝对的视觉冲击力,在网店上销书,都是邮票大小的展示区,不可能让你捧到手里仔细端详,如果封面不能在邮票大小的面积上给你造成视觉吸引力,但这个封面无论设计得多么绝妙都是失败的。设计一个封面不难,但要设计一个好看的封面就相当不易,而要设计一个既好看又能卖的封面则是极难的事情。

为了达到这个效果,我开始构思这个封面。在“第一行代码”这几个字的字体上做文章的念头曾在我脑海中一闪而过,但立马就被我否定了,那样出来的效果会过于张扬,同时又不免落入俗套,而且弄不好就会搞得像本财经类图书。

我告诉自己,既然是本给初学者看的书,那首先就要让初学者有亲切感,要设计一个典型的元素,让初学者一看到它亲切感和熟悉感就立马油然而生。八年前,我在清华时曾策划过一个“第一步”系列,当时我设计的封面元素就是在画面中央有一个“Hello,World”字样,很醒目。

Hello,World对于初学者而言无疑是最熟悉的元素,但我不喜欢重复自己,对于这个《第一行代码》系列,我要重新琢磨一个元素。我想到了我当年刚刚学习编程时,在深夜灯下电脑前工作的情景,也想起来以前深夜写计算机书时的情景,不管是写代码,还是写计算机书,深夜电脑前工作的情形是每个程序员,无论新手还是老手都非常熟悉有亲切感的画面,甚至此时此刻的你就是这样。所以我决定就用这个画面这个场景来做这个封面关键识别元素。

那么这个识别元素具体要有哪些物件组成呢?我开始进一步构思这个场景具体要包含哪些元素。我凭着直觉,让脑海中自发产生的图像带我前行,我看到一个小程序员坐在书桌前,他背对着我,面前是一台ThinkPad笔记本电脑,左手侧有一台iPad,右手侧有一台三星Note大屏手机,还有一碗刚泡好正待吃的方便面,一杯果汁,一摞书,因为正在从事Android开发,所以书上还有一个Android小机器人的手办,还有一盆绿植(我又在脑海中仔细看了看,原来是盆仙人掌)。我把这些元素在纸上画出来。为了让画面更丰富,我瞅了瞅我自己的书桌,然后又在画面中加了一个水杯,几张纸和一支笔。为了让画面更生动和富有趣味,我在桌旁的地面上加了一只小猫,它正好奇的望向桌底某个方向,似乎发现了什么异次元的东西。

这是当时我画的草图:

当时我在主画面周围还画了一些家具、一个窗户,以及窗前的天文望远镜(望远镜的出现有两种含义,这是这个小程序员的爱好,同时也意味着梦想),后来我意识到,整个画面很像我房间的样子。

我让与我合作多年的插画师巫俊武来画这个插画。这是插画的第一个版本:

不萌,而且过于写实,欠缺一些魔幻感,于是继续修改,得到下面这个版本:

有点萌了,有点味道了。于是,我让俊武先进行一下着色,看看效果。我当时给了俊武一幅插画效果(这是《梦想还是要有的,万一实现了呢》一书中的一幅插画),让他就按照这幅插画的效果来进行着色。因为我当时希望这本书的画面要温暖、明亮、色彩丰富,看着让人心生喜悦,带给人阳光向上的感觉,同时时间是晚上,所以这幅插画非常符合我要求。

结果,俊武一番神勇发挥后,得到下面这个让我大跌眼镜的效果:

当时又进行了一些着色的调整,但始终离我要的效果相去甚远(俊武不太擅长我要的那种着色风格),于是我果断放弃着色,决定就用黑白色来实现这幅插画。

我开始思考怎样才能让黑白的插画产生足够的力度,那就必须有足够的细节,同时笔触要加粗,粗笔触本身就会带来细节感和质感。笔触太细,必然会有单薄感、缺乏力度。因为缺少细节而导致缺少力度,所以我给插画师找了一些素描风格的插画,让他往那种效果上靠拢,几经修改,得到下面这个版本。

画面开始有一些厚重感和力量感了,但人物的脑袋有问题,不够大不够圆,继续修改。几经修改,得到满意的版本(我当时以为的最终版本)。

然后,我又让俊武照着我的另一副草图画好了封底用的插画。

这个封底的插画是和封面插画相呼应的,封面插画是在家里(屋内)看到的情景,而封底插画是同一时间在屋外(小区里)看到的这家的情景,整栋楼的灯光都熄灭了,所有人都入睡了,只有这个小程序员的房间还亮着灯,正在认真地努力地写着代码。他的梦想是成为优秀的程序员。

因此,我在封底写下了这样一句宣传语:

我挥舞着键盘和本子,

发誓要把世界写个明明白白。

两行字下面的那个小灰块代表正在闪烁的光标。

然后,我把全套封面设计资料(包括插画、封面宣传语、目录、样章等等)交给我的设计师绿豆(真名潘建永),并电话中跟他沟通了这个封面的设计要求。一周后,我拿到了下面的版本,我在已经坐在椅子里的状态下又进一步跌坐在了椅子里。

简直乱成一锅渣了,而且画面很单调,毫无让人去翻阅的念头。绿豆跟我说,他感到这幅黑白的插画限制了他的设计发挥,因为为了配合一幅黑白的画,封面的底色几乎只能是黑白的(至少我和他当时异脑同思都是这么认为的)。于是,事情几乎又回到了起点,还是必须搞出一幅着色的插画才行,才好后续设计的发挥。我安慰了一下绿豆受伤的心,决定继续去寻找合适的插画师。我在chuangyiren.cn网站上翻阅了几百页,找到了多位优秀的插画师,然后我从中选了一位插画师,和他电话沟通后,请他开始画这幅插画。

我这时对这幅插画的画风应该是怎样的,已经有了一些想法上的变化,我感到如果画面和上面提到的《梦想》那本书的画风一样的话,会显得过于卡通,有些低幼,而且缺少神秘感,与这本书中所包含的这套令人耳目一新、匪夷所思的升级与宝物系统的感觉不是很搭,同时,这种画面缺乏厚重感和力度,由于颜色过多,在网店小图上展示时也很难形成视觉冲击力。因此,我决定放弃这种画风,转而寻求一种能满足神秘、厚重、且具有强力的视觉冲击力的画风。

这时,我突然想到了我以前看过的一部动画片电影《凯尔经的秘密》。这部动画片的风格正适合这本书。

但最终拿到的插画效果和我想要的仍相去较大。

我这时感觉多少有点崩溃,我觉得我最初制定的设计方案或许很不错,但实现难度较大,而且即使完全按照我的设想实现了,画面冲击力很可能仍然不够大。

在寻找新的插画师,以及让新的插画师试画的期间,我也同时在让俊武把原来的素描版插画进行完善,因为此时我猛然想到,我不能仅仅只在封面上写上一句“第一本引入经验值、升级与宝物系统的计算机书!”就想当然的认为读者会信了,并且会感受到这句话意味着什么。我必须要在封面上直接就以画面的形式把这本书所加入的这套独一无二的经验值和升级系统体现出来,所以只画出小程序员显然是不够的,还要有这套系统中所营造的那个Android神界的人物、角色、物品。

所以,我让俊武在画面上增添了这样七个元素:

1. Android前辈遗失的修行卡

2. 外围守护者

3. 信心增强大力丸

4. 上古奇书

5. 神树

6. 粗布Android战袍

7. 界面砖家(法师造型)

我画了草图,并跟俊武说明了这些元素各自的形象。

第二天,我得到了一个身材矮小的牛魔王(俊武想象中的外围守护者),以及忘记从哪个软件里跑出来的Wizard(俊武想象出的巫师)。

我平静了一下心情,调整好思路,继续与俊武沟通。我从网上找到了这七个元素中每一个我满意的造型,然后让俊武参考它们进行绘画,果然,这次的接近了不少。

但守护者的神态不够威武,而且身高不够,感觉不到是神界的人物,更像是个脾气和善的在自由市场卖猪肉的胖商贩,巫师的身高也不够,感觉像西游记里的土地或是小矮人之类的角色。我让俊武想象希腊、埃及那些神庙中的顶天立地的神像,感受他们的体积和庞大,体会他们的威严,经过数次修改后,我拿到了满意的版本。

插画很完美了,但封面的总体设计方案的问题依然没有解决。我集中精力只想一个问题,怎样让画面有视觉冲击力,显然必须保持单色色块尽可能的大,因为一旦画面被多种颜色和色块分散后,在网店上邮票大小的面积上就更形不成什么视觉面积了,所以我想到必须采用整个封面用单一色调的方案,可选的颜色有红色、黄色、金色、蓝色、绿色,充分琢磨和体会后,我选了红色,蓝色也很有冲击力,但不管是读过本书内容还是这套升级系统,你都不会在脑海中产生蓝色这个颜色。你的脑海中会产生绿色这个颜色,但绿色在网页上的视觉冲击力太弱,在催人向上的力度上也较差。红色最合适,但不能是大红,大红太刺眼,而且略显俗气,所以我用了暗一些的红色,绿豆说他是往红色中加了20的黑,出来的这个效果非常棒。

为了尽量让红色占有更大的视觉面积,我想了一个方案,在画面前景色中只保留小程序员和那只小猫是白色的,而把其他元素(守护者、神树、古书、巫师等)都放入背景的红色中,作为底纹呈现出来,这样就不会喧宾夺主,而且有一种那些神界的人物是这个小程序员的脑海中的想象或者说回忆的韵味。此外,单独的红色,即使加上这些神界的元素做底纹还是略显缺乏一点层次,我又让绿豆在底纹中加入了一些植物的叶子。我选了恐龙时代就存在的蕨类植物的叶子,因为这些叶子有一种与生俱来的神秘感和沧桑感,若隐若现间,烘托出本书应有的神秘和庄重的味道。

此前,由于封面上宣传语太多,不方便设计,所以我让绿豆把其中一部分宣传语设计到了腰封上。腰封对这些重要的宣传语能起到更好的宣传作用,同时封面本身也干净了很多。最后,在插画的周边再加上一些光晕。

至此,整个封面设计完成。

完整的展开封面:

/   第 2 版   /

2016年,我开始编写《第一行代码 第2版》。那个时候陈冰老师已经离开了图灵出版社,没有人来统筹这本书的封面策划了,所以我和图灵的编辑以及设计师们一起参与了进来,共同设计第2版的封面。

《第一行代码》的第1版总体来说评价非常好,但唯独有一部分口碑呈现两极分化,就是关于“经验值升级与宝物系统”的这部分内容。喜欢的读者会觉得非常有趣,让学习知识不再那么枯燥,可以像看故事一样休息一下。而不喜欢的读者会觉得这部分内容和整本书格格不入,画蛇添足。

其实这个“经验值升级与宝物系统”并不是我写的,而是陈冰老师后期在我的书稿基础上自己添加上去的。所以不管这部分内容是好是坏,由于陈冰老师已经离开了图灵出版社,我觉得第2版中都不适合再保留了。

移除了“经验值升级与宝物系统”之后,封面也必须要跟着进行修改,因为修行卡、守护者、神树、法师等奇幻元素的内容都不能继续保留在封面上了(瞬间觉得很浪费有没有 )。

整体分析下来之后,《第一行代码 第2版》最终就只保留了封面当中最经典的小人与电脑桌的图案,以及背面那幢夜深人静还泛着灯光的楼房。

但是,为了让第2版和第1版有着更加直观的区别,我决定将封面和腰带的颜色进行修改。当时图灵的设计师一共做了好几个版本的封面,我从中挑出了我个人认为比较不错的三种,然后放到公众号上面做了个投票。

最后的结果大家都知道了,大部分的读者朋友们都选择了绿色版本的封面,第2版的封面就此诞生。

最近,《第一行代码(第3版)》也上市啦!出版前,郭霖老师曾在公众号上发起了一个投票,让广大读者朋友们共同选出最满意封面,投票结果如下:

最后蓝色封面以压倒性的优势当选,就这样《第一行代码》把红绿蓝这三元色全部凑齐了。

而且,《第一行代码(第3版)》还附带书签、思维导图以及PPT。可以说诚意满满。如果你正准备入门 Android,千万不要错过这本书哦!

京东自营:

当当自营:

《第一行代码》封面诞生记相关推荐

  1. 第一行代码 Android读书笔记(二)

    第一行代码 Android读书笔记 第三章 软件也要拼脸蛋-UI开发的点点滴滴 常用控件的使用方法 详解4种基本布局 自定义控件 最常用和最难用的控件-ListView 更加强大的滚动控件-Recyc ...

  2. 《第一行代码 Android 第2版》下载

    <第一行代码 Android 第2版> https://pan.baidu.com/s/1B718h7h3601iEe8gIN9oAQ

  3. 第一行代码android的读后感,《第一行代码Android》读书笔记

    自学android一段时间了,一开始是看看视频,跟着打打代码,后来也有跟着团队一起做项目,一直都很零散,并没有真正系统的学习过,虽然能跟得上项目,但总觉得基础不牢固扎实,之前有读过郭霖老师博客里的几篇 ...

  4. 第一行代码Android第二章读书笔记

    第一行代码Android第二章读书笔记 Activity 1.1 手动创建活动 1.2 Toast和Menu/销毁活动 Intent 2.1 显示/隐式 2.2 传递/返回数据 活动的生命周期 3.1 ...

  5. 晒订单赢图灵图书,《第一行代码——Android》福利活动劲爆来袭!

    (已结束) 我的著作<第一行代码--Android>已经预售几天了,这段时间也有不少朋友早早地就订购了这本书,感谢大家对我一如既往的支持,在离发货还有十几天的时候就预订了这本书. 为了特别 ...

  6. 《第一行代码Android》读书笔记

    自学android一段时间了,一开始是看看视频,跟着打打代码,后来也有跟着团队一起做项目,一直都很零散,并没有真正系统的学习过,虽然能跟得上项目,但总觉得基础不牢固扎实,之前有读过郭霖老师博客里的几篇 ...

  7. 第一行代码:Android(第三版)

    阿里云盘链接:「第一行代码 - 第三版.pdf」https://www.aliyundrive.com/s/E7nKMMjfKmT 提取码: x3y3

  8. 第一行代码android网课,linux内核分析(网课期末地面课期中)

    堆栈变化过程:html 计算机是如何工做的?(总结)--三个法宝git 存储程序计算机工做模型,计算机系统最最基础性的逻辑结构:程序员 函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语言的时 ...

  9. 第一行代码android 豆瓣,豆瓣blog » Blog Archive » 豆瓣的初衷

    六年前,我开始写豆瓣第一行代码的时候,是想做一个关于生活发现的服务.也就是说,豆瓣想帮人发现真实生活里的好东西.今天豆瓣有一百多人的团队了,我们依然在做一个关于生活发现的服务. 这个想法可以在2005 ...

最新文章

  1. 广州企业“掘金”物联网蓝海
  2. tensorflow eager调试模式关键导入如下两行便于debug
  3. python函数的作用是_Python函数一
  4. php中$_REQUEST、$_POST、$_GET的区别
  5. python常用命令汇总-python数据分析之pandas常用命令整理
  6. 详解centos7使用无线wifi连接的方法
  7. 在 OpenGL ES 2.0 上实现视差贴图(Parallax Mapping)
  8. 电脑技巧:Win10自带远程控制软件介绍
  9. HDU 2242 考研路茫茫——空调教室
  10. iPhone、iPad明年或采用USB-C接口;虎牙回应央视点名网课内容充斥广告;Rust 1.44.0 发布| 极客头条...
  11. [Python學習筆記] 使用xlwings 插入註解 (forked 版本)
  12. 再谈量子计算与通讯的基本原理
  13. python function gamma_Python math gamma()用法及代码示例
  14. 7-1 统计大写辅音字母 (15 分)
  15. 判断某整数是否既是5又是7的整数倍
  16. 无法打开内核设备“\.\VMCIDev\VMX”: 操作成功完成。是否在安装 VMware Workstation 后重新引导? 模块“DevicePowerOn”启动失败。 未能启动虚拟机。
  17. 【eclipse】mybatis配置文件创建与mapper接口文件创建
  18. [效率提升]webstorm配置Prettier:代码自动格式,格式化时清除空行,修改使用代码模板
  19. 6.2 用迹求特征多项式
  20. Direct-X学习笔记--天空盒

热门文章

  1. 电子取证和司法鉴定笔记
  2. Excel技巧大全之具有多个搜索条件的索引匹配
  3. AutoCAD .NET 二次开发实例(5) 批量获取多段线所有顶点坐标
  4. 认知觉醒-2.元认知
  5. 关于Windows media foundation打开摄像头无法获取到数据问题
  6. 微信小程序:强大多流量主自带接口短视频去水印工具箱微信小程序
  7. Unity灯光的一些设置(二)天空盒创建更换与Lighting面板的介绍
  8. 弘辽科技:淘宝商家该如何增加店铺竞争力?有哪些技巧策略?
  9. 星起航:跨境电商迎来黄金时代,未来或将持续释放红利
  10. 输入年月日,输出这一天是这一年的第几天