Thiết kế Tab cho Web 2.0 bằng Photoshop

Tab thường rất hay được sử dụng trong các trang web hay blog vì sự tiện dụng của nó. Nó giúp bạn tiết kiệm được không gian hiển thị nội dung rất tốt. Hôm nay mình sẽ cùng với các bạn tạo một mẫu tab rất đẹp mắt và đặc biệt là chỉ với vài bước đơn giản.

Bước 1 :

Thiết kế Tab cho Web 2.0 bằng Photoshop

Tạo một file mới, với màu nền là màu trắng (#ffffff) với bất cứ size nào mà bạn muốn (ví dụ 600 x 300 pixel), chỉ cần bạn đảm bảo là file mới này sẽ có dạng hình chữ nhật. Sau đó chuyển sang tab Channels (hoặc vào menu Windows -> Channels) , click chọn Creat new channel ở vị trí góc phải.

Bước 2 :

Thiết kế Tab cho Web 2.0 bằng Photoshop

Chọn công cụ Marquee (M) với Feather: 6px rồi vẽ như hình bên trên. Sau đó nhấn giữ phím Shift + vẽ thêm hình chữ nhật nhỏ nằm ngay bên trên hình ta vừa vẽ. thế là ta sẽ có kết quả như sau :

Thiết kế Tab cho Web 2.0 bằng Photoshop

Sau đó chúng ta chọn công cụ Pain Bucket Tool (G) và đổ màu trắng (#ffffff) vào hình. Rồi nhấn Ctrl + D để hủy bỏ lựa chọn.

Bước 3 :

Thiết kế Tab cho Web 2.0 bằng Photoshop

Nhấn Ctrl + L để để gọi hộp thoại Levels, sau đó kéo các giá trị lại gần với nhau như hình bên trên. Điều này sẽ làm cho hiệu ứng blur sẽ trông gọn gàng hơn.

Bước 4 :
Thiết kế Tab cho Web 2.0 bằng Photoshop

Ở tab channels. Nhấn giữ nút CTRL, click chuột vào layer Alpha 1. (tức là layer chứa hình mà ta vừa tô) . Lúc này vùng lựa chọn sẽ lại xuất hiện. Sau đó chúng ta chuyển qua Tab Layers, tạo một layer mới và chọn công cụ Pain Bucket Tool (G) để đổ màu đen (#000000) vào lựa chọn này. Thực hiện xong bước này, chúng ta sẽ nhận được kết quả như hình bên trên.

Bước 5 :
Thiết kế Tab cho Web 2.0 bằng Photoshop

Xóa bỏ các góc bo tròn ở 2 bên trái phải như hình trên. Các bạn cũng có thể vẽ thêm để cho nó dài ra.
Thiết kế Tab cho Web 2.0 bằng Photoshop

Nhấn giữ Ctrl + Click chuộc vào Layer Thumbnail (là layer chứa hình) để tạo vùng lựa chọn xung quanh bức hình.
Thiết kế Tab cho Web 2.0 bằng Photoshop

Chọn công cụ Rectangular Marquee Tool (M) , đồng thời nhấn nút ALT và vẽ một hình chữ nhật nhừ hình trên.
Thiết kế Tab cho Web 2.0 bằng Photoshop

Lúc này chỉ còn mỗi một lựa chọn nằm ở bên trên. Sau đó chúng ta vào menu Select -> Modify -> Contract, Với Contract : 2px. Chúng ta sẽ có được kết quả như hình bên trên.
Thiết kế Tab cho Web 2.0 bằng Photoshop

Tạo một layer mới, và đổ màu bất kì vào layer này. Sau đó nhấn chuột phải, chọn Blending Options – > Gradiant Overlay với 2 màu lần lượt là #ffffff và #616161. Lúc này bạn sẽ nhận được kết quả như hình bên trên.

Bước 6 :
Thiết kế Tab cho Web 2.0 bằng Photoshop

Tạo một layer mới, chọn công cụ Rounded rectangular Tool (Radius 8px), vẽ một hình chữ nhật như hình bên trên. Sau đó kéo layer mới tạo này nằm phía dưới layer tab . Click chuột phải, chọn Blending Options và thiết lập các thông số sau :

Drop Shadow

Opacity: 31%
Distance: 0px
Spread: 0%
Size: 2px

Bevel and Emboss

Depth: 100%
Size: 0px
Soften: 0px

Gradiant Overlay

Here are the Color stops settings.
Color: #aaaaaa, Location: 0%
Color: #ffffff, Location 100%’

Bước 7 :

Thiết kế Tab cho Web 2.0 bằng Photoshop

Bây giờ các bạn chỉ cần chèn thêm chữ như hình bên trên là hoàn thành công việc.
Các bạn thấy sao, rất đơn giản và dễ thực hiện phải không nào ? Nếu có bất cứ điều gì gây khó hiểu cho bạn ở các bước, thì xin để lại lời nhắn dưới dạng comments, mình sẽ giúp các bạn hoàn thành bài viết trên.

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

thu thuat photoshop thiet ke web photoshop tips jquery tips web 2.0