百度mac輸入法皮膚編輯器

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

Mac平臺(tái)專屬皮膚編輯器：

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

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

百度Mac輸入法：

最出色的OS平臺(tái)輸入法

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

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

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

1. 設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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


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

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

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

雙行皮膚背景圖

單行皮膚背景圖

狀態(tài)欄背景圖

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

3. 替換圖片

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

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

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

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

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



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

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

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

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

5. 字體 & 顏色

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

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

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

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

7. 動(dòng)態(tài)皮膚

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

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

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

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