PS UI設(shè)計(jì)技巧(4)

來(lái)源:網(wǎng)絡(luò) 作者:張強(qiáng) 學(xué)習(xí):22074人次

超實(shí)用的PS UI設(shè)計(jì)技巧
具體的制作步驟如下:

作為工作繁忙的設(shè)計(jì)師,我們一直追求高效、敏捷地完成設(shè)計(jì)任務(wù),那究竟要如何提升UI設(shè)計(jì)效率呢?本文將從軟件、習(xí)慣、技巧等三個(gè)方面來(lái)闡述筆者的一些心得總結(jié)。

軟件篇

工欲善其事,必先利其器。UI設(shè)計(jì)要更有效率,捷徑就是從最常使用的Photoshop(下文簡(jiǎn)稱PS)軟件出發(fā)。

PS軟件更新很快,但出于對(duì)版本穩(wěn)定性的追求,筆者并沒(méi)有新版本出來(lái)就馬上更新的習(xí)慣。而PS CC版本的出現(xiàn),卻改變了筆者的看法。用好PS CC,會(huì)在設(shè)計(jì)效率方面帶來(lái)很大提升。

超實(shí)用的PS UI設(shè)計(jì)技巧超實(shí)用的PS UI設(shè)計(jì)技巧

1、Photoshop CC精彩新功能

多重形狀和路徑選擇

使用Photoshop CC提供的多重形狀和路徑選擇,可以同時(shí)選取多個(gè)路徑、形狀和矢量蒙版,不需按多次鼠標(biāo)即可完成更多任務(wù)。即使在擁有許多路徑的多圖層復(fù)雜圖像文件中,也可以使用新的濾鏡模式,直接在畫布上鎖定路徑 (及任何圖層)。

超實(shí)用的PS UI設(shè)計(jì)技巧

簡(jiǎn)易繪制虛線

PS CC不需要手工計(jì)算像素來(lái)進(jìn)行繪制虛線,虛線繪制變成基礎(chǔ)控件。

超實(shí)用的PS UI設(shè)計(jì)技巧

文字優(yōu)化

舊版本的PS在使用微軟雅黑字體時(shí),無(wú)法清晰顯示。而PS CC 增加了WindowsLCD的文字選項(xiàng),編輯文字時(shí)選擇WindowsLCD,就可在PS中獲得文字外觀的真實(shí)預(yù)覽效果。

超實(shí)用的PS UI設(shè)計(jì)技巧

 

 

背景存儲(chǔ)與自動(dòng)復(fù)原

使用PS CC,能夠在背景儲(chǔ)存大型的 PS 檔案,同時(shí)還可繼續(xù)工作;也可透過(guò)全新的自動(dòng)復(fù)原選項(xiàng)保留所做的編輯,而不會(huì)中斷工作進(jìn)度。

超實(shí)用的PS UI設(shè)計(jì)技巧

PS軟件效率更高,大型文件處理更快

PS CC對(duì)代碼進(jìn)行了優(yōu)化,軟件算效率有了很大的提升。

超實(shí)用的PS UI設(shè)計(jì)技巧

可編輯的圓角矩形

PS CC可以生成4個(gè)不一樣圓角的矩形,圓角設(shè)置更加精準(zhǔn)。

超實(shí)用的PS UI設(shè)計(jì)技巧

更精細(xì)的描邊

描邊能精確到0.x,能做更加精致的效果。

超實(shí)用的PS UI設(shè)計(jì)技巧

2、簡(jiǎn)單設(shè)置Photoshop CC

說(shuō)了這么多好處,也談?wù)剢?wèn)題。在使用PS CC的過(guò)程中,筆者經(jīng)常遇到假死、閃退、崩潰的問(wèn)題。出現(xiàn)這些問(wèn)題的主要原因是目前大部分用戶使用的都是機(jī)械硬盤,而從PS CS6開始就增加了一個(gè)后臺(tái)儲(chǔ)存的新功能,該功能的好處是定時(shí)給你的psd文件進(jìn)行保存,但這個(gè)功能在設(shè)計(jì)的時(shí)候并沒(méi)考慮到目前大部分用戶使用的都是7200轉(zhuǎn)速的機(jī)械硬盤。我們平時(shí)做設(shè)計(jì)稿很有可能同時(shí)打開多個(gè)甚至數(shù)十個(gè)psd文件,如果當(dāng)前運(yùn)行的十個(gè)psd文件都同時(shí)儲(chǔ)存,而剛好我們也在進(jìn)行PS操作,那出現(xiàn)假死、閃退、崩潰的機(jī)率就非常大了。

所以為了使用更穩(wěn)定,可以在使用PS CC前先做一下如下設(shè)置,關(guān)閉后臺(tái)儲(chǔ)存功能。

超實(shí)用的PS UI設(shè)計(jì)技巧

3、Photoshop CC bug一覽表和解決方法

除了關(guān)閉后臺(tái)存儲(chǔ)來(lái)降低軟件崩潰的問(wèn)題,這里筆者還根據(jù)工作經(jīng)驗(yàn),匯總了一些PS CC的常見問(wèn)題。部分問(wèn)題可以解決,但仍有部分問(wèn)題只能留待下個(gè)版本的更新優(yōu)化。

