如果您喜歡『PS學習網』,請推薦給您身邊的朋友!本站永久域名:www.757877.live

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

當前位置 : PS學習網 > 鼠繪專區 > 正文來源:網絡作者:網絡時間:2019-02-11人氣:

在購物車里窺視了很久的實體鍵盤一直舍不得買?本教程教你如何構思并制作一款簡約擬物風格的輸入法皮膚,至少能在手機上過上一把實體鍵盤的癮。

先看看效果圖:

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

教程步驟—

01 構思草圖

首先要仔細了解輸入法的組成部分:候選欄+拼音區+云候選區+鍵盤大背景+9鍵鍵盤+26鍵鍵盤+上劃彈泡等。

剛開始著手設計的時候,建議從整體入手,大致規劃好各個部分的設計元素的擺放位置等,盡管這樣的工作無法得到立竿見影的成效,但這的確是筆者經過慘痛的教訓后得到的寶貴經驗。一開始把整體的設計布局確定好了,之后就算有改動的地方,通常也只是小改,否則…

一句話,天才第一步,構思皮膚整體布局。

本次參賽作品選用了深受部分程序員喜愛的ikbc 1系鍵盤Poker作為擬物原型,畢竟是擬物風格的輸入法皮膚,所以設計過程中遵循了“盡可能像”的設計原則。

此圖為實體鍵盤官網宣傳圖。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

這款鍵盤的特點“60%鍵位”“小巧”,即精簡了鍵盤,用戶不需要上下左右移動手腕,即可保持較高的的輸入效率。所以在皮膚的設計中,為了體現這種簡潔的設計思想,未在工具欄、候選欄、云候選區或拼音區區域做任何設計,簡單就好。

而在主體鍵盤部分的設計中,以質感設計優先,鍵槽體現為輔的宗旨著手后續工作。

02 鍵帽部分

鍵帽部分千萬注意不要脫離切圖尺寸而獨立設計!

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

切圖模板可從搜狗輸入法皮膚比賽詳情頁獲取

26鍵和9鍵布局的鍵帽大小差異較大,先獨立設計而后進行拉伸復制很有可能導致邊緣圓角(如果有的話)變形,出現鋸齒或過渡不自然等情況。故而強烈建議帶圓角的鍵帽,直接基于26或9鍵的切圖尺寸的框架內進行設計。

本次參賽作品的設計較為簡單,使用圖層樣式表達出實體鍵盤質感即可,不需要進行其他的效果制作。故而質感在表現時,相對須設計地較為精致耐看一些,否則可能會顯得較為單調。同理,盡管實體鍵盤的配色基本為黑白灰,但在實際的質感表現時,一定注意,灰度的層次感要相對拉開。此外,其實仔細觀察,實體鍵盤在不同鍵位上的鍵帽上手指敲擊處的斜度處理也有所不同,故而在本次參賽作品中筆者也有所還原(9鍵中較為明顯),不過由于時間緊迫,未來得及做出上下傾斜的感覺,實屬遺憾。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

一句話,如果本身設計元素就不算太多的話,那么剩下的部分可能更需要精致,需要更多細節,這樣才能更耐看一些。

如下為圖層樣式的拆解,以9鍵布局為例,其余鍵帽差別不大(調整圖層樣式時,無需死摳數據,主要通過最終的視覺效果來選擇圖層樣式的應用程度。此外,圖層樣式的添加每一步都有確切的目的,不要為所欲為。)

(此處正是之前提到的錯誤的脫離切圖尺寸制作的鍵帽,若將其轉化為智能對象,并進行拉伸,邊緣圓角很有可能出現變形等其他問題。不提倡脫離切圖尺寸進行制作,不過此處僅作圖層樣式設置的講解,影響不大。)

不要死摳數據,根據需求情況及最終效果進行反復調整。

(注意!未標明色值的顏色要么為因為重復所以略去的顏色,要么就是純黑純白(通過不透明度參數的調整實際所需的陰影顏色等))

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

漸變疊加做鍵帽底部四面的顏色

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

 

兩層內陰影加一層內發光做出厚度,特別強調下部邊緣的厚度

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

鍵帽的頂部同理,相似的方法根據不同的光影情況給予略微不同的參數不斷調整即可。不過此處的漸變疊加是用于做

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

鍵帽頂部本身的彎曲度,漸變不宜選區差異過大的顏色,否則會變形。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

添加上一個較為柔和的投影做出鍵帽的頂部與底部的上下層級關系的感覺,可以不必太深,之后還可以通過強化某一立面暗影的方式凸顯鍵帽深度。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

單獨使用投影+蒙版的方式刻畫或強化前后立面的深度。注意參數的調整,使得陰影更加真實(后立面深度也可不進行單獨強化,這取決于光源的選取,實際作品中為對比更為強烈,未對后立面進行單獨強化)

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

最后做出整體鍵帽在鍵盤或鍵槽上的陰影(如果切圖要求能滿足的話)

至此,一個鍵帽就完工了,其余部分大體不過形狀位置或大小或圖層樣式參數的調整,此處就不贅述了

  

03 鍵槽部分

鍵槽部分結合鍵帽部分共同進行尺寸調整

鍵槽部分的把控既麻煩又簡單。簡單指鍵槽的表現和放置;麻煩指鍵槽的尺寸大小的把握和鍵帽和鍵槽如何進行較為和諧的結合,這兩者并不矛盾。

9鍵布局部分筆者選取了大鍵槽結合字母鍵的結合方式,一方面可以潛意識地將使用者的視線集中在字母鍵上,減少其他鍵位在打字時的干擾;同理,右部的功能鍵區采用長鍵槽;而左部的標點符號區因為鍵帽與鍵帽之間間距較大,所以沒有采用相同的策略,而是單獨為每一個標點符號設置鍵槽,而若采用長鍵槽,可能會因為間距部分的鍵槽而使得空間組織顯得過于疏松。

26鍵布局中的主體鍵盤部分也因為間距較大的原因,沒有使用大鍵槽,其余部分就較為簡單了,一個個安排下來即可。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

鍵槽只需要一個制造深度的圖層樣式即可。

04 前景字符部分

在比賽規則框架下盡量匹配實體鍵盤字符風格。

實體鍵盤中字體的選用是偏幾何風格的,故而在皮膚的字體選用中也應盡可能匹配原字體風格(比賽要求限制,此處選用漢儀旗黑而非實體鍵盤的字體或類似字體),部分符號作了微小的改動以匹配風格,比如將一些圓潤的轉折部分去掉了。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

05 其他部分

長按氣泡及按下效果清晰明確,不會造成誤解即可。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

按下效果制作很簡單,調整頂部形狀位置,略微調整圖層樣式的參數即可效果展示

最終效果—

第一版后第一次大改的版本(第一版找不到了..)

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

最終版9鍵

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

最終版26鍵

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

相關教程
回頂部
股票涨跌有哪些规律