如何使用 Adob​​e Muse 為投資組合網站設計令人驚嘆的登錄頁面

投資組合網站的注意事項列表是無窮無盡的。 但是，在這些列表中，我發現了兩個共同點——避免將所有內容都填充到單個頁面中，並使登錄頁面和導航盡可能簡單、有吸引力且易於訪問。

這就是您將通過本教程學習的內容。 除此之外，您將：

• 了解如何使用 Adob​​e Illustrator 優化 Muse 網站的圖形（對於加快網站內容加載速度至關重要）
• 能夠使用 Photoshop 透視顯示內容。
• 了解如何使用 Adob​​e Muse 設計專業的登錄頁面。

本教程的要求：

為了正確理解和準確創建本教程中顯示的內容，您需要從各種免費資源下載某些資產。 但是，沒有這些，您仍然可以跟隨。

• 轉到 https://goo.gl/KVL9r1 並下載此圖像作為標題。 其尺寸必須為 1400 x 750 像素。 這是該網站的屏幕截圖。 將此尺寸放入自定義尺寸框中並下載。

  

• 訪問 http://goo.gl/ZeHxOF 和 http://goo.gl/BASRSP 並下載社交媒體圖標包和向下箭頭圖標。
• 本教程中使用的徽標可以在這裡下載（超鏈接 - 'assets.rar' 文件附在電子郵件中）
• 轉到 http://goo.gl/mzw1Xh 並下載這個 iMac 27 英寸屏幕矢量，它將用於顯示“網站設計”項目。
• 打開創意云桌面應用程序並下載 iPhone 和 iPad mini 模型，如下圖所示。 它們會自動添加到您的 Photoshop 庫中。

  

第 1 步：如何在 Adob​​e Illustrator 中優化 WEB 圖形：

1.在 Illustrator 中打開社交圖標“eps”文件。 選擇 fac​​ebook 圖標（方形版本）並按 Ctrl+Shift+G 取消組合這些圖標。

2.在畫布外部單擊並再次選擇 fac​​ebook 圖標。 然後，轉到位於頂部的變換面板，輸入 W=19.5，H=19.5 並按 Enter。

3.按 Ctrl+C，然後按 Ctrl+N。 在這個新的文檔對話框中，將“static_facebook_icon”放在名稱字段下，W=20 和 H=20。 確保從單位下拉列表中選擇像素。 單擊確定。

4.按 Ctrl+V 粘貼 facebook 圖標並正確對齊。

5.轉到文件 > 選擇“保存為網絡”(Alt+Shift+Ctrl+S)。 從右上角的下拉列表中選擇 PNG-24。 單擊保存並將其保存在所需位置。 另外，保存插圖文件（Ctrl+S）

6.對 twitter、google plus、LinkedIn 和 Behance 圖標重複步驟 2 到 5，並將它們保存到網絡。

注意：我們選擇 png 格式是因為它們具有很高的透明度、相對較小的尺寸並且最適合圖標和矢量。

7.同樣，優化這五個圖標的標題圖像。 這一次，將它們的顏色更改為白色。 為此，請選擇圖標，轉到位於應用程序菜單下方左上角的填充下拉菜單，選擇白色並保存為網絡。 現在，您有 10 個圖標 - 5 個灰色和 5 個白色。

8.之後，優化向下箭頭圖標（顏色：白色，文檔 W= 30px，H=20px）並將其保存為 PNG-24 以供 web 使用。

9.現在，創建一個大小為 1400 x 750 像素的新文檔，並將其命名為 header_image。 單擊確定。

10.轉到文件 > 放置並瀏覽我們從 pexels.com 下載的圖像。 單擊畫布將其放置並在畫佈內進行調整。

提示：按鍵盤上的“Z”，按住 alt 鍵並在畫布上單擊幾次以縮小一點，以便立即看到所有內容。

11.從位於應用程序窗口左側的工具箱中選擇矩形工具。 創建一個矩形並將其轉換為 W=1400，H=750px。 然後，將此矩形拖到放置的圖像上。

12.選中這個矩形，進入填充下拉菜單，選擇位於其左下角的色板庫菜單。 在此列表中，轉到“漸變”並選擇“地球色調”。

13.如下圖所示選擇 earthtone 30 並關閉此面板。

