Hướng dẫn vẽ bộ icon cây xương rồng

Trong bài hướng dẫn hôm nay, chúng ta sẽ đội chiếc nón của người làm vườn và tạo ra một bộ bốn icon cây xương rồng nho nhỏ bằng cách dùng các hình học và công cụ cơ bản trong Adobe Illustrator mà bạn có thể đã dùng trong công việc hàng ngày.

Hơn nữa, đừng quên là bạn luôn có thể mở rộng bản vẽ của mình bằng cách hướng tới GraphicRiver, nơi bạn có thể tìm kiếm một bộ chọn lọc xuất sắc các icon vườn cây.

Chúng ta hãy vào ngay bài hướng dẫn nào!

1. Cách thiết lập một tập tin bản vẽ mới

Giả sử bạn đã mở Illustrator và đang chạy ở nền, hãy mở nó lên và thiết lập một New Document (File > New hoặc Control-N), bài vẽ của chúng ta có các thiết lập sau:

• Number of Artboards: 1
• Width: 800 px
• Height: 600 px
• Units: Pixels

Và từ mục Advanced:

• Color Mode: RGB
• Raster Effects: Screen (72ppi)
• Preview Mode: Default

2. Hướng dẫn thiết lập một lưới tùy biến (Grid Custom)

Chúng ta sẽ tạo ra hình minh họa đó bằng bằng cách sử dụng workflow với pixel-perfect, chúng ta sẽ thiết lập một Grid nhỏ, tốt để có thể kiểm soát toàn bộ hình của chúng ta.

Bước 1

Vào Edit > Preferences > Guides & Grid và điều chỉnh các thiết lập sau:

• Gridline every: 1 px
• Subdivisions: 1

Mẹo nhỏ: Bạn có thể tìm hiểu thêm về lưới bằng cách đọc kỹ bài How Illustrator’s Grid System Works. (Cách vận hành của hệ thống lưới trong Illustrator )

Bước 2

Sau khi đã thiết lập lưới tùy biến, điều chúng ta cần làm để những hình của chúng ta trông chính xác đó là mở tùy chọn Snap to Grid và Snap to Pixel nằm ở menu View, chế độ này sẽ chuyển đổi thành Snap to Pixel mỗi lần bạn đưa vào chế độ Pixel Preview.

Bây giờ, nếu bạn chưa biết nhiều về "tiến độ công việc pixel hoàn hảo", bạn có thể đọc qua bài hướng dẫn của tôi về How to Create Pixel-Perfect Artwork (Cách tạo bản vẽ Artwork pixel-perfect), sẽ giúp bạn mở rộng các kĩ năng chuyên môn nhanh chóng.

3. Hướng dẫn thiết lập các Layers

Khi New Document đã được tạo ra, sẽ rất tốt nếu bạn kết cấu tài liệu này bằng một vài các layer, theo cách này, chúng ta có thể giữ tiến độ công việc ổn định bằng cách tập trung vào một phần của hình minh họa tại một thời điểm.

Mở bảng Layers, và tạo 5 layer và đặt tên như sau:

• layer 1: reference grids
• layer 2: first cactus
• layer 3: second cactus
• layer 4: third cactus
• layer 5: fourth cactus

4. Cách tạo lưới tham chiếu (Reference Grids)

Lưới tham chiếu hay (hay lưới cơ sở) là một tập hợp các bề mặt tham chiếu trong một giới hạn chính xác, cho phép chúng ta vẽ các biểu tượng bằng cách tập trung vào phần kích thước và sự đồng nhất.

Thông thường, kích thước của lưới xác định kích thước thật của các biểu tượng, và đây chính là yếu tố quyết định đầu tiên khi bạn bắt đầu một bài vẽ mới, bạn sẽ bắt đầu từ kích thước có thể nhỏ nhất và vẽ trên chúng.

Bây giờ, trong trường hợp của chúng ta, chúng ta sẽ tạo một bộ biểu tượng icon chỉ với một kích thước, chính xác hơn là 128 x 128 px, một icon khá lớn.

Bước 1

