登入框是網站與使用者第一次「握手」的介面，設計得好不好直接影響使用者留存。這篇教學將示範如何用 Photoshop 繪製一組具備漸變光感、立體按鈕與輸入框的登入介面，重點運用漸變工具、圖層蒙版與圖層樣式，適合想強化 UI 設計基本功的設計師練習。

完成效果預覽

Step 1：建立畫布

新建 800×600 px、解析度 72 dpi、RGB 色彩模式的文件，背景設為白色。

Step 2：背景徑向漸變

新建圖層「背景」，選取漸變工具（G）設為徑向漸變。編輯漸變：左色停 RGB(252,253,255)，右色停 RGB(226,239,255)，從畫布中心向外拉出，營造柔和的聚光感。

Step 3：登入框主體圓角矩形

新建圖層，用圓角矩形工具繪製登入框外框，大小依設計稿調整。

Step 4：主體漸變填充

同樣用徑向漸變填充主體：左色停 RGB(135,194,254)，右色停 RGB(47,146,250)。Ctrl+Enter 轉選區後，Shift 鍵繼續拖出圓角矩形選區疊加，最後 Ctrl+D 取消選區，形成豐富的層次。

Step 5：內部高光帶

新建圖層 2，再畫一個稍小的圓角矩形，前景色設白，同樣 Ctrl+Enter 轉選區、Ctrl+D 取消，形成頂部高光帶，增強立體感。

Step 6：複製圖層製作陰深層次

按住 Alt 鍵拖動圖層 3 複製一份，利用移動工具微調位置，疊加出微妙的邊緣陰影。

Step 7-8：輸入欄位標籤

橫排文字工具輸入「用戶名」與「密碼」，字體：黑體、18 pt、白色、無消除鋸齒，簡潔有力。

Step 9-10：登入按鈕

新建圖層畫圓角矩形，Ctrl+Enter 轉選區後執行「編輯 > 描邊」，寬度 1 px、白色。輸入「登陸」文字，樣式同標籤。

Step 11-13：裝飾光暈與蒙版

新建圖層 3 用橢圓工具畫白橢圓，Shift+I 羽化 50 px，前景色 RGB(120,199,254) 填充。複製圖層 1 並添加蒙版，用漸變工具在蒙版上拉出漸變，形成柔和的光暈消退效果，畫面瞬間擁有呼吸感。

完成成果

透過漸變層疊、蒙版控制光影範圍、描邊勾勒邊緣，短短幾十步便完成一組視覺層次豐富、質感細膩的登入框設計。同樣邏輯可延伸至註冊框、彈窗、表單等 UI 元件，歡迎舉一反三。