欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂UI設(shè)計(jì)培訓(xùn)有關(guān)APP切圖技巧

2018-02-02 11:46:25 1288瀏覽

　　在這個(gè)移動端爆火的時(shí)代，切圖也是做移動端設(shè)計(jì)必不可少的工作，對于新手同學(xué)可能會比較困擾不知道怎樣去切或者切圖有什么規(guī)范，其實(shí)我剛接觸UI的時(shí)候?qū)τ谇袌D和標(biāo)注也是懵懵懂懂一知半解的狀態(tài)切圖其實(shí)和標(biāo)注一樣，沒什么特別固定的規(guī)范，工程師的開發(fā)水平不同，要求的切圖也不同所以切圖之前務(wù)必要和你的工程師搭檔溝通一下，該如何去切才能配合他的開發(fā)，下面我們就來了解一下切圖。

第一個(gè)問題什么是切圖?

切圖是指將設(shè)計(jì)稿切成便于制作成頁面的圖片，并完成html+css布局的靜態(tài)頁面。對于切圖現(xiàn)在有兩種看法，一種認(rèn)為就是把ps做出來的效果圖用切片工具切出來，做成前端可以直接使用的素材，另一種認(rèn)為把一張?jiān)O(shè)計(jì)圖利用到切片工具把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁面書寫，完成CSS布局。因?yàn)樽龅氖且苿佣说脑O(shè)計(jì)，目前個(gè)人涉及到的還是第一種，直接把切圖文件給開發(fā)人員。

第二個(gè)問題為什么要切圖?

簡單來說我們做設(shè)計(jì)稿時(shí)有一些元素，開發(fā)人員是很難實(shí)現(xiàn)或者做不出來的，這時(shí)候就需要設(shè)計(jì)人員把這些元素以圖片的格式給開發(fā)人員方便他們的開發(fā)。

第三個(gè)問題什么元素需要切圖?

在我們的設(shè)計(jì)稿中有一些元素是需要切的有一些元素是開發(fā)可以做出來不需要切的，我們需要弄清我們需要切什么元素。當(dāng)然現(xiàn)在也有設(shè)計(jì)師是整張界面都切給開發(fā)，這樣是比較方便快捷的，但我的工作方式還是只切一些需要的元素。比如icon、按鈕、啟動頁面等，這些都是需要切出來的。

第四個(gè)就是關(guān)于切圖的工具?

這個(gè)要根據(jù)情況，本人做UI使用的是sketch，切圖基本上不用插件。


選中界面下面可以調(diào)幾x和圖片格式，比較方便。

現(xiàn)在大部分設(shè)計(jì)師應(yīng)該用photoshop，如果在用ps的話個(gè)人推薦cutterman，個(gè)人覺得比較好用。


支持ios和安卓點(diǎn)九、web的切圖，感興趣的可以去cutterman的官網(wǎng)下載，注冊個(gè)賬號就可以用了。

第五個(gè)問題就是切圖的倍數(shù)關(guān)系?

你所有的設(shè)計(jì)尺寸，應(yīng)該盡量使用偶數(shù)，為了保證最佳的設(shè)計(jì)效果，避免出現(xiàn)虛邊。開發(fā)人員使用的尺寸是設(shè)計(jì)稿像素尺寸的一半，也就是說，如果你按照六的尺寸750px×1334px做的效果圖，技術(shù)開發(fā)那邊就是375px×667px。

xxx.png適配3GS(非Retina屏幕)

xxx@2x.png適配iPhone4、4s、5、5s、6(Retina屏幕)

xxx@3x.png適配6plus

安卓切圖素材轉(zhuǎn)換：

如果以640×960來設(shè)計(jì)界面，iOS的切圖的75%，就是安卓的HDPI模式下的切圖，還有其他DPI模式下的切圖：

MDPI1x

HDPI1.5x

XHDPI2x

XXHDPI3x

因?yàn)閄HDPI的75%=HDPI，所以XHDPI模式下素材尺寸和ios@2x下是一樣的，所以ios的切圖可以直接適用到安卓的XHDPI模式。

第六個(gè)問題命名規(guī)范?

這個(gè)可以在切圖之前先跟開發(fā)人員溝通一下看看他們有沒有什么要求，不同的公司不同的開發(fā)有不同的命名規(guī)范和命名習(xí)慣，如果沒有那就可以按照比較標(biāo)準(zhǔn)的來切

模塊_類別_功能_狀態(tài).png

例：btn_sure_nor.png

簡便一些的例：xxx@2x.png

建議做設(shè)計(jì)的時(shí)候要跟開發(fā)多溝通，切圖之前要問清楚要求，提高工作效率。

ps：其實(shí)本人用photoshop做UI的時(shí)候又找到了另一種方法，就像這樣直接選中圖層，快速導(dǎo)出為PNG

導(dǎo)出的圖片就是這樣的，貌似大小什么的也OK，但是現(xiàn)在還不清楚它跟正常切出來的圖片有什么區(qū)別，這樣切圖沒法選擇是png8還是png24，所以還是正規(guī)的切圖吧。

最后想要工作不累就要不斷的提升自己的技能，請關(guān)注扣丁學(xué)堂UI培訓(xùn)官網(wǎng)、微信等平臺，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺為您提供權(quán)威的UI視頻教程系統(tǒng)，通過千鋒扣丁學(xué)堂金牌講師在線錄制UI在線視頻教程，讓你快速掌握UI從入門到精通UI設(shè)計(jì)實(shí)戰(zhàn)技能。扣丁學(xué)堂UI交互設(shè)計(jì)交流群：568096113。

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】

查看更多關(guān)于“ui設(shè)計(jì)資訊”的相關(guān)文章>>