1. Design & Illustration
  2. Summer

Tự tạo bộ biểu tượng "icon" chủ đề mùa hè bằng Adobe Illustrator

by
Read Time:16 minsLanguages:
SummerAdobe IllustratorIllustrationIcon DesignLine ArtPathfinder PanelTransform PanelAlign PanelVectorGraphic DesignSeasons

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Mùa hè đã đến, tôi nghĩ sẽ thật tuyệt để hướng dẫn bạn thực hiện một vài biểu tượng "icon" của những món phụ kiện mà bạn thường hay mang theo trong kỳ nghỉ. Như mọi khi,chúng ta sẽ tạo các đối tượng bằng hình học cơ bản và những công cụ cơ bản, vì thế nếu bạn mới biết dùng Adobe Illustrator, đây sẽ là bài luyện tập tốt cho bạn.

Oh, tôi xuýt quên điều này, bạn có thể mở rộng kho thư viện tại trang GraphicRiver, nơi bạn sẽ tìm được những biểu tượng chủ đề mùa hè "summer-themed icons" tuyệt đẹp.

Như đã nói, hãy làm một ly trà đá bạc hà và rồi bắt tay vào việc thôi.

1. Cách cài đặt một file mới

Tôi hy vọng là bạn đã khởi động Illustrator và đang chạy trên phần nền, hãy mở cửa sổ lên và thiết lập một New Document (File > New hoặc Control-N), sử dụng các thiết lập sau:

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

Và trong nhãn Advanced:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new documentsetting up a new documentsetting up a new document

2. Cách thiết lập một lưới (grid) tùy biến

Chúng ta sẽ tạo ra các icon bằng cách sử dụng pixel-perfect workflow (tiến độ công việc với điểm ảnh hoàn hảo), chúng ta sẽ cần để thiết lập một Grid nhỏ, chính xác để có thể kiểm soát hoàn toàn các hình vẽ của chúng ta.

Bước 1

Vào Edit > Preferences > Guides & Grid, và thay đổi các thiết lập sau:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom gridsetting up a custom gridsetting up a custom grid

Mẹo: Bạn có thể tìm hiểu thêm về lưới bằng cách đọc bài viết How Illustrator’s Grid System Works (Cách hệ thống Grid hoạt động trong Illustrator)

Bước 2

Khi chúng ta đã thiết lập grid tùy biến của mình xong, chúng ta cần đảm bảo các hình vẽ của chúng ta trông chính xác bằng cách sử dụng tùy chọn Snap to Grid và Snap to Pixel nằm ở dưới menu View.

Bây giờ, nếu bạn hoàn toàn chưa biết về "pixel-perfect workflow”, tôi gợi ý bạn sẽ vào bài hướng dẫn về Cách tạo Artwork với pixel-perfect, bài này sẽ giúp bạn mở rộng các kỹ năng về kỹ thuật trong thời gian ngắn.

3. Cách thiết lập các Layer

Với New Document đã tạo, bạn có thể cấu trúc bản vẽ của mình bằng cách sử dụng một vài layer, vì theo cách này chúng ta có thể bảo vệ quá trình thực hiện bằng cách thao tác trên một icon tại một thời điểm.

Mở bảng Layers, và tạo tổng cộng năm layer và được đặt tên lại như sau:

  • layer 1: reference grids
  • layer 2: sunglasses
  • layer 3: sun cream
  • layer 4: inflatable ring
  • layer 5: shell
setting up the layerssetting up the layerssetting up the layers

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

