百度mac輸入法皮膚編輯器

百度Mac輸入法將向優(yōu)秀設(shè)計師征集Mac皮膚作品。玩的是創(chuàng)意，拼的是細(xì)節(jié)，活動給力。

Mac平臺專屬皮膚編輯器：

使用百度mac輸入法皮膚編輯器，做套皮膚分分鐘。

為了配合大賽開展，讓使用Mac平臺的設(shè)計師們更方便地制作皮膚，百度Mac輸入法推出了Mac平臺的皮膚編輯器。配合Mac輸入法皮膚制作模板，可視化地制作一套皮膚，對UI設(shè)計師來說簡直是分分鐘的事情。當(dāng)然，玩的是創(chuàng)意，拼的是細(xì)節(jié)，最重要的是設(shè)計師的idea�；顒訉⒊掷m(xù)一個月，設(shè)計師們將有充分的時間去實現(xiàn)自己的創(chuàng)意~

百度Mac輸入法：

最出色的OS平臺輸入法

百度Mac輸入法自上線以來，就以出色的表現(xiàn)令人眼前一亮。極速輸入響應(yīng)、超高出詞精準(zhǔn)度、優(yōu)雅外觀設(shè)計和卓越用戶體驗，已得到不少粉絲和專業(yè)人士的認(rèn)可。

為了提升Mac用戶的輸入體驗，百度Mac輸入法3.0隆重推出皮膚功能，以「最美輸入」為理念，同步推出了 知名設(shè)計師系列 以及 Weico系列 等精美皮膚，并獨家支持動態(tài)皮膚，給予設(shè)計師更多的施展空間。百度Mac輸入法所有皮膚作品都由專業(yè)的UI設(shè)計師精心設(shè)計，支持Mac用戶喜愛的單/雙行模式，且每個作品下都附上設(shè)計師的名字及其個人主頁，為用戶提供優(yōu)質(zhì)皮膚選擇的同時，也予以了設(shè)計師充分的肯定和尊重。

百度mac輸入法皮膚編輯器怎么用？

1. 設(shè)計

第一步當(dāng)然是完成皮膚的視覺設(shè)計，一些設(shè)計上的限制和所需要設(shè)計的元素參見以下規(guī)范：

大家可以下載這個 PSD 格式的規(guī)范當(dāng)做模板開始進(jìn)行設(shè)計。

然后順便提一下很多朋友提到的關(guān)于皮膚設(shè)計上的問題：
Q: 皮膚的大小有限制嗎？
A: 沒有，狀態(tài)欄和輸入框的大小都可以自定義。

Q: 候選詞條的翻頁按鈕位置可以任意擺放嗎？
A: 目前翻頁條的按鈕位置和間距沒法調(diào)整，只能和候選詞在同一行并且緊跟其后，但是因為翻頁按鈕其實就是兩種圖片，所以可以通過圖片中透明像素的位置來微調(diào)位置。

Q: 狀態(tài)欄上的按鈕怎么更改顏色嗎？
A: 狀態(tài)欄上的按鈕其實都是圖片，并且每個按鈕有三種狀態(tài)（普通、懸浮、點擊），打開模板里的「切圖.psd」文件可以方便地進(jìn)行替換，詳細(xì)步驟我后面會細(xì)說

Q: 狀態(tài)欄的形狀可以自定義嗎？按鈕可以不放一排而做異形處理嗎？
A: 完全可以，你做一個 1000 x 1000 大小的狀態(tài)欄也可以，哈哈哈

以「百度藍(lán)」皮膚為例，假設(shè)我已經(jīng)做好了如下圖的初步的設(shè)計：

然后讓我們進(jìn)入皮膚制作的環(huán)節(jié)吧~

2. 設(shè)置路徑和基礎(chǔ)信息

下載并安裝最新版的編輯器（之前裝過舊版的朋友可以去重新下載一下覆蓋安裝），打開之后在第一個 tab「全局定義」中點擊「設(shè)置」按鈕就可以定義皮膚的資源路徑，之后所有的皮膚圖片都會存放在此路徑下，而點擊「查看」就能快速在 Finder 中打開此目錄


然后在此頁中可以填上大家的個人信息已經(jīng)皮膚的簡介等內(nèi)容，這里就不贅述了。

「全局定義」這個 tab 下還需要設(shè)置一下輸入法皮膚最主要的 5 張圖片：

微博分享圖 - 寬 440px，高任意的效果圖

雙行皮膚背景圖

單行皮膚背景圖

狀態(tài)欄背景圖

當(dāng)然皮膚不止這么一些內(nèi)容，還需要輸出狀態(tài)欄按鈕以及候選條的翻頁按鈕

3. 替換圖片

理論上可以打開皮膚資源目錄，按照原來的命名一一替換所有按鈕的圖片，但是為了方便大家，我做了一套模板，里面設(shè)置好了切片以及輸出文件名，只需要將按鈕擺放到相應(yīng)的區(qū)域內(nèi)，然后以 web 格式另存就能一鍵導(dǎo)出所有各個狀態(tài)的按鈕

