World Of Webmaster
Đăng nhập / Đăng ký
Account
Free for web
Check pagerank
Input check pager (Not http://)

Ext: blog.kai.vn
Check google pagerank
View HTML source
TOPIC
Tạo nút Menu cho web bằng...
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.
›› Tạo nút Menu cho web bằng Photoshop
Post by : boing - Post time: 10/03/2010 - Edit time : 10/03/2010
View : 1734 - Comment : 0
Tags: photoshop  menu  tutorial     

Đây là một trong những menu:

KAI Blog - Tạo menu bằng PS

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:

KAI Blog - Tạo menu bằng photoshop


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.

KAI Blog - Tạo menu bằng photoshop


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.
Trích: hocpsd.com

Ý kiến cho bài này (0) [ Hide ]
Những bài viết liên quan:
Tạo nút bấm với Corel Draw - web button corel draw
Aero glass button : Tạo nút bấm vista bằng photoshop
Thay đổi giao diện trong website sử dụng javascript
Các nguyên lý cơ bản của Design - Học thiết kế
Tạo banner mừng Giáng sinh với Flash CS4
Glossy button - Tạo button web 2.0 với Photoshop
PHP - Lấy thông tin từ website khác
Tutorial ›› Code | Webdesign tutorial | Experience |
Page : 806729
Online :
Visited : 370054
 
Liên h | Thêm vào Favorite | Gửi link qua e-mail | Thông tin website
Copright © 2009 KAI Blog
Code by BOINGOnline. Contact email : contact@kai.vn
Theme: default | classic |