Nút thủy tinh với illustrator CC

Những kiểu nút này tiếng Anh gọi là shiny buttonaqua button, hoặc Glass button, được ứng dụng rất nhiều trong các giao diện Web hay phần mềm do độ bóng đẹp lung linh của nó. Nhưng việc tạo ra thật đơn giản.

TÓM TẮT

Vẽ từ 3 layer
– Layer nút: áp màu gradient từ Cam đến vàng vào hình tròn cho Fill và stroke ngược nhau
– Layer bóng sáng: Áp màu gradient vào hình elipse từ trắng đục (opacity 100%) đến trong suốt
– Bóng đổ: áp hiệu ứng drop shadow cho hình tròn layer “nút”

Quan sát một chút, bạn sẽ nhận ra kiểu nút này được tạo thành từ 4 phần

  1. Phần bóng sáng: phần rất quan trọng, nó tạo ra 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 (có thể không có)

Bước 1: Vẽ nút trước

  • Dùng Elipse tool , giữ phím Shift, nhấn chuột trái, kéo 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 để copy ra thêm 1 hình tròn nằm trên hình tròn trước.
  • Đổi màu Gradient từ màu trắng hơi trong (Opacity=30%) đến màu trắng đục (Opacity= 100%) cũng theo góc chuyển -90o. Chúng ta có 1 mảng màu trắng mờ dần từ trên xuống dưới.
  • Bóp nhỏ, làm dẹp, rồi di chuyển lên gần mép trên hình (giữ phím Shift để di chuyển thẳng)

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

Cũng theo cách này mà áp dụng cho một nút dạng dài

Leave a Reply

Your email address will not be published. Required fields are marked *

sixteen − 11 =