Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Cách tạo 10 icon phổ thông và các biến thể bằng Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called 10 Years of Envato Tuts+!.
10 Mistakes New Artists Make and How You Can Avoid Them

Vietnamese (Tiếng Việt) translation by Caitlyn Cat Tien (you can also view the original English article)

Final product image
What You'll Be Creating

Hôm nay là một ngày đặc biệt, vì chúng ta đang tổ chức lễ kỷ niệm mười năm thật đáng kinh ngạc và còn gì tốt hơn là dành cho bạn một bài hướng dẫn đặc biệt, nơi bạn sẽ tìm hiểu được cách tạo ra một bộ mười icon giao diện người dùng phải có, sử dụng hầu hết các hình và công cụ cơ bản mà Illustrator cung cấp.

Nếu bạn đang tìm kiếm thêm những icon, với những phong cách khác nhau, hãy ghé thăm GraphicRiver.

Điều đó đang được nói, có được uống nhanh mà cà phê tươi nướng, và hãy để làm việc.

1. Cách thiết lập một tập tin dự án 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), sử dụng các thiết lập sau:

  • Number of Artboards: 20
  • Spacing: 20 px
  • Width: 64 px
  • Height: 64 px
  • Units: Pixels

Và từ tab Advanced:

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

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

Chúng ta sẽ tạo ra các icon bằng cách sử dụng pixel perfect workflow, chúng ta sẽ thiết lập một lưới nhỏ chính xác để hoàn toàn kiểm soát được các hình vẽ.

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
setting up a custom grid

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ở Snap to Grid và Snap to Pixel nằm ở menu View, chế độ này sẽ chuyển thành Snap to Pixel mỗi khi bạn đưa vào chế độ Pixel Preview (nếu bạn đang sử dụng phiên bản phần mềm cũ hơn)

Bây giờ, nếu bạn chưa biết nhiều về “pixel-perfect workflow”, 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. Cách thiết lập các Layers

Với tài liệu mới đã tạo, sẽ rất tốt để cấu trúc bài vẽ của chúng ta bằng cách sử dụng một vài layer để tách biệt các lưới tham chiếu với những icon hiện tại. Nếu bạn đã quen với những bài hướng dẫn trước của tôi, bạn sẽ thấy rằng bài này chúng ta đang thực hiện khác một chút, đó là chúng ta đang thao tác phần cơ sở của bản vẽ trên Artboard thay vì Layers vì số lượng icon nhiều.

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

  • layer 1: reference grids
  • layer 2: icons
setting up the layers

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 kích thước và sự đồng nhất.

Thông thường, kích thước của các lưới quyết đị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 nhỏ nhất có thể và xây dựng dựa theo chúng.

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

Bước 1

