Biểu tượng web - thiết kế căn bản với Illustrator (P2) - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Biểu tượng web – thiết kế căn bản với Illustrator (P2)

Adobe Ilustrator

Typography

Thủ thuật

Icon

Màu sắc

Ứng dụng

(tiếp theo)

Sau bài viết phần 1, ở phần 2 này, chúng ta sẽ cùng tiếp tục tìm hiểu các bước để tạo nên một biểu tượng web độc đáo. Các tip chúng tôi đưa ra tuy ngắn gọn nhưng sẽ hết sức hữu ích. Qua đó, hi vọng rằng, bạn sẽ thiết kế được icon thú vị cho website của riêng mình.

4. Thêm màu sắc vào biểu tượng web

Bây giờ, bạn cần thêm vào màu sắc hoàn chỉnh và các đường vẽ tượng trưng cho hình dạng.

Nhấn V để trở lại công cụ Selection. Chọn phần thân camera. Nhấn mục Fill Color trên bảng Control. Chọn một màu sắc trển bảng Swatches. Sau đó, click mục Stroke. Chọn None để xóa đi đường kẻ.

Lặp lại thao tác với vòng tròn flash. Sử dụng màu trắng và không đường kẻ.

Để tô màu ống kính, trước hết, chọn vòng tròn bên ngoài. Nhấn Shift và click để chọn vòng tròn thứ 2. Sử dụng đường trắng và không màu nền. Tăng độ rộng Stroke lên 5 pt.

5. Sử dụng chỉnh sửa lần cuối cho biểu tượng

Bạn có thể khoanh tròn góc hình vẽ để tạo cái nhìn khác biệt.

Chọn thân camera. Nhấn A để trở lại công cụ Direct Selection. Kéo công cụ làm tròn góc để sử dụng cho nhiều góc cùng lúc.

6. Lưu biểu tượng để xuất ra web

Ở bước cuối, bạn hãy copy và paste sản phẩm ra thư mục mới để xuất file.

Chọn Select > All để chọn toàn bộ hình vẽ. Nhấn Control/Command+C để sao chép chúng.

Chọn File > New và nhấn Profile: Web. Cài đặt chiều cao và chiều rộng đến kích thước mà bạn mong muốn cho hình ảnh cuối. Ví dụ: 400 px x 400 px – kích thước phù hợp cho ảnh đại diện trên Twitter.

Nhấn Control/Command+V để dán sản phẩm vào trung tâm bảng vẽ.

Nếu muốn điều chỉnh kích thước icon dựa trên bản vẽ, nhấn Alt/Option+Shift. Kéo một góc để điều chỉnh chúng theo tỉ lệ từ trung tâm.

Chọn File > Save for Web.

  • Trong menu Preset, chọn JPEG High. Chọn PNG-8 để hoàn thiện background.
  • Chọn Art Optimized trong menu kéo.
  • Chọn Clip to Artboard.

Click Save để xuất hình ảnh của bạn đến blog, website hay xuất bản kĩ thuật số.

Đừng quên học hỏi thêm về việc lưu tác phẩm dùng cho web.

Chúc các bạn thành công!

Xem thêm tại Thiết kế icon cho website với Adobe Illustrator – P1.

Đặc biệt, bạn có thể nâng cao kĩ năng thiết kế với khóa học từ giảng viên quốc tế trường Arena Multimedia Học thiết kế banner quảng cáo với Photoshop, Ilustrator, Animate.