[TUT] Design bộ icon web với Adobe Illustrator

Tiêu đề có vẻ nói chung chung quá nhưng chắc biết phải miêu tả làm sao. Nói chung thành quả là như thế này
 

Đây là bài sưu tầm do mình dịch nên sẽ có phần hơi khó hiểu do không phải dân chuyên mong mọi người thông cảm

Làm theo các bước sau đây sẽ giúp bạn thiết kế một bộ icon theo phong cách “grunge” như trên. Sẽ cần sử dụng đến khá nhiều dạng cọ vẽ (Art brushes) và cũng sẽ sử dụng đến Pathfinder Panel

Bước 1

Mở một trang vẽ mới dùng Rectangle Tool (M) để vẽ một hình vuông có kích thước 90×90 px và tô màu nền bất kì. Copy và dán hình vuông này đặt chồng lên nhau, xóa màu nền của hình vuông vừa mới copy, đặt viền màu dày 1 pt. Tiếp tục chọn Scissors Tool (C) và click vào 4 góc của hình vuông thứ 2 để cắt hình vuông thành các đoạn. Mình sẽ làm cho các đoạn này có màu khác nhau để các bạn tiện theo dõi.

Bước 2

Chọn đoạn màu hồng và chọn đoạn này một mẫu cọ vẽ tên là Charcoal-Thick, bạn có thể tìm thấy mẫu này tại Brush Libraries > Artistic > Artistic_ChalkCharcoalPencil. Áp dụng mẫu này tương tự với đoạn màu xanh dương. Chọn đoạn màu cam và áp dụng mẫu cọ Chalk-Scribble (cũng nằm trong Artistic_ChalkCharcoalPencil). Còn đoạn màu xanh lá cây, mình sẽ sử dụng mẫu cọ Dry Brush 8 (Artistic > Artistic_Paintbrush). Độ dày của tất cả các đoạn nói trên đều là 1 pt. Bạn cũng có thể chọn các mẫu cọ khác nếu như bạn muốn.

Bạn cũng có thể tùy chỉnh để xoay các mẫu cọ này theo kiểu nằm dọc theo đoạn thẳng hay nằm ngang khi click vào Stroke Options ở Appearance Panel

Bước 3

Copy và paste đoạn bên trái chồng lên nhau, xóa mẫu cọ của đoạn vừa copy. Chọn màu viền của đoạn là màu trắng, mở Brush Libraries > Artistic > Artistic_Ink, tại đây bạn sẽ thấy một mẫu cọ là tên là Galaxy, chọn mẫu cọ này cho đoạn vừa copy (1). Làm tương tự với đoạn bên dưới nhưng chọn mẫu cọ là Fire Ash cũng nằm trong Artistic_Ink (2). Độ dày của 2 đoạn này đều đặt là 1 pt.

Tiếp tục copy và paste đoạn bên dưới chồng lên thêm một lần nữa và chọn mẫu cọ Dry Brush 2 (Artistic > Artistic_ChalkCharcoalPencil) cho đoạn này. Đặt độ dày cho đoạn này là 0.5 pt (3).

Tiếp tục, dùng Pen Tool (P) và vẽ một đoạn đi qua góc trên bên phải của hình vuông giống như hình dưới đây. Chọn mẫu cọ tên là Chalk trong Artistic > Artistic_ChalkCharcoalPencil và đặt độ dày là 2 pt

Bước 4

Ẩn tất cả các đoạn màu trắng đi. Chọn tất các đoạn đã áp dụng mẫu cọ có màu hồng, vào menu Object và chọn Expand Appearance. Tiếp tục chọn các đối tượng màu hồng và hình vuông màu xanh lá, sau đó vào menu Window chọn Pathfinder Panel. Nhấn giữ phím Alt và chọn nút lệnh Unite, rồi click Expand, bạn sẽ thấy kết quả là các đối tượng đã được gộp lại (1).

Hiện lại các đoạn màu trắng. Chọn các đoạn này và vào menu Object và chọn Expand Appearance. Tiếp tục chọn tất cả các đối tượng và trở lại với Pathfinder Panel. Nhấn giữ phím Ctrl và chọn nút lệnh Minus, rồi click Expand (2).

Bước 5

Tô màu nền cho hình đã tạo với hiệu ứng chuyển màu radial theo hình. Sau đó vào Appearance Panel, click Add New Fill. Áp dụng hiệu ứng chuyển màu thứ 2 theo hình, các màu vẫn không đổi chỉ đổi vị trí thôi. Chọn màu nền vừa mới được tạo trong Appearance Panel, vào menu Effect > Path > Offset Path, ở phần Offset gõ vào -2 px.

Vẫn chọn màu nền thứ 2 vừa mới tạo, vào menu Effect > Distort, chọn Glass. Thiết lập theo các thông số như hình và ở phần Texture, chọn Frosted. Tiếp theo, vào menu Effect > Stylize, chọn Feather. Sau đó chuyển chế độ Blending sang Soft Light.

Bước 6

Hãy tiếp tục với phần biểu tượng. Bạn có thể tìm thấy biểu tượng mình cần trong Symbol Libraries. Khi đã tìm thấy biểu tượng mình cần, chỉ cần kéo – thả nó ra ngoài và click vào nút Break Link to Symbol ở Symbols Panel.

Bước 7

Về biểu tượng Home, bạn cần chọn biểu tượng này và Ungroup nó 2 lần và kết quả là bạn nhận được 3 khối hình (gồm 1 ngôi nhà và 2 cửa sổ). Chọn tất cả, mở Pathfinder Panel, nhấn giữ Ctrl và click nút Minus rồi click Expand. Vậy là được một hình khối duy nhất.

Nếu bạn biết cách khác thì cũng có thể làm theo cách của bạn, miễn sao ra kết quả tương tự là được.

Đó là đối với icon Home, tùy vào icon mà có cách xử lí khác sau.

Bước 8

Sau khi đã chuẩn bị icon xong, chọn màu nền là màu trắng, sau đó click Add New Fill ở Appearance Panel. Đặt màu nền mới tạo ở phía dưới màu nền trắng, chọn màu xám cho nền mới tạo rồi vào Effect > Blur, chọn Gaussian Blur và thiết lập lại Radius là 3.0 px.

Sau đó bạn có thể bắt đầu viết chữ, font chữ phù hợp cho dạng icon này là font Cataclysmic, bạn có thể download tại đây.

Cuối cùng bạn chỉ cần copy và điều chỉnh lại màu đối với các icon khác