切圖教程,關于APP切圖和標注

2023-12-16 17:14:20 來源/作者: / 己有:0人學習過

切圖是一件比較單調枯燥的工作,但又需要比較強的耐心和細心,用戶手中看到的產品界面,并非設計師的最終效果圖,而是一個個單獨的切圖經由開發(fā)技術實現。切圖作為設計師與開發(fā)者之間的橋梁,它的作用很關鍵,合適的切圖、精準的位置可以最大限度的還原效果圖的設計,精妙的切圖更會有事半功倍的效果。這個切圖教程開始是寫給我們實習的小美女的,但她現在又上學了,切圖就分擔成每個設計師的必備工作,切圖技巧也因人而異,需要各位親自己去發(fā)現總結適合自己的技巧。這里給大家介紹我自己的切圖和標注小技巧,可以更快,更好的方便工作。

工具軟件PS大神

相對于設計和繪畫,切圖用到的ps并不多,摸索個幾分鐘基本也就了解大概。說到這個,產品組的幾個小美女應該很興奮,哈哈!

先簡單的介紹幾個PS經常使用的快捷鍵:

切片工具:點擊C進入切片模式

自由的瀏覽圖片:按住空格后,鼠標拖動

自由的縮放圖片:按住alt+滾輪

通過畫面上點選一個圖層:Alt + 鼠標右鍵

在畫面上拖動一個圖層:V 切換到移動模式 鼠標拖動

畫一個選區(qū):點擊M進入選區(qū)模式 , 鼠標拖畫

放棄選區(qū):Ctrl+D

吸管工具:點擊I進入吸管模式,點選畫面顏色

感興趣的小伙伴可以推薦這個網址去看比較全的快捷鍵:http:///tags/28218/

 

功能頁面歸類

如果是一個新項目,按功能模塊切圖會更好服務開發(fā),現在開發(fā)都是迭代式展開,這樣會讓開發(fā)工作更有效率,更有目的性。

但如果是單個頁面的切圖,就不需要考慮這么多,注意一些現有的設計規(guī)范就可以。

切圖教程,關于APP切圖和標注

保存生成圖片格式

按PS快捷鍵 CTRL+ALT+'顯示網格,這樣的切圖會比較精確點,把頁面需要的圖標切好生成圖片,圖片格式可以保存為JPG和PNG, 色彩眾多的圖片jpg優(yōu)先,色彩簡單,需求透明的png優(yōu)先。切片在儲存的時候,可以點選每個切片對其設定不同的圖片格式,保存的時候可以選擇保存選擇的切片而不是全部。

切圖教程,關于APP切圖和標注

切圖教程,關于APP切圖和標注

 

有時候我們切好的圖片尺寸還是很大,就需要二次加工,這里給大家提供幾個壓縮圖片尺寸的好工具:

https://img.lvups.com/d/file/bigpic/2022/12/26/fmdmpm34wv1

切圖教程,關于APP切圖和標注

http://www.secaibi.com/tools/

切圖教程,關于APP切圖和標注

注意事項:千萬不要對jpg進行二次處理:jpg就算質量100%也是有損格式,保存的時候盡量為PNG,用上兩個工具都可以進行二次處理哦!

 

點九圖片的使用(安卓需要使用,IOS不需要)

“點九”是Android平臺處理圖片的一種特殊的形式,由于文件的擴展名為:“.9.png”,所以被稱為“點九”。它可以將圖片橫向和縱向隨意進行拉伸,而保留像素精細度、漸變質感和圓角的原大小,實現多分辨率下的完美顯示效果,同時減少不必要的圖片資源。

切圖教程,關于APP切圖和標注切圖教程,關于APP切圖和標注