Hãy chắc chắn bạn đang ở đúng layer (sẽ là layer đầu tiên), và sau đó dùng Rectangle Tool (M) và tạo một hình vuông màu cam 64 x 64 px, (#F15A24), canh giữa với Artboard đầu tiên và dùng để xác định kích cỡ tổng thể các icon của chúng ta.

creating the reference grids main shape

Bước 2

Thêm một hình vuông nhỏ hơn 56 x 56 px, (#FFFFFF), đặt nó đè lên hình ban đầu, phần này sẽ là vùng vẽ hiện hành, như vậy, chúng ta có phần đệm xung quanh dày 4 px.

creative the active drawing areas main shape

Bước 3

Chọn và nhóm hai hình vuông lại với nhau bằng phím tắt Control-G, và sau đó tạo các lưới còn lại bằng 19 bản sao (Control-C, Control-F), đặt những hình này lên những Artboard trống. Hãy thong thả thực hiện, và khi đã xong, đảm bảo khóa layer hiện tại trước khi qua phần kế tiếp.

adding the remaining reference grids

5. Cách tạo những icon điều hướng

Cho rằng bạn đã tạo thành công các đường lưới tham chiếu nhỏ, chuyển sang layer tiếp theo (sẽ là layer thứ hai), và bắt đầu bản vẽ bằng cách tạo nhóm icon đầu tiên, sẽ giúp chúng ta điều hướng tốt hơn.

Bước 1

Bắt đầu vẽ phần sau của icon bằng cách tạo thân chính bằng một hình tròn 48 x 48 px, tô màu #DCEEFF và canh giữa với Artboard đầu tiên.

creating and positioning the main shape for the back buttons main body

Bước 2

Vẽ nét ngoài cho hình vừa tạo bằng phương pháp Stroke, bằng cách tạo một hình sao chép của hình đó (Control-C), dán lên phía trước (Control-F) và sau đó điều chỉnh màu đầu tiên của nó thành #629CF9, và sau đó lật màu Fill của nó với Stroke (Shift-X). Thiết lập Weight thành 8 px của nét ngoài kết quả, chọn và nhóm tất cả các hình tạo thành của phần này lại với nhau bằng phím tắt Control-G.

adding the outline to the back buttons main body

Bước 3

Bắt đầu thao tác cho mũi tên nhỏ hướng bên trái bằng cách vẽ thân chính bằng nét Stroke dày 8 px, dài 24 px, (#629CF9) với Round Cap, canh giữa với Artboard lớn hơn nằm bên dưới.

creating and positioning the main shape for the body of the back buttons arrow

Bước 4

Hoàn thành icon này bằng cách vẽ đầu mũi tên bằng nét Stroke dày 8 px, (#629CF9), với Round CapJoin. Hãy từ từ, và khi đã xong, chọn và nhóm hai hình lại với nhau (Control-G), làm tương tự cho tất cả các hình tạo thành của icon trước khi qua icon tiếp theo.

finishing off the back button

Bước 5

Tạo icon đi tới bằng một bản sao chép (Control-C) của hình chúng ta vừa hoàn thành, chúng ta sẽ dán (Control-F) lên Artboard thứ hai và sau đó điều chỉnh bằng cách đối xứng nó theo chiều dọc (click chuột phải > Transform > Reflect > Vertical).

creating and positioning the main shapes for the forward button

Bước 6

Tạo icon hướng lên trên bằng một bản sao chép (Control-C) của icon trước, chúng ta sẽ dán (Control-F) lên Artboard tiếp theo và sau đó điều chỉnh nó bằng cách xoay -90 độ bằng công cụ Rotate (click chuột phải > Transform > Rotate > -90º).

creating and positioning the main shapes for the up button

Bước 7

Thêm một icon mũi tên hướng xuống bằng một bản sao chép (Control-C) của icon chúng ta vừa tạo, chúng ta sẽ dán (Control-F) lên Artboard thứ tư và sau đó điều chỉnh bằng cách phản chiếu nó theo chiều ngang (click chuột phải > Transform > Reflect > Horizontal).

creating and positioning the main shapes for the down button

Bước 8

Bắt đầu thao tác với icon làm mới bằng cách vẽ thân chính bằng một hình tròn 36 x 36 px với nét Stroke dày 8 px, (#629CF9), canh giữa với cạnh dưới của vùng vẽ hiện hành.

creating and positioning the main shape for the refresh buttons main body

Bước 9

Mở hình tròn ra bằng cách bỏ góc một phần tư bên trái ở phía trên của nó, đảm bảo thiết lập Cap của đường path kết quả thành Round từ bảng Stroke.

opening up the path of the refresh buttons main body

Bước 10

Tạo đầu mũi tên bằng một hình chữ nhật 18 x 24 px, tô màu #DCEEFF, và sau đó đặt nó như hình tham khảo bên dưới.

creating and positioning the main shape for the refresh buttons arrow head

Bước 11

Chuyển hình chữ nhật thành mũi tên hướng trái bằng cách thêm một điểm neo ở giữa cạnh trái của nó bằng Add Anchor Point Tool (+) và sau đó bỏ điểm neo bên trái ở ngoài bằng cách click vào nó, dùng Delete Anchor Point Tool (-).

adjusting the shape of the refresh buttons arrow head

Bước 12

Hoàn thành mũi tên, và cho icon của nó, bằng cách tạo nét ngoài dày 8 px, (#629CF9) với Round Join, cho hình kết quả, chọn và nhóm (Control-G) hai hình này lại, và sau đó thực hiện như vậy cho toàn bộ icon.

finishing off the refresh button

6. Cách tạo icon tìm kiếm và phóng to

Giả sử bạn đã vẽ xong nhóm icon đầu tiên, chuyển qua Artboard tiếp theo và bắt đầu thao tác cho nhóm tiếp theo.

Bước 1

Tạo phần thấu kính của icon bằng hình tròn 40 x 40 px (#DCEEFF) với nét ngoài dày 8 px, (#629CF9), chúng ta sẽ nhóm (Control-G) và sau đó canh thẳng với góc trên bên trái với vùng vẽ hiện hành.

creating and positioning the main shapes for the search icons lens

Bước 2

Hãy làm thong thả và vẽ chi tiết tay cầm bằng nét Stroke dày 8 px, (#629CF9) với Round Cap, dùng hình tham khảo như hướng dẫn chính.

adding the handle section to the search icons lens

Bước 3

Hoàn thành icon này bằng cách làm ngắn chiều dài của tay cầm bằng cách chọn điểm neo ở trên bằng Direct Selection Tool (A) và sau đó kéo nó chéo xuống dưới trong khi vẫn giữ phím Shift để giữ nét thẳng. Hãy làm từ từ và khi đã xong, chọn và nhóm (Control-G) tất cả các hình tạo thành trước khi chuyển qua icon tiếp theo.

finishing off the search icon

Bước 4

Tạo icon phóng to bằng cách copy (Control-C) hình bạn vừa hoàn thành xong, dán (Control-F) vào Artboard tiếp theo, thêm dấu cộng vào giữa phần thấu kính bằng hai nét Stroke dày 8 px, dài 16 px (#629CF9) với Round Cap. Hãy thong thả thực hiện, và khi đã xong, chọn và nhóm (Control-G) tất cả các hình tạo thành trước khi qua icon tiếp theo.

adding the plus sign to the zoom in buttons lens

Bước 5

Thêm một icon thu nhỏ bằng cách sao chép (Control-C) hình vừa tạo, dán (Control-F) lên Artboard tiếp theo và sau đó chỉnh sửa bằng cách nhấp đôi chuột vào dấu cộng để cô lập hình đó. Sau đó bỏ nhóm (Click chuột phải > Ungroup) và xóa nét Stroke dọc.

creating the zoom out button

7. Cách tạo các icon hiển thị

Chúng ta đang đi đến nhóm icon thứ ba, chắc chắn bạn đang ở Artboard tiếp theo (sẽ là cái thứ chín) và bắt đầu nào.

Bước 1

Tạo thân chính của icon mở trạng thái hiển thị này bằng một hình elip 48 x 32 px, tô màu #DCEEFF và sau đó canh giữa với Artboard nằm bên dưới.

creating and positioning the main shape for the toggle on visibility button

Bước 2

Điều chỉnh hình mà chúng ta vừa tạo bằng cách chọn các điểm neo trái và phải bằng Anchor Point Tool (Shift-C) để chuyển hình elip này thành hình giống hình con mắt.

adjusting the shape of the toggle on visibility button

Bước 3

Vẽ nét ngoài dày 8 px, (#629CF9) với Round Join, sau đó 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 toggle on visibility button

Bước 4

Thêm chi tiết đồng tử bằng một hình tròn 16 x 16 px, chúng ta sẽ tô màu (#629CF9) và sau đó canh giữa với hai hình mà chúng ta vừa nhóm lại.

adding the pupil section to the toggle on visibility button

Bước 5

Hoàn thành icon này bằng cách thêm và một hình phản chiếu nhỏ bằng một hình tròn 8 x 8 px, tô màu #DCEEFF và sau đó canh thẳng góc trên bên phải của hình đồng tử, nhóm (Control-G) hai hình lại với nhau. Hãy thong thả làm, và khi đã xong, chọn và nhóm (Control-G) tất cả các hình tạo thành trước khi chuyển qua hình tiếp theo.

finishing off the toggle on visibility button

Bước 6

Tạo icon tắt trạng thái hiển thị bằng một hình sao chép (Control-C) của hình chúng ta vừa tạo xong, dán lên Artboard thứ mười và sau đó điều chỉnh nó bằng cách vẽ một đường chéo Stroke dày 8 px, (#629CF9), sau đó chọn và nhom (Control-G) tất cả các phần lại với nhau.

creating the toggle off visibility button

8. Cách tạo các icon chia sẻ tập tin.

Một cách trung thực, không có gói biểu tượng giao diện người dùng hoàn chỉnh nào được hoàn thành mà không có một bộ các biểu tượng chia sẻ tệp tin, do đó, hãy đảm bảo rằng chúng ta sẽ thêm một bộ cho riêng mình.

Bước 1

Bắt đầu vẽ icon tải lên bằng cách tạo những hình chính yếu cho hình hộp của nó bằng một hình chữ nhật 48 x 12 px (#DCEEFF) với nét viền ngoài dày 8 px, (#629CF9), chúng ta sẽ nhóm (Control-G) và sau đó canh giữa với cạnh dưới của vùng vẽ hiện hành.

creating and positioning the main shapes for the upload buttons box section

Bước 2

Thêm các đoạn mở rộng ngắn bằng các nét Stroke dày 8 px, cao 8 px, (#629CF9), với Round Cap, chúng ta sẽ đặt nó lên các cạnh của hình đã tạo trước đó, chọn chúng và sau đó tạo một nhóm lớn (Control-G).

adding the side segments to the upload buttons box section

Bước 3

Thêm mũi tên hướng lên trên bằng cách sao chép (Control-C) hình đã tạo cho các icon điều hướng, chúng ta sẽ dán (Control-F) lên Artboard này và sau đó canh giữa với cạnh trên cùng vùng vẽ hiện hành. Khi đã đặt mũi tên vào vị trí xong, chọn và nhóm toàn bộ các hình tạo thành của icon này lại với nhau bằng phím tắt Control-G.

finishing off the upload button

Bước 4

Tạo icon tải xuống bằng cách sao chép (Control-C) hình chúng ta vừa hoàn thành xong, dán lên Artboard tiếp theo và sau đó thay đổi mũi tên nhỏ thành hình đối xứng theo chiều ngang (Click chuột phải > Transform > Reflect > Horizontal).

creating the download button

9. Các tạo icon hiển thị thông tin

Nếu bạn giống như tôi, bạn có thể sẽ là một trong những người không thực sự thích món tiếp theo này đâu, giao diện dễ dùng nhưng trong sâu thẳm thì đôi lúc nó là một sự tồi tệ cần thiết.

Bước 1

Tạo thân chính của icon này bằng cách vẽ một hình tròn 48 x 48 px, (#DCEEFF) với nét dày 8 px, (#629CF9), chúng ta sẽ nhóm (Control-G) chúng lại và sau đó canh giữa với Artboard thứ 13.

creating and positioning the main shapes for the information prompt buttons main body

Bước 2

Tạo một chấm nhỏ của dấu chấm cảm bằng một hình tròn 8 x 8 px, chúng ta sẽ tô màu #629CF9 và canh giữa với những hình lớn hơn, đặt nó cách cạnh dưới cùng của nét viền một khoảng 4 px.

adding the little dot to the information prompt buttons main body

Bước 3

Hoàn thành dấu chấm cảm, và icon của chính nó, bằng các thêm vào một đoạn thẳng bằng nét Stroke dày 8 px, dài 12 px, (#629CF9), đặt nó lên phía trên dấu chấm, cách một khỏang 4 px. Chọn và nhóm (Control-G) hai hình này lại với nhau, làm như vậy với toàn bộ icon trước khi tiếp tục qua icon tiếp theo.

finishing off the information prompt button

10. Cách tạo icon chia sẻ

Chia sẻ là một trong những thứ làm cho Internet trở thanh một nơi tuyệt vời để sống trong cuộc sống kỹ thuật số của bạn, do đó, tôi sẽ chia sẻ với bạn một cách đơn giản để tạo một icon có thể chia sẻ cho riêng bạn.

Bước 1

Tạo những chi tiết chính của icon đó bằng ba hình tròn 16 x 16 px (#DCEEFF) với nét viền ngoài dày 8 px, (#629CF9), chúng ta sẽ nhóm riêng biệt (Control-F) từng phần và sau đó đặt nó như hình tham khảo bên dưới.

creating and positioning the main shapes for the share buttons main sections

Bước 2

Vẽ một đoạn thẳng nối ba phần này lại với nhau bằng nét viền dày 8 px, (#629CF9), với Round CapJoin. Hãy làm từ từ và khi đã xong, đặt đường path kết quả xuống bên dưới bằng cách click chuột phải > Arrange > Send to Back, chọn và nhóm tất cả các hình tạo thành icon này lại với nhau bằng phím tắt Control-G.

finishing off the sharing button

11. Cách tạo các icon nút trạng thái

Chúng ta hay thích đóng và mở các thứ, vậy tại sao không dành một chút thời gian để xem chúng ta tạo những nút chỉ thị trạng thái của mình như thế nào nhỉ.

Bước 1

Bắt đầu thao tác với icon trạng thái đóng bằng cách tạo thân chính của nó bằng một hình chữ nhật tròn 48 x 32 px, (#DCEEFF) với Corner Radius 16 px, và nét viền ngoài dày 8px, (#629CF9), chúng ta sẽ nhóm (Control-G) và sau đó canh giữa với Artboard tiếp theo.

creating and positioning the main shapes for the toggle off buttons main body

Bước 2

Thêm nút hiển thị trạng thái bằng một hình tròn 16 x 16 px, tô màu (#629CF9) và sau đó canh giữa với những hình lớn hơn, đặt nó cách cạnh dưới 4 px của nét viền ngoài. Khi đã làm xong, chọn và nhóm (Control-G) tất cả ba hình lại với nhau, trước khi chuyển sang icon tiếp theo.

finishing off the toggle off button

Bước 3

Tạo nút trạng thái bật bằng một bản sao (Control-C) của icon ta vừa thực hiện xong, dán lên Artboard tiếp theo (Control-F), và sau đó điều chỉnh bằng cách phản chiếu nó theo chiều dọc (Click chuột phải > Transform > Reflect > Vertical).

creating the toggle on button

12. Cách tạo icon menu kiểu Hamburger

Icon tiếp theo trong danh sách của chúng ta là một trong những icon ngay lập tức trở thành một máy đổi trò chơi khi nó được sử dụng và hiểu hoàn toàn, vì thế, nó đã lập tức được dùng như một kí hiệu phổ thông.

Bước 1

Bắt đầu tác lên phần trung tâm của menu này bằng cách tạo một hình tròn 8 x 8 px, tô màu #629CF9 và sau đó canh giữa với cạnh trái của vùng vẽ hiện hành.

creating the main circle for the menu buttons center section

Bước 2

Thêm một thanh ngang bằng nét Stroke dày 8 px, dài 36 px, (#629CF9) với Round Cap, chúng ta sẽ canh giữa với cạnh phải của vùng vẽ hiện hành. Hãy làm từ từ và khi đã đặt đường path này vào đúng vị trí, chọn cả hai đường này và vòng tròn, sau đó nhóm chúng lại với nhau bằng phím tắt Control-G.

adding the bar segment to the menu buttons center section

Bước 3

Hoàn thành icon này bằng cách thêm các hình ở trên và dưới bằng hai bản sao chép (Control-C > Control F hai lần) của hình chúng ta vừa nhóm lại, đặt nó cách 8 px so với hình ban đầu. Khi đã xong, chọn và nhóm (Control-G) tất cả các hình tạo thành của nó trước khi qua icon tiếp theo.

finishing off the burger menu button

13. Cách tạo icon thiết lập

Nó có thể là bánh răng cưa hay con trượt, chúng ta có thể hoàn toàn đồng ý rằng những icon cài đặt là một món phải có trong bất cứ bộ giao diện người dùng nào, vì những sự chỉnh sửa là một trong những thứ chúng ta luôn muốn thực hiện, nếu bạn hiểu ý mà tôi muốn nói.

Bước 1

Bắt đầu bằng cách tạo các thanh trượt của icon bằng ba nét Stroke dày 8 px, rộng 48 px, (#629CF9) với Round Cap, chúng ta sẽ đặt chúng song song theo hướng dọc, cách nhau 16 px, canh giữa chúng với Artboard trống nằm bên dưới.

creating and positioning the main shapes for the settings buttons bar segments

Bước 2

Hoàn thành icon đó bằng cách thêm vào các nút điều chỉnh bằng ba hình tròn 12 x 12 px, (#DCEEFF) với nét viền dày 8 px, (#629CF9), nhóm từng cái một (Control-G) và đặt chúng lên thanh trượt như hình tham khảo. Khi đã xong, đừng quên chọn và nhóm (Control-G) tất cả các hình tạo thành của icon này trước khi qua icon tiếp theo.

finishing off the settings button

14; Cách tạo icon Like

Chúng ta đang ở nhóm icon cuối cùng, và không gì bằng kết thúc bộ này bằng cách thêm vào những ký hiệu trái tim nho nhỏ.

Bước 1

Bắt đầu thao tác với phần trên của nút thích bằng cách tạo một hình tròn 28 x 28 px, tô màu #DCEEFF và đặt cách cạnh trêncủa vùng vẽ hiện hành 8 px, và cạnh dưới bên trái của nó một khoảng 4 px.

creating and positioning the main shape for the like buttons upper body

Bước 2

Tạo một hình tròn khác 28 x 28 px, (#DCEEFF), đặt nó lên cạnh đối diện của vùng vẽ hiện hành, đảm bảo giữ khoảng cách như cũ Khi đã đặt hai hình vào vị trí, chọn và hợp nhất chúng thành một hình lớn hơn bằng cách Unite Shape Mode trong Pathfinder.

uniting the composing shapes of the like buttons upper body into a single larger shape

Bước 3

Mở chế độ Pixel Preview (Alt - Shift-Y), và điều chỉnh hình kết quả bằng cách chọn và bỏ đi nửa dưới, sau đó chọn điểm neo ở điểm giữa bên trên kéo ngược lại lên Pixel Grid.

adjusting the shape of the like buttons upper body

Bước 4

Dùng Pen Tool (P) và vẽ thân dưới của trái tim, đảm bảo làm cho các điểm neo ở cạnh của nó được mềm mại bằng cách chọn Convert selected anchor points to smooth. Hãy làm từ từ và điều chỉnh hình này bằng cách chọn và dặt lại vị trí của các điểm kết thúc của tay xoay của nó như hình tham khảo, tắt chế độ Pixel Preview (Alt - Control-Y) trước khi chuyển qua bước tiếp theo, khi bạn đã thực hiện xong.

adjusting the shape of the like buttons lower body

Bước 5

Hoàn thành icon này bằng cách vẽ nét viền ngoài dày 8 px, (#629CF9), với Round Join cho hình kết quả, sau đó chọn và nhóm (Control-G) hai hình đó lại trước khi qua bước tiếp theo.

finishing off the like button

Bước 6

Vẽ icon cuối cùng bằng cách sao chép hình mà chúng ta vừa tạo ra, đặt nó lên Artboard cuối cùng và sau đó chuyển thành nút không thích bằng cách thêm vào một khung chéo bằng nét Stroke dày 8 px, (#629CF9) với Round Cap. Khi đã thực hiện xong, chọn và nhóm (Control-G) tất cả các hình tạo thành trước khi lưu lại bản vẽ.

creating the dislike button

Tuyệt vời! Bộ giao diện người dùng nhỏ nhắn của chúng ta đã hoàn thành rồi!

Vẫn như mọi khi, tôi hy vọng bạn sẽ thích bài hướng dẫn từng bước này và quan trọng nhất là tìm hiểu được những điều mới mẻ và hữu dụng tròn bài viết này!

finished project preview
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.