切圖教程,關(guān)于APP切圖和標(biāo)注
切圖是一件比較單調(diào)枯燥的工作,但又需要比較強(qiáng)的耐心和細(xì)心,用戶手中看到的產(chǎn)品界面,并非設(shè)計(jì)師的最終效果圖,而是一個個單獨(dú)的切圖經(jīng)由開發(fā)技術(shù)實(shí)現(xiàn)。切圖作為設(shè)計(jì)師與開發(fā)者之間的橋梁,它的作用很關(guān)鍵,合適的切圖、精準(zhǔn)的位置可以最大限度的還原效果圖的設(shè)計(jì),精妙的切圖更會有事半功倍的效果。這個切圖教程開始是寫給我們實(shí)習(xí)的小美女的,但她現(xiàn)在又上學(xué)了,切圖就分擔(dān)成每個設(shè)計(jì)師的必備工作,切圖技巧也因人而異,需要各位親自己去發(fā)現(xiàn)總結(jié)適合自己的技巧。這里給大家介紹我自己的切圖和標(biāo)注小技巧,可以更快,更好的方便工作。
工具軟件PS大神
相對于設(shè)計(jì)和繪畫,切圖用到的ps并不多,摸索個幾分鐘基本也就了解大概。說到這個,產(chǎn)品組的幾個小美女應(yīng)該很興奮,哈哈!
先簡單的介紹幾個PS經(jīng)常使用的快捷鍵:
切片工具:點(diǎn)擊C進(jìn)入切片模式
自由的瀏覽圖片:按住空格后,鼠標(biāo)拖動
自由的縮放圖片:按住alt+滾輪
通過畫面上點(diǎn)選一個圖層:Alt + 鼠標(biāo)右鍵
在畫面上拖動一個圖層:V 切換到移動模式 鼠標(biāo)拖動
畫一個選區(qū):點(diǎn)擊M進(jìn)入選區(qū)模式 , 鼠標(biāo)拖畫
放棄選區(qū):Ctrl+D
吸管工具:點(diǎn)擊I進(jìn)入吸管模式,點(diǎn)選畫面顏色
感興趣的小伙伴可以推薦這個網(wǎng)址去看比較全的快捷鍵:http://m.tgudhdp.cn/tags/28218/
功能頁面歸類
如果是一個新項(xiàng)目,按功能模塊切圖會更好服務(wù)開發(fā),現(xiàn)在開發(fā)都是迭代式展開,這樣會讓開發(fā)工作更有效率,更有目的性。
但如果是單個頁面的切圖,就不需要考慮這么多,注意一些現(xiàn)有的設(shè)計(jì)規(guī)范就可以。
保存生成圖片格式
按PS快捷鍵 CTRL+ALT+'顯示網(wǎng)格,這樣的切圖會比較精確點(diǎn),把頁面需要的圖標(biāo)切好生成圖片,圖片格式可以保存為JPG和PNG, 色彩眾多的圖片jpg優(yōu)先,色彩簡單,需求透明的png優(yōu)先。切片在儲存的時候,可以點(diǎn)選每個切片對其設(shè)定不同的圖片格式,保存的時候可以選擇保存選擇的切片而不是全部。
有時候我們切好的圖片尺寸還是很大,就需要二次加工,這里給大家提供幾個壓縮圖片尺寸的好工具:
http://www.atool.org/pngcompression.php
http://www.secaibi.com/tools/
注意事項(xiàng):千萬不要對jpg進(jìn)行二次處理:jpg就算質(zhì)量100%也是有損格式,保存的時候盡量為PNG,用上兩個工具都可以進(jìn)行二次處理哦!
點(diǎn)九圖片的使用(安卓需要使用,IOS不需要)
“點(diǎn)九”是Android平臺處理圖片的一種特殊的形式,由于文件的擴(kuò)展名為:“.9.png”,所以被稱為“點(diǎn)九”。它可以將圖片橫向和縱向隨意進(jìn)行拉伸,而保留像素精細(xì)度、漸變質(zhì)感和圓角的原大小,實(shí)現(xiàn)多分辨率下的完美顯示效果,同時減少不必要的圖片資源。
學(xué)習(xí) · 提示
相關(guān)教程
- 圖層教程,PS中的圖層創(chuàng)建和編輯
- 智能對象,用PS中的智能對象對照片進(jìn)行后期處理
- 工具知識,詳細(xì)解析漸變映射給照片帶來的改變
- 照片調(diào)色,利用好白平衡把照片變的更加自然
- 直方圖,通過實(shí)例解析PS中的直方圖的運(yùn)用
- 工具運(yùn)用,通過實(shí)例來學(xué)習(xí)一下加深減淡工具的應(yīng)用
- 圖層蒙版,通過實(shí)例來解析PS蒙版的使用
- 工具運(yùn)用,通過實(shí)例解析曝光工具在照片中的運(yùn)用
- 圖層知識,PS的中的調(diào)整層到底如何使用
- 工具運(yùn)用,通過PS詳細(xì)解析曲線和色階在照片處理中的不同之處