完成切圖并設(shè)置好之后我們就開始需要鼓搗一些讓人討厭但也不得不弄的數(shù)字啦~

4. 設(shè)置參數(shù)

Mac 輸入法提供單行和雙行兩種模式，所以皮膚對應(yīng)需要兩種格式，我們先進(jìn)入「雙行皮膚」這個 tab，來看第一行參數(shù)。首先代我們的 RD 妹妹向大家道歉，這第一個值本該可以直接讀圖片來獲得，但現(xiàn)在我們不得不手動填一下背景圖片的整體寬度。不過作為我們 Mac 輸入法平臺唯一的開發(fā)人員，她在已經(jīng)忙不過來的情況下還能寫出皮膚編輯器已經(jīng)挺給力了，大家掌聲鼓勵！

接著需要設(shè)置和九宮格區(qū)域以及內(nèi)容邊距，輸入?yún)^(qū)和候選字區(qū)需要設(shè)置的參數(shù)是類似的：



設(shè)置九宮格區(qū)域是為了保證輸入條變長之后背景以理想的方式拉伸，而內(nèi)容邊距是確保輸入條上的文字以理想的位置進(jìn)行放置。

Tips 1：九宮格區(qū)域的基礎(chǔ)知識如果大家不熟可以翻我的老貼：關(guān)于九宮格

Tips 2：在設(shè)置九宮格區(qū)域的時候可以先用 PS 打開背景圖，如下圖分別設(shè)置好兩個九宮格的區(qū)域，每個區(qū)域作為一個圖層。然后選中該圖層按 Cmd + T 即可在詳細(xì)面板快速讀到該區(qū)域的 X坐標(biāo)、Y坐標(biāo)和寬度、高度

另外需要設(shè)置的是放大方式，分兩種：平鋪和拉伸。很顯然，平鋪適合重復(fù)紋理形的背景，其余的用拉伸。
單行皮膚與雙行皮膚的設(shè)置類似，只是單行皮膚僅有背景圖寬度和高度以及候選字區(qū)域需要設(shè)置。

5. 字體 & 顏色

來到「字體 & 顏色」這里定義字體、大小和顏色，一張圖說明一下每個位置對應(yīng)的顏色：

另外請盡量使用系統(tǒng)自帶而不是自定義的字體以保證皮膚在其他用戶電腦上也能正常顯示

6. 優(yōu)化 Retina 版皮膚

百度 Mac 輸入法的皮膚支持 Retina 屏幕的做法挺簡單，只需要在皮膚目錄下將左右圖片資源的高分辨版本都加以「@2x」后綴名即可。比如雙行皮膚背景圖片的文件名是「bg_horizontal.png」，那只要制作相對應(yīng)的高分辨率版本（長寬均是之前的兩倍）然后命名為「bg_horizontal@2x.png」放置在資源目錄下即可。不過根據(jù)之前大家反饋的問題，保存高分辨率圖片的時候盡量請以「另存 Web格式」的方式。
Tips: 如果你想要測試 Retina 皮膚但又沒有 rMBP，而你有正好裝了 XCode 的話，可以用以下這個網(wǎng)址里介紹的方法在普通顯示器上開啟高分辨率屏模式：http://osxdaily.com/2012/01/12/enable-hidpi-mode-in-mac-os-x-lion/

7. 動態(tài)皮膚

狀態(tài)欄的背景是可以動態(tài)的，但上面的按鈕還是只能靜態(tài)；輸入條的背景只能是靜態(tài)的，但可以在上面疊一個動態(tài)的圖，這個圖不能進(jìn)行拉伸，但可以以四個角作為基準(zhǔn)設(shè)定位置，而所用到的格式是支持 Alpha 通道的APNG，一般比較簡單的 APNG 動畫可以先輸出每一幀的 PNG 圖片，然后以 zip 格式打包，上傳到這個網(wǎng)站上：Online APNG Assembler，點擊 Create 之后就能生成。

然后在單行以及雙行皮膚的 tab 下點「啟用」打開動態(tài)功能，然后點「設(shè)置」加載動態(tài)的 PNG 文件，之后就只需要動態(tài)部分的相對位置和坐標(biāo)了，此處的坐標(biāo)可以為負(fù)數(shù)的
  
PS. 因為程序上的問題，有時候需要在編輯器預(yù)覽里拖動一下皮膚才能正確顯示動態(tài)部分的位置
8. 導(dǎo)出

最后單擊編輯器右上角的「導(dǎo)出」按鈕即可在桌面上找到打包的 bpsm 文件啦~ 雙擊即可開始使用~ 

無論高聲尖叫還是沉默低語，都是個性的色彩。無論是簡約的或奢華的，不管是時尚的還是復(fù)古的設(shè)計，只要創(chuàng)意夠精彩，設(shè)計夠新穎，就能在萬千百度輸入法用戶中傳遞。百度翹首期待，百度Mac輸入法皮膚大賽，會讓優(yōu)秀設(shè)計的天賦，妝點每個用戶的輸入法夢想。