您的位置:首頁>設計>正文

不會切圖、不會技術的美工要如何快速學好切圖

美工一般是指對平面, 色彩 , 基調, 創意等進行堆砌的技術人才, 分為平面美工、網頁美工和三維美工。 一般需要精通Photoshop等設計軟體。

那麼平面美工是由美工用Illustrator 或者 Photoshop 設計出平面外觀。 三維美工是由美工用3DMAX等的三維角色模型設計, 道具模型設計, 環境場景模型設計,包裝設計等。 而網頁美工是使用Photoshop或Fireworks等設計軟體, 將網頁的視覺效果、排版等工作呈現出來。 有人認為美工精通CSS/HTML/JAVASCRIPT等語言來做網頁佈局, 其實這是不正確的, 網頁佈局的工作應該是由前端開發工程師來完成的。 所以對於初學者來說, 什麼都不會的情況下,

先來跟著我們學切圖吧。

我們經常看到的一些網頁, 並非只是單單由於設計師的功勞, 一般設計師出來的的設計稿還要經過單獨的切圖經由開發同學技術實現, 切圖作為設計師與開發者之間的橋樑, 它的作用很關鍵, 合適的切圖與精准的位置可以在最 大限度的還原效果圖的設計,

精妙的切圖更會有事半功倍的效果!但做為設計師也要多少瞭解這些, 這樣在與技術的交流中會有所幫助。

我們經常會做一個俗稱“點九”的切圖, 那什麼是“點九”呢?“點九”就是Android平臺處理圖片的一種特殊的形式, 這是由於檔的副檔名為:“.9.png”, 所以被稱為“點九”。 “點九”也是由於Android平臺多種解析度需適配的需求下, 發展出來的一種獨特的技術。 它可以將圖片橫向和縱向隨意進行拉伸, 而保留圖元精細度、漸變質感和圓角的原大小, 實現多解析度下的完美顯示效果, 同時減少不必要的圖片資源, 可謂切圖利器。

“點九”的製作工具為“draw9patch”, 具體製作步驟這裡不多講了, 插播小貼士第 一條:捨棄這個製作工具吧,

減少繁瑣的步驟, 不要再每張圖片都拖到工具裡畫啦!直接用ps+鉛筆就可以畫哦。

“點九”的知識面也是要非常廣的, 但Android切圖不僅需要清楚“點九”的方法, 還需要有其他各種小技巧。 下面為大家分享我在工作中總結的幾個關於切圖的心得。

(一)站在開發的角度來切圖

在這之前呢, 需要瞭解一些關於技術實現的方式, 就好比瞭解一位開發同學, 如此更多的瞭解, 會讓工作更加順暢。

如為下圖按鈕做“點九”圖, 一部分同學可能會這樣做:

這是一張高度不變左右拉伸的“點九”圖片, 內容顯示區域為整個按鈕範圍。 按鈕效果圖上看, 文字是垂直居中顯示的, 開發同學拿到這張“點九”圖片, 就會在代碼裡寫上center的屬性,

此屬性就是設定讓文字在按鈕的垂直居中位置。 到這, 有沒察覺出存在什麼問題呢?那麼先讓我們看看實現出來的效果。

擁有圖元眼一樣的設計師們, 立刻會察覺文字偏下了。 然後找開發同學調整文字的位置, “把文字向上n個圖元吧, 沒有居中”等等, 這是很經常發生的對話, 開發同學會增加代碼微調文字的位置以達到效果圖效果。 事情圓滿解決了嗎?想多了, 很多事情並非都是理所當然, 當你發現時, 你已經錯了。

當我們瞭解開發同學實現方法後, 我們可以試試用逆推法驗證這張“點九”圖片是否還有進一步精確的可能。

如上圖, 設計效果圖中紅色區域是文字排版區域, 是理想化的位置, 1和2的高度是相等的;而實現效果圖中3和4的高度是相等的。

問題出現了!在我們畫點九的時候, 把投影的高度也畫進去了, 所以視覺上文字就偏下了。

我們通常的畫法應該是:

1. 在高度不拉伸的情況下, 在空白區域點一圖元的點。

