來分享下我在設計DIVOOM PIXOO 64 圖案時踩到的坑。

像素設計完全是另一個世界啊…

螢幕尺寸

64px， 產品名稱直接告訴你，就是64px。

最大的問題也是畫面只有64px， 放不了多精緻的圖，也放不了多大的字。

我在做圖案設計時，面臨到的第一個問題就是畫布太小、解析度太低。

現在裝置的螢幕解析度都很高，想要在網路上找到可以直接拿來用的 icon，16px 都會嫌大。

8px icon 顆粒太粗不精緻， 什麼形象都打馬賽克。

後來覺得數格子還是最快的。

自製圖的解析度設定

用 Photoshop 舉例，畫布設定寬高都是 64px。

為了字體，建議解析度設 72 dpi。（72 dpi 情況下，1px=1pt）之後設計師要轉成給工程師用的數值才會是「整數」，也方便你數格子。

• 檢視 > 顯示 > 格點。
• 偏好設定 > 工具 > 打勾「將向量工具與變形靠齊至像素格點」。
• 向量工具，「對齊邊緣」打勾。

這 3 個動作都做了，確保你每 1 px 乾淨不長毛邊。

png 圖檔

可以使用 jpg 或 png。

注意 png 的透明圖檔性質，DIVOOM PIXOO 64 不吃透明。凡是所有透明的地方都會變成黑色。 LED 不會亮燈的意思。

圖層

可以給工程師底圖＋icon，然後告訴他 icon 的座標位置。

注意，沒有透明度屬性。

所有圖片、文字都沒有半透明屬性，在 PS 裡輸出 50% 透明度的圖檔，到了 DIVOOM PIXOO 64 直接是實色。

也就是說，就算你輸出了透明底的 icon 給工程師，想放在底圖上。你會看到 icon 透明的部份黑一塊。

透明＝沒指定色碼＝不亮燈＝黑

DIVOOM PIXOO 64 只會顯示圖層最上層的那個顏色，100% 實色。想做動畫要特別注意這一點。

座標

給工程師 (X,Y) ，注意左上角第一個 px，是 （0,0） 。這對 RD 來說是常識，但很多設計師不知道。

所以最右下角的那一顆燈就是(63,63)。

（工程師常被嗆數數不是1234而是0123，就是這樣來的。）
（沒有(1.3,5.1)這種座標，一律是整數。）

色碼

請使用 (255,255,255) (R,G,B) 這種喔！沒有 A 透明度。也不是 #fff 這種 16 進位色碼。

不用管什麼網路安全色，數值 0~255 隨便你。
（螢幕色偏這麼大，啥安全色都沒屁用。）

螢幕色偏

我家這台 DIVOOM PIXOO 64 有很嚴重的色偏，透過官方的 APP 設定 RGB 白平衡。

可以看到我把 B 全關了，螢幕還是有點藍。

配色

這兩個是我常用的配色網站。

• https://coolors.co/
• https://colorhunt.co/

別想用配色網站的色彩數值了，DIVOOM PIXOO 64 和平時我們在設計 iphone 之類裝置的手感差很多。

文字和底圖的對比度要拉大，色相、明度、彩度的變化會比預期的更糊更不明顯。

不過像素看板最大好處就是「配色俗豔五顏六色」反而很有風味，像霓虹燈管一樣。

放大膽去嘗試吧！每個區塊的文字都不同色也很有意思。

實作

學著怎麼做像素設計，讓我有種回到了 MS-DOS 年代的感覺。那時候的遊戲要塞進磁碟片裡，容量超小，所有圖檔都要斤斤計較。

64px 真的很難塞！

要塞字又想塞圖，解析度太低想放個 icon 不小心都比文字大，畫面比例失衡，礙眼。

別看這圖好像很大張，這是為了方便讓你數格子！

最大的文字是倒計時，13px，13px 你想放什麼 icon？還要考慮對齊問題。
最下方現在日期時間，文字只有 5px 高！5px 的 icon 恕我能力不足不奉陪。

底圖

原本底圖是純色色塊，後來加上漸層，最後改成紫色星雲。縮小看挺美的，放大都是格子。

不要懷疑，64px 就是這麼小一張，Apple Watch 解析度都是它好幾倍。

關窗

除了星雲底圖之外，我另外做了一張 64px 鐵窗圖。

隨著時間進行，鐵窗圖會移動座標 X 軸，四捨五入一下也算是會動了。

純色色塊真的醜，想搞點花紋又因為解析度太低效果極差，我在網路上找到像素花紋的 Photoshop Paterns，壓在鐵窗上效果比預期的好。

Tech & Screentone Photoshop Patterns
https://myphotoshopbrushes.com/patterns/id/1008/

另外講個小技巧，想製造「厚度」，可以用兩條不同深淺的線，淺色在上、深色在下，遠遠（縮小）看就很像有一層厚度在那邊。

同理，想要有「微凹陷」感，可以改成深色在上、淺色在下。分隔線很常見這種處理手法。

不停微調

在 Photoshop 看到圖檔的和實物呈現出來的感覺完全不同，質感、色偏、文字渲染落差大到會想喊花黑噴。

後期你會一直上傳圖檔微調色碼和座標，要有心理準備。

但完成後真的很有趣，超有成就感的。

像素畫

網路影片教學資源很多啦！輸入「Pixel Art」看到眼花。不過我現在挺想要這本的XDD

ドット絵教室

相關連結

官方產品網站 https://divoom.com/products/pixoo-64

• IOS：Divoom: Pixel art community
• Android：Divoom: pixel art editor

字體

• 行程名稱的字體：等寬英文像素字體 - Monogram
  https://itch.io/t/214662/monogram-a-free-monospace-pixel-font

• 倒數計時字體：英文像素字體 - PICO-8.ttf + variants
  https://www.lexaloffle.com/bbs/?tid=3760

工程師用的資源

請去這篇文下載 設計師的小玩具：DIVOOM PIXOO 64「產品限制與資源」

DIVOOM PIXOO 64 DIY 系列

這是個系列文章，我分成幾個部份來說。都不是什麼很難、但自己摸索會覺得麻煩的事。

1. 產品限制與資源
2. 圖片設計與座標尺寸
3. 字體渲染處理方法

Study With Akane

影片右下角，桌上那個小電腦是 DIVOOM 另一個產品DITOO PLUS 像素藍牙喇叭。
音質不怎樣，但好玩！擺在桌上也漂亮，我非常喜歡。如果你對電子看板沒興趣，可以瞧瞧這款。

這是我開的另一個頻道，逼自己念書用的，一次一個小時（下班後還要擠一小時出來讀書不容易啊）。
如果你覺得一個人讀書學習有點無聊，可以開這個影片出來喔！我也是一個人在讀書學習，有人陪就不孤單寂寞啦。