Tạo một Button bóng nhoáng.

[Bocaprebel]

Một thứ không thể thiếu trong mỗi Website đó là các nút di chuyển trên menu. Trong bài viết này, các bạn sẽ được hướng dẫn từng bước cách tạo nên một Nút di chuyển thật bóng, đẹp.

Một thứ không thể thiếu trong mõi Website đó là các nút di chuyển trên menu. Trong bài viết này, các bạn sẽ được hướng dẫn từng bước cách tạo nên một Nút di chuyển thật bóng, đẹp.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/menu_01.gif

Tạo một file mới đủ chứa nội dung mà bạn đặt làm Nút di chuyển trên thanh Menu.

Chọn công cụ Shape Tool và chọn 'rounded corner' shape tool như bên dưới. Đặt Radius bằng 15px.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/shapes.gif

Vẽ lên 1 Shape.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/1.gif

Bây giờ, sử dụng hình mà bạn vừa tạo để làm việc.

Mở Layer Styles ( Layer -> Layer Styles hoặc kích đúp vào Layer trên Layer Palette). Lần lượt đặt các hiệu ứng sau:

Drop Shadow:

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/3.gif

Inner Shadow

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/5.gif

Inner Glow

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/5.gif

Color Overlay:

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/6.gif

Stroke:

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/7.gif

Sau các bước trên bạn sẽ thu được hình như thế này.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/2.gif

Bây giờ, sử dụng công cụ Shape Tool 1 lần nữa, tạo 1 ống nhỏ hơn trên đầu Nút mà bạn đang làm. tô màu trắng cho nó như hình dưới.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/9.jpg

Tiếp theo, đặt chế độ Blend cho Layer bạn vừa tạo thành "Overlay" và giảm Opacity xuống còn 30%

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/overlay.gif

Và đây là sản phẩm của bạn! Thật tuyệt phải không?


http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/11.jpg

Bạn có thể nhân nó lên,dùng nó cho thanh Menu hay các điểm Neo trong Website của mình.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/12.jpg

Bạn dùng Slice Tool,

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/slice.gif

Bạn hãy vào phần View trên thanh Menu của Photoshop, đánh dấu vào "s***". Nó sẽ gúp bạn cắt Slice với độ chính xác cao bằng cách đóng các đường viền

Bạn dùng Slice Tool và tách rời từng cái Nút ra, mỗi Slice chứa 1 Nút.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/14.jpg

Bây giờ phải xuất các Slice của chúng ta, chúng ta phải Save với đuôi HTML để có thể đọc và sử dụng trên Website.

Hãy vào File và chọn Save for Web.

Để đạt chất lượng tốt nhất bạn nên tham khảo thông số dưới đây

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/optimize.gif

( Kích chuột phải và chọn Save Picture nếu bạn muốn lấy tấm hình này về).

Trong hộp thoại Save, bạn xác định nơi lưu và chọn "Save as type", chọn "HTML and Images (*.html) "

và điền tên file html của bạn.

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/16.jpg

Xong, bạn có thể kích vào Save để lưu lại.

Khi một trang HTML được tạo ra, sẽ có nhiều hình ảnh, thư mục, và mỗi hình ảnh, thư mục ấy có thể đặt trong 1 Nút của bạn

Nào! bây giờ hãy Copy, chuyển nó thành mã nguồn HTML và đưa vào trong trang web của bạn, Không copy tags

http://itgatevn.com.vn/pictures/web/news/_resize/633026356057731250/17.jpg
header/body.

Nguồn Itgatevn -