設計師的小玩具: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. 字體渲染處理方法
  4. 資料生成、設計師和工程師如何配合
  5. 動畫特效

(之後會慢慢補完內容,不想等我寫文的可以馬上自己動手玩看看唷!)

Study With Akane

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

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

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close