在
本教程中，尚略上海網站設計公司將指導大家創建一個簡單而干凈的網頁。我們將使用一些醒目的圖像，一個干凈的調色板和平滑的字體。我們先從創建一個網頁版本開始，然后我將向您展示如何快速適應移動端視圖。
教學資產
為了制作，您將需要以下（免費提供）資產：
山照片從 Unsplash
來自 Font Squirrel 的 Kaushan Script 字體
來自 Font Squirrel 的 Lato 字體
來自 Iconfinder 的社交媒體圖標
從 Unsplash 的庫存照片
庫存照片從 Refe
獲取文檔準備就緒
步驟1
首先使用下面所示的設置創建一個新的Photoshop文檔（File> New ...）。您可以隨意使用任何您喜歡的尺寸的畫布 - 畢竟網頁不是固定的寬度。
確保分辨率設置為72像素/英寸
我們設置一些指南，使我們的布局有足夠的空間和外觀平衡。我不總是使用網格，但設置一些指導方針將確保整潔，并有助于定義我們的網站的寬度。轉到視圖>新建參考線，并設置一些數值。我通常選擇1000px作為網站寬度，并從角落添加一些參考線，所以它有空間呼吸。
注意：垂直于100像素，600像素和1100像素。
步驟3
堅持 Photoshop的禮儀， 我們將保持組織，易于瀏覽和編輯。我們創建三個名為Header，Photos和Contact的圖層組。要創建組，請轉到“ 圖層”>“新建”>“組”， 并給出每個“標題”。要快速創建組，只需單擊圖標。
設計標題區域
標題或“上方”區域在與用戶接觸并確保訪問者停留在網站上起著非常重要的作用。對于這個網頁，我會用一些美麗的山脈和簡單的信息來拍攝冒險和挑戰。
步驟1
我們先創建博客的背景。Header 組內部使用矩形工具（U）繪制任何顏色矩形。在我的情況下，我繪制了1200x600px大小的矩形，并將其放在文檔的頂部。
現在下載山照片，將其拖動到Photoshop文檔，并將其放在矩形圖層上方。將圖像重命名為可以識別的東西，在我的情況下，我已經使用了IMG。之后按住Alt鍵和鼠標在照片層上，直到看到一個小箭頭指向下方，然后釋放它。你剛剛創建了一個剪輯面具。
現在打 Ctrl + T 并調整照片大小以適應您的需要。
提示： 按住 Shift 鍵按比例進行變換。
步驟2
讓我們對我們的形象進行一些調整，使其看起來更加生動和難忘。創建一個新的層，稱之為Shadow并創建一個 剪輯蒙版，就像我們為山形象一樣。然后選擇漸變工具（G）并設置漸變顏色從黑色#000000變為透明，按住Shift鍵從放置的圖像的底部拖動到其中間。最后將梯度層的不透明度降低到60％。
我通常使用這種技術使明亮的圖像變暗，并將白色文本放在頂部。
步驟3
讓我們添加一些更多的顏色到我們的標題，讓它更加好看。創建一個新圖層，將其命名為漸變，然后再次選擇 漸變工具（G）之后，設置漸變顏色從紫色#37056b 到粉紅色#ff01fc（或任何其他顏色），并從圖像的左上角拖動到右下角。最后，將梯度層的不透明度降低到20％。
步驟4
時間為我們的投資組合設置標志。選擇文字工具（T）并輸入您的logo，無論是您的姓名還是昵稱。對于本教程，我使用了非常時尚的Kaushan Script 21px大小的字體。將您的新徽標放置在您網站左上角的第一個垂直參考線旁邊。推下50像素給它足夠的負空間，所以它看起來干凈、專業。
步驟5
我們會添加一些社交媒體圖標，以便人們可以跟隨您和您的工作。將Facebook，Twitter和Instagram圖標,從Iconfinder拖放到您的Photoshop文檔，重命名圖層，以便快速識別圖層，并將其放置在最后一個垂直參考線旁邊的右上角。之后，單擊其中一個圖標圖層上的鼠標右鍵，選擇混合選項，并應用白色覆蓋選項#ffffff。對其他圖標執行相同操作。
確保您有足夠的空間，并將您的圖標與您的徽標水平對齊。
步驟6
我們完成我們的標題區域。我們有一個美麗的形象和空間。讓我們簡單介紹一下簡訊，讓訪問者了解這個網站的內容。
選擇文本工具（T），并使用36px尺寸的Lato（黑色）字體輸入幾個字。我使用了“HELLO！I''''JONATHAN”。之后，在一個較小字體的新行abd上，輸入一些關于您或您的工作的更多內容，訪問者可能會發現有趣的內容。對于本教程，我使用了16px尺寸的Lato （Regular）
I love to travel all around the world and design beautiful things.
確保線高度足夠大，以便您的文本有空間呼吸。最后，將文本放在標題區域的中間。
設計照片區域
在這方面，我們將從Instagram的照片中展示一些工作的例子，展示藝術家或設計師的熟練程度和相關性。
步驟1
我們先改變這個區域的背景。通過單擊組名稱旁邊的小箭頭來最小化標題組，并打開照片組。之后，選擇 矩形工具（U）并繪制一個略帶灰色的矩形。在我的情況下，我用于#eeeeee 顏色并繪制了一個 1200x880px的矩形。
步驟2
現在我們來添加一條描述工作的線。這可以是簡單的“最新作品”，或在我的情況下“最新的照片”。文本應該可讀，因此我使用了灰色#9b9b9b，字體是Lato（Bold）12px大小。請注意，字母間距相當大（270），僅用于對該區域的標題進行風格化，并且不適用于常規文本。再次給您的標題足夠的空間，并將其從80像素的圖像中移出。
步驟3
OK！我們終于準備好添加一些很酷的照片到我們的投資組合。創建一個名為Photo的新組。之后，您需要決定要連續顯示多少張照片。我決定用四個，所以我需要做一些數學，然后再確定像素。
我們的網站寬度為1000像素，所以我將它劃分為4，給每個圖像250像素，但是我們還需要在兩邊留一些間距，讓我們說圖像之間有20px的溝槽。所以最終的圖像寬度將是（1000px-60px）/ 4 = 235px。
選擇 矩形工具（U），并按住Shift鍵，繪制一個235x235px的大小矩形。之后，從您的Instagram Feed中選擇一張圖片，或者從unsplash.com或getrefe.tumblr.com上抓取 圖片，將其拖動到您的Photoshop文檔并將其放在矩形上方。然后，按住Alt鍵，創建剪輯蒙版，并使用Ctrl + T調整圖像的大小，并按需要放置。
步驟4
現在我們需要添加“喜歡”的數量（作為一些社會證據）和一個簡短的描述。創建一個新圖層，并將其命名為Shadow，將其放在圖像上方，并確保為其創建剪輯蒙版。之后，使用 漸變 工具 （G）應用從本教程前面所述的從黑色到透明的漸變。最后將其不透明度降至60％。
選擇 文本工具（T）并輸入多個喜好。我使用了13px大小的蒙特塞拉特字體，左邊和底部留下15px的空間，以給予足夠的空間呼吸，不要壓倒圖像。
現在選擇矩形工具（U）并在照片下方繪制一個白色矩形。然后抓住文本工具（T），并在照片上寫一個簡短的照片描述，包括主題標簽和新行上的發布日期。我用于本教程的字體是蒙特塞拉特 12px大小的灰色#808080。
注意：確保與您的間距保持一致，如果您在相似的數字上使用了15px，則與之前相同。
步驟5
我們完成了照片項目，現在是時候添加更多的照片到我們的投資組合。最小化照片組，并通過擊中Ctrl + J或單擊組名稱上的鼠標右鍵并選擇復制組，然后復制盡可能多的照片，并將其組織在網格中。在我的例子中，我用20px的空格和不同的圖像。
設計聯系方式
在這方面，我們將提供一個簡單的信息，并聯系“號召性用語”以及通用版權信息。
步驟1
單擊組名稱旁邊的小箭頭，最小化照片組，然后打開聯系人組。之后，選擇文本工具（T）并使用相當大的字型輸入該部分的標題，在，它是“GET IN TOUCH”。給頂部充足的空間，并添加一個簡短的描述，以敦促用戶的動作。我使用#565d64的顏色和 36px尺寸的Lato（黑色）字體的標題和16px Lato （Regular）的描述。
步驟2
現在我們需要一個號召性用語按鈕，用戶將點擊來執行所需的操作。對于本教程，我們使用一個簡單的聯系人按鈕。我使用了 矩形工具（U），繪制了一個簡單的形狀，并在其上放置文本。確保使用按鈕上方的大量空間，使其看起來平衡和干凈。
步驟3
最后，我們將一個通用的版權行放在我們的投資組合的底部。在這樣做之前，選擇 線工具（U），并在文檔上畫一個微小的灰色#e0e0e0 水平1px線，最后留下90px的空間。在這里，我使用了12px尺寸的Lato（Bold）字體，字母間距為270和深灰色#9b9b9b。
您已完成Web版本
現在你們都完成了網絡版的投資組合！現在，我將向您展示如何快速轉換移動版的網絡版本，以便可視化響應式網站。
設計手機版
步驟1
讓我們創建一個新的文檔，并將尺寸設置為320x2100px。創建20px，150px和300px的三個垂直指南來指導我們，留下一些空間。之后，選擇我們的Web版本文檔中的所有組，將它們全部拖動到新的文檔選項卡，直到新文檔顯示并釋放其中的組。
步驟2
現在打開標題組，找到我們的徽標，并使用 移動 工具 （V）將其移動到右邊，直到在我們新的狹窄布局中可見。留在第一個垂直指南旁邊。之后，找到社交圖標并將其移動到左邊。
步驟3
現在是適應主要信息的時候了。選擇文本工具（T），打破描述行并減少主消息字體以適應第一和第三垂直指南。調整線高度選項，你很好改。
步驟4
打開照片組，并向上移動“最新照片”標題，因為我們在移動視圖上不需要太多的空間。之后，找到照片組并將其移動到垂直指南之間。然后打開組，點擊描述背景矩形的形狀，點擊Ctrl + T并將其大小調整為280px寬。對照片矩形執行相同的操作。最后，將照片排列在一列，并調整大小以適應指南。
步驟5
我們的照片部分已經比網絡版更長，因此需要進行背景調整。找到照片背景圖層，并按Ctrl + T調整大小，使其更高，并在該部分的底部留下一些空格。
步驟6
最后，我們需要重新安排我們的聯系部分，以使消息符合我們的設置指南，并且很好地對齊。打開聯系人組并使用文本工具（T）打破聯系消息行，使之符合我們的準則。確保減少元素上方和下方的空間，因為我們不需要移動視圖的太多空白。此外，減少消息的行高，使其看起來干凈，專業。
最后一件事是將版權行分成兩行，這也是指導原則之間的區別。
完整的移動視圖
恭喜！
目前，我們完成了Instagram的投資組合的網絡和移動版本。我希望你學到了新的東西，而且你所獲得的技能將幫助你在將來建立一些驚人的事情。
我很樂意聽到您的反饋，并看到本教程的結果！
尚略廣告，上海網站設計建設公司，上海品牌設計公司翻譯發布。
本文網址，http://m.jsxhyl.com.cn/news_info.asp?id=2966
外文網址：https://webdesign.tutsplus.com/tutorials/designing-a-simple-instagram-based-portfolio-in-photoshop--cms-21402