［設計師的作品集網站設計策略］Adobe Portfolio 可以做啥？如何將 Behance 做成好看作品集網站！（圖文詳解教學）
本篇原文刊載於 RAR 設計攻略：https://www.rar.design/adobeportfolio嗨囉，我是 Riven 🙂
設計師的作品集可以拿來整理作品、存檔設計概念，並能夠好好表現自己的美感與實力，要拿來申請學校或是求職找工作都很好用，甚至常常是需要提供的必要文件之一。
不過有時候我們可能會稍微比較懶一點去整理那些資料，那日子久了 — — 「要來好好整理作品集」就變成跟今年我要減肥一樣的口號🤔
但我們都曉得這並不是一個好習慣，對吧？
那我們今天會來聊聊，如何用 Behance 來上傳作品檔案，並用這些內容透過 Adobe Portfolio 來做成自己的作品集網站，這會是一個執行摩擦力相當低的行動，很簡單！而且也能夠帶來足夠大的效益。
我們趕緊來看看吧！
淺談 Behance 網站
Behance 在台灣是許多設計師與藝術家整理作品集的選擇，像是知名設計師李宜軒、何庭安或是水晶孔等等，在 Behance 上的關注與讚賞都是相當活躍。
💡推薦關注設計師
Crystal Kung：https://www.behance.net/crystalkung
Yi-Hsuan Li：https://www.behance.net/yihsuanli
Ting-An Ho：https://www.behance.net/tinganho而如果我們也想來上傳作品，只要註冊之後可以建立專案，並可以放上圖片、影片甚至是 3D 模型或 Adobe Xd 的互動文件等等，並附上設計概念等文案弄成完整頁面。
整體介面與體驗有點像是設計師在用的部落格平台，我們可以從平台上視為榮耀的小旗子，來看到有哪些被選為優秀專案的作品，看到作品獲得小旗子時所收到的信件，將像是寶貝創作被收錄在喜歡的雜誌上，相當鼓舞對設計的熱情！
整體來說我覺得 Behance 更像是一個設計師的社群網站，其中包含一些關注追蹤的互動功能，讓你的頁面不會像是座孤島，如果是自己架設個人網站的話，在經營初期可能都會有與世隔絕的感受。
而在 2012 年的時候 Behance 公司被 Adobe 收購，除了仍維持著平台原有的社群特性，還多了一些加強的功能，像是可以看見此專案是由 Ai, Ps 或是其他軟體所製作，以及與 Adobe 家個軟體的同步協作體驗更好了。
除此之外，Adobe 也發佈了 Adobe Portfolio 這項服務，可以將 Behance 上原有的作品作為資料庫，製作成自己的網頁應用。
Adobe Portfolio 使用教學
只要有訂閱 Adobe Creative Cloud 會籍，就可以使用 Adobe Portfolio 這套線上的服務，我們可以藉由它來做出個人的作品集網站來。
因此，如果你剛好本來就有 Adobe 的訂閱帳號，那這就一個免費的、不用白不用的作品集網站製作服務。
那如果目前還沒有 Adobe Creative Cloud 會籍的話，可以考慮訂閱，這可以讓你使用 Adobe 底下的所有設計軟體；若是有學生證的話記得申請學生方案；或是也可以考慮訂閱 攝影 方案來用較低價格取得 Adobe Portfolio。
介面來看主要是由左側面板來控制與設定，右側是網頁目前實際的樣子，可以直接預覽與編輯，所見即所得。
Adobe Portfolio 會自動將 Behance 上已經上傳的作品轉移到網頁上，並且是動態資料庫，這意謂著日後如果有新作品專案，也會同步到這個來。
頁面
在「頁面」裡可以設定網站選單上的項目，並替作品專案排順序與分類，同時也可以新增新的頁面來放上想放的內容。
收藏集 可以替網站製作子母分類的選單，例如說可以創建 UI/UX 設計 主題的收藏集，接著將相關作品專案的頁面放置其底下，就可以在網站上替作品做出分類。
整合
在「整合」裡可以選擇要匯入的作品庫，如果你是攝影師，也可以將 Adobe Lightroom 上的相簿，或是 Adobe Stock 的檔案自動串連到網站來。
這邊借用攝影師好友 城市漫遊者 cityflaneurs 使用 Adobe Portfolio 替網站新增專案的螢幕截圖：
主題
而如果想要更換剛選擇的網站主題，可以在「主題」這裡更改。
設定
如果介面上不是中文，可以在「設定」裡面的 帳戶和地區 調整，那若想要追蹤網頁的瀏覽與互動數據，則是在 分析 這邊輸入 Google Analytics 的追蹤程式碼即可。
設計 Adobe Portfolio 網頁
而在替網站同步好 Behance 或 Lightroom 上的專案後，我們可以接著來進行網頁設計的步驟。
而網頁設計的準則跟做 UI 介面設計是相同的，原則上我們先將網站大架構上的先訂好，接著才照順序來處理更細的設定。
刊頭背景
刊頭這翻譯實在是比較少見一點，不過我想就是與一般網頁設計裡的 Hero image 是類似的存在，我們可以先在這裡定下網站的主視覺，可以用滿版的圖片去呈現，也可以用個人形象照來排版等等。
深色/淺色背景
在 整個網站 的設置處，可以先大範圍地將網站調整成自己喜歡的樣子；例如說可以將網頁改成深色背景（如果作品專案字數很多，可優先考慮）。
網站容器 (Container)
在 網站容器 點進來後，可以設定網頁 container 的數值，比如說想要將網頁弄成滿版呈現，那就在內容的地方設成 100%；如果想要窄一點（有雜誌感）則可以將數值調小，同時左右邊界的數值可以分別設定。
作品牆
基本上 Adobe Portfolio 的定位上是快速建立作品集網站，所以在整體介面設計的調性上，需要在一開始的 主題 就決定好，其中最核心的還是作品的陳列方式。
比如說想用兩欄、三欄或用滿版的方式擺，都要在一開始的時候做決定，實際上在作品牆這邊能夠做的調整並不是很多。
網頁欄位佈局
除了從 Behance 自動匯入專案成頁面之外，我們也可以自己手動來建立網頁，而在頁面裡可新增的網頁元件其實跟 Behance 的拖曳式模組基本上差不多。
如果想要在頁面中做出兩欄的佈局，則可以在新增元件後，點擊兩側的 ＋ 號來放置物件，而 Adobe Portfolio 目前似乎只能夠做最多兩欄的分法。
預覽 RWD 裝置尺寸
而我們在頁面編輯好網頁要放的內容之後，要記得透過左下角的 預覽 來看看頁面在不同裝置尺寸間是否正常顯示，如平板、手機與手機橫放等等。
不過因為網頁最多兩欄位佈局的緣故，在 RWD 響應式的部分基本上不用太去擔心，正常來說不會有什麼大問題，除非有在 整個網站 或 全部頁面 手動修改過邊界、容器或寬度等等的設定，才需要勤勞一點檢查預覽時的網頁狀態。
目前已知的 Adobe Portfolio 缺點
- Adobe Fonts 中文字型支援度不好（若新增字型時遇到網頁當掉問題，可更換帳號地區到美國。）
- 不支援完整 HTML/CSS 等網頁語法
發佈 Adobe Portfolio 網站
在作品集網站弄得差不多之後，就可以來準備發佈網站，這邊有幾個一定要做的基礎步驟：
fav icon
這是會放在瀏覽器的索引標籤上的小圖示，Adobe Portfolio 裡可以在 設定 找到 最愛圖示 (Favicon) 來上傳，記得要選擇正方形且背景為透明的 PNG 檔案。
頁尾 (Footer)
網頁最底端的 Footer 預設有一行 Powered by Adobe Portfolio 的文字，這我們可以在 整個網站 > 頁尾 的地方透過簡單的 HTML 語法來更改，比如說以下程式碼：
Designed by <a href=”https://riven.design/" target=”_blank”>Riven</a>Designed by 以及 Riven 的文字可以自己換，a href=”##” 裡面可以換成要連結的網址。
自訂網域
Adobe Portfolio 可以將網域換成自己想要的網址，我們能在 設定 > 網域名稱 中進行更改，如果你是要長期經營自己的網站，這個步驟相當重要！
而域名可以透過網站是支援的 NameCheap 或是自己到像是 GoDaddy 這樣的域名供應商購買，並透過指向 DNS 的方式連結過來。
社交分享縮圖
在 設定 > 社交分享縮圖 這邊我們可以手動設定一張縮圖，這是讓你之後分享網站連結在臉書、LINE 等等地方的時候，所顯示的網頁封面圖片，攸關於在進入網站前的第一印象，可以謹慎地製作或找到適合的圖片。
Adobe Portfolio 使用體驗
整體操作體驗來說，不僅中文化相當友善，在編輯網頁內容時也不太會有反直覺或卡卡的時候，如果用過其他架站平台應該懂那種煩躁感。
而透過 Behance 與 Adobe Portfolio 的串連，可以省下大量額外整理作品的時間，同時網站建置也是很快就可以做到好，不過若是想用自己的品牌網域或更客製的網頁設計，還是需要選用其他架站服務，如 WordPress, Webflow 等等。
親自體驗過 Adobe Portfolio 後應該都能感受到相當簡單，所以我們在快速完成 Behance 到 Adobe Portfolio 的同步後，已經從零到一有了這個自己的作品集網站之後，可以將後續經營重心放在作品集網站的設計策略上，這我們會在之後做一集專題來跟大家聊聊，有興趣的同學可以先來按下訂閱😀
我是 Riven，我們下次見囉～ 掰掰！
