現(xiàn)在的手機(jī)有不同的型號(hào),同時(shí)也有不同的屏幕分辨率。比方上圖中不同分辨率的手機(jī)需要不同大小的圖標(biāo)設(shè)計(jì),所以就需要切圖。把同一個(gè)圖標(biāo)為了能在不同型號(hào)的手機(jī)上清晰的顯示出來(lái),就需要切成不同尺寸和分辨率的圖標(biāo),這個(gè)就是切圖的原因。
一:什么是切圖?
切圖就是把一張大界面里小元素單獨(dú)保存成小圖的過(guò)程。
這張大界面需要?jiǎng)觿?dòng)刀
把圖標(biāo)切成不同尺寸單獨(dú)保存
單純靠代碼實(shí)現(xiàn)不了
UI設(shè)計(jì)師的產(chǎn)出物只是普通的圖片或者是PSD,是用于觀看預(yù)覽的演示稿設(shè)計(jì)稿,真正的APP應(yīng)用還必須通過(guò)代碼的編寫,數(shù)據(jù)的儲(chǔ)存和系統(tǒng)的配合才能完成,所以界面的元素都需要通過(guò)代碼寫入實(shí)現(xiàn)。
但是有些內(nèi)容是代碼也實(shí)現(xiàn)不了的,例如設(shè)計(jì)師設(shè)計(jì)的圖標(biāo),背景圖片等等,這些就需要通過(guò)圖片的方式存在,所以設(shè)計(jì)師要把這些內(nèi)容切成一張張的小圖,給到程序進(jìn)行代碼的制作。
(代碼實(shí)現(xiàn)不了的圖標(biāo))
需要適配不同的屏幕
目前手機(jī)市場(chǎng)設(shè)備種類繁多,即使是iPhone也有3種不同的屏幕分辨率,這就要求了同樣的界面元素需要有不同的尺寸。
第三:如何切圖?
一種是利用PS自身的切圖功能,“導(dǎo)出為”(這個(gè)功能只有更新到PS最新版本才有)在想要切出來(lái)的圖層或者圖層組上,選中并右鍵,會(huì)有一個(gè)導(dǎo)出為,點(diǎn)擊導(dǎo)出為就可以看到下面的界面。
第二種利用PS插件cutterman,直接安裝在PS里面,然后在窗口-拓展功能里面可以找到,界面如下:
按上面的參數(shù)可知,直接可以切除安卓、蘋果和pc端的尺寸,下面可以設(shè)置畫布大小,選擇需要的分辨率,然后在導(dǎo)出之前需要先選擇導(dǎo)出的位置,之后直接單擊導(dǎo)出選中圖層按設(shè)置鍵,按照自己設(shè)計(jì)出來(lái)的界面尺寸,填寫參數(shù)即可。
第四:切圖的技巧
切圖的時(shí)候并不是直接把小圖保存就可以了,其中還有些小技巧,能夠幫助程序猿更方便地進(jìn)行頁(yè)面編寫:
1.相同位置相同功能的圖標(biāo)尺寸應(yīng)該保持一致
2.保證圖標(biāo)的可點(diǎn)擊區(qū)域大小
第五:如何標(biāo)注?
標(biāo)注也有相應(yīng)的方法,最傻瓜的就是在元素旁邊寫上需要標(biāo)注的信息,但是這種方法又慢又麻煩,頁(yè)面多起來(lái)還會(huì)讓設(shè)計(jì)師崩潰,所以我們又要用插件了:
標(biāo)注軟件——markman
步驟:
打開馬克鰻,會(huì)要求我們先拖進(jìn)一張圖片,如下圖:
拖進(jìn)一張圖,我們即可看到下面圖中紅色框的小圖標(biāo),再進(jìn)行操作。
選擇標(biāo)圖工具,比如一個(gè)長(zhǎng)度標(biāo)記,找到想要標(biāo)出的位置,然后按住鼠標(biāo)并拖動(dòng)到自己想要的位置,就能得到想要的間距了,選擇顏色標(biāo)記工具,在想標(biāo)記的位置直接單擊,就會(huì)出現(xiàn)顏色值,還有一些不能標(biāo)出的,可以用說(shuō)明工具去單擊,然后直接手動(dòng)輸入即可。
利用標(biāo)注插件——Assistor PS
新聞標(biāo)題:為什么說(shuō)UI設(shè)計(jì)師有一把手術(shù)刀?
URL鏈接:http://jinyejixie.com/news40/189890.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、面包屑導(dǎo)航、用戶體驗(yàn)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷、做網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)