War-Style Game Buttons

26/07/2012

“Thừa thắng xong lên” sau khi có một số kỹ năng psd nho nhỏ từ bài trước Tạo Glass Button cho web, mình sẽ tiếp tục chỉ các bạn yêu photoshop và là tín đồ của game cách tạo ra một menu web game vừa bí ẩn lại rực sáng như chính sự lôi cuốn và hấp dẫn của nó vậy.

War style game button

Bước 1:  Bạn tạo ra trang mới với kích thước chừng 400 x 400 px, và tô màu # 0e0b06. Sau đó dùng công cụ Rectangular Marquee Tool tạo một vùng chọn với kích thức w: 100px, h: 1px và tô màu #e39206.

War style game button

Bước 2: Nhân đôi layer này (Ctrl + J)  và di chuyển nó xuống khoảng 15 -20px. Sau đó Merge chúng lại.

War style game button

Tiếp theo áp dụng hiệu ứng ánh sáng cho nó, bạn vào Filter > Blur > Motion Blur chọn tỉ lệ 100px, bạn sẽ được kết quả như sau:

War style game button

Bước 3:  Nếu khoảng cách giữa hai dòng là 15px thì bạn dùng Rectangular Marquee Tool vẽ một hình chữ nhật với chiều cao là 13px, chiều rộng ngang như hình dưới

War style game button

Sau đó tô màu  #115272.

War style game button

Áp dụng hiệu ứng Motion Blur  một lần nữa và nhớ giảm opacity xuống nhé.

War style game button

Bước 4:  Tạo layer mới và Merge tất cả các lớp lại với nhau. Sau đó dùng grunge bruhs xóa một vài bit trên cả hai thanh màu cam và màu xanh.

War style game button

Đẹp hơn phải không nao?

Bước 5: Chúng ta đã làm xong phần menu, giờ thì tạo hiệu ứng cho chữ

Với chữ bạn thiết lập các thông số như sau:

Font: Tahoma
Size: 11 pt
Anti Aliasing: None
Color: #dc8e06

Và áp dụng Drop shadow:

Blen mode: Multiply
Angle: 120, chọn Use global light
Distance: 1px
Spread: 0
Size: 1px

Gradient:

Blend mode: Overlay
Opacity: 40px
Gradient: chuyển màu đen sang trắng
Style: linear. chọn Align with layer
Angle: 90px

War style game button

Cuối cùng bạn chỉ việc nhân đôi layer và thay đổi đoạn text nữa là xong

War style game button

Kết quả thật mỹ mãn phải không nào, qua 5 bước đơn giản và chỉ mất vài phút bạn đã có thể tự thiết kế cho mình một menu game cực đẹp rùi.

Hãy từng bước làm theo để nâng cao tay nghề psd của mình bạn nhé. Chúc các bạn thành công

Chuyên Mục:

Bài viết được đăng bởi tracy

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !

Comments are closed here.