一像素定好壞,如何處理好細節

而這些細節中還包括設計一個很重要的內容, 那就是像素。我們常說:“像素眼是每個設計師必備的基本素質。”這句話一點沒錯,每個設計師都一定要鍛鍊自己,讓自己擁有一雙能夠直接判斷設計中像素問題的眼睛。

我們看下圖,這些icon是用Ps軟件製作出來的。那麼筆者也知道有些設計師習慣於用AI來製作icon,而且相對於Ps軟件來說,AI能更加快捷的完成圖標中的描邊等內容,同時修改尺寸很方便,而在Ps軟件中製作icon一個很大的好處在於能夠擁有很精確的像素進行描繪,有利於製作出更好的設計效果。

一像素定好壞,如何處理好細節

說到圖標像素,這裡筆者先給大家說一些製作圖標的具體規範。我們可以看到筆者之前所做的icon圖標,實際上每個圖標都是有一個具體的大小規範的。

首先,在一個產品界面中,每個相同層級的圖標和背景都需要有一個相同的尺寸大小,這是icon設計的一個基礎規範。這樣不論是在什麼情況下用戶都能夠很快速地辨別出每個icon所代表的含義和內容,同時以確保每個icon擁有獨立性的同時又能夠保持統一。

其次,在一個產品界面中,所有圖標的設計方式都應該是一致的,如整體的風格、用色以及圓角裝飾等。相同的設計方式能夠保證用戶在閱讀界面信息的時候能夠很快地識別出不同的功能區域,同時也保證了設計的規範和統一。

另外,在一個產品界面中,每個按鈕的設計語言應該是相同的。說到設計語言,實則上它是一個比較複雜的概念,而且就相對於之前說的兩個內容來說,其實在是難以量化。設計語言存在於每個圖標的圖形形狀特徵、線條和圓角的運用,以及一些細節的用色當中,也可以說是對圖標風格的一個整體設計與把握,或者說是在前面幾條內容的基礎上結合之後對產品的整體做出一個判斷和規範,這樣才能做成一個規範並且完整的圖標。

因此可以說,真正好的設計並不是單純地靈感爆發或是理念的傾注,而是一些設計細節上的規範、堆砌和調整。

之前筆者也為大家講述過關於黃金螺旋的圖標製作方式,而且黃金螺旋設計方法也正是圖標製作中的設計規範內容之一。

一像素定好壞,如何處理好細節

那麼下面我們就以一個“放大鏡”圖標為例,來給大傢俱體講解一下如何運用黃金螺旋的設計方法來製作圖標。

方法一

第1步,新建一個400×400px大小的畫布,設置分辨率為72像素/英寸,設置顏色模式為RGB,8位,設置背景內容為白色,點擊【確定】,新建完畢。

一像素定好壞,如何處理好細節

第2步,新建圖層,在圖層中繪製出一個114×114px的矩形圖形,並將圖形顏色默認為灰色,然後將其做居中對齊,並以這個正方矩形為基礎增加參考線,作為圖標尺寸參考。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第3步,添加完參考線後,將矩形圖層隱藏,然後使用【圓形工具】新建一個78px的圓形,並緊貼於矩形區域範圍內的左上角參考線上。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第4步,使用【圓形工具】選中該圖層,然後按住Alt鍵,減去製作一個62px直徑的圓形,並將減去製作好的圓形填充為白色,並居中疊加在之前的灰色圓形上面,以對灰色圓形做中心切割處理,這樣就形成了一個放大鏡的鏡框。

一像素定好壞,如何處理好細節

在這裡,筆者通過對製作出來的鏡框粗細進行了估算與分析,得出鏡框的粗細為8像素。那麼這樣,我們在製作完放大鏡的鏡框之後就需要同樣以8像素的標準來製作放大鏡的手柄。同時,在同一個產品或者是同一個界面中的所有圖標製作也都需要按8像素的標準來進行。而且,也只有在這樣的標準下,在同一個界面中製作出來的圖標才會在視覺效果上看上去是統一規範的。

第5步,使用【矩形工具】繪製出一個8像素的長方形,同時旋轉45°之後移動至矩形範圍內右側,並貼緊右邊參考線和底部參考線,最後調整至合適長度為佳,製作完成。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

在這裡,筆者為大家展示的是圖標中最簡單的一種設計方式。那麼在我們的具體設計工作過程當中,無論是寫實化風格的圖標還是扁平化風格圖標,設計方法實際上都多種多樣,而且同一種寓意的圖標也會有不同的設計方式和方法。

那麼下面,我們就以上面“放大鏡”圖標為基準,再為大家介紹出另外一種製作方法。

方法二

第1步,使用【矩形工具】繪製出一個114×114 px的圓角矩形邊框,然後將圓角矩形半徑設置為20像素,並將矩形顏色默認為灰色。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第2步,打開【拾色器】,將圓角矩形顏色替換為藍色(R,24;G,133;B,234)。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第3步,新建圖層,使用【矩形工具】在圓角矩形的正中位置繪製出一個86×86px的正方形圖形,並將圖形顏色填充為白色,然後以正方形圖形邊緣為框架製作出參考線。

一像素定好壞,如何處理好細節

第4步,將正方形圖層隱藏,此時我們可以看到在圓角矩形中我們利用參考線設置了一個規範區域,而後面的圖標繪製就需要在這個區域內完成。同時,在繪製的時候同樣要注意像素的統一。

一像素定好壞,如何處理好細節

第5步,新建圖層,繪製出一個56×56 px的圓形圖形,並將圖形顏色默認為白色,然後緊貼規範區域範圍內的左上角參考線上。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第6步,還是同樣按照之前的方法,將圓形中心減去一個44px的圓形,然後在畫布上形成一個圓環。

一像素定好壞,如何處理好細節

第7步,繪製一個寬度為6px的長方形矩形圖形,並旋轉至45°,同時緊貼於規範區域內的右邊參考線上和底部參考線上,並調整其長度,作為放大鏡的手柄。

一像素定好壞,如何處理好細節

第8步,隱藏參考線,我們就得到了基本的平面化圖標。

一像素定好壞,如何處理好細節

第9步,下面我們來為這個圖標製作出一些投影效果。新建圖層,選擇【鋼筆形狀工具】繪製出一個如圖所示形狀,作為投影的基本形狀和範圍。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第10步,給之前繪製好的投影形狀填充顏色。打開【拾色器】,將顏色填充為深藍色(R,19;G,111;B,197)。

一像素定好壞,如何處理好細節

一像素定好壞,如何處理好細節

第11步,將顏色填充好後,我們再為其增添一些細節。先將圖層樣式設置為漸變,同時將漸變的角度更改為60°。

一像素定好壞,如何處理好細節

第12步,對陰影進行適當調整。對於陰影較亮的地方,可以抽取底色原色進行填補,對於陰影較暗的地方,可以使用之前填充好的顏色。

一像素定好壞,如何處理好細節

第13步,將陰影調整完後,我們就得到一個相對立體化的圖標。

一像素定好壞,如何處理好細節

縱觀一些成功的設計產品,從德國Braun到丹麥的B&O,再到Apple,無一不透露著對他們設計語言的延續性描述,對設計細節的打磨思想,對簡化設計的完美理念。對設計細節的追求,就是對產品的追求,以及對生活品質的無上追求。很多時候我們說設計師的成熟與否,實際上就是指對產品細節和整體是否有一個很好的把握。

所以筆者希望大家能夠明白,設計簡約,並不代表簡單,而是人們對於快節奏生活和概念化設計的一種更高的追求。



愛讀微課(iread360.com) | 色技手稿


分享到:


相關文章: