建立一個乾淨、簡潔的個人概要網頁介面

教程細節

軟體：Adobe Photoshop

版本（最好是）：CS5

難度：簡單

預計完成時間：1-2小時

最終效果

下載原檔案 Demo

在這個設計教程中，我們將要使用Adobe Photoshop建立一個簡潔、優雅的個人概要的網站介面，適合在手機或者ipad中瀏覽。在這個教程中，我們將要接觸到以下元素：簡單圖形（矩形、線條、箭頭等等），圖層樣式（很多）、字元、段落樣式以及許多你可以應用於你的介面設計中的設計技巧和Photoshop技巧。完整的代碼版本可以在ThemeForest上的 Stylish CV找到，是一個HTML主題。

關於作者

IvyStudio是ThemeForest上一個受歡迎的新作者，是他們建立了這個特別的主題。對網頁創意和交流充滿熱情是IvyStudio的核心。我們樂於建立有著豐富細節的簡潔、有用的主題介面。在www.ivystudio.it上你可以看到我們更多的作品，如果你想聯絡我們，隨時歡迎！

你也可以在ThemeForest上下載完整的代碼版本來查看它是如何建立的。

第一步

為了方便布局，我們將要使用到960s柵格系統（從這裡下載）。下載完成後，開啟”960_grid_12_col.psd”檔案。

這個檔案的高度小於我們最終的設計。因此，我們選擇映像》畫布大小》高度：1558像素。

我們傾向於去除”粉色條紋”，如果你想隱藏它，在圖層面板中將圖層可視化關閉。

我們還需要開啟尺規和輔助線。因此我們將視圖》顯示額外內容/尺規/對齊勾選上（這樣元素就便於和我們的輔助線對齊了）。

第二步

我們現在來建立背景。在圖層面板中，右鍵點擊背景圖層，選擇背景圖層，重新命名為”bg”。

分類：

• PS入門教程