Photoshop的向量形狀格式設計UI介面

作　者：李啟宏精誠資訊恆逸教育訓練中心資深講師
技術分類：多媒體設計

對於UI(User Interface使用者介面)設計來說，不但要有好的表現效果，還要是維持向量格式的內容，方能在不同尺寸間縮放變形不失真模糊，而最能達成這樣要求的正是Photoshop中的【向量格式形狀工具】+【圖層樣式】這二大功能。

有別於以往傳統的點陣影像修圖合成，Photoshop為了方便UI設計早已逐步加入【向量格式形狀工具】這繪圖方式，在一般人看來這不就僅是陽春版的illustrator繪圖功能而已，其實他的重點是在方便整合【圖層樣式】，來製作出眾多的擬真材質與立體效果介面按鈕等。

在Photoshop CC版本開始，於形狀格式之下繪圖時，不但可以直接設定圖案的漸層填色與圖樣填色，在內容控制板上更可精準隨時更改形狀尺寸、四圓角大小、進行路徑管理員等操作，當然複雜精美的圖案設計一樣是必須到illustrator繪製設計的。

看得出這些全都是為了UI設計而準備的，其中圓角矩形的四圓角修改更是領先illustrator先有了可隨時更改的設計(illustrator CC 2014也加入修改四圓角功能)。

在形狀格式之下，完全支援向量路徑的編輯方式，這也讓Photoshop的形狀繪圖完全趕上illustrator，如此再搭配【圖層樣式】就能達成不但有效果更有向量格式的結構，絕對是UI設計的首要功能，10種圖層樣式單一來看並不難，而重點其實是在多個效果要有適當的搭配才有絕佳的效果產生。

目前無論在APPLE的IOS內，或是Android內的介面，早已幾乎全都是【向量格式形狀工具】+【圖層樣式】所完成的介面效果，當然也早已是UI設計的最必需功能。

Photoshop對您來說若還只是只有修圖合成而已的話，那您真的就落伍囉~尤其是設計師們，有興趣加入UI介面設計的話，您必須要重新再認識您所不知的Photoshop用法了，APP、網頁、系統等介面，全都需要好的UI設計來表現呢！

Share |

您可在下列課程中了解更多技巧喔！