超實(shí)用的PS UI設(shè)計(jì)技巧

習(xí)慣篇

閱讀之前,優(yōu)設(shè)哥特別向您和您所在的團(tuán)隊(duì)推薦《PS禮儀手冊(cè)》!網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法,更是不可或缺的WEB設(shè)計(jì)指南。

還有這篇瀏覽量過(guò)五萬(wàn)的PS技巧!《設(shè)計(jì)師應(yīng)該知道的17個(gè)PS技巧》

1、同一個(gè)項(xiàng)目盡量在一個(gè)psd里

在項(xiàng)目中統(tǒng)一功能塊、功能盡量保存在同一個(gè)psd里,日后使用會(huì)更加方便,節(jié)約在不同psd文件里查找時(shí)間。

超實(shí)用的PS UI設(shè)計(jì)技巧

2、時(shí)刻保持圖層命名、歸類

良好的歸類、圖層、命名習(xí)慣,在團(tuán)隊(duì)合作中psd源文件可用度效率更高,日后修改也會(huì)節(jié)省時(shí)間。

超實(shí)用的PS UI設(shè)計(jì)技巧

 

 

3、盡量使用智能對(duì)象

智能對(duì)象好處在于合并對(duì)象后不破壞對(duì)象,同時(shí)可以讓這個(gè)合并后的對(duì)象具有可編輯特性,同時(shí)具備同步更新功能。

超實(shí)用的PS UI設(shè)計(jì)技巧

4、在文件夾中加蒙版,操作一步到位

在文件夾加蒙版,再次修改的時(shí)候只需要把圖片放入文件夾即可,可以減少重復(fù)調(diào)整蒙版等工作。

超實(shí)用的PS UI設(shè)計(jì)技巧

5、輸出盡量簡(jiǎn)單

如果項(xiàng)目有命名標(biāo)準(zhǔn)建議以標(biāo)準(zhǔn)來(lái)命名,如項(xiàng)目沒(méi)命名標(biāo)準(zhǔn)建議用簡(jiǎn)單易懂的中文命名方式命名。

超實(shí)用的PS UI設(shè)計(jì)技巧

6、安裝psd縮略圖補(bǔ)丁

安裝PSD縮略圖補(bǔ)丁,一目了然PSD文件的內(nèi)容,提高效率拒絕猜測(cè)。

超實(shí)用的PS UI設(shè)計(jì)技巧

技巧篇1、精簡(jiǎn)快捷鍵

如果你肯花一點(diǎn)點(diǎn)時(shí)間來(lái)練系這些快捷鍵,騰出你閑置的左手放到鍵盤上,相信這會(huì)讓你的工作更加快捷高效。

超實(shí)用的PS UI設(shè)計(jì)技巧

2、設(shè)置隔離圖層快捷鍵

設(shè)置隔離圖層快捷鍵,好處在于進(jìn)入了隔離圖層后不會(huì)對(duì)其他圖層進(jìn)行誤操作。

技巧:進(jìn)入隔離圖層后,按Ctrl可以進(jìn)行對(duì)畫布中的其他圖層加入此隔離圖層。

超實(shí)用的PS UI設(shè)計(jì)技巧

3、色階的解決辦法

我們做效果圖的時(shí)候經(jīng)常會(huì)使用大面積漸變,時(shí)常會(huì)出現(xiàn)比較嚴(yán)重的色階問(wèn)題,通常出現(xiàn)這些明顯色階的時(shí)候,可以通過(guò)使用高斯模糊對(duì)色階進(jìn)行模糊化處理。

超實(shí)用的PS UI設(shè)計(jì)技巧

4、文本框的好處

當(dāng)你需要處理一大段文字時(shí),文本框的好處就會(huì)體現(xiàn)出來(lái),它會(huì)永遠(yuǎn)保持你字體的寬度整齊展現(xiàn)。

超實(shí)用的PS UI設(shè)計(jì)技巧

5、對(duì)齊像素

平時(shí)畫icon的時(shí)候會(huì)常常使用到二分一、三分一或者其他比例的線條,所以一般會(huì)對(duì)網(wǎng)格對(duì)齊功能進(jìn)行關(guān)閉。而做界面的時(shí)候我們要求更加精準(zhǔn)的界面,所以通常會(huì)開啟網(wǎng)格對(duì)齊功能。

開啟與關(guān)閉網(wǎng)格對(duì)齊方法:Ctrl+K 勾選"將矢量工具與變化和像素網(wǎng)格對(duì)齊"

超實(shí)用的PS UI設(shè)計(jì)技巧

6、圖形可以合并

PS CC圖形圖層集體合并后,仍然是可編輯圖形。

技巧:合并圖層快捷鍵Ctrl+e,能把選中的圖層快速合并。

超實(shí)用的PS UI設(shè)計(jì)技巧

說(shuō)了這么多,PS CC確實(shí)是一個(gè)有助于提升UI設(shè)計(jì)效率的好軟件。當(dāng)然,以上所述僅為筆者個(gè)人經(jīng)驗(yàn)總結(jié),如有錯(cuò)漏歡迎指出,愿與大家交流!

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!