14.在矩形仍然被選中的情況下，轉到位於應用程序窗口右側的漸變選項卡。 如果它不存在，請按 Ctrl+F9。 單擊、按住中間漸變滑塊並將其拖動到最左側。

15.然後，在“不透明度”字段（位於頂部）內，輸入 87% 並按 Enter。

16.將此圖像保存為網絡。 這一次，選擇JPEG和質量=86%。 另外，保存插圖文件。

第 2 步：在 PHOTOSHOP 中準備資產：

17.打開 Adob​​e Photoshop CC。 轉到文件 > 選擇“新建”。 將名稱設為“ecommerce_design”，W=619px 和 H=310px。

18.從庫面板（位於右側）中，選擇我們下載的 ipad mini 模型並將其拖到畫布上。

19.按住shift鍵並通過拖動角來增加其大小並在畫佈內調整它，如下所示。

注意：您可能需要使用縮放工具。 要在縮放和選擇工具之間切換，請按鍵盤上的“Z”和“V”鍵。 此外，如果您找不到庫面板（或任何其他面板），只需轉到窗口菜單 > 選擇庫。

20.選擇矩形工具並在畫佈內創建一個任意大小的矩形（不要擔心它的填充顏色）。 將顯示一個屬性框。 在其中，放置 W=1024px 和 H=768px 並確保未選擇鏈圖標。

21.現在，單擊鏈圖標將其選中。 輸入 W=290px 並回車。 折疊此屬性面板。

22.在位於右側的圖層面板下，選擇“矩形 1”，右鍵單擊它並選擇“轉換為智能對象”。

23.然後，進入編輯菜單 > 選擇“自由變換”。 再次，打開編輯菜單 > 變換 > 選擇“扭曲”。

24.按住矩形的一角，使其與ipad屏幕的一角重合。 對所有四個角執行此操作，然後按 Enter。 您將得到以下結果。 必要時使用縮放工具。

25.在圖層面板下，右鍵單擊背景圖層並將其刪除。 此外，通過單擊左側的小眼睛圖標使“矩形 1”圖層不可見。

26.重複步驟18到22再創建一個矩形，將其轉換為智能對象，使其每個角與ipad屏幕的角重合，然後按Enter。

27.使“矩形 1”層可見，“ipad”層不可見。

28.右鍵單擊“矩形 1”圖層並選擇“編輯內容”。 它將在新選項卡中打開。 轉到文件 > 嵌入位置，瀏覽“screen1.png”，它可以在您下載的 Logos 文件夾中找到。 單擊位置並按回車鍵。 按 Ctrl+S。 此更改將在我們的主文件中的矩形 1 上更新。 關閉此選項卡。

29.同樣，使用“screen2.png”對矩形 2 執行此操作並保存。 根據您的喜好在圖層面板中向上或向下移動圖層。 刪除 ipad 層。

30.右鍵單擊任何矩形圖層並選擇“混合選項”。 將出現一個圖層樣式框。 選擇最後一個選項“投影”並輸入如下所示的值。

31.在這個對話框中，在混合模式旁邊，有一個顏色框。 單擊它並選擇以下顏色值。

32.對第二層也應用相同的陰影效果。 按 Alt+Ctrl+Shift+S。 選擇 PNG-24 並單擊保存。 您將得到以下結果。

注意：這是您可以透視放置網站或任何圖像的方法。 您只需要知道要放置它的設備的確切分辨率。 為顯示“標誌設計”和“網站設計”項目的 iphone 和 imac 模型執行此操作，如下所示。

第 3 步：在 MUSE 中設置工作區：

33.打開 Adob​​e Muse CC。 您將看到一個歡迎屏幕。 在“新建”下，單擊站點，將顯示一個新站點對話框。

注意：另一種創建新站點的方法是轉到文件 > 新站點或 Ctrl+N。

34.在這個對話框中，有一個下拉菜單，上面寫著“流體寬度”。 通過單擊打開它並選擇“固定寬度”並更改頁面寬度和列的值，如下所示。 'gutter' 字段的值將自動更改。

35.展開高級設置選項並確保選中“粘頁腳”複選框。 此外，請確保網站在瀏覽器區域內“居中對齊”。 單擊確定。 Muse 將帶您進入計劃模式。

36.按 Ctrl+S 並將您的站點保存在所需位置。 我建議您為您的站點創建一個單獨的文件夾，並在每次進行更改時保存它。

注意：流體寬度用於創建響應式佈局。 我們選擇了固定寬度，因為我們將創建一個不適用於流體網站的滾動效果。

37.雙擊位於灰色區域底部的“A-master”。 從位於應用程序窗口左側的工具框中，選擇“文本工具”。

38.在畫布上製作一個文本框。 按 Ctrl+T 打開文本面板，在字體下拉菜單下，查找網絡字體並選擇“添加網絡字體”。

39.將出現一個新窗口。 選擇“edge web fonts”選項卡，逐一搜索並下載以下字體：

• 單調
• 電傳
• 努曼斯
• 雷威
• 拉托
• 阿里莫

下載這些字體後，刪除文本框。

40.打開位於右側的“圖層”面板或轉到“窗口”菜單 > 選擇“圖層”。 單擊位於其右下角的小折邊紙圖標。 單擊它兩次以創建另外兩個圖層。

41.雙擊“圖層 1”。 將彈出圖層選項窗口。 在名稱下，輸入“home_header”並單擊“確定”。 對其他兩層重複此過程，並將它們分別命名為“static_header”和“content”。

42.按如下所示的順序排列圖層，只需向上或向下拖動它們並保存更改。

注意：我們按此順序放置圖層，因為我們希望我們的標題位於其他所有內容之上。 圖層是組織和堆疊網站內容的有效方式，尤其是在佈局變得複雜時。

43.選擇“static_header”圖層並折疊此面板。

第 4 步：建立靜態標題：

44.在頁面頂部，您會看到兩個指南。 第一個是“頁首”指南，第二個是“頁眉指南”。 單擊、按住並拖動下面的標題指南並將其設置為 80 像素。 你可以在統治者的幫助下做到這一點。 這是我們的標題區域。

45.選擇矩形工具或點擊鍵盤上的“M”。 在畫布上製作一個小矩形並確保其邊框顏色為“紅色”，這表明該對象位於“static_header”層內。

46.轉到右上角的“調整大小”（或舊版本的 Muse 中的“變換”），單擊它並輸入 H=80。

47.拖動此矩形並將其放在頁眉區域內，使其與“頁面頂部”和“頁眉”指南對齊。

48.現在，我們將增加矩形的寬度並將其設為 100% 以使其可針對每個屏幕尺寸進行縮放。 將矩形擴展到兩個邊緣，並確保它與頁面邊緣對齊。 當您到達邊緣時，橙色指南將顯示，指示對像已被捕捉，並且一條消息將顯示 W=100% 或 W=1400。

49.選中矩形後，單擊應用程序菜單下方的填充下拉菜單並選擇白色。

50.單擊填充旁邊的“筆劃”一詞。 單擊鏈圖標將其斷開並將“1”放在底部筆劃粗細字段中。

51.之後，單擊描邊顏色下拉菜單，將 R、G 和 B 的值分別設置為 235。 然後，單擊折邊紙圖標以創建新樣本。 將出現一個樣本選項框。 單擊確定並保存更改。

52.轉到文件 > 放置。 瀏覽“static_logo.png”並單擊打開。 光標將其外觀更改為裝有圖像的定位槍。 單擊畫布以放置它。

53.然後，將此圖像移動到標題矩形上並將其與垂直中心對齊（藍線將指示它何時居中）並將其對齊到左邊框，如下所示。

54.再次，轉到文件 > 放置並選擇我們使用 Illustrator 優化的所有靜態社交媒體圖標。 單擊打開。 您會看到放置槍將有一個數字 (5)，表示五個加載的圖像。 如果要切換到另一個圖標先放置，可以使用鍵盤上的箭頭鍵。 將它們一一放置。

55.選擇所有圖標並轉到位於右上角調整大小旁邊的“對齊”面板。 在“對齊到”下拉菜單中，選擇“對齊到關鍵對象”。

56.然後，在“分佈間距”選項下提供的字段中輸入 11。 單擊選項“A”和“B”，如下面的屏幕截圖所示。

57.選擇這些圖標後，右鍵單擊並選擇“組”或 Ctrl+G。 將此組移動到標題矩形上，並將其對齊到與徽標對齊的右邊框，如下所示。

58.創建一個文本框並在其中輸入 HOME。 按 Ctrl+T 並選擇字體：電傳，大小：13，顏色：黑色，居中對齊和 120% 領先。 根據字體大小調整此文本框的寬度和高度。

59.同樣，為 WORK、SERVICES、CONTACT 和 ABOUT 再創建四個文本框。 選擇所有這些，轉到對齊面板並重複我們對社交媒體圖標所做的操作。 這一次，將分佈間距更改為 50。分組並將它們移動到標題矩形上，如下所示。

60.現在，我們將這些對象固定到瀏覽器的頂部，這將使我們的標題靜態化。 意味著，無論滾動如何，它都將始終顯示在瀏覽器的頂部。 為此，請選擇標題矩形，轉到位於右上角的“Pin”，然後單擊其頂部中間正方形內部，如下所示。

61.同樣，將徽標固定在左上角，將菜單組固定在頂部中間，將社交圖標組固定在右上角。 我們的靜態標題已準備就緒。

第 5 步：建立頁腳：

62.你會在底部看到三個指南，即頁腳、頁面底部和瀏覽器底部。 單擊，按住並拖動“瀏覽器底部”指南，並在標尺的幫助下將其設置為 770 像素。 然後，拖動“頁腳”指南並將其捕捉到“頁面底部”指南。 這是我們的頁腳區域。

63.在這個H=270和W=546的區域內創建一個矩形，使其頂部和底部分別與瀏覽器指南的頁腳和底部重合。

64.選中這個矩形，點擊單詞“stroke”並應用權重為“1”的頂部描邊（描邊顏色值：R=235 G=235 B=235）。 轉到“對齊”面板並在對齊對像下，選擇“對齊水平中心”（這是第二個選項）。

65.放置 static_logo.png 並在這個矩形內添加文本，如下所示。 （文本字體：Arimo，大小：14，顏色：R=37 G=37 B=37，居中對齊，120% 領先）。

66.您在 2016 年之前看到的版權符號可以從位於應用程序窗口右側的“字形”面板中添加。 如果它不存在，請轉到“窗口”>“字形”。 我們的頁腳準備好了。

第 6 步：創建主頁標題和滾動效果：

67.關閉母版頁並返回計劃模式。

68.雙擊打開“主頁”頁面。 打開圖層面板，選擇“home_header”圖層並折疊面板。

69.在標尺的幫助下將頁腳層向下拖動到 4000 像素，從而在此處騰出一些空間。

70.現在，創建一個 100% 寬度的矩形。 正如我們之前所做的那樣，可以通過從矩形的左右邊緣擴展矩形並將其對齊到頁面的兩個邊緣來實現全寬。

71.通過拖動矩形的頂部邊緣向上展開矩形並將其對齊到頁面指南的頂部，如下所示。

72.去resize面板，設置H=750px。

73.選中矩形後，單擊“填充”一詞（不是顏色下拉菜單），然後單擊“添加圖像”。 瀏覽我們從 Pexels 下載並在 Illustrator 中優化的“header_image.jpg”。 在“擬合”下拉列表中，選擇“要填充的比例”並將其放置在左上角。

74.在這個“填充”選項框本身，在填充旁邊，有一個名為“滾動”的選項。 單擊它並在初始和最終運動字段中輸入 0。 這意味著，圖像將保持靜止，內容將移動，從而創建美觀且具有視覺吸引力的滾動效果。

75.創建一個文本框並在其中輸入“關於我們的團隊”。 字體：電傳，大小：13，左對齊，顏色：白色和前導：120%。 移動它並將其放置在圖像的左上角，如下所示。

76.放置我們為標題圖像優化的所有社交圖標。 就像我們對靜態標題所做的那樣，將它們以相等的間距對齊。 分組並將它們放在圖像的右上角，如下所示。

77.創建一個文本框。 它應該是 W=944，H=92。 在其中輸入“我們設計網絡”。 字體：Monoton，大小：72，居中對齊，120% 領先。 將單詞“WEB”的顏色更改為 R=41 G=171 B=226，其餘為白色。

78.為SERVICES、CONTACT 和BLOG 創建三個小文本框。 字體：電傳，大小：13，白色，居中對齊，120% 領先。

79.放置“header_logo.png”圖像。 調整標誌和這四個文本框如下。

80.轉到位於右側的“Widgets”庫。 展開“按鈕”部分。 選擇“狀態按鈕”並將其拖到畫布上。 關閉小部件面板。

81.仔細選擇此按鈕內的小圓圈並點擊刪除。

82.在 Lorem Ipsum 文本框內雙擊，選擇整個文本，刪除它並輸入“PORTFOLIO”。

83.從工具箱中選擇選擇工具（箭頭工具）。 轉到文本面板 (Ctrl+T) 並更改“投資組合”文本的格式，如下所示。

84.現在，選擇狀態按鈕並將其調整為 W=177，H=43。 正確調整按鈕內的文本框。

85.選擇按鈕。 轉到“角半徑”選項（位於筆劃旁邊）。 單擊所有四個角以使它們變平。

86.選擇按鈕後，查看左上角，在應用程序菜單下方。 你會注意到“狀態按鈕”是用粗體字寫的。 這被稱為“當前選擇區域”。 它可以讓你知道你選擇了什麼。

87.旁邊是“正常”。 單擊它，您將擁有四種狀態。

88.對於正常狀態，將填充顏色更改為“無”，將描邊顏色更改為白色。

89.選擇'rollover'狀態，改變填充和描邊顏色為R=41 G=171 B=226。

90.對於“鼠標按下”和“活動”狀態，將自動應用所需的更改。

91.再次選擇其正常狀態，展開位於底部的“過渡”面板。 選擇顯示“淡入淡出”的複選框並輸入如下所示的值。 保存更改。

92.在按鈕下方放置“down_arrow.png”圖像。 你應該有以下結果。

93.我們的主場頭球已經準備好。 在瀏覽器中轉到文件 > 預覽頁面 (Ctrl+Shift+E)，查看是否一切正常。

第 7 步：添加內容：

94.返回 Muse，打開圖層面板，選擇“內容”圖層並折疊面板。

95.向下滾動到下面的空白處並製作一個 W=464, H=60 的文本框。 在其中輸入“我們最近的工作”。 字體：Raleway light，大小：46，顏色：黑色，居中對齊，120% 領先。 現在，選擇單詞“RECENT”並將其字體更改為“Raleway Bold”。

96.再做兩個文本框。 一個 W=376，H=165，另一個 W=376，H=363。

97.在第一個內部雙擊並輸入“WEBSITE DESIGN”。 字體：Raleway Extra Light，大小：77，顏色：黑色，左對齊，100% 領先。

98.雙擊第二個，然後從lipsum.com 粘貼一些虛擬文本，如下所示。

• 對於主標題- 字體：Lato Bold，大小：30，顏色：R=33 G=42 B=52，左對齊和 120% 前導。
• 對於主要段落——字體：Lato light，大小：21，顏色：R=57 G=57 B=57，左對齊和 120% 前導。
• 對於“客戶推薦”標題- 與主標題相同，但大小為 21。
• 對於推薦段落- 與主要段落相同，但字體為“Lato Light Italic”

99.選擇“投資組合”狀態按鈕，將其複制並粘貼到我們在上一步中創建的文本框下方。 將文本從投資組合更改為“查看網站”

• 對於正常狀態- 填充：無，筆觸和文本顏色：黑色。
• 對於翻轉狀態- 填充和描邊顏色：R=41 G=171 B=226 和文本顏色：白色。

100.放置“帶有網站模型的 imac”圖像。 如下排列圖像、文本框和按鈕。

101.向下滾動到空白區域並創建一個 W=1200，H=5 的矩形。 應用重量為“1”的頂部筆劃和顏色 R=235 G=235 B=235。 如下放置。 這將用作分隔符。

102.複製我們在步驟 92 到 95 中創建的文本框和按鈕，將它們粘貼到分隔符下方。 將第一個框的文本更改為“LOGO DESIGN”，將按鈕文本更改為“VIEW LIVE”。

103.放置'iphone with logo mockup'並按如下排列。

104.在此之後復制並粘貼分隔符。

105.同樣，複製並粘貼此分隔符下方的文本框和按鈕。 將第一個框的文本更改為“電子商務”。

106.使用 Photoshop 放置我們在步驟 15 到 30 中創建和優化的“ecommerce_design.jpg”。 安排一切如下。

107.現在，創建一個 W=1004、H=363 的矩形，沒有填充，頂部描邊的權重為“1”，顏色：R、G、B=235。

108.在這個矩形內，創建兩個文本框。 在第一個中，輸入 - 'WHAT WE BELIEVE IS'（字體：Raleway light，大小：35，顏色：R、G、B=37，居中對齊，100% 領先）。 選擇單詞“相信”並將字體更改為“Raleway 粗體”。

109.在第二個文本框中，輸入 Milton Glaser 的名言，如下所示（字體：Lato Light Italic，大小：70，顏色：R,G,B=37，居中對齊，120% 領先。

110.複製並粘貼上述任何狀態按鈕，並將其文本更改為“SEE OUR WORK”。 安排一切如下。

第 8 步：鏈接：

111.從工具箱中，選擇“鏈接錨點”或按鍵盤上的“A”。 光標將其外觀更改為裝有錨的地方槍。 將此錨點放在“我們最近的工作”文本框上方，如下所示。

112.會彈出一個帶有錨選項的對話框。 在名稱字段中，輸入“recent_work”。

113.選擇組合按鈕下方的向下箭頭圖像。 轉到位於頂部的“超鏈接”下拉菜單，然後選擇“recent_work”。 保存更改並預覽站點 (Ctrl+Shift+E)。

第 9 步：添加替代文本、元數據、關卡標籤和網站圖標：

114.替代文本是一種讓搜索引擎理解圖像中包含的內容含義的方法，並且必須提供給您添加到網站的每張圖像。 為此，請右鍵單擊我們放置的三個圖像中的任何一個，然後選擇“編輯圖像屬性”。

115.會彈出圖像屬性對話框。 您將在此處看到兩個字段。 一個是“工具提示”，另一個是“替代文字”。 兩者的基本區別如下：

注意：您應該在網上搜索添加替代文本和元數據的方法和重要注意事項，因為它們是更好的 SEO 的主要方面。

116.要添加元數據，返回計劃視圖，右鍵單擊主頁並選擇“頁面屬性”。 將顯示一個新窗口，其中包含三個選項卡，即佈局、元數據和選項。 在這些選項卡之間切換，探索選項並添加相關關鍵字。

117.使網站上線之前要考慮的另一個重要因素是更改一些文本屬性以添加級別標籤。

注意：通常，當您在網站上添加書面內容時，您會將標題設置為粗體並大於段落（或其他文本），以說明它們之間的區別。 作為人類，我們可以認識到這種差異。 但問題是瀏覽器不理解文本的哪一部分是標題，哪一部分是段落，除非您為每個部分分配指定的級別標籤。

當然，無論您是否應用了標籤（因為 CSS），它都會在您設計頁面時在線呈現您的頁面，但是為了製作一個對 SEO 友好的網站，有必要使用這些描述性標籤。

118.為此，選擇文本，轉到文本面板 (Ctrl+T)，然後在底部，您將看到一個包含所有標籤的下拉菜單。 相應地選擇它們並保存更改。

119.轉到文件 > 站點屬性。 在內容選項卡下，最後一個選項是“Favicon”（在舊版本的 Muse 中，它位於佈局選項卡下）。 當您將鼠標懸停在“Favicon”一詞上時，將出現一個工具提示，描述它是什麼以及它的適當尺寸應該是什麼。 添加網站圖標是有利的，因為它可以使您的品牌脫穎而出，並且如果用戶已將其添加為書籤，則可以使您的網站易於識別。

第 10 步：導出站點：

120.最後，轉到文件 > 導出為 HTML (Ctrl+E)。 在站點 URL 字段下，輸入 www.squaremaze.com 並選擇要導出站點的位置。 單擊確定。 我們的著陸頁現已準備就緒。 您可以在任何您想要的瀏覽器中預覽它（'index.html' 文件）並測試它的外觀和性能。

最後結果：

結論

使用 Illustrator、Photoshop、Fireworks、Fuse 和 Animate 等其他應用程序為 Muse 網站創建優質資源始終被證明是有益的，並取得了非凡的成果。 這只是使用這個很棒的工具進行設計的一種方法。 繼續探索更多。 謝謝。