一般我們在做網頁 UI 設計前，都會先使用 Photoshop 排版讓網頁架構有個雛型。
給客戶看過後，確認無誤才會開始後續網頁程式製作。
今天在這邊跟大家分享的就是在網頁製作前的雛型設計。
使用Photoshop 製作簡潔縱向選單。
使用 "圓角矩形(U)" 工具並選擇為形狀圖層方式，半徑設定為20px，顏色色碼為#1d97bc，
拉出一個W:220 H:305 尺寸的長方體。
02
選取工具列上的 " 
直接選取工具" 選項，並點擊剛剛繪製的長方體邊緣，這時後會
直接選取工具" 選項，並點擊剛剛繪製的長方體邊緣，這時後會
出現四邊路徑形狀錨點。
02-1
先為長方體左右兩側拉參考線 (這個步驟是要為後續要拉邊框時有個基準點對位)
02-2
接著使用工具列上的 "刪除錨點工具" 將標註1、2的錨點刪除，刪除後的圖示會變成這樣。
02-3
接下來，使用工具列上的 " 直接選取工具" 選項，點選黑點並按住鍵盤Shift鍵
直接選取工具" 選項，點選黑點並按住鍵盤Shift鍵
邊將黑點移動對到與錨點重疊，右邊也一樣重複一次。
02-4
後續就將這兩錨點移動到左右兩側貼齊參考線，長方體就算完成了。
03
打上Menu: 字樣，字元設定為如下。
04
接下來要做選單分隔線，分隔線的做法是：使用工具列 "
直線工具"
直線工具"
寬度設定1px，繪製兩條一黑一白的線段，黑的在上，白的貼齊黑線在下，
兩線透明度設定都設定為18%，就可以做出這樣效果。
04-1
將完成的分隔線依序往下延伸在複製出5條，效果就會是這樣。
04-2
完成分隔線後，緊接著我們要在兩線之間做出矩形方塊，
矩形選取畫面工具(M) "顏色色碼為#75c5de，拉出一矩形色塊，
然後將此矩形往下延伸在複製出 4 個矩形塊。
04-3
打上Position1-5 字樣，作為替代選單的文字。字元設定如下。
05
製作滑鼠滑過點選的效果，使用工具列上" 
矩形選取畫面工具(M)
"
矩形選取畫面工具(M)
"
拉出一矩形色塊，接著給予漸層色，就完成簡潔縱向選單了。
Posts