這是與開發同學之間約定俗成的習慣, 憑著默契就知道此按鈕高度不進行拉伸, 而且就是被拉伸了, 拉伸的是空白區域, 視覺上也不會造成影響。

對比如圖所示:

2. 內容顯示區域的高度要避開投影區域, 這樣可以保 證文字視覺的居中。

“點九”圖片的內容顯示區域, 我喜歡稱為內容排版區域。 在切圖的過程中, 還會發現不同的情景, 要時刻想著你要的結果, 通過對此區域的仔細處理, 可以更好的為圖片上所承載的內容做排版。 這樣開發同學只要通過一些簡單的屬性設定,就可以實現效果圖上精確的佈局。這樣同時可以減少一些不必要的開發,精簡代碼,提高產品的性能,積少成多,帶給用戶更好的體驗感受。

(二)選擇更優的切圖方式

當我們遇到異形或較為複雜的切圖時,往往需要拋開固有的思維程式,去尋找一些更適合的切圖方式。例如為下圖浮層切圖的時候,我們還可以用我們的“點九”神器麼?

首先分析一下此浮層的幾個特點:一是半透明漸變有厚度又有投影的效果;二是有三角異形,而且位置不固定。在切圖的時候先走了一下小彎路,用固有思維把浮層分成了上下兩個部分,下面方形做成“點九”,上面三角形單獨一個切圖,用拼接的方式去實現。這是符合開發同學的原子拆分設計模式的,把會變化的部分取出並封裝起來,讓其他部分不受到影響。所以開發同學很快做好了實現,但效果卻不盡人意。其實我們可以預想得到,因為有投影效果上下拼接一定有重疊,這樣拼接處就會有一條明顯的線。

那該如何是好呢?經過設計師的進一步思考,終於找到了一種更適合的切圖方式:

左右分割成兩個“點九”圖片,這樣即能保 證連接處的效果,又能靈活三角指向的位置。思考好如何切圖的同時也要跟技術同學溝通能否實現,衡量實現的成本。最 後值得高興的是,實現出來的效果­跟設計效果圖沒有任何出入。

(三)盡可能的減小資源的大小

切圖的時候盡可能減小資源的大小,為產品安裝包瘦身。

1.“點九”圖片拉伸1個圖元與拉伸10個圖元效果上是沒有區別的,所以儘量縮小圖片的尺寸。

(在上面的例子當中,為了保持看得清楚,沒有縮小到最小情況,在實際工作中可以稍加注意。)

2.當我們遇到有紋理的背景或有紋理的按鈕時,切圖原則為:找到紋理的規律,用最小的切圖去平鋪,可以想像中圖案疊加的原理。

第 一種紋理背景,如輸入法多媒體中隨寫輸入的介面,不同的信紙,我們就用了盡可能最小的切圖去平鋪而實現的。如下圖:

這是我們輸入法中信紙的切圖,遵循用最 小切圖的原則,按照不同紋理的規律調整到最 小的切圖,所以可以看出不同紋理的切圖尺寸是不一樣的。

第二種有紋理的按鈕,我們一般會這樣處理:

我們的目標是把按鈕分成三段,保留左右圓角部分,找到中間紋理可複用平鋪的部分,同事確保中間紋理可以與左右兩張圖無縫連接,這樣按鈕的長度就變成可控的了,可以適用於不同的場景。

首先找到紋理的規律,這裡的斜線紋理只需切寬為3px的圖即可;然後用紋理圖片去嘗試左右圓角部分,連接到圓角部分的紋理就成功咯。遇到其他類型紋理切圖時,思路是可以複用的。

3.適當壓縮圖片品質,在單色或沒有過多效果時可存儲為png8位元或索引模式。

設計師在提供設計規範後愁苦實現效果不盡如人意的同時,或許可以盡可能的利用一些切圖手段,這樣能幫助你的設計達到零差別的呈現,同時也幫助那些開發同學減少了很多不必要的開發負擔,而對於產品本身也有提高運行速度等很多不言而喻的好處。如此,讓設計師同學與我們親愛的開發同學可以成為更貼心更默契的合作夥伴了!

