这些火出圈的电牌是如何设计的？通通手把手教你！
从为广州电车精心设计的电牌，到游走于各大活动现场的通通家的LED，通行线设计的电牌内容在各大场合无不吸引着大家的目光。你是否好奇这样优质的内容是如何在设计师的手中从无到有的呢？今天，就让我们一起来到通行线设计师团队的身边，看看这一块块吸睛无数的电牌的诞生之路……
相信不少通通的忠实粉丝都记得之前通通制作的一系列点阵电牌图：
这些点阵电牌出现在了大家的现实生活中：
甚至还出现在了真正的巴士上：
通通在广州电车上的「微小」尝试甚至火出了圈：
看到这些与常规电牌不同的应用，你是否已经按捺不住自己的双手，想绘制一块属于自己的电牌？把这样与众不同的电牌放在自己的车里或是背包上，通通相信你就是这条街最靓的仔。那么，就是现在，和通通一起上手，在点阵之间精彩跳跃吧！
一、了解所需尺寸
拿到通通家的LED的粉丝们应该已经发现，配套的软件提供了简单的文字发送功能。但该功能较为简单，输出的文字也仅仅停留在“能看”的层面上。通通于是准备将文字融入到图片中，这样可以获得更大的操作空间，输出效果更佳的图片，将电牌从“能看”时代进入“好看”时代。
以通通家的LED为例，为了在制作图片时，让每一个像素点都能发挥应有的作用，我们通常在制图软件中创建与实际尺寸一致的图片，只有这样，才能让制作出的图片每个像素对应一个电牌上的亮点。因此，在开始制作之前需要知道制作屏幕的尺寸，即分辨率。各位可以通过查找参数或拍摄高清照片来数出真实电牌的分辨率。以通通家的LED为例，小圆饼最宽处分辨率为32×32，LED挎包、LED背包及其 Plus 版本分辨率为64×64，真·LED电牌的分辨率是160×32。了解以上参数后，我们就可以正式开工了。
二、选择趁手软件
在软件的选择上，通通首先推荐 Adobe Photoshop（下简称PS）。相信在接触电牌制作前，大家也已听说过这一图像处理界“扛把子”的鼎鼎大名。PS功能丰富，不仅能够制作电牌，还能在图像处理等有关方面发挥更大的用处，在大家熟练掌握之后将非常方便。需要注意的是，其正版价格也不菲，请大家根据自己实际情况使用。
免费的在线工具Photopea与PS类似，对于基本点阵制作来说也绰绰有余，使用浏览器（Chrome为宜）访问 www.photopea.com 即可体验；对于仅有电牌制作需求的各位也是一个物美价廉的选择。
Windows系统自带的画图也可以进行制作，但功能性和便利性上通通觉得都有所欠缺。
当然，在软件的选择上还是顺心顺手比较重要，大家可以根据自己的情况权衡利弊进行选择。本文将以通通最为熟练的Windows系统下的PS为例，为大家逐步讲解制作电牌的过程。
今天，我们就以这样一张应用在通通家的LED背包上的图片为例，为大家带来全套制作教程。这款LED背包采用USB供电，自带64×64全彩LED屏，可以使用手机APP控制，并配有多层次储物结构。话不多说，我们马上开始！
三、软件准备工作
1.新建文档：打开PS，首先点击顶栏左上角文件-新建，来新建一个文件。在右侧预设详细信息一栏，宽度右侧的单位选择“像素”。左侧宽度与高度处分别填入横向和纵向的电牌点数。以通通家的LED背包为例，宽度和高度均为64。背景颜色的选择上推荐使用黑色，其他一般维持默认即可，大家可以参照图片中的参数进行设置。随后点击“创建”，即可进入到PS的主界面中。
2.打开像素网格：作为辅助，我们可以打开像素网格进行参考。依次点击顶部菜单栏视图-显示-像素网格来打开像素网格。在放大倍数较高时，PS将会显示辅助线将每个像素的区域表现得更加清楚，以方便我们作图。
3.善用图层与历史记录功能：通通推荐在顶部菜单栏“窗口”中将“历史记录”和“图层”打开，善用图层可以将不同的内容分离，各图层间互不干涉，在后期调整中更为方便。在添加不同类型的内容前推荐新建图层。而历史记录工具可以将你的操作退回到若干步之前，方便快速回到之前的版本。
四、规划制作版面
开始动手前，规划显得尤为重要。通通这里以制作一个虚构的上海地铁14号线报站屏为例。首先通通将图片分为三部分，上方为线路方向等线路信息，中间则是双语显示的次站站名，底部则显示换乘站等其它信息。同时，根据内容的重要性、字数等设置不同大小。
五、选择合适字体
确定了排版之后，便可以开始输入文字。在左侧工具栏点击“文字工具”，并在窗口中单击以创建文本框。注意如图关闭抗锯齿。抗锯齿可以让字边缘更平滑，但在低分辨率屏幕上显示小尺寸文字也会更模糊，并削弱点阵的风格化特点。因此通通选用专为点阵而制作的字体，关闭抗锯齿效果更佳。
说到打字，目前大多数字体都不带有汉字点阵字形，在低分辨率下效果不佳。因此字体的选择就十分重要。不过，有一款大家都见过和用过的字体就自带点阵字形，它就是“中易宋体”。它被当前Windows系统内置，并称之为“宋体”或“Simsun”，它的12、16号特别为点阵制作，通通将它们分别用于方向和次站。
除了大小，字体的粗细也可以用来突出重要信息。选中所需修改的字体，右键选择“仿粗体”，在16号宋体上可以实现每个点横向加粗1像素的效果。但这里使用“仿粗体”只是因其操作简单，和美观仍有一定差距，若遇上笔画较为复杂的汉字，仍有可能在显示上糊成一团。“仿粗体”所能适用的字体也为数不多，16号的宋体已是其中显示效果较好的一种。
LED电牌的显示空间常常有限，12号宋体仍占地较大。为了装下更多内容，就需要更小字体的诞生。通通推荐由 @威梨 制作的“丁卯点阵体”。这款字体专为点阵而生，可以让文字特别是汉字在超小的面积内保持良好的易认性和不错的美观度。
看过通通此前做的LED电牌内容的你应该对它不陌生，它小到极限的尺寸与LED点阵屏相得益彰，对通通的设计产生了莫大的帮助。无论是免费获取试用版，或是购买个人授权，关于“丁卯点阵体”的更多信息，都可在其工作室“atelierAnchor锚坞”官网找到：https://atelier-anchor.com/typefaces/dinkie-bitmap/
“丁卯点阵体”带有字面7×7和9×9两个尺寸的点阵，因其还有1像素的空间用于隔开每个字符，因此根据文字实际占用空间命名为8号和10号。通通选择了10号丁卯点阵体作为显示次站的英文，而最下方的其他信息因其所需显示内容更多，所以通通选择了更小的8号。
文字输入完毕后，需做一定的微调。用左侧工具栏左上角“移动工具”可以调整文字的左右位置、上下间隔。图层的好处就在此时体现出来，移动不同图层均不会对其他图层造成影响。在设置居中时，大家需要注意不要刻意追求上下、左右所空点数一样，而应该根据实际情况调整，重在追求视觉上的居中。
六、绘制特定图案
细心的读者或许已经发现，通通在左上角留下了部分空白区域。这是为何？原来，通通准备在此处手动绘制线路号“14”。为什么不直接使用现有字体呢？我们常用的数字和西文字母数量有限，且整体结构比汉字简单，手动绘制难度较低。直接采用手动绘制也更便于针对实际需求做调整。同时西文字母与数字的主要字体并不完全适用点阵制作，使用现成字体后仍需动手改造。
如图，首先在左侧工具栏点击“画笔”，并长按切换到“铅笔工具”。
点击“画笔预设”，硬度调整至100%，大小可以根据需要进行调节。
在左侧工具栏将“前景色”更换为想要绘制的颜色。
用“铅笔”画出线路号“14”。考虑到整张图片的尺寸及右侧文字大小，通通试着画出一个纵向14点的数字。如果觉得不适合，也可以根据实际情况进行适当修改。
如果需要修改，可同时按下键盘上的Ctrl+Z撤销，也可以在左侧工具栏使用“橡皮”功能擦除。注意，在橡皮工具的“模式”中选择“铅笔”，“画笔预设”的设置与上文相似。
七、丰富色彩搭配
文字内容基本完工，就可以进入上色阶段啦。通常，LED电牌的屏幕本身并不大，我们应尽量减少颜色的使用，避免产生眼花缭乱的效果。将颜色主要用于区分不同区域与强调部分文字使用是一个较好的思路。针对较大色块的填充，通通使用左侧工具栏中的“矩形选框工具”。注意，此时应新建图层，并将图层置于文字之下，这样就可以单独调整色块的颜色。鼠标拖拽框选所需区域后，单击右键填充颜色。在颜色填充完毕后，我们应再次选择文字所在图层，并修改文字颜色，避免文字颜色与背景填充颜色一致或相近，达到醒目的目标。
LED电牌的对比度不及电脑屏幕，有的文字可能看起来并不清晰，此时我们可以添加描边（如下图中的数字1），同样可以使用“铅笔”工具，在数字1的周边增加一圈描边，再次增强醒目程度。
此时，我们再次纵观全图，针对各部分内容与位置进行微调，来达到和谐、醒目、统一的效果。
八、导出成品图片
绘制图片的部分大功告成，现在终于可以导出图片啦！单击顶部菜单栏文件-导出。通通推荐导出为gif格式，这样可以在通通家的LED显示屏上获得未经压缩的最佳效果。如图选择“储存为Web所用格式（旧版）”。
导出面板参数维持默认即可，大家可以参照图片进行设置，最后点击存储，大功告成！
九、展示精彩作品
将图刷入背包，就可以上街展示啦，配合遥控功能，你真的可以在车厢内实现报站效果。
为了能够让大家充分通过本案例学习实践，通通已经把PSD文件公开。欢迎在微信关注“通行线”，回复“通通的LED太好看了”即可收到下载链接。你可以通过PS、Photopea等工具打开该文件，修改文字，按需编辑。
点阵的玩法远不止于此，购买通通家的LED的用户可以在专属LED背包客户群内下载到通通和其它专业小伙伴制作的点阵图片。另外，悄悄和大家透露一下，一款能够控制通通家的LED显示屏的小程序也已经在路上啦，大家敬请期待噢～
电牌世界奥秘无穷。通通希望这篇文章能帮助大家简单接触电牌图片的入门上手制作，让产品在手中与众不同。欢迎大家通过各种渠道持续与我们交流，和我们一起在方寸电牌间灵动跳跃。
文章作者
hans-johnson
鸡飞
逃学请找我 | 编辑
通行线Toursline
大交通文化推广和传播品牌
授权/合作事宜欢迎联系contact@toursline.net
