Thursday, 24 January 2013

[Ai] Tạo nút thủy tinh



Những kiểu nút này tiếng Anh gọi là shiny button (hoặc Aqua button, Glass button), được ứng dụng rất nhiều trong các giao diện Web hay thiết kế do tính hấp dẫn từ độ bóng đẹp lung linh của nó..


1. Chúng rất đa dạng
 

2. Có thể lồng biểu tượng, logo:

 3. Cờ các nước

 

Kiểu nút này được khai thác rất nhiều, chúng ta sẽ lần lược thao tác thêm các dạng phức tạp của chúng ở các bài sau, mức độ hấp dẫn của nút tùy thuộc vào kiểu và độ Gradient thôi, nhưng trước hết hãy thử thao tác trên 1 cái nút ở dạng đơn giản nhất nhé. Nếu quan sát một chút, bạn sẽ không khó nhận ra kiểu nút này được tạo thành từ 4 phần sau đây

 
  1. Phần bóng sáng: phần rất quan trọng, không có nó sẽ không có cảm giác trong suốt của một mặt cầu thủy tinh.
  2. Phần viền: phần này chỉ phụ thêm để làm bật đường viền.
  3. Phần nút: phần tô gradient này tạo cảm giác mặt lưng nút lõm vào trong
  4. Phần bóng đổ: làm bật nút lên khỏi nền
Bước 1: Vẽ nút trước Dùng Elipse tool (giữ thêm phím Shift) vẽ 1 hình tròn, đổ màu Gradient từ Vàng (#ffff00) sang Cam (#ff9600), xoay góc chuyển -90o
 
Bước 2: Tạo mảng bóng sáng
  • Dùng selection tool (V) click chọn hình tròn vừa tạo, nhấn Ctrl_C rồi Ctrl_F để nhân bản ra 1 hình tròn nằm trên hình tròn trước.
  • Đổi màu Gradient từ màu trắng (Opacity=30%) đến màu trắng (Opacity= 100%). Ta có 1 mảng màu trắng mờ dần
  • Bóp nhỏ và dẹp, rồi di chuyển lên gần mép trên hình
 
Bước 3: Tạo gờ nổi Bạn có thể nhân bản nút như trên, cho hình tròn ở dưới to ra và đảo ngược hướng gradient. Tuy nhiên trong Ai có 1 cách làm hay hơn đó là Add New Fill trong bảng lệnh Appearance




  • Mở bảng lệnh Appearance (Window > Appearance Shift_F6) và Add New Fill trong menu option.
  • Trong bảng lệnh Appearance có 2 layer Fill, bạn chọn layer Fill nằm dưới rồi chọn Effect > Path > Offset Path như minh họa dưới đây để tăng kích thước phần Fill bên dưới lên 1 chút tạo viền.
  • Đảo chiều Gradient của mảng Fill này 180o
 

Bước 4: Thêm phần bóng đổ Phần này đơn giản nhất, bạn chỉ cần chọn nút rồi vào Effect > Stylize > Drop Shadow.. nhập vào thông số như hình dưới đây




Vậy là xong
Khi đã biết làm nút trên thì nút dưới đây sẽ không quá khó với bạn, thao tác hoàn toàn tương tự, chỉ thêm layer text "Duoc Vang" nằm dưới layer mảng bóng sáng thôi

No comments:

Post a Comment

Blog Archive