CÁCH TẠO NÚT BẤM ĐỘNG

Một phần của tài liệu Sổ tay photoshop 2006 part 10 pdf (Trang 68 - 77)

( ứng dụng web - sử dụng Image Ready)

1.) Mở Image Ready , tạo 1 file mới kích thước phù hợp với nút bấm mà bạn muốn thiết kế

2.) Nhấn chuột trái và giữ im vào vị trí công cụ Maquee Tool - để xuất hiện các công cụ trong menu này .

3.) Vẽ lấy hình nút bấm bất kỳ

4.) Tạo layer mới

5.) Chọn công cụ Gradient Tool chọn lấy một màu bất kỳ và tô màu cho nút bấm

7.) Vào Windown > Rollovers . Kích chuột vào nút bấm hình con trỏ chuột ( hình ) .

9.) Kích chuột vào biểu tượng icon như hình dưới đây - bạn sẽ tạo ra được Layer Down State

Ý nghĩa của nó như sau : Khi bạn chưa rê chuột vào nút bấm thì nút bấm sẽ có hình dạng là layer

Untitled-1_Layer 1 . Khi bạn rê chuột lên nút bấm thì nó sẽ xuất hiện hình nút bấm của Layer Over State . Khi bạn kích chuột vào nút bấm thì nút bấm sẽ hiện ra hình trên layer Down State . Do tính

chất hoạt động của nó như vậy cho nên chúng ta sẽ đổi màu hoặc hình dạng cho 3 Layer trên . Tôi sử

dụng các Style để đổi mẫu cho các layer trên như sau .

10.) Vào Windown > Slice .

Bảng thông tin Slice cho phép ta chỉnh sửa các thông tin cho nút bấm - việc này có liên quan đến HTML

11.) Sau khi chỉnh sửa thông tin cần thiết cho nút bấm , bạn hãy kích chuột vào biểt tượng IE để xem

12.) Sau khi hoàn thành thì bạn hãy save lại với file tên là index hoặc tên bất kỳ , và trong ô Save as type các bạn chọn HTML and Images (*html) - sau khi save - IR sẽ tạo ra 1 file index.html và 1

folder chứa hình ảnh các nút bấm tên là Images .

Trích:

nhân đây xin hỏi các bạn mấy câu. Mình cũng muốn làm nút thay đổi mầu khi click chuột vào. Nhưng ở đây mình muốn làm khi click vào chữ sẽđổi mầu chữ thì làm thế nào. Chú ý là chữ này là chữ dùng Ps

để viết trên button.

Cảm ơn các bạn.

=== Trả lời ;

1.) bạn hãy mở photoshop ra và thiết kế một kiểu nút bấm tùy ý bạn , sau đó bạn tạo ra 2 dòng text cho nút bấm , layer text thứ nhất bạn để màu nào cũng được , layer text thứ 2 bạn phải chọn một màu khác. OK - hình

2.) nhấn Ctrl+shift+M hoặc kích chuột vào nút bấm này để nhảy qua ImageReady 3.) trong IR bạn hãy vào Windown > Web content để mở bảng thông tin web content - hình

4.) kích chuột vào biểu tượng new layer :

5.) Sau đó tạo ra 4 layer ( kích chuột 4 lần vào Icon new layer ) , bạn sẽ được các layer có tên lần lượt là ;

Over ; Down ; Select ; Out.

và layer Down chính là layer chứa thông tin khi bạn kích chuột lên nút bấm , do đó ta sẽ lợi dụng nó - làm như sau

6.) trên layer Over ; Select ; Out , bạn hãy cho layer text màu trắng xuất hiện - hình

7.) trên layer Down bạn hãy cho layer text màu đen xuất hiện , tắt layer text màu trắng nếu nó nằm trên layer text màu đen. Nếu như bạn làm việc này với layer Over thì bạn chỉ cần rê chuôộ chạm vào nút bấm

8.) Sau khi xong xuôi thì bạn hãy vào File > Save Optimized để xuất file. Nên xuất ra Html và image

Một phần của tài liệu Sổ tay photoshop 2006 part 10 pdf (Trang 68 - 77)