Thiết kế nhãn cho Web 2.0 bằng Photoshop

13/10/2012

Thiết kế nhãn cho Web 2.0 bằng Photoshop
Hầu hết các Web 2.0 đều sử dụng các nhãn (label/badges) như hình trên , để thông báo cho người dùng những phiên bản hiện tại của các dịch vụ web. Việc tạo ra các nhãn này rất đơn giản và dễ thực hiện. Các bạn chỉ cần thực hiện các bước sau đây :

Bước 1 : Tạo một file mới với kích thước 400 x 200 px, Chọn cộng cụ Custom Shape Tool (U)

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Và từ menu dropdown các bạn chọn và vẽ hình như hình bên dưới :

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Bước 2 : Đặt tên layer này là ” Star Label ” , sau đó click chuột phải vào layer này và chọn Blending Options , sau đó thiết lập các thông số  sau :

Drop Shadow

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Inner Shadow

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Bevel and Emboss

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Gradient Overlay

Thiết kế nhãn cho Web 2.0 bằng Photoshop
Thiết kế nhãn cho Web 2.0 bằng Photoshop

Bước 3 : Tạo một layer mới, chọn công cụ Horizontal Type Tool (T) và gõ dòng chữ mà bạn muốn hiển thị. Ở đây mình ghi là Beta! .

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Và bạn cũng áp dụng thuộc tính Blending Options cho layer chữ này như sau :

Drop Shadow

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Gradient Overlay
Thiết kế nhãn cho Web 2.0 bằng Photoshop
Thiết kế nhãn cho Web 2.0 bằng Photoshop

Bước 4 : Nhấn giũ nút Ctrl + Click chuột vào layer ” Star Label “, lúc này màn hình sẽ xuất hiện vùng lựa chọn xung quanh nhãn. Tạo một layer mới, và đặt nó ở trên cùng so với các layer khác, sau đó đặt tên là ” Glossy

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Chọn công cụ Polygonal Lasso Tool (L) ,nhấn giữ ALT, sau đó vẽ hình như bên dưới.

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Chọn công cụ Pain Bucket Tool(G) rồi đổ màu trắng (#ffffff) vào vùng lựa chọn mà ta vừa tạo được, sau đó giảm Opacity của layer Glossy xuống còn 15%. Và đây là kết quả mà chúng ta sẽ nhận được.

Thiết kế nhãn cho Web 2.0 bằng Photoshop

Vậy là đã hoàn tất rồi đó các bạn, rất đơn giản và dễ thực hiện phải không nào. Hy vọng các bạn sẽ có thêm nhiều sự sáng tạo về màu sắc cũng như hiệu ứng để làm trang web của mình thêm đẹp và sinh động hơn.

Chúc các bạn thành công !

Chuyên Mục:

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

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