對於想學習相關課程的朋友來說,可以到厚學網結合自身實際情況找一家專業的培訓機構來進行系統有效的學習,目前厚學網共計入駐了多家國學領域的知名培訓機構,這裡可以讓讓客戶瞭解全新全面的課程資訊及真實的使用者評價,讓客戶能夠更放心,省心的選擇到想學的課程。

這樣開發同學只要通過一些簡單的屬性設定,就可以實現效果圖上精確的佈局。這樣同時可以減少一些不必要的開發,精簡代碼,提高產品的性能,積少成多,帶給用戶更好的體驗感受。

(二)選擇更優的切圖方式

當我們遇到異形或較為複雜的切圖時,往往需要拋開固有的思維程式,去尋找一些更適合的切圖方式。例如為下圖浮層切圖的時候,我們還可以用我們的“點九”神器麼?

首先分析一下此浮層的幾個特點:一是半透明漸變有厚度又有投影的效果;二是有三角異形,而且位置不固定。在切圖的時候先走了一下小彎路,用固有思維把浮層分成了上下兩個部分,下面方形做成“點九”,上面三角形單獨一個切圖,用拼接的方式去實現。這是符合開發同學的原子拆分設計模式的,把會變化的部分取出並封裝起來,讓其他部分不受到影響。所以開發同學很快做好了實現,但效果卻不盡人意。其實我們可以預想得到,因為有投影效果上下拼接一定有重疊,這樣拼接處就會有一條明顯的線。

那該如何是好呢?經過設計師的進一步思考,終於找到了一種更適合的切圖方式:

左右分割成兩個“點九”圖片,這樣即能保 證連接處的效果,又能靈活三角指向的位置。思考好如何切圖的同時也要跟技術同學溝通能否實現,衡量實現的成本。最 後值得高興的是,實現出來的效果­跟設計效果圖沒有任何出入。

(三)盡可能的減小資源的大小

切圖的時候盡可能減小資源的大小,為產品安裝包瘦身。

1.“點九”圖片拉伸1個圖元與拉伸10個圖元效果上是沒有區別的,所以儘量縮小圖片的尺寸。

(在上面的例子當中,為了保持看得清楚,沒有縮小到最小情況,在實際工作中可以稍加注意。)

2.當我們遇到有紋理的背景或有紋理的按鈕時,切圖原則為:找到紋理的規律,用最小的切圖去平鋪,可以想像中圖案疊加的原理。

第 一種紋理背景,如輸入法多媒體中隨寫輸入的介面,不同的信紙,我們就用了盡可能最小的切圖去平鋪而實現的。如下圖:

這是我們輸入法中信紙的切圖,遵循用最 小切圖的原則,按照不同紋理的規律調整到最 小的切圖,所以可以看出不同紋理的切圖尺寸是不一樣的。

第二種有紋理的按鈕,我們一般會這樣處理:

我們的目標是把按鈕分成三段,保留左右圓角部分,找到中間紋理可複用平鋪的部分,同事確保中間紋理可以與左右兩張圖無縫連接,這樣按鈕的長度就變成可控的了,可以適用於不同的場景。

首先找到紋理的規律,這裡的斜線紋理只需切寬為3px的圖即可;然後用紋理圖片去嘗試左右圓角部分,連接到圓角部分的紋理就成功咯。遇到其他類型紋理切圖時,思路是可以複用的。

3.適當壓縮圖片品質,在單色或沒有過多效果時可存儲為png8位元或索引模式。

設計師在提供設計規範後愁苦實現效果不盡如人意的同時,或許可以盡可能的利用一些切圖手段,這樣能幫助你的設計達到零差別的呈現,同時也幫助那些開發同學減少了很多不必要的開發負擔,而對於產品本身也有提高運行速度等很多不言而喻的好處。如此,讓設計師同學與我們親愛的開發同學可以成為更貼心更默契的合作夥伴了!

對於想學習相關課程的朋友來說,可以到厚學網結合自身實際情況找一家專業的培訓機構來進行系統有效的學習,目前厚學網共計入駐了多家國學領域的知名培訓機構,這裡可以讓讓客戶瞭解全新全面的課程資訊及真實的使用者評價,讓客戶能夠更放心,省心的選擇到想學的課程。

Next Article
喜欢就按个赞吧!!!
点击关闭提示