設計師的小玩具:DIVOOM PIXOO 64「圖片設計與座標尺寸」

來分享下我在設計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 全關了,螢幕還是有點藍。

配色

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

別想用配色網站的色彩數值了,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

字體

工程師用的資源

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

DIVOOM PIXOO 64 DIY 系列

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

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

Study With Akane

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

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

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close