Tạo nút UI game (Shape + Layer Styles)
Vẽ nút bo góc bằng Rectangle Tool, tạo khối nổi bằng Gradient Overlay, Stroke, Drop Shadow và làm đủ 3 trạng thái Normal, Hover, Pressed.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (⌘ Cmd+O).
Nút bấm (button) là phần tử UI có mặt trong mọi game. Vì vẽ bằng Shape (hình vector) nên nút luôn sắc nét ở mọi kích thước, và vì dùng Layer Style nên đổi màu cả bộ nút chỉ mất vài giây.
Mục tiêu
- Vẽ hình chữ nhật bo góc chính xác bằng Rectangle Tool và bảng Properties.
- Tạo khối "nổi" kiểu game: Gradient (Dải màu chuyển) Overlay (Phủ chồng), Stroke, Drop Shadow cứng.
- Tạo 3 trạng thái Normal (bình thường), Hover (rê chuột), Pressed (đang bấm) và xuất từng nút.
Chuẩn bị
Tải nen-man-hinh-game.png – phông menu có khoảng trống ở giữa để đặt nút.
Các bước thực hiện
- Mở file. Nhấn U chọn Rectangle Tool. Options bar (Thanh tùy chọn): chế độ Shape, Fill
#4cc24c, Stroke không màu. - Nhấp một lần lên canvas (không kéo): hộp Create Rectangle hiện ra. Nhập Width 400 px, Height 120 px, các ô Radii (bo góc) 30 px, OK. Đặt tên layer
Button Shape. (Nếu bản của bạn không có ô Radii, vẽ xong thì chỉnh bo góc trong bảng Properties.) - Nhấp đúp vào khoảng trống của layer để mở Layer Style. Gradient Overlay:
#5fd35f→#1e8f3e, Angle 90°. - Stroke: Size 4 px, Position Inside, Color
#0f4d22. - Drop Shadow: Blend Mode (Chế độ hòa trộn) Normal, Color
#0f4d22, Opacity (Độ mờ đục) 100%, Angle 90°, Distance 6 px, Spread 0, Size 0 px – bóng cứng tạo độ dày khối phía dưới nút. OK. - Vệt sáng: vẽ thêm hình bo góc 360 × 36 px, bo 18 px, màu trắng, đặt sát mép trên bên trong nút, Opacity layer 30%, tên
Highlight. - Chữ: T, gõ
PLAY, font dày 56 pt, màu trắng. Thêm Stroke 3 px màu#0f4d22. Chọn cả 3 layer, căn giữa ngang và dọc bằng nút Align của Move Tool (Công cụ Di chuyển). - Vẫn chọn 3 layer, nhấn ⌘ Cmd+G để gom nhóm, đặt tên nhóm
btn_play_normal. - Nhấn ⌘ Cmd+J nhân bản nhóm, đổi tên
btn_play_hover, dời xuống bên dưới. Mở nhóm, nhấp đúp vào hiệu ứng Gradient Overlay củaButton Shape, đổi thành màu sáng hơn#8ef08e→#2fb052. - Nhân bản thêm nhóm
btn_play_pressed: trong Gradient Overlay tích Reverse, tắt con mắt cạnh Drop Shadow, rồi dời cả nhóm xuống 6 px bằng phím mũi tên (⇧ Shift + mũi tên = 10 px). Nút trông như bị lún. - Xuất từng nút: chọn 3 nhóm, nhấp chuột phải chọn Export As (Xuất ra (tùy chỉnh))…, Format PNG, tích Transparency (Độ trong suốt), Export – mỗi nhóm ra một file PNG riêng đúng khít kích thước nút. Lưu PSD.
Kết quả mong đợi
Ba nút cùng kích thước: Normal xanh lá có độ dày khối bên dưới, Hover sáng hơn, Pressed tối hơn và thấp xuống; chữ PLAY nằm chính giữa.
Mẹo & trick học nhanh
Tên kiểu btn_play_normal, btn_play_hover giúp người lắp UI trong Unity tìm file nhanh và không nhầm trạng thái.
Bật và giữ kích thước số chẵn (400 × 120) để mép nút không bị nhòe nửa pixel.
Nhấp chuột phải vào layer > Copy Layer Style, rồi Paste Layer Style lên nút khác để đồng bộ phong cách cả menu.