Photoshop中改進(jìn)iOS設(shè)計(jì)流程的30個(gè)訣竅

2013-12-13 09:58:03來(lái)源:飛鳥(niǎo)分享作者:

在本文中我(英文原作者)總結(jié)了在photoshop中設(shè)計(jì)ios軟件時(shí)所遵守的方法。許多的技巧適用于一般的UI設(shè)計(jì)。注意:文中所提到的快捷鍵針對(duì)于Windows;Mac 用戶可,Cmd對(duì)應(yīng)Crtl鍵,Opt對(duì)應(yīng)Alt鍵。

19.努力做到非破壞的編輯

通過(guò)使用智能對(duì)象和調(diào)整圖層來(lái)做到一個(gè)非破壞性的工作流程。當(dāng)你發(fā)發(fā)現(xiàn)自己需要重復(fù)編輯同樣?xùn)|西的時(shí)候這會(huì)幫你減少很多痛苦。

20.在對(duì)文件作重大改變之前備份文件

當(dāng)你發(fā)現(xiàn)保存了自己不想要的變化,或者在撤銷更改之前意外地關(guān)閉了文件(譯者注:這樣會(huì)導(dǎo)致丟失歷史記錄),備份文件會(huì)大大減少你的痛苦。

21.使用快捷鍵給形狀圖層和文本填色

你可能知道使用Alt/Ctrl + Delete 給圖層或者選區(qū)填充前景色/背景色。它同樣適用于形狀圖層和文本。

22.Photoshop的怪異之處——投影和內(nèi)陰影尺寸

還記得訣竅1中關(guān)于保證尺寸和圖層效果為偶數(shù)像素嗎?你或許在對(duì)所有的都設(shè)置了偶數(shù)之后,仍然迷惑于為什么按鈕的高度仍然是奇數(shù)。罪魁禍?zhǔn)妆闶?Photoshop的怪異之處,投影增加了尺寸。投影的大。╯ize)值設(shè)置為1px或者2px,投影將會(huì)產(chǎn)生同樣的尺寸,如下圖所示。

\

\

23.使用智能參考線來(lái)進(jìn)行更為完美的對(duì)齊

來(lái)讓Photoshop對(duì)你的元素進(jìn)行智能對(duì)齊。在視圖(View)〉顯示(Show)〉智能參考線(Smart Guides)處打開(kāi)。一旦你使用過(guò)智能參考線,你會(huì)再也離不開(kāi)它了。

\

24.使用圖層復(fù)合在同一文件中展示不同的顯示屏

你是將app的所有屏幕都創(chuàng)建在一個(gè)PSD中然后對(duì)圖層可視進(jìn)行打開(kāi)和關(guān)閉來(lái)查看?此時(shí)圖層復(fù)合(Layer Comps)就可幫助解決這個(gè)問(wèn)題。勾選窗口(Window)〉圖層復(fù)合(Layer Comps)即可打開(kāi)圖層復(fù)合面板。在你新建app屏幕的時(shí)候你可以通過(guò)單擊面板底部創(chuàng)建新的圖層復(fù)合按鈕來(lái)創(chuàng)建一個(gè)新的圖層復(fù)合。這個(gè)圖層復(fù)合面板包含了所有圖層的可見(jiàn)性和位置作為一個(gè)屏幕(譯者注:可以理解為一個(gè)快照),F(xiàn)在你便可以在同樣的圖層上更改其可見(jiàn)性和位置來(lái)作為下一個(gè)屏幕并把它保存為另一個(gè)圖層復(fù)合。

通過(guò)使用同樣的工具去創(chuàng)建不同的屏幕,這樣就保證了文件數(shù)量和大小達(dá)到了最小。并且,你和開(kāi)發(fā)人員可以簡(jiǎn)單的通過(guò)單擊圖層復(fù)合名稱前面的小盒子或者點(diǎn)擊面板底部的往前/往后箭頭來(lái)循環(huán)切換圖層復(fù)合來(lái)展示不同的屏幕。

\

25.在設(shè)備上預(yù)覽你的設(shè)計(jì)

你的設(shè)計(jì)桌面設(shè)備上看起來(lái)很好,但是當(dāng)你放到真正的設(shè)備上或許會(huì)暴漏問(wèn)題,因此,保證經(jīng)常的在顯示器上預(yù)覽你的設(shè)計(jì)。對(duì)Mac來(lái)說(shuō)有像LiveView、Scala Preview等工具,對(duì)Windows來(lái)則有WiFileSyncPhotoshop Display。我使用免費(fèi)的Polkast,它允許你在IOS設(shè)備上通過(guò)wifi預(yù)覽你桌面設(shè)備上的文件。

26.保持icon設(shè)計(jì)的一致性

在icon的選用上要保證其大小和風(fēng)格一致。可以閱讀Why consistency is important這篇文章。

\

27.給客戶發(fā)送全尺寸的預(yù)覽圖

客戶許愿在他們的設(shè)備上常看設(shè)計(jì)。因此,可以考慮給他們一個(gè)全尺寸的PNG設(shè)計(jì)組合。

28.避免過(guò)于像素完美的線框圖

不要在線框圖軟件上浪費(fèi)時(shí)間去創(chuàng)建一個(gè)漂亮的線框圖。我發(fā)現(xiàn)客戶一旦理解這會(huì)節(jié)省時(shí)間他們便更傾向于審查草圖而不是漂亮的線框圖。向客戶解釋為什么減少線框圖會(huì)節(jié)省項(xiàng)目的整體時(shí)間,他們一旦同意便發(fā)給他們草圖的照片。同時(shí)別忘了讓草圖盡量易讀。

29.首先設(shè)計(jì)Retina屏然后再縮小到標(biāo)準(zhǔn)尺寸

是從1x(譯者注:指設(shè)備像素比)放大到2x的順序還是2x縮小到1x現(xiàn)在仍有爭(zhēng)論。1x大小尺寸的手機(jī)將會(huì)在未來(lái)幾年逐漸淘汰并且將來(lái)只會(huì)剩下Retina屏的。因此最好是從Retina屏來(lái)開(kāi)始設(shè)計(jì),同時(shí)你可以早早的便在你的設(shè)計(jì)中添加針對(duì)Retina屏的特殊細(xì)節(jié)。

30.創(chuàng)建一個(gè)icon庫(kù)

任何時(shí)候你針對(duì)工具欄或者標(biāo)簽欄創(chuàng)建了矢量的icon,保存一份icon(保存完好無(wú)損的尺寸以便于編輯)到單獨(dú)的PSD文件中,這樣,你便不必下次再使用這些icon時(shí)到處尋找了,這樣也就形成了我ikonic項(xiàng)目的基礎(chǔ)。

31.使用一個(gè)批量重命名的軟件

使用批量重命名軟件來(lái)給文件增加或者移除@2x。我使用免費(fèi)的Bulk Rename Utility。

原文:http://radesign.in/30-tips-to-improve-your-ios-design-workflow-in-photoshop/

譯文 :http://share.9ikblog.com/archives/30-tips-to-improve-your-ios-design-workflow-in-photoshop.html
 

關(guān)鍵詞:iOSPhotoshopps