Biểu tượng web - thiết kế căn bản với Illustrator (P1) - 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 (P1)

Adobe Ilustrator

Typography

Thủ thuật

Icon

Màu sắc

Ứng dụng

Trong bài viết dưới đây, chúng ta sẽ cùng tìm hiểu về cách tạo biểu tượng web. Từ những hình khối cơ bản nhất, chúng ta có thể tạo ra các mẫu icon vô cùng độc đáo. Chúng được dùng để làm nổi bật blog, biểu mẫu, tài liệu kĩ thuật số, thiết kế tương tác,…Và với mục tiêu thú vị đó, phần mềm Adobe Illustrator sẽ là lựa chọn hoàn hảo cho bạn!

Hãy sử dụng các công cụ tạo hình trong Illustrator để kết hợp khéo léo các dạng vector. Qua đó, bạn có thể tạo nên các dạng icon hấp dẫn cho dự án tiếp theo.

Trong thiết kế mẫu dưới đây, chúng tôi tạo ra biểu tượng camera. Icon này được dùng tương tự như một ảnh hồ sơ trên mạng xã hội. Đi kèm với chúng là nút dẫn đến portfolio trên resume online.

1. Chuẩn bị cho thiết kế biểu tượng

Bạn hãy bắt đầu bằng việc tạo một thư mục mới.

Nhấn nút New để khởi động màn hình, hoặc chọn File > New.

Chọn Profile: Web và click OK.

2. Tạo kiểu dáng cơ bản cho biểu tượng

Đầu tiên, bạn cần vẽ phần thân camera.

Chọn công cụ Rectangle trên bảng Tools. Click và kéo một hình chữ nhật vào bảng vẽ.

Vẽ một hình chữ nhật thứ hai, nhỏ hơn và nằm trên hình thứ nhất như bạn thấy trong ảnh phía dưới.

Bạn có thể sử dụng Smart Guides để sắp xếp các hình chữ nhật. Nhờ vậy, cột trung tâm của chúng sẽ trở nên ngay ngắn. Gõ V để truy câp công cụ Selection. Kéo hình chữ nhật nhỏ lên trên hình lớn đến khi xuất hiện cột hướng dẫn màu đỏ. Xem thêm về thao tác với Smart Guide cho Illustrator tại Sử dụng Smart Guide cho Illustrator.

Tiếp theo, bạn hãy thêm vào hiệu ứng flash.

Nhấn và giữ công cụ Rectangle để chọn các kiểu dáng khác. Click chọn công cụ Ellipse. Click và kéo vòng tròn cho đến khi hướng dẫn hình chữ thập xuất hiện. Điều đó cho thấy bạn đã vẽ được vòng tròn hoàn hảo. Thả chuột khi vòng tròn đạt kích cỡ hợp lí.

Tip: Để điểu chỉnh lại tỉ lệ kích thước vòng tròn, nhấn Shift và kéo công cụ chỉnh góc.

Nếu cần thiết, gõ V để truy cập công cụ Selection. Căn chỉnh lại vị trí hình tròn bên trong hình chữ nhật lớn.

Bây giờ, hãy vẽ hình dáng ống kính.

Với công cụ Ellipse được chọn, đưa chuột lên phía trên hình chữ nhật lớn đến khi cột trung tâm hiện ra. Nhấn Alt/Option. Kéo một vòng tròn vẽ từ trung tâm. Để ý tới hướng dẫn hình chữ thập và thả chuột khi vòng tròn có kích cỡ hợp lí.

Vẽ vòng tròn nhỏ hơn ở bên trong. Click vào cột trung tâm hoặc kéo chúng lên hình tròn lớn. Dừng lại khi giao tuyến hay cột trung tâm xuất hiện. Thả chúng vào đúng chỗ.

3. Kết hợp hình dạng tạo thành biểu tượng

Ở bước này, bạn sẽ kết hợp các dạng của hình chữ nhật.

Với công cụ Selection, chọn hình chữ nhật lớn. Sau đó, nhấn Shift, click hình chữ nhật nhỏ để chọn cả hai. Chọn công cụ Shape Builder và kéo một đường nối giữa hai hình như ảnh dưới đây.

(còn nữa)

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

Đặc biệt, bạn có thể nâng cao kĩ năng thiết kế với khóa hoc 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.