Bài 10 Thiết kế web bằng Photoshop - - Rollover

Thiết kế web bằng Photoshop - Bài 10 - Rollover

Giới thiệu Rollover

Bài 10A – Tạo button over từ Style và Layer Comps

Nhấn Shift và chọn các layer button
Vào menu Layer > Chọn New Layer Based Slices để tạo ra các slices cho các button
Vào menu Window mở bảng Style lên
Nhấn vào list menu panel   của panel Style chọn Web Styles để mở danh sách các style có sẵn dành cho web nhấn vào 1 style nào đó để áp dụng cho các button trong bảng thiết kế của mình. Lúc này bên bảng layer hiển thị các effects được áp dụng cho button, Bạn có thể chỉnh sửa các effects này.

Create New Layer Comp

Vào menu Window mở bảng Layer Comps lên chọn Create New Layer Comp
Đặt tên cho Layer Comp này là menu (Visibility – tính chất của layer,Position – Vị trí của layer, Appearance – Sự xuất hiện của layer)
Chọn 3 chức năng này thì các button sẽ hiển thị đúng vị trí đang thiết kế cùng các hiệu ứng của nó. Nhấn OK để lưu lại.
Tiếp tục chọn Create New Layer Comp để tạo chế độ Over cho menu.
Đặt tên cho Layer Comp này là menu_over
Trong bảng Layer Comps xuất hiện thêm một Layer Comp nữa làmenu_over.

Apply Next Selected Layer Comp

Chọn layer comp menutrong bảng Layer Comps nhấn Apply Next Selected Layer Comp tiếp theo chọn một style khác trên bảng Styles để áp dụng cho chế độ bình thường của menu sau đó nhấn Update Layer Comp

Xem clip hướng dẫn

Bài 10B – Tối ưu hóa các button

Sau khi tạo xong các chế độ cho menu Bạn cần phải tối ưu chúng, bài 10C sẽ hướng dẫn Bạn cách tối ưu menu cho web site của mình.
Chọn công cụ Slices Select Tool click chuột phải vào button cần tối ưu chọn Edit Slice Option… đặt tên cho button tại Name rồi nhấn OK tiếp tục cho các button còn lại.
Chọn layer comp menu_over trong bảng Layer Comps sau đó vào File > Save for Web & Devices… chọn công cụ Slices Select Tool nhấn Shift chọn các button cần lưu, chọn định dạng cho file sau khi lưu tại vùng Preset.

Xem clip hướng dẫn:

Bài 10C – Cài đặt Script over cho button

Sau khi chọn định dạng cho file cần lưu hãy lưu file này lại. Mở thư mục Bai10_Rollover\10_04_installscript copy file Layer Comps to Slices.jsx vào thư mục C:\Program Files \Adobe\Adobe Photoshop CS5\Presets\Scripts và khởi động lại Photoshop (đây là file script cho phép xuất các button ra các chế độ hiển thị cho button).

Xem clip hướng dẫn:

Bài 10D – Sử dụng Script tạo chế độ cho over cho button

Mở file roll1.psd làm lúc nãy vào File > Script > Layer Comps to Slices
Chọn folder để lưu các file button này > nhấn OK sau khi lưu xong  bảng Done hiện ra nhấn OK và mở Folder lưu button ra kiểm tra sẽ thấy xuất hiện các chế độ của các Button mà Bạn thao tác trước đó.

Xem clip hướng dẫn:

Bài 10E – Tạo button rollover từ Layer và Layer Comp

Mở file roll4.psd
Nhấn Shift chọn các layer button
Vào Layer > Chọn New Layer Based Slices để tạo ra các slices cho các button
Tắt Folder aqua buttons trong panel Layer, nhấn Create New Layer Comp đặt tên cho chế độ bình thường của menu.
Tắt folder outlined buttons trong panel Layer nhấn Create New Layer Comp đặt tên cho chế độ over của menu.
Thêm các effect vào các layer trong folder outlined buttons và nhấn Create New Layer Comp và đặt tên cho chế độ down của menu.
Tiếp theo vào File > Script > Layer Comps to Slices > chọn folder để lưu các file button này.

Mọi thắc mắc tong quá trình thực hành xin gửi e-mail về info@polygon.vn chúng tôi sẽ giải đáp thắc mắc cho Bạn.Chúc các Bạn thành công.
Download bài tập thực hành trên ziddu.com
Download bài tập thực hành trên Mediafile
File name: Bai10_Rollover.rar - File size: 26.97 MB