Tạo nút Menu cho web

Đăng bởi Admin | 24/5/13 | 0 nhận xét

Các bạn sẽ được giới thiệu thêm một cách tạo nút menu nữa cũng khá ấn tượng tuy phải qua khá nhiều bước nên có thể sẽ khó cho những bạn mới làm quen với photoshop.Tuy nhiên chỉ cần một chút cố gắng,một chút đam mê,một chút kiên nhẫn chắc chắn các bạn sẽ thành công.Bài này tôi tham khảo trên photoshoplady.com, dịch và trình bày lại cho các bạn dể hình dung.Nói dịch thì nghe ghê gớm quá vì vốn tiếng Anh của tôi nghèo lắm,chỉ hiểu đại ý rồi thực hiện lại theo cách diễn đạt của mình,những phần nào không cần làm rập khuôn thì tôi sẽ chỉnh lại hoặc bỏ qua.Chúng ta sẽ vẽ nút menu như thế này.

1 - Tạo một file ảnh kích thước khoảng 600px x 200px,độ phân giải 72ppi.
2 - Chọn công cụ Gradient (G) rê chuột từ dưới lên để tô Gradient lên file ảnh như sau:

3 - Dùng công cụ Rounded Rectangle (U) vẽ hình chữ nhật với góc bo khoảng 12px,không cần quan tâm đến màu tô của hình chữ nhật này.

4 - Trên Layer Panel click chuột phải vào ngay chữ "shape 1" và chọn rasterize layer.Dùng công cụ Rectangular Marquee (M) tạo vùng chọn hình chữ nhật tại vị trí như hình minh họa, xong bấm phím Delete,cuối cùng bấm Ctrl - D để hủy chọn.

5 - Trên bảng layer,click vào nút  và chọn Gradient Overlay,thiết đặt thông số cho Gradient Overlay và Drop Shadow như sau:

Và hình kết quả sẽ như sau:

6 - Bấm giữ Ctrl đồng thời click chuột vào hình thumbnails của layer "shape 1" để load vùng chọn,xong chọn lệnh Select \ Modify \ Contract và nhập vào giá tri contract là 1.Tạo thêm một layer mới và tô màu cho layer mới này màu xám mã số #393939,cuối cùng bấm Ctrl - D để hủy chọn,ta có kết quả như sau:

7 - Tạo thêm một layer mới (mặc định sẽ là layer 2),dùng công cụ Elliptical Marquee tạo hình Elip như hình vẽ xong tô màu xanh #17c4de.

8 - Bấm Ctrl - D để hủy chọn.Chọn lệnh Filter \ Blur \ Gaussian Blur với radius khoảng 19.Chọn tiếp lệnh Filter \ Blur \ Motion Blur với Angle=0 và Distance=65.

9 - Tạo thêm một layer mới (layer 3) dùng Rectangular Marquee tạo vùng chọn như hình minh họa và tô màu trắng.

10 - Bấm Ctrl - D để hủy chọn.Chọn lệnh Filter \ Blur \ Gaussian Blur với Radius=9 và lệnh Motion Blur với Angle=0 và Distance=140 ta sẽ được hình như sau:

11 - Vẩn "đứng" ở layer 3,tạo vùng chọn hình chữ nhật như hình vẽ,xong bấm Ctrl - Shift - I để đảo chọn sau đó bấm phím Delete ta được hình sau:

12 - Tạm thời để nguyên mọi thứ ở đó.Tạo một file mới kích thước 3px x 3px,độ phân giải 72ppi và nền trong suốt (transparent).

13 - dùng công cụ Zoom hoặc bấm phím Ctrl + (phím dấu cộng) nhiều lần để phóng to ảnh này lên 800%.Dùng công cụ Pencil với độ lớn nét vẽ là 1px,chọn màu foreground là màu đen xong click chuột vào 3 ô vuông nhỏ theo đường chéo như hình minh họa,các ô vuông còn lại vẫn giữ trong suốt.

14 - Chọn lệnh Edit \ Define pattern,nhập tên cho pattern là "duong cheo" (tạm gọi như vậy) xong đóng file này lại không cần lưu vì chúng ta chỉ cần pattern.Các bạn có thể không cần nhập tên cho pattern.

15 - Trở lại file chính ban đầu,Tạo thêm layer mới (layer 4),vẽ vùng chọn hình chữ nhật như hình minh họa.Chọn lệnh Edit \ Fill.Trong cửa sổ fill,mục USE bạn chọn là pattern và mục CUSTOM PATTERN bạn chọn pattern là loại mình vừa tạo ở bước 13.

16 - Tạo thêm một layer mới (layer 5),phóng to ảnh lên khoảng 400%,dùng công cụ Pencil nét vẽ lớn 1px,màu foreground là trắng xong click chuột để tạo một điểm màu trắng trên file ảnh.

17 - Nhân bản layer 5 ra thêm 5 layer nữa và sắp xếp lại như sau: 

18 - Layer trên cùng đang được chọn,bấm Ctrl - E 5 lần để gộp các "layer điểm trắng" này lại thành 1, khi đó các điểm màu trắng này chỉ thuộc một layer tên layer 5,xong bấm Ctrl - J để nhân đôi chúng,ta sẽ được layer 5 copy.Chọn lại layer 5, xong chọn lệnh Filter \ Blur \ Motion Blur và nhập Radius là 25.Cuối cùng chọn cả layer 5 và layer 5 copy và chọn công cụ Move để dời chúng vào giữa như hình sau:

19 - Tạo thêm một layer mới (layer 6),Zoom to ảnh lên và vẽ vùng chọn xong fill màu xanh #31b3de như hình bên dưới:

20 - Chọn lệnh Filter \ Blur \ Motion Blur với Angle=0 và Distance=100.Giảm Opacity của layer 6 còn 70%.Copy ra hai layer nữa và sắp xếp lại như bên dưới.

21 - Chọn layer trên cùng (layer 6 copy 2),bấm giữ Shift và chọn layer "shape 1" để chọn tất cả layer ngoại trừ layer background,xong chọn công cụ Move rồi nhấn giữ phím Shift và Alt đồng thời rê chuột sang phải để copy ra thêm hai "nút" nữa,số lượng layer tăng lên khá nhiều.

22 - Chọn công cụ Text, nhập vào các dòng chữ và cuối cùng ta có kết quả như sau:


Không quá phức tạp phải không các bạn,cảm ơn các bạn đã theo dõi.
Chúc các bạn thành công !
                                                                   Theo: hocpsd.com - Thu thuat vi tinh