Reference Grids - Lưới tham chiếu hay (hay Base Grids - 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.

creating and positioning the main shape for the reference gridcreating and positioning the main shape for the reference gridcreating and positioning the main shape for the reference grid

Bước 2

Thêm một hình nhỏ hơn 120 x 120px, 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.

creating and positioning the main shape for the active drawing areacreating and positioning the main shape for the active drawing areacreating and positioning the main shape for the active drawing area

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.

adding the remaining reference gridsadding the remaining reference gridsadding the remaining reference grids

5. Cách vẽ icon mắt kính mát

Khi bạn đã hoàn thành việc tạo ra các đường lưới tham chiếu nhỏ này, chuyển qua layer tiếp theo (layer thứ hai) và bắt đầu bài vẽ bằng cách tạo ra icon đầu tiên.

Bước 1

Bắt đầu thực hiên với phần bên trái của mắt kính bằng cách tạo ra tròng kính bằng một hình chữ nhật 48 x 44px, tô màu #FF8C69, sau đó đặt nó cách 6 px từ cạnh trái của vùng vẽ hiện hành và 8 px từ cạnh bên trên.

creating and positioning the main shape for the glasses left lenscreating and positioning the main shape for the glasses left lenscreating and positioning the main shape for the glasses left lens

Bước 2

Thay đổi hình của hình chữ nhật này bằng cách thiết lập Radius của tất cả các cạnh, ngoại trừ góc phải ở trên thành 22px từ phần Rectangle Properties của bảng Transform.

adjusting the shape of the glasses left lensadjusting the shape of the glasses left lensadjusting the shape of the glasses left lens

Bước 3

Viền hình kết quả bằng phương pháp Stroke, bằng cách tạo thêm một bản sao cho hình này (Control-C), dán ở phía trước (Control-F) và sau đó điều chỉnh màu tô ban đầu thành #3D2F2C. Lật màu tô Fill của hình sao chép này với Stroke (Shift-X) của nó có Weight to 4px. Khi đã thực hiện xong, chọn và nhóm các hình lại với nhau bằng phím tắt Control-G trước khi qua bước tiếp theo.

adding the outline to the glasses left lensadding the outline to the glasses left lensadding the outline to the glasses left lens

Bước 4

Thao tác với phần cuối bên trái, bằng cách tạo một hình chữ nhật bo tròn 12 x 4px (#3D2F2C) với Corner Radius là 2px, chúng ta sẽ canh chúng với cạnh trái của vùng vẽ hiện hành, đặt tại vị trí cách 16 px từ cạnh trên.

creating and positioning the main shape for the bottom section of the glasses left end piececreating and positioning the main shape for the bottom section of the glasses left end piececreating and positioning the main shape for the bottom section of the glasses left end piece

Bước 5

Tạo một hình chữ nhật nhỏ hơn 8 x 4px (#3D2F2C), chúng ta sẽ canh với cạnh phải của hình vừa rồi, đặt hình mới này nằm lên trên một nửa cạnh trên của hình trước. Khi bạn thực hiện xong, chọn và nhóm (Control-G) hai hình này trước khi qua bước tiếp theo.

creating and positioning the main shape for the upper section of the glasses left end piececreating and positioning the main shape for the upper section of the glasses left end piececreating and positioning the main shape for the upper section of the glasses left end piece

Bước 6

Chọn hình chúng ta vừa nhóm lại và đặt chúng nằm bên dưới tròng mắt kính lớn hơn bằng cách nhấp chuột phải > Arrange > Send to Back.

positioning the glasses left end piece underneath the larger lenspositioning the glasses left end piece underneath the larger lenspositioning the glasses left end piece underneath the larger lens

Bước 7

Hoàn thành tròng kính bên trái bằng cách thêm vào một hình chữ nhật 20 x 4px (#3D2F2C) lên phần nét ngoài lớn hơn trên cùng, đặt hình chữ nhật này cách 4px từ cạnh bên phải. Khi thực hiện xong, chọn và nhóm (Control-G) tất cả các chi tiết lại với nhau trước khi qua bước kế tiếp.

finishing off the glasses left lensfinishing off the glasses left lensfinishing off the glasses left lens

Bước 8

Vẽ tròng kính bên phải bằng cách sao chép đối xứng theo chiều đứng hình ta vừa thực hiện xong (click chuột phải >Transform > Reflect > Vertical) và đặt chúng ở cạnh đối diện của vùng vẽ hiện hành.

adding the glasses right lensadding the glasses right lensadding the glasses right lens

Bước 9

Nối hai tròng kính này bằng hình chữ nhật 40 x 4px (#3D2F2C), chúng ta sẽ canh giữa với cạnh trên của vùng vẽ hiện hành.

adding the top bridge to the glasses upper sectionadding the top bridge to the glasses upper sectionadding the top bridge to the glasses upper section

Bước 10

Tạo phần cầu nối nhỏ hơn bằng hai nét Stroke dài 12px và 4px viền dày (#3D2F2C), chúng ta sẽ đặt song song hai hình này với khoảng cách 2 px, nhóm (Control-G) hai hình này lại với nhau và đồng chỉnh chúng với cạnh trên của hai tròng kính.

adding the smaller bridges to the glasses upper sectionadding the smaller bridges to the glasses upper sectionadding the smaller bridges to the glasses upper section

Bước 11

Tạo phần cầu mũi bằng hình tròn 12 x 12px với nét Stroke dày 4px (#3D2F2C), chúng ta sẽ đặt nó nằm dưới phần cầu nhỏ, với khoảng cách 2px.

adding the nose section to the glasses upper sectionadding the nose section to the glasses upper sectionadding the nose section to the glasses upper section

Bước 12

Điều chỉnh hình của hình tròn chúng ta vừa tạo bằng cách chọn điểm neo dưới cùng bằng công cụ Direct Selection Tool (A) sau đó bỏ nó đi bằng cách nhấn phím Delete. Chúng ta đã gần thực hiện xong chiếc mắt kính rồi, chọn tất cả các chi tiết vừa tạo và nhóm chúng lại (Control-G) trước khi qua bước kế tiếp.

adjusting the glasses nose sectionadjusting the glasses nose sectionadjusting the glasses nose section

Bước 13

Thêm sợi dây bằng cách sử dụng hình chữ nhật 12 x 88px với nét Stroke dày 4px (#3D2F2C), canh thẳng với cạnh dưới của vùng vẽ hiện hành, đặt nó cách cạnh bên trái 4px.

adding the left string section to the glassesadding the left string section to the glassesadding the left string section to the glasses

Bước 14

Điều chỉnh phần dây ở dưới bằng cách thiết lập Radius của các cạnh dưới là 6 px từ Properties Rectangle của bảng Transform. Khi thực hiện xong, đừng quên đặt hình kết quả ở bên dưới mắt kính (click chuột phải > Arrange > Send to Back) trước khi qua bước kế tiếp.

adjusting the shape of the glasses left string sectionadjusting the shape of the glasses left string sectionadjusting the shape of the glasses left string section

Bước 15

Tạo phần sợi dây bên phải bằng cách copy (Control-C, Control-F) hình mà chúng ta vừa thao tác, đặt nó vào cạnh đối diện của chiếc mắt kính, giữ khoảng cách 4 px giữa sợi dây và cạnh phải của vùng vẽ hiện hành.

adding the right string section to the glassesadding the right string section to the glassesadding the right string section to the glasses

Bước 16

Hoàn thành icon này bằng cách thêm vào phần sợi dây bằng nét Stroke dày 4px, dài 12px , (#3D2F2C), chúng ta sẽ đặt dưới phần cầu mũi với khoảng cách 8px từ phần cung phía trên. Khi thực hiện xong, chọn và nhóm (Control-G) tất cả các chi tiết tạo thành icon này lại với nhau, trước khi vẽ hình tiếp theo.

finishing off the glasses iconfinishing off the glasses iconfinishing off the glasses icon

6. Vẽ icon kem chống nắng

Cho rằng bạn đã hoàn thành icon đầu tiên, khóa layer đó lại sau đó qua layer tiếp theo (đó sẽ là layer thứ ba) nơi chúng ta sẽ bắt đầu vẽ vật dụng mùa hè thứ hai.

Bước 1

Vẽ nắp hộp kem chống nắng bằng một hình chữ nhật 40 x 14px, (#89DBCC), chúng ta sẽ điều chỉnh lại thiết lập Radius = 4px cho các góc dưới trong Rectangle Properties trong bảng Transform. Tạo nét viền ngoài dày 4px, (#3D2F2C), nhóm (Control-G) chúng lại và canh giữa hai phần này với cạnh dưới của vùng vẽ hiện hành.

creating and positioning the main shapes for the sun creams capcreating and positioning the main shapes for the sun creams capcreating and positioning the main shapes for the sun creams cap

Bước 2

Thêm vào miếng mở nắp nhỏ bằng hình chữ nhật 12 x 6px (#3D2F2C), chúng ta sẽ canh giữa cạnh trên của nắp, đảm bảo hình này được chọn và nhóm chúng lại với nhau sau đó bằng phím tắt Control-G

adding the rectangular insertion to the sun creams capadding the rectangular insertion to the sun creams capadding the rectangular insertion to the sun creams cap

Bước 3

Tạo chi tiết cổ lọ kem chống nắng bằng hình chữ nhật 40 x 8px (#FF8C69) với nét viền ngoài dày 4px, (#3D2F2C), chúng ta sẽ nhóm (Control-G) chúng là và đặt lên trên của hình đã nhóm lại vừa rồi.

adding the neck section to the sun creams capadding the neck section to the sun creams capadding the neck section to the sun creams cap

Bước 4

Bắt đầu thao tác lên phần thân chính của chai bằng cách tạo một hình chữ nhật 40 x 8px (#C5EFE7), chúng ta sẽ đặt lên phần cổ chai. Thêm một hình chữ nhật dài hơn một chút 56 x 8px, (#C5EFE7), chúng ta sẽ đặt cách 8px từ cạnh trên cùng của vùng vẽ hiện hành.

creating and positioning the main shapes for the sun cream bottles main bodycreating and positioning the main shapes for the sun cream bottles main bodycreating and positioning the main shapes for the sun cream bottles main body

Bước 5

Mở các đường path của hai hình chữ nhật bằng cách thêm vào các điểm neo ở giữa các cạnh trong đối diện nhau bằng công cụ Add Anchor Point Tool (+), và sau đó bỏ chúng đi bằng cách chọn hình đó và dùng công cụ Direct Selection Tool (A) và nhấn Delete.

opening up the paths of the sun cream bottles two composing rectanglesopening up the paths of the sun cream bottles two composing rectanglesopening up the paths of the sun cream bottles two composing rectangles

Bước 6

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

uniting the sun cream bottles composing rectangles into a single larger shapeuniting the sun cream bottles composing rectangles into a single larger shapeuniting the sun cream bottles composing rectangles into a single larger shape

Bước 7

Tạo nét viền dày 4px cho hình kết quả (#3D2F2C), chọn và nhóm hai hình này lại với nhau bằng phím tắt Control-G.

adding the outline to the sun cream bottles main bodyadding the outline to the sun cream bottles main bodyadding the outline to the sun cream bottles main body

Bước 8

Bắt đầu thêm các chi tiết cho cái chai này bằng cách thêm vào hai nét thẳng chữ giả bằng hình chữ nhật 16 x 4px (#3D2F2C) sắp song song nhau với khoảng cách 4px từ hình chữ nhật dài hơn 20 x 4px (#3D2F2C). Nhóm (Control-G) hai hình này, canh giữa với cạnh dưới cùng của chi tiết hiện tại, đặt chúng ở trên cách 10px

adding the two text lines to the sun cream bottles main bodyadding the two text lines to the sun cream bottles main bodyadding the two text lines to the sun cream bottles main body

Bước 9

Tạo hình mặt trời nhỏ bằng một hình tròn 16 x 16px (#FFCF6E) với nét viền ngoài dày 4px (#3D2F2C), chúng ta sẽ nhóm (Control-G) hình này lại và sau đó đặt phía trên hai đường thẳng chữ, khoảng cách 16px.

creating and positioning the main shapes for the sun cream bottles suncreating and positioning the main shapes for the sun cream bottles suncreating and positioning the main shapes for the sun cream bottles sun

Bước 10

Cứ thong thả, và vẽ tám tia mặt trời bằng những nét Stroke dày 4px (#3D2F2C) với Round Cap, chúng ta sẽ đặt với khoảng cách 2px từ phần cạnh ngoài của mặt trời. Khi đã xong, chọn tia mặt trời và mặt trời, nhóm chúng lại với nhau (Control-G) trước khi qua bước tiếp theo.

adding the sunrays to the sun cream bottles main bodyadding the sunrays to the sun cream bottles main bodyadding the sunrays to the sun cream bottles main body

Mẹo: cho bước này, tôi gợi ý bạn chuyển sang chế độ xem Pixel Preview (Alt-Control-Y) để có thể kiểm soát toàn bộ vị trí của các điểm neo.

Bước 11

Thêm vào nét chi tiết ngang bằng một nét Stroke 56 px dài, 4px dày (#3D2F2C), cách 4px từ cạnh trên cùng của cái lọ.

adding the horizontal detail line to the sun cream bottles upper sectionadding the horizontal detail line to the sun cream bottles upper sectionadding the horizontal detail line to the sun cream bottles upper section

Bước 12

Tạo những đường sọc viền dọc bằng hình vuông 4 x 4px, (#3D2F2C), song song cách nhau 4px, chúng ta sẽ nhóm (Control-G) chúng lại và sau đó canh giữa với cạnh trên cùng của lọ. Khi thực hiện xong, chọn và nhóm các hình sắp đặt trong phần này trước khi qua bước kế tiếp.

adding the vertical insertions to the sun cream bottles upper sectionadding the vertical insertions to the sun cream bottles upper sectionadding the vertical insertions to the sun cream bottles upper section

Bước 13

Để hoàn thành cái lọ kem này, và với biểu tượng của nó, thêm vào một hình chữ nhật 56 x 6px (#FFCF6E) với nét viền dày 4px (#3D2F2C), chúng ta sẽ nhóm (Control-G) và sau đó canh giữa với cạnh trên của vùng vẽ hiện hành. Khi đã thực hiện xong, chọn và nhóm (Control-G) tất cả các thành phần của icon này lại với nhau, trước khi vẽ qua icon tiếp theo.

finishing off the sun cream iconfinishing off the sun cream iconfinishing off the sun cream icon

7. Cách vẽ icon phao bơi

Hãy chắc rằng bạn đang ở đúng layer (đó sẽ là layer thứ tư) và sau đó phóng to đường lưới tham chiếu thứ ba để chúng ta có thể vẽ icon tiếp theo.

Bước 1

Tạo phần dưới của cái phao bằng một hình chữ nhật bo tròn 104 x 104px (#89DBCC) với Conrner Radius là 16px, chúng ta sẽ đặt hình này nằm giữa vùng vẽ hiện hành .

creating and positioning the main shape for the inflatable rings back sectioncreating and positioning the main shape for the inflatable rings back sectioncreating and positioning the main shape for the inflatable rings back section

Bước 2

Tạo một hình cắt bằng hình tròn 40 x 40px (highligh màu đỏ), chúng ta sẽ đặt ở trung tâm của hình vuông tròn vừa rồi, và sau đó bỏ nó đi bằng Minus Front Shape Mode của Pathfinder.

adding the cutout to the inflatable rings back sectionadding the cutout to the inflatable rings back sectionadding the cutout to the inflatable rings back section

Bước 3

Vẽ nét viền ngoài dày 4px (#3D2F2C), chọn và nhóm (Control-G) hai hình này trước khi qua bước kế tiếp.

adding the outline to the inflatable rings back sectionadding the outline to the inflatable rings back sectionadding the outline to the inflatable rings back section

Bước 4

Vẽ mặt phao bằng hình tròn 116 x 116px, tô màu #9D93E5, và sau đó canh giữa với hình đã nhóm trước đó.

creating and positioning the main shape for the inflatable rings front sectioncreating and positioning the main shape for the inflatable rings front sectioncreating and positioning the main shape for the inflatable rings front section

Bước 5

Thêm một hình tròn cắt 52 x 52px (highlight màu đỏ) mà chúng ta sẽ bỏ di từ phần thân lớn hơn bằng Minus Front Shape Mode của Pathfinder.

adding the circular cutout to the inflatable rings front sectionadding the circular cutout to the inflatable rings front sectionadding the circular cutout to the inflatable rings front section

Bước 6

Bắt đầu vẽ hình thang ở phía trên bằng cách tạo một hình chữ nhật 32 x 40px, (#FFCF6E), đặt ở giữa cạnh trên của lưới tham chiếu, sau đó chỉnh sửa từng hình chọn và kéo các điểm neo ở dưới của nó vào bên trong với khoảng cách 10px bằng công cụ Move Tool (Click chuột phải >Transform > Move > Horizontal > + / - 10 px tùy thuộc vào cạnh mà bạn bắt đầu kéo)

creating and positioning the main shape for the inflatable rings top trapezoidcreating and positioning the main shape for the inflatable rings top trapezoidcreating and positioning the main shape for the inflatable rings top trapezoid

Bước 7

Vẽ nét viền ngoài dày 4px (#3D2F2C), chọn và sau đó nhóm hai hình này lại với nhau bằng phím tắt Control-G.

adding the outline to the inflatable rings top trapezoidadding the outline to the inflatable rings top trapezoidadding the outline to the inflatable rings top trapezoid

Bước 8

Tạo hình thang phía dưới bằng bản sao chép (Control-C > Control-F) của hình thang bạn vừa hoàn thành, đối xứng theo chiều ngang (click chuột phải > Transform > Reflect > Horizontal) và sau đó canh thẳng với cạnh dưới của đường lưới tham chiếu nằm dưới.

adding the inflatable rings bottom trapezoidadding the inflatable rings bottom trapezoidadding the inflatable rings bottom trapezoid

Bước 9

Thêm hình thang bên trái và bên phải bằng cách tạo một bản sao (Control-C > Control-F) của hai hình thang mà chúng ta đã có, xoay 90 độ bằng công cụ Rotate Tool (Click chuột phải > Transform > Rotate > 90 degree).

adding the inflatable rings side trapezoidsadding the inflatable rings side trapezoidsadding the inflatable rings side trapezoids

Bước 10

Dành một chút thời gian cho hình này và thêm vào những đốm báo màu đen (#3D2F2C) cho các hình thang này. Khi đã hoàn thành, chọn từng hình và nhóm (Control-G) mỗi hình của bốn phần này lại với nhau, làm như vậy cho tất cả bốn cái.

adding the black color spots to the inflatable rings trapezoidsadding the black color spots to the inflatable rings trapezoidsadding the black color spots to the inflatable rings trapezoids

Bước 11

Đeo mặt nạ (Mask) cho hình thang, dùng bản sao chép (Control-C) của phần mặt phao, chúng ta sẽ dán ở phía trước (Control-F) và sau đó chuyển thành Clipping Mask bằng cách chọn hình sao chép và hình mà chúng ta muốn đeo mặt nạ sau đó nhấn chuột phải > Make Clipping Mask.

masking the inflatable rings trapezoidsmasking the inflatable rings trapezoidsmasking the inflatable rings trapezoids

Bước 12

Vẽ nét ngoài dày 4px, (#3D2F2C) cho phần mặt phao bằng phương pháp Stroke, nhớ chọn và group (Control-G) lại tất cả các hình tạo thành lại với sau.

adding the outline to the inflatable rings front sectionadding the outline to the inflatable rings front sectionadding the outline to the inflatable rings front section

Bước 13

Hoàn chỉnh chiếc phao bằng cách tạo một cái van hơi nhỏ bằng một hình tròn 8 x 8px (#89DBCC) với nét viền ngoài dày 4px (#3D2F2C), đặt giữa hình mà chúng ta sẽ thêm vào một hình tròn nhỏ hơn 2 x 2px (#3D2F2C). Nhóm (Control-G) chúng lại với nhau và đặt ba hình này lên phần trong ở dưới, bên phải, Chọn và nhóm (Control-G) tất cả các chi tiết tạo thành icon này lại với nhau trước khi vẽ hình tiếp theo.

finishing off the inflatable ring iconfinishing off the inflatable ring iconfinishing off the inflatable ring icon

8. Cách vẽ icon vỏ sò

Bây giờ chúng ta sẽ vẽ icon thứ tư và là icon cuối cùng, do đó, cho rằng bạn đã mở layer đúng (layer thứ năm), phóng to đường lưới tham chiếu của nó và cùng hoàn thành nó nào.

Bước 1

Bắt đầu phần trê vỏ sò bằng cách tạo ra một hình chữ nhật 24 x 6 px (#3D2F2C), chúng ta sẽ điều chỉnh Radius của góc trên thành 6px, canh giữa hình kết quả với cạnh trên của vùng vẽ hiện hành.

creating and positioning the main shape for the upper section of the shell iconcreating and positioning the main shape for the upper section of the shell iconcreating and positioning the main shape for the upper section of the shell icon

Bước 2

Vẽ phần trụ chính bằng một hình elip 36 x 16 px (#6CBAAB), chúng ta sẽ điều chỉnh nó bằng cách đẩy điểm neo bên dưới xuống 8px bằng công cụ Move Tool (Click chuột phải > Transform > Move > Vertical > 8 px). Vẽ nét ngoài dày 4px cho hình kết quả (#3D2F2C), nhóm (Control + G) và định vị 2 rrong số những hình trước đó như trong hỉnh dưới đây.

creating and positioning the main shapes for the shell icons umbocreating and positioning the main shapes for the shell icons umbocreating and positioning the main shapes for the shell icons umbo

Bước 13

Vẽ một hình elip nhỏ hơn 12 x 8 px (#3D2F2C), chúng ta sẽ canh giữa với cạnh trên của hình trước. Khi đã xong, chọn và Group (Control-G) tất cả các hình mà chúng ta đã thực hiện để qua bước tiếp theo.

adding the smaller ellipse to the shell icons umboadding the smaller ellipse to the shell icons umboadding the smaller ellipse to the shell icons umbo

Bước 4

Vẽ phần thân chính của vỏ sò bằng cách vẽ một hình elip 92 x 72px (#89DBCC), đặt hình này cách 2px từ cạnh dưới của vùng vẽ hiện hành.

creating and positioning the main shape for the shell icons main bodycreating and positioning the main shape for the shell icons main bodycreating and positioning the main shape for the shell icons main body

Bước 5

Điều chỉnh hình này bằng cách chọn điểm neo trên cùng bằng công cụ Direct Selection Tool (A) và sau đó đẩy điểm này lên trên 28px bằng công cụ Move tool (right click > Transform > Move > Vertical > -28 px).

adjusting the shape of the shell icons main bodyadjusting the shape of the shell icons main bodyadjusting the shape of the shell icons main body

Bước 6

Vẽ phần bên trong con sò bằng một hình elip 96 x 56 px (#C5EFE7), chúng ta sẽ đặt hình này cách 12px từ phần cạnh dưới của phần thân lớn hơn.

creating and positioning the main shape for the shell icons inner body sectioncreating and positioning the main shape for the shell icons inner body sectioncreating and positioning the main shape for the shell icons inner body section

Bước 7

Điều chỉnh hình vừa tạo bằng cách chọn và đẩy điểm neo ở trên hướng lên 32px bằng Move tool (right click > Transform > Move > Vertical > -32 px).

adjusting the shape of the shell icons inner body sectionadjusting the shape of the shell icons inner body sectionadjusting the shape of the shell icons inner body section

Bước 8

Tạo viền ngoài dày 4px, (#3D2F2C) cho hình kết quả, chọn và nhóm (Control-G) hai hình này lại với nhau.

adding the outline to the shell icons inner body sectionadding the outline to the shell icons inner body sectionadding the outline to the shell icons inner body section

Bước 9

Tạo đường vòng sọc bằng một hình elip 58 x 164 px với nét viền Stroke dày 4px (#3D2F2C), chúng ta sẽ điều chỉnh bằng cách bỏ một nửa phần dưới của hình này bằng cách chọn và xóa (Delete) điểm neo bên dưới cùng. Khi đã thực hiện xong, đặt hình kết quả vào giữa cạnh trên của phần bên trong.

adding the vertical ring to the shell icons inner body sectionadding the vertical ring to the shell icons inner body sectionadding the vertical ring to the shell icons inner body section

Bước 10

Thêm chi tiết nét sọc bằng một nét Stroke dày 4px, dài 88px (#3D2F2C), đặt ở giữa cạnh dưới của phần bên trong.

adding the vertical detail line to the shell icons inner body sectionadding the vertical detail line to the shell icons inner body sectionadding the vertical detail line to the shell icons inner body section

Bước 11

Chọn và nhóm (Control + G) tất cả các hình tạo thành của phần bên trong lại với nhau, sau đó thực hiện che mặt nạ cho chúng bằng cách sử dụng một bản sao chép (Control-C) của phần thân lớn của vỏ sò, dán ở phía trước (Control-F), và sau đó sử dụng Clipping Mask (Click chuột phải > Make Clipping Mask)

masking the shell icons inner body sectionmasking the shell icons inner body sectionmasking the shell icons inner body section

Bước 12

Hoàn thành icon này, và toàn bộ hình vẽ bằng cách thêm nét ngoài dày 4px, (#3D2F2C) vào phần thân chính của con sò, chọn và nhóm (Control-G) tất cả các hình tạo thành lại với nhau. Kbi bàn hoàn tất, hãy nhóm chung lại (Control-G) tất cả những icons chung với nhau trước khi dùng Control - S trên bàn phím.

finishing off the shell iconfinishing off the shell iconfinishing off the shell icon

Đây là vỏ sò!

Bạn đã thực hiện được rồi, người bạn thiết kế icon của tôi ạ, một bài tập dễ và đơn giản về cách vẽ bộ icon chủ đề mùa hè cho bạn sử dụng hầu hết các hình học và công cụ căn bản. Tôi mong rằng bạn có thể thưc hiện được theo từng bước, và quan trọng nhất là học được những điều mới và hữu dụng trong bài viết này.

finished project previewfinished project previewfinished project preview
SummerAdobe IllustratorIllustrationIcon DesignLine ArtPathfinder PanelTransform PanelAlign PanelVectorGraphic DesignSeasons
Andrei Stefan
Andrei Stefan
coffee addict / pixel grinder
Just another young gun coffee fanatic from Europe, designing colorful worlds one pixel at a time. When I'm not "making stuff" you can usually find me at my place, flipping news and catching up on all the crazy things happening in both the tech and design realms.
One subscription.
Unlimited Downloads.
Get unlimited downloads