我的前端之路 -1 入行从一张 gif 开始

104 阅读8分钟

三人坐墙头图.png

旁白

大学生活是枯燥的,大学生活也是有趣的。 除了上课、睡觉、打游戏,也可以做点不一样的事情。 比如学点新技能、比如参加个社团或者学生会、再比如去尝试一些以前没尝试过的事。 百般无聊的三个大一新生在一个社团结识,他们是软件工程的小光、数字多媒体的阿飞与晓东 三个臭皮匠也抵得上一个诸葛亮了,三个男人凑在一起,总会冒出个点子王。 除了上课,课余时间闲的蛋疼的三人,学着人家社团的样子,自己在大二也有模有样的创办了一个,没想到还真误打误撞的被计算机学院的主任和老师们通过了。 于是他们组建起了自己的社团,还招收到了 50 多个社员。 于是他们想在大二下学期搞点事情,要搞个大活动。 于是点子王 小光 操刀,绘声绘色的 PS 了一张活动海报。 故事的起点,就从这张海报说起,这张海报阴差阳错的成为了小光踏入学院软件实验室的门票。

2009 年

小光和朋友们阿飞、小东出于对动漫的共同爱好,半年前热血沸腾地创办了一个动漫社团。他们想在大学做些不一样的事情,所以社团的每一次活动他们都倾注了极大的热情和精力。画海报、P图、组织活动,每一项工作他们都亲力亲为,力求做到最好。 随着时间的推移,他们的社团逐渐在学校里小有名气,他们制作的海报更是吸引了很多老师和同学的目光。寒假刚过完,他们决定举办一场大活动,一个和动漫相关的画展,小光精心设计了一张吸引眼球的海报,不仅在校园里张贴,也上传到了学校校内的论坛。 就在海报张贴后不久,计算机学院的马老师无意间在学校论坛上发现了这张海报。他被海报上精美的设计和生动的色彩搭配所吸引,仔细一看,发现发图的竟然是自己的学生小光。马老师心中一动,听说过小光搞了个和动漫有关的社团,想到学院官网即将改版上线,但页面设计还很粗糙,尤其是首页的大图,缺乏专业感。 马老师意识到,这不正是一个机会吗?自己的学生小光既然有这手艺,不如让他来帮忙改善官网的视觉效果。第二天,马老师就通过学院联系到了小光,向他说明了自己的想法。 小光听到马老师的请求后,感到既意外又兴奋,因为自己的兴趣竟然有了个和师兄们共同学习和开发的机会。

软件实验室

小光跟着马老师走进计算机学院软件实验室,一打开门,他仿佛进入了一个新世界。这里没有宿舍里那种轻松的游戏氛围,而是充满了专注和勤奋的气息。师兄们一个个坐在电脑前,眼睛紧盯着屏幕,手指在键盘上飞快地舞动,整个房间充斥着敲击键盘和点击鼠标的声音。 马老师带着小光穿过忙碌的实验室,来到了一个靠窗的座位旁。那里,一位大三的师兄正全神贯注地调试着计算机学院的官方网站,他的眉头微皱,似乎在解决一个棘手的问题。 马老师轻拍了一下师兄的肩膀,说道:“这位是小光,他PS技术不错,看能不能在设计上给点支持。小光你先看看网站版头的那个大图,用我们学院的照片 P 一个上去试试” 师兄抬起头,微笑着对小光说:“欢迎欢迎。我们学院的网站正在改版,如果你能帮忙优化一下视觉设计,那就太好了。” 小光点了点头回答:“没问题,马老师。做图问题不大,我今天就能完成。” 马老师满意地点了点头:“好,那就交给你了。”

宿舍里

和师兄了解了项目的来龙去脉,从软件研究所回来,小光在宿舍里对着电脑屏幕发呆,Photoshop界面上是他的多次尝试,但每一次尝试似乎都不够完美。他尝试过简单地将学校的照片放在背景上,再在中间添加几个显眼的大字,但感觉过于死板;他也尝试过将几组照片拼接在一起,却感觉过于杂乱;即使是尝试了半透明的过渡效果,也总觉得不够和谐。 自己设计的不好看,还不如抄一抄别人学校好看的网站,很快,小光的心中有了主意,疯狂的浏览各大高校的主页。他决定采用淡蓝色作为主色调,这种颜色既能体现科技感,又不失年轻活力。他挑选了一张学校的大楼照片,经过精心的后期处理,让它成为设计的背景,既显眼又不过分突兀。然后,他在大楼前方以半透明效果添加了学院的名称和标语,确保了文字信息的突出,同时又不破坏背景的和谐感。 晚饭前,小光完成了第一版设计图。他深吸了一口气,通过QQ把设计图发送给了马老师。等待反馈的时间总是感觉漫长,但很快,小光的电脑响起了消息提示音。马老师的回复简单而充满鼓励:“做的不错,明天课结束后直接来软件研究所吧,和你师兄一起改一改”。 小光的心跳加速了。这不仅仅是对他设计的认可,更是对他能力的认可。能够进入软件研究所,和那里的师兄们一起工作,这对小光来说是一个有趣的开始。

进入项目组

周五的上午课程一结束,小光便迫不及待地带着他的笔记本电脑,来到了软件研究所。他直奔项目室,找到了正在忙碌的师兄,“师兄,你看看,这张图用作网站头图怎么样?”小光满怀期待地询问。 师兄的目光从屏幕上移开,看了一眼图片,随即又回到了自己的工作上,“我今天得调试完这些后台接口。这样吧,我把前端项目文件发给你,你试着把图片资源更新进去。”他一边指导小光图片应该放置的位置,一边讲解如何启动项目,同时还不忘吐槽,“这个项目时间上倒是不紧张,关键是我不久后就要出去实习了,得赶紧把手头的事情处理完。我先教你怎么调试,这样我也能腾出时间去写接口。” 小光认真地点了点头,就在这时,马老师突然出现在他们身后,“我考虑了一下,小光,你能不能做几个图片轮播的效果?就是那种网站上常见的,图片可以来回切换的,看起来很炫酷。” 小光的脑袋突然停了下来,他愣住了,心想:“三张图?来回切换?这该怎么做?”

小光打开QQ,找到自己小社团的会长小群,其实群里也就阿飞晓东他们仨,好在阿飞和小东都是学数字多媒体的,比起小光来说处理图片经验还是会多一点。 小光急切地在群里发出了求助信息:“兄弟们,江湖救急,我老师让我把图弄得动起来。” 小东带着一丝调侃回复:“要不然你给他做个视频?” “别开玩笑了,我哪有那本事,我电脑连大点的游戏都跑不起来,别逗了。”小光一脸黑线。 这时,阿飞发来消息:“你可以做个GIF动画,这个简单。我这有个制作GIF的小工具,发给你试试。” “多谢大侠出手相助!”小光心中一喜。这方法好像可行,制作几张风格相似的大图,然后用阿飞提供的工具将它们转换成动态的GIF动画。

明天就是周末,今天下午加上周末,应该能搞定吧。 “师兄,这里明天开门不?” 小光望着旁边的师兄问到 “我最近都在,差不多 8:00 左右开门” 师兄眼睛紧盯着屏幕,继续敲着代码

旁白

GIF(Graphics Interchange Format,图形交换格式)是一种用于网络上的图像交换的格式,
它能够以较小的文件大小提供颜色丰富的图像,并且支持动画效果。
GIF格式由CompuServe公司在1987年开发,目的是为了在网络带宽有限的情况下,快速加载图像。

GIF格式支持多帧图像的连续播放,支持透明背景,GIF文件适合在带宽较低的网络环境中传输。
几乎所有的Web浏览器都支持GIF格式,这使得它成为网络上最普遍接受的图像格式之一。

随着时间的推移,尽管出现了新的图像格式如 PNG 和 WebP,
GIF仍然因其独特的动画功能而保持着其在互联网文化中的地位。