Bắt đầu bằng việc khóa tất cả các layer lại trừ layer "reference grids", và sau đó dùng công cụ Rectangle Tool (M) và tạo một hình vuông 128 x 128 px màu cam (#F15A24), giúp bạn thấy được kích thước tổng thể các hình icon của chúng ta.

Bước 2

Thêm một hình nhỏ hơn 120 x 120 px, màu (#FFFFFF), chúng ta sẽ đặt hình này lên trên hình vừa rồi, đây sẽ là vùng vẽ hiện hành, như vậy 4 px ở bốn cạnh xung quanh là vùng vẽ đệm.

Bước 3

Chọn và nhóm hai hình vuông này lại với nhau bằng phím Control-G, sau đó, canh giữa chúng với phần Artboard nằm bên dưới. Tạo các đường lưới còn lại bằng ba bản sao chép (Control -C > Control-F ba lần) theo phương ngang, cách nhau 40 px, khóa layer hiện tại lại trước khi chuyển qua bước tiếp theo.

5. Cách tạo icon cây xương rồng đầu tiên

Giả sử bạn đã hoàn thành việc tạo các lưới tham chiếu, tiếp tục vào layer tiếp theo (sẽ là layer thứ hai) và bắt đầu bản vẽ bằng cách tạo icon đầu tiên.

Bước 1

Bắt đầu bằng cách tạo cai chậu sứ bằng một hình chữ nhật bo tròn 68 x 32 px với Conrner Radius 8 px, tô màu #E5E5E5 và sau đó canh giữa với vùng vẽ hiện hành nằm bên dưới, đặt cách cạnh dưới 4px.

Bước 2

Tạo nét viền cho hình vừa tạo bằng phương pháp Stroke, bằng cách tạo một bản sao chép của hình đó (Control-C), chúng ta sẽ dán ở trước (Control-F) và sau đó đổi màu thành #3A2E2A. Lật màu Fill của bản sao với nét Stroke của nó (Shift-X), đặt độ dày Weight là 8 px.

Bước 3

Thêm nét chi tiết ngang bằng nét Stroke dày 4 px, dài 68 px, (#3A2E2A), canh giữa với hình thân lớn hơn của cái chậu, đặt nó cách cạnh trên 4 px. Khi đã xong, chọn và nhóm toàn bộ ba hình lại với nhau bằng phím tắt Control-G.

Bước 4

Tạo thân chính của bên phải cái cây bằng một hình chữ nhật 28 x 80 px, (#88AF66), đặt nó lên cạnh trên của cái chậu, cách cạnh phải của vùng vẽ hiện hành 38 px.

Bước 5

Chỉnh sửa hình vừa tạo bằng cách chọn và thiết lập Radius của các cạnh phía trên thành 14 px từ Rectangle Properties của bảng Transform.

Bước 6

Tiếp theo, dành một chút thời gian và vẽ hai nét xéo bằng Pen Tool (P). Dùng nét Stroke 4 px (#6D894E) cho đường thẳng phía trên, theo sau là đường thẳng bên dưới dày 8 px, (#6D894E), thiết lập cả hai có Width Profile là một trong những cái có sẵn trong Illustrator (Width Profile 5)

Bước 7

Group (Control-G) hai nét viền này lại với nhau và tạo mask bằng cách copy (Control-C) của hình nằm bên dưới, dán lên trên (Control-F) và sau đó dùng như một Clipping Mask. Với bản sao chép đặt vào đúng chỗ, chọn cả hai hình và các nét viền, sau đó click chuột phải > Make Clipping Mask.

Bước 8

Vẽ nét viền ngoài dày 8 px bằng phương pháp Stroke, tô màu #3A2E2A.

Bước 9

Thêm đường thẳng dọc bằng nét Stroke dày 4 px, cao 66 px (#3A2E2A) với Round Cap, canh giữa hình này với cạnh dưới của cái cây. Khi đã thực hiện xong, chọn và group (Control-G) tất cả các hình lại với nhau trước khi qua bước tiếp theo.

Bước 10

Bắt đầu thao tác với cái cây bên trái của icon bằng cách tạo thân chính cho nó bằng một hình chữ nhật 28 x 52 px, (#A9D884), thay đổi Radius của các góc bên trên thành 14 px từ Rectangle Properties của bảng Transform. Đặt hình kết quả lên cạnh trên của cái chậu, cách cạnh trái của vùng vẽ hiện hành một khoảng 38 px.

Bước 11

Thêm vào hai đường chéo, giống quy trình đã vẽ cho cái cây bên phải, lật chiều rộng của nét Stroke phía trên để tạo sự đa dạng.

Bước 12

Vẽ viền ngoài dày 8 px, (#3A2E2A), đi theo là nét Stroke dày 4 px, cao 38 px, (#3A2E2A) ở giữa cạnh bên dưới của nó. Khi đã xong, chọn và nhóm toàn bộ các hình tạo thành lại với nhau bằng phím tắt Control-G.

Bước 13

Thêm viên sỏi nhỏ hơn bằng hình elip 14 x 12 px, (#BAB6B3) với độ dày nét viền 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó đặt nó lên cạnh phải bên trên cái chậu, đảm bảo để nó nằm dưới hình lớn hơn (Click chuột phải > Arrange > Send Backward)

Bước 14

Dành một chút thời gian và vẽ hòn đá lớn hơn bằng Pen Tool (P), màu Fill là #9B928E. Vẽ nét viền dày 8 px cho hình kết quả, (#3A2E2A) với Round Join, group (Control-G) và đặt hai hình này đằng sau chậu sứ (click chuột phải > Arrange > Send to back). Ngoài ra, đừng quên chọn và group (Control-G) tất cả các hình mà chúng ta đã có trước khi qua bước kế tiếp.

Bước 15

Bắt đầu thao tác với hình tiền cảnh của icon bằng cách vẽ một nét Stroke dày 8 px, dài 96 px, (#3A2E2A) và Round Cap, chúng ta sẽ canh thẳng góc dưới bên trái với vùng vẽ hiện hành.

Bước 16

Hoàn thành phần tiền cảnh và vẽ xong icon của nó, bằng cách thêm vào đoạn thẳng nhỏ hơn với nét Stroke dày 8 px, dài 4 px, (#3A2E2A)  với Round Cap, canh thẳng với góc phải ở dưới của vùng vẽ hiện hành. Khi đã xong, chọn và nhóm (Control-G) tất cả các hình tạo thành của hình đang vẽ lại với nhau, sau đó, làm như vậy vậy với toàn bộ icon.

6. Cách tạo icon xương rồng thứ hai

Cho rằng bạn đã hoàn thành icon đầu tiên, khóa layer đó lại và sau đó vào layer tiếp theo (sẽ là layer thứ ba), nơi chúng ta sẽ bắt đầu thực hiện cái cây thứ hai.

Bước 1

Tạo cái chậu sành bằng một hình chữ nhật bo tròn 68 x 40 px (#E5E5E5) với Corner Radius 8 px và một nét viền ngoài dày 8 px (#3A2E2A), chúng ta sẽ group (Control-G) và sau đso canh giữa với cạnh dưới của vùng vẽ hiện hành.

Bước 2

Thêm vào nét chi tiết ngang bằng nét Stroke dày 4 px, dài 68 px, (#3A2E2A), canh giữa với thân lớn của cái chậu, đặt nó cách cạnh trên của nó một khoảng 4 px. Khi đã xong, chọn và group (Control-G) ba hình này lại với nhau trước khi qua bước kế tiếp.

Bước 3

Bắt đầu thao tác với phần thân chính của cây xương rồng bằng cách tạo chi tiết bên ngoài bằng một hình tròn 64 x 64 px, (#A9D884) với nét viền dày 8 px (#3A2E2A), chúng ta sẽ group (Control-G) và canh giữa với cái chậu sành.

Bước 4

Thêm chi tiết bên trong cái cây bằng một hình elip 34 x 64 px, (#88AF66) với nét ngoài dày 8 px (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó canh giữa với thân lớn hơn của nó.

Bước 5

Chia hình ở giữa làm đôi bằng cách thêm một nét Stroke dày 8 px, cao 64 px, (#3A2E2A) , chọn và group (Control-G) tất cả các hình tạo thành của cái cây lại với nhau trước khi chuyển qua bước tiếp theo.

Bước 6

Chúng ta muốn đặt cái cây phía sau chậu sành, chọn hình cái cây và đặt nó bên dưới bằng cách click chuột phải > Arrange > Send to Back.

Bước 7

Bắt đầu thao tác với bông hoa nhỏ màu đỏ bằng cách tạo ra cái cánh ở giữa của nó bằng một hình elip 12 x 16 px, (#EF835E)với nét ngoài dày 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó canh giữa cạnh trên với vùng vẽ hiện hành.

Bước 8

Tạo cánh hoa bên trái bằng một hình chữ nhật 16 x 16 px, (#EF835E), chúng ta sẽ chỉnh sửa bằng cách thiết lập Radius của các góc dưới bên trái và góc trên bên phải thành 12 px trong Rectangle Properties của bảng Transform. Tạo nét viền cho hình kết quả dày 8 px (#3A2E2A) với Round Join, group (Control-G) và sau đó đặt hai hình này lên cạnh của cánh hoa ở giữa.

Bước 9

Tạo cánh hoa bên phải bằng một bản sao (Control-C > Control-F) của cánh hoa ta vừa hoàn thành, đặt nó lên cạnh đối diện của cái cây. Khi đã xong, chọn và group (Control-G) tất cả các hình tạo thành bông hoa lại với nhau, nhớ đặt chúng ra phía sau nhé (click chuột phải > Arrange > Send To Back). Hơn nữa, chúng ta đã vẽ được khá nhiều lên cái cây, bạn có thể chọn và group (Control-G) tất cả các hình mà chúng ta đã vẽ.

Bước 10

Tạo hòn đã nhỏ hơn bằng một hình elip 16 x 14 px (#BAB6B3) với nét ngoài dày 8 px, (#3A2E2A) chúng ta sẽ group (Control-G) và sau đó canh thẳng bên dưới hình thân chính của chậu sành, đặt nó cách cạnh phải 4 px.

Bước 11

Dành một chút thời gian và vẽ hòn đã lớn hơn sử dụng màu tô #9B928E. Tạo nét viền cho hình kết quả độ dày 8 px (#3A2E2A) với Round Join, group (Control-G) và sau đó đặt hai hình này bên dưới các hình khác (click chuột phải > Arrange > Send to Back).

Bước 12

Hoàn thành icon này bằng cách thêm vào tiền cảnh của nó bằng cách copy (Control-C) hình mà chúng ta đã tạo cho icon đầu tiên, dán vào layer này (Control-F) và sau đó canh giữa với cạnh dưới của vùng vẽ hiện hành. Khi đã xong, chọn và group (Control-G) tất cả các hình tạo thành trước khi chuyển qua hình tiếp theo.

7. Cách tạo icon cây xương rồng thứ ba

Qua layer tiếp theo ( sẽ là layer thứ 4), khóa layer trước lại, và sau đó phóng to lưới tham chiếu của nó lên để bắt đầu thao tác cái cây thứ ba.

Bước 1

Tạo cái chậu sành bằng hình chữ nhật bo tròn 68 x 32 px, (#E5E5E5) với Corner Radius 8 px và nét viền ngoài dày 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó canh giữa với cạnh dưới của vùng vẽ hiện hành.

Bước 2

Thêm vào đường chi tiết ngang bằng nét Stroke dày 4 px, dài 68 px, (#3A2E2A), chúng ta sẽ canh giữa với phần thân chính của cái chậu, đặt nó cách 4 px với cạnh trên cùng. Khi đã xong, chọn tất cả ba hình này và group chúng lại bằng phím tắt Control-G.

Bước 3

Bắt đầu vẽ một cái cây thực sự bằng cách tạo chi tiết bên dưới của nó bằng một hình tròn 64 x 64 px, (#A9D884), chúng ta sẽ canh giữa với cái chậu sành, đặt nó cách 28 px từ cạnh trên của vùng vẽ hiện hành.

Bước 4

Thêm vào ba đường kết cấu chéo bằng cách sử dụng màu #88AF66 làm màu nét Stroke chính, nhớ group (Control-G) và sau đó đặt mask chúng bằng cách copy (Control-C > Control-F) hình tròn lớn hơn nằm bên dưới.

Quick tip: chú ý những đường viền path càng dài thì đường kết cấu càng mảnh, do đó, thử một vài lần với chúng cho đến khi hình đó trông đẹp.

Bước 5

Vẽ nét ngoài dày 8 px, (#3A2E2A) cho hình hiện tại, sau đó chọn và group (Control-G) tất cả các hình tạo thành lại với nhau.

Bước 6

Tạo chi tiết bên trái ở trên của cái cây bằng hình tròn 36 x 36 px (#88AF66), đặt ở phía trên của hình mới tạo, chúng ta sẽ thêm vào những đường kết cấu chéo như thường lệ (#6D894E) và nét viền ngoài dày 8 px, (#3A2E2A). Chọn và group (Control-G) tất cả ba hình lại với nhau, canh thẳng chúng với cạnh trên của vùng vẽ hiện hành, chắc chắc đặt chúng bên dưới các hình vẽ lớn hơn (click chuột phải > Arrange > Send to Back).

Bước 7

Thêm các hình vẽ nhỏ hơn bằng một hình tròn 16 x 16 px, (#A9D884) với nét viền ngoài dày 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó đặt chúng lên cạnh bên phải của các hình đã tạo trước đó.

Bước 8

Tạo hình vẽ nhỏ hơn thứ hai bằng một hình tròn 24 x 24 px, (#88AF66) với hai nét kết cấu chéo (#6D894E) và một nét viền dày 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó đặt lên bên phải của thân lớn hơn, với khoảng cách 16 px từ góc phải ở trên của vùng vẽ hiện hành.

Bước 9

Chọn và group (Control-G) tất cả bốn hình vẽ của cái cây, chắc chắn đặt chúng ra đằng sau cái chậu (click chuột phải > Arrange > Send to Back) trước khi qua bước tiếp theo.

Bước 10

Tạo hòn đá nhỏ bằng một hình elip 14 x 12 px, (#BAB6B3) với nét vẽ ngoài dày 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó đặt chúng lên cạnh trái của cái chậu sành lớn hơn, nhớ để chúng bên dưới các hình lớn hơn của nó (click chuột phải > Arrange > Send Backward).

Bước 11

Dành một chút thời gian để vẽ hình hòn đá lớn hơn, màu Fill #9B928E. Vẽ nét viền ngoài cho hình kết quả với nét vẽ dày 8 px, (#3A2E2A), Round Join, group (Control-G) và đặt hai hình này bên dưới cái chậu sành (click chuột phải > Arrange > Send to Back).

Bước 12

Hoàn thành icon này bằng cách thêm hình tiền cảnh của nó bằng cách sao chép (Control-C) hình chúng ta đã tạo ở icon thứ hai, chúng ta sẽ dán lên layer này (Control-F) và sau đó canh giữa với cạnh dưới của vùng vẽ hiện hành. Khi đã xong, chọn và nhóm (Control-G) tất cả các hình tạo thành trước khi bước qua icon thứ tư và cũng là cuối cùng.

8. Cách tạo icon cây xương rồng thứ tư

Bây giờ chúng ta đã bước tới icon thứ tư và cũng là cuối cùng, hãy chắc chắn bạn đang ở đúng layer (sẽ là layer thứ năm), và bắt đầu vẽ nào!

Bước 1

Như chúng ta đã thực hiện với các icon khác, bắt đầu vẽ cái chậu sành bằng một hình chữ nhật bo tròn 68 x 24 px (#E5E5E5) với Corner Radius 8 px, và một nét vẽ ngoài dày 8 p (#3A2E2A), chúng ta sẽ group (Control-G) và sau đó canh giữa với cạnh dưới của vùng vẽ hiện hành.

Bước 2

Thêm đường chi tiết chéo bằng nét Stroke dày 4 px, dài 68 px (#3A2E2A), chúng ta sẽ canh giữa với thân chính của cái chậu, đặt nó cách cạnh trên 4 px. Khi đã xong, chọn tất cả ba hình và group chúng lại với nhau bằng phím tắt Control-G.

Bước 3

Bắt đầu thao tác với cái cây thực sự bằng cách tạo ra một hình tròn 24 x 24 px, (#A9D884), chúng ta sẽ canh giữa với vùng vẽ hiện hành nằm bên dưới, đặt nó cạnh cạnh trên 4 px.

Bước 4

Tạo một hình tròn hơi lớn hơn 44 x 44 px, (#A9D884), đặt nó cách hình nhỏ hơn 24 px.

Bước 5

Mở đường path của hai hình tròn này bằng cách chọn riêng lẻ từng điểm neo đối diện bên trong của nó với công cụ Direct Selection Tool (A) và sau đó bỏ chúng đi bằng cách nhấn Delete.

Bước 6

Unite hai đường path này thành một hình lớn bằng cách chọn chúng và sau đó nhấn Control-J hai lần.

Bước 7

Thay đổi hình dáng của hình kết quả bằng cách chọn và làm mượt bốn điểm neo đối diện bên trong bằng cách sử dụng Convert selected anchor points to smooth, và sau đó đặt lại các tay xoay của nó cho đến khi bạn có được sự chuyển tiếp mượt mà giữa hai hình.

Bước 8

Dành một chút thời gian và thêm vào các đường chi tiết chéo bằng màu #88AF66 xem như màu Stroke của bạn, nhớ đeo mask cho chúng sau đó (click chuột phải > Make Clipping Mask) bằng cách copy (Control-C, Control - F) của hình nằm bên dưới.

Bước 9

Vẽ nét viền ngoài dày 8px, (#3A2E2A) cho cái cây, theo sau là một nét Stroke dày 4 px, cao 80 px, (#3A2E2A) nằm ở giữa cạnh dưới của nó. Khi đã xong, chọn và nhóm toàn bộ các hình tạo thành lại với nhau bằng phím tắt Control-G.

Bước 10

Đặt hình mà chúng ta vừa group lại bên dưới cái chậu sành (click chuột phải > Arrange > Send to Back), chọn và group cả hai hình này lại với nhau bằng phím tắt Control-G.

Bước 11

Thêm vào hòn đá nhỏ hơn bằng một hình elip 22 x 16 px (#BAB6B3) với nét viền dày 8 px, (#3A2E2A), chúng ta sẽ group (Control-G) và đặt nó lên cạnh phải của cái chậu, khoảng cách 4 px từ cạnh phải của nó.

Bước 12

Hãy từ từ và vẽ chi tiết hòn đá lớn hơn, dùng màu Fill #9B928E. Vẽ nét viền ngoài dày 8 px, (#3A2E2A), Round Join cho hình kết quả, nhóm (Control-G) và sau đó đặt chúng bên dưới cái chậu sành (Click chuột phải > Arrange > Send to back).

Bướcc 13

Hoàn thành icon này bằng cách thêm hình tiền cảnh của nó bằng cách copy (Control-C) hình chúng ta đã tạo ở icon thứ ba, dán lên layer này (Contro-F) và sau đó canh giưa với cạnh dưới của vùng vẽ hiện tại. Khi đã xong, chọn và nhóm (Control-G) toàn bộ các hình tọa thành trước khi lưu trữa toàn bộ dự án.

Tất cả đã xong rồi!

Bạn đã tạo được bộ icon này rồi, anh/ cô bạn yêu xương rồi ạ - đạt được từng bước một để tạo ra các icon vườn cây rất riêng mà không cần sử dụng bất thứ gì ngoài một vài hình vẽ và công cụ cơ bản trong Illustrator.