Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. UI Design

Cách vẽ một bộ nút UI của Trình chơi nhạc trong Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

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

Trong bài hướng dẫn hôm nay, chúng ta sẽ học cách tạo ra các nút UI điều khiển nhạc rất riêng của chúng ta, sử dụng một số hình dạng và công cụ cơ bản nhất mà Illustrator cung cấp.

Và đừng quên, bạn luôn có thể mở rộng gói này bằng cách truy cập vào GraphicRiver, nơi bạn sẽ tìm thấy một bộ lựa chọn tuyệt vời cho các biểu tượng theo chủ đề UI.

Để thực hiện, hãy chắc chắn rằng bạn đổ đầy cốc cà phê vì nó sẽ là một hành trình dài và thú vị!

1. Cách thiết lập tập tin dự án mới

Giả sử bạn đã có Illustrator và chạy ở chế độ nền, hãy mở nó lên và hãy thiết lập một Tài liệu mới (File > New hoặc Control-N) bằng các cài đặt sau:

  • Number of Artboards: 16
  • Spacing: 20 px
  • Width: 32 px
  • Height: 32 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 lưới tùy chỉnh

Vì chúng ta sẽ tạo các biểu tượng bằng cách sử dụng luồng công việc Pixel-Perfect, nên chúng ta sẽ muốn thiết lập một Lưới Grid nhỏ để chúng ta có thể kiểm soát hoàn toàn các hình dạng của mình.

Bước 1

Chuyển đến menu con Edit > Preferences > Guides & Grid và điều chỉnh các cài đặt sau:

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

Mẹo nhanh: bạn có thể tìm hiểu thêm về lưới bằng cách đọc phần chuyên sâu này về cách thức hoạt động của hệ thống Lưới Grid trong Illustrator.

Bước 2

Khi chúng ta đã thiết lập lưới tùy chỉnh của mình, tất cả những gì chúng ta cần làm để đảm bảo hình dạng của chúng trông rõ nét là bật tùy chọn Snap to GridSnap to Pixel được tìm thấy trong menu View, mà nó sẽ chuyển thành Snap to Pixel mỗi khi bạn vào chế độ Pixel Preview (nếu bạn đang sử dụng một phiên bản phần mềm cũ hơn).

Bây giờ, nếu bạn mới làm quen với toàn bộ "quy trình làm việc Pixel-Perfect", thì tôi khuyên bạn nên xem hướng dẫn của tôi về Cách tạo Pixel-Perfect Artwork, bài viết này sẽ giúp bạn mở rộng các kỹ năng kỹ thuật của mình ngay lập tức.

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

Với Tài liệu mới đã được tạo, sẽ là một ý tưởng tốt khi cấu trúc dự án của chúng ta bằng cách sử dụng một vài layer để tách các lưới tham chiếu khỏi các biểu tượng thực tế. Nếu bạn đã quen thuộc với các hướng dẫn trước đây của tôi, bạn sẽ nhận thấy rằng với cách này, chúng ta sẽ thực hiện một cách tiếp cận hơi khác, vì chúng ta đã dựa dự án này trên Artboards thay vì số lượng biểu tượng.

Để thực hiện, mở bảng Layers và tạo tổng cộng hai layer, chúng ta sẽ đổi 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

Các lưới tham chiếu (hoặc lưới cơ sở) là một tập hợp các bề mặt tham chiếu được phân tách chính xác, cho phép chúng ta xây dựng các biểu tượng của mình bằng cách tập trung vào kích thước và tính nhất quán.

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

Bây giờ, trong trường hợp của chúng ta, chúng ta sẽ tạo ra gói biểu tượng này chỉ với một kích thước, chính xác hơn là 32 x 32 px, nằm ở đầu nhỏ hơn của tỷ lệ này.

Bước 1

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

creating the main shape for the reference grid

Bước 2

Thêm một kích thước nhỏ hơn 28 x 28 px (#FFFFFF), mà chúng ta sẽ đặt lên trên hình dạng trước đó, vì nó sẽ đóng vai trò là vùng vẽ hoạt động của chúng ta, do đó cung cấp cho chúng ta phần đệm 2 px xung quanh để làm việc.

creating the main shape for the active drawing area

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, sau đó tạo các lưới còn lại bằng 15 bản sao (Control-C > Control-F) mà chúng ta sẽ đặt vào mỗi Artboards trống. Hãy dành thời gian để thực hiện, và khi bạn đã hoàn thành, hãy đảm bảo bạn khóa layer hiện tại trước khi chuyển sang phần tiếp theo.

adding the remaining reference grids

5. Cách vẽ nút Play

Giả sử bạn đã thực hiện thành công để tạo các lưới tham chiếu nhỏ, chuyển sang layer tiếp theo (đó sẽ là layer thứ hai) và hãy đkhởi động dự án bằng cách tạo biểu tượng đầu tiên của tập hợp này.

Bước 1

Bắt đầu bằng cách tạo phần thân chính của nút bằng cách sử dụng hình chữ nhật 20 x 24 px với nét Stroke dày 4 px (#152730) với Round Join, căn giữa với Artboard đầu tiên.

creating and positioning the main shape for the play button

Bước 2

Điều chỉnh hình dạng của hình chữ nhật mà chúng ta vừa tạo, bằng cách thêm một điểm neo mới vào giữa cạnh phải của nó bằng cách sử dụng Add Anchor Point Tool (+) và sau đó xóa điểm neo trên cùng và dưới cùng bên phải bằng cách sử dụng Delete Anchor Point Tool (-).

finishing off the play button

6. Cách vẽ nút Stop

Nút tiếp theo có lẽ là một trong những nút dễ nhất để tạo vì nó được tạo ra từ một hình dạng duy nhất.

Chọn Rectangle Tool (M) và tạo thân của nút bằng cách sử dụng hình vuông 24 x 24 px với nét Stroke dày 4 px (#152730) với Round Join, chúng ta sẽ đặt ở giữa Artboard thứ hai.

creating and positioning the main shape for the stop button

7. Cách vẽ nút Pause

Giả sử bạn đã ở Artboard thứ ba, hãy bắt đầu làm việc với nút tiếp theo của chúng ta.

Bước 1

Tạo phần bên trái của nút bằng cách sử dụng hình chữ nhật 8 x 24 px với nét Stroke dày 4 px (#152730) và Round Join, căn giữa với cạnh trái của vùng vẽ đang hoạt động, như trong hình tham chiếu.

creating and positioning the main shape for the left section of the pause button

Bước 2

Hoàn thành nút này bằng cách thêm phần bên phải của nó bằng cách sử dụng một bản sao (Control-C > Control-F) của hình dạng mà chúng ta vừa tạo, chúng ta sẽ đặt ở phía đối diện của vùng vẽ đang hoạt động. Khi bạn đã có bản sao, đảm bảo chọn và nhóm (Control-G) hai hình dạng lại với nhau trước khi chuyển sang nút tiếp theo.

finishing off the pause button

8. Cách vẽ nút Record

Chuyển sang Artboard tiếp theo (đó sẽ là cái thứ tư) và hãy nhanh chóng tạo ra nút ghi.

Bước 1

Chọn Ellipse Tool (L) và tạo một hình tròn 24 x 24 px với nét Stroke dày 4 px (#152730), căn giữa với vùng vẽ đang hoạt động bên dưới.

creating and positioning the main shape for the record button

Bước 2

Hoàn thành nút này bằng cách thêm một hình tròn 12 x 12 px nhỏ hơn bằng nét Stroke dày 4 px (#EF815B) ở giữa hình dạng lớn hơn, đảm bảo chọn và nhóm hai hình lại với nhau bằng phím tắt Control-G.

finishing off the record button

9. Cách vẽ nút Fast Forward

Giả sử bạn đã hoàn thành công việc trên nút trước đó, hãy chuyển sang hàng Artboards thứ hai, nơi chúng ta sẽ bắt đầu làm việc với nút chuyển tiếp nhanh nhỏ nhắn.

Bước 1

Tạo hình dạng chính cho mũi tên phải bằng cách sử dụng hình chữ nhật 12 x 16 px với nét Stroke dày 4 px (#EF815B) với Round Join, căn giữa với vùng vẽ đang hoạt động.

creating and positioning the main shape for the right arrow of the fast forward button

Bước 2

Biến hình dạng mà chúng ta vừa tạo thành một mũi tên quay sang phải bằng cách sử dụng cùng một quy trình được sử dụng cho nút phát, bằng cách thêm một điểm neo mới vào giữa cạnh phải của nó bằng Add Anchor Point Tool (+), sau đó loại bỏ những điểm neo trên cùng và dưới cùng bên phải của nó bằng Delete Anchor Point Tool (-).

adjusting the shape of the right arrow of the fast forward button

Bước 3

Hoàn thành nút này bằng cách thêm mũi tên trái bằng cách sử dụng một bản sao (Control-C > Control-F) của hình mà chúng ta vừa hoàn thành, chúng ta sẽ điều chỉnh bằng cách đặt màu của nét Stroke thành #152730, căn chỉnh nó với cạnh trái của vùng vẽ hoạt động. Khi bạn đã hoàn tất, hãy chọn và nhóm hai hình dạng lại với nhau bằng phím tắt Control-G.

finishing off the fast forward button

10. Cách vẽ nút Fast Backward

Tiếp theo, chúng ta sẽ tạo ra nút lùi trước nhanh với sự trợ giúp của nút mà chúng ta vừa hoàn thành.

Tạo một bản sao (Control-C > Control-F) của các hình dạng mà chúng ta vừa nhóm lại và đặt nó trên Artboard tiếp theo, đảm bảo phản chiếu theo chiều dọc bằng công cụ Reflect (nhấp chuột phải > Transform > Reflect > Vertical).

creating the fast backward button

11. Cách vẽ nút Skip Forward

Đặt mình vào Artboard tiếp theo và hãy tạo nút Skip Forward.

Bước 1

Bắt đầu bằng cách tạo phần bên phải của nút bằng cách sử dụng một hình chữ nhật 6 x 24 px với nét Stroke dày 4 px (#EF815B) với Round Join, căn giữa với vùng vẽ đang hoạt động.

creating and positioning the main shape for the right section of the skip forward button

Bước 2

Thêm hình dạng chính cho mũi tên quay phải bằng hình chữ nhật 18 x 24 px với nét Stroke dày 4 px (#152730) với Round Join, chúng ta sẽ đặt ở phía đối diện của vùng vẽ đang hoạt động bên dưới.

creating and positioning the main shape for the left section of the skip forward button

Bước 3

Hoàn thành nút này bằng cách chuyển hình dạng mà chúng ta vừa tạo thành một mũi tên quay phải, đảm bảo chọn và nhóm (Control-G) tất cả các hình dạng tạo thành của nó lại với nhau, trước khi chuyển sang hình tiếp theo.

finishing off the skip forward button

12. Cách vẽ nút Skip Backward

Tiếp theo, chúng ta sẽ nhanh chóng tạo ra phiên bản phản chiếu của nút Skip này trong vài giây.

Tạo một bản sao (Control-C > Control-F) của nút mà chúng ta vừa hoàn thành và đặt nó lên Artboard tiếp theo, đảm bảo phản chiếu theo chiều dọc bằng công cụ Reflect (nhấp chuột phải > Transform > Reflect > Vertical).

creating the skip backward button

13. Cách vẽ nút Shuffle

Vào hàng thứ ba của Artboards và bắt đầu vẽ nút Shuffle nhỏ.

Bước 1

Bật chế độ Pixel Preview (Alt-Control-Y), sau đó vẽ đường path hình chữ z bằng nét Stroke dày 4 px (#EF815B) với Round Cap, sử dụng hình ảnh tham chiếu làm hướng dẫn chính của bạn. Hãy dành thời gian để thực hiện, và một khi bạn đã hoàn thành, hãy chuyển sang bước tiếp theo.

drawing the main shape for the upper section of the shuffle button

Bước 2

Điều chỉnh hình dạng của đường path mà chúng ta vừa tạo, bằng cách làm mượt các điểm neo đối diện bên trong bằng cách sử dụng công cụ Convert selected anchor points to smooth, sau đó đặt lại tay xoay của chúng ở khoảng cách 6 px từ tâm của chúng.

adjusting the shape of the upper section of the shuffle button

Bước 3

Khi vẫn ở chế độ Pixel Preview, hãy vẽ mũi tên nhỏ bên phải bằng hình ảnh tham chiếu làm hướng dẫn chính của bạn. Khi bạn đã hoàn tất, hãy chọn và nhóm (Control-G) hai đường path lại với nhau để đảm bảo quay lại chế độ xem trước Default (Alt-Control-Y).

adding the arrowhead to the upper section of the shuffle button

Bước 4

Hoàn thành nút này bằng cách thêm phần dưới của nó bằng một bản sao (Control-C > Control-F) của các hình mà chúng ta vừa hoàn thành, chúng ta sẽ phản chiếu theo chiều ngang (nhấp chuột phải > Transform > Reflect > Horizontal) và sau đó đặt sao cho các đường path chồng lên nhau, như được thấy trong hình tham chiếu.

finishing off the shuffle button

14. Cách vẽ nút Repeat

Giả sử bạn đã hoàn thành công việc trên nút phát ngẫu nhiên, hãy chuyển sang Artboard tiếp theo, nơi chúng ta sẽ bắt đầu vẽ nút lặp lại.

Bước 1

Bắt đầu bằng cách tạo hình dạng chính cho phần trên của nút bằng hình chữ nhật 18 x 8 px với nét Stroke dày 4 px (#152730), chúng ta sẽ căn chỉnh với cạnh trái của vùng vẽ đang hoạt động, đặt nó cách 6 px từ cạnh trên của nó.

creating and positioning the main shape for the upper body of the repeat button

Bước 2

Điều chỉnh hình dạng của hình chữ nhật mà chúng ta vừa tạo bằng cách đặt Radius của góc trên cùng bên trái 8 px từ bên trong Rectangle Properties của bảng Transform.

adjusting the shape of the upper section of the repeat button

Bước 3

Tiếp tục điều chỉnh hình dạng này, bằng cách chọn điểm neo dưới cùng bên phải của nó bằng Direct Selection Tool (A) và sau đó xóa nó bằng cách nhấn Delete, đảm bảo đặt Cap đường path kết quả thành Round.

removing the lower section from the upper body of the repeat button

Bước 4

Thêm một mũi tên hướng phải nhỏ bằng cách sử dụng một bản sao (Control-C > Control-F) của nút từ nút trước đó, chúng ta sẽ đặt vào điểm neo ở trên, bên phải của đường path điều chỉnh, như trong hình ảnh tham chiếu. Khi bạn đã hoàn tất, hãy chọn và nhóm hai đường path lại với nhau bằng phím tắt Control-G.

adding the arrowhead to the upper body of the repeat button

Bước 5

Hoàn thành nút hiện tại, bằng cách tạo phần dưới của nó bằng cách sử dụng một bản sao (Control-C > Control-F) của các hình mà chúng ta vừa nhóm lại, chúng ta sẽ phản chiếu theo chiều ngang và chiều dọc (nhấp chuột phải > Transform > Reflect > Horizontal and Vertical) và sau đó đặt như trong hình ảnh tham khảo. Khi bạn đã hoàn tất, hãy chọn và nhóm (Control-G) hai phần lại với nhau, trước khi chuyển sang nút tiếp theo.

finishing off the repeat button

15. Cách vẽ nút Playlist

Tiếp theo, chúng ta sẽ mất một vài phút và tạo nút danh sách phát, vì vậy hãy chắc chắn rằng bạn đã ở trên Artboard mới và hãy bắt đầu.

Bước 1

Tạo các đường ngang nhỏ bằng cách sử dụng hai nét Stroke dày 14 px rộng 4 px (#152730) với Round Cap, đặt 4 px trên một hình nhỏ hơn có chiều rộng 4 px (#152730), mà chúng ta sẽ nhóm lại (Control-G) và sau đó căn chỉnh với cạnh trên bên trái của vùng vẽ đang hoạt động.

Bước 2

Bắt đầu vẽ nốt nhạc bằng cách tạo phần thân dưới của nó bằng hình elip 10 x 8 px với nét Stroke dày 4 px (#EF815B), chúng ta sẽ căn chỉnh với cạnh dưới của vùng vẽ đang hoạt động, đặt nó ở khoảng cách 4 px từ cạnh phải của nó.

creating and positioning the main shape for the lower section of the musical note

Bước 3

Hoàn thành nốt nhạc và chính biểu tượng đó, bằng cách vẽ thân của nó bằng nét Stroke dày 4 px (#EF815B) với Round CapJoin bằng cách sử dụng hình ảnh tham chiếu làm hướng dẫn chính của bạn. Hãy dành thời gian của bạn thực hiện và sau khi bạn đã hoàn thành, hãy chọn và nhóm (Control-G) tất cả các hình dạng kết hợp của nó với nhau trước khi chuyển sang hình tiếp theo.

finishing off the playlist button

16. Cách vẽ nút Add to Playlist

Giả sử bạn đã hoàn thành công việc ở nút trước đó, hãy tìm đến Artboard tiếp theo và bắt đầu vẽ biểu tượng tiếp theo của chúng ta.

Bước 1

Bắt đầu mọi thứ bằng cách tạo các đường chi tiết ngang bằng cách sử dụng hai nét Stroke dày 24 px rộng 4 px (#152730) với Round Cap, xếp chồng lên nhau cách 4 px trên hai hình nhỏ hơn 10 px (#152730), chúng ta sẽ nhóm lại (Control-G) ) và sau đó căn giữa thẳng hàng với cạnh trái của vùng vẽ đang hoạt động.

creating the main shapes for the left section of the add to playlist button

Bước 2

Bắt đầu vẽ dấu cộng nhỏ bằng cách tạo phân đoạn dọc bằng cách sử dụng nét Stroke cao 8 px dày 4 px (#EF815B) với Round Cap, chúng ta sẽ căn chỉnh với cạnh dưới của vùng vẽ đang hoạt động, đặt nó ở khoảng cách 4 px từ cạnh phải của nó.

creating and positioning the main shape for the vertical section of the plus symbol

Bước 3

Hoàn thành dấu cộng và chính nút đó, bằng cách thêm phân đoạn ngang bằng nét Stroke dày 8 px (#EF815B) với Round Cap, căn giữa với phân đoạn đã tạo trước đó. Khi bạn thực hiện xong, chọn và nhóm (Control-G) hai hình này lại với nhau, làm tương tự cho toàn bộ nút sau đó.

finishing off the add to playlist button

17. Cách vẽ nút Download

Vào hàng thứ tư và hàng cuối cùng của Artboards và bắt đầu vẽ nút thứ 13.

Bước 1

Tạo hình dạng chính cho ô này bằng hình chữ nhật 24 x 6 px với nét Stroke dày 4 px (#EF815B) với Round Cap Join, căn giữa với cạnh dưới của vùng vẽ đang hoạt động.

creating and positioning the main shape for the bottom section of the download button

Bước 2

Mở đường path của hình dạng mà chúng ta vừa tạo, bằng cách thêm một điểm neo mới vào giữa của cạnh trên của nó bằng cách sử dụng Add Anchor Point Tool (+), sau đó chúng ta sẽ xóa bằng cách sử dụng Delete Anchor Point Tool (-).

opening up the path of the bottom section of the download button

Bước 3

Bắt đầu vẽ mũi tên hướng xuống, bằng cách tạo phần thân chính của nó bằng cách sử dụng nét Stroke dày 18 px dày 4 px (#152730) với Round Cap, căn giữa với cạnh trên của vùng vẽ đang hoạt động.

creating the main body for the down facing arrow of the download button

Bước 4

Hoàn thành mũi tên và với nút đó, bằng cách vẽ đầu hướng xuống bằng nét Stroke dày 4 px (#152730) với Round CapJoin. Khi bạn đã hoàn tất, hãy chọn và nhóm (Control-G) các hình tạo thành của mũi tên lại với nhau, đảm bảo thực hiện tương tự cho toàn bộ nút sau đó.

finishing off the download button

18. Cách vẽ nút EQ

Tiếp theo trong danh sách của chúng ta là nút EQ, là biểu tượng mà bạn thấy sẽ rất dễ thực hiện.

Bước 1

Bắt đầu bằng cách tạo ba cột gồm các nét Stroke dày 4 px rộng 4 px (#152730), chúng ta sẽ xếp chồng lên theo chiều dọc và chiều ngang cách 2 px.

creating and positioning the main shapes for the eq button

Bước 2

Chọn ba hàng Stroke trên cùng, sau đó điều chỉnh chúng bằng cách thay đổi màu của chúng thành #EF815B.

adjusting the color of the eq button

Bước 3

Hoàn thành nút này bằng cách chọn và xóa một số phân đoạn các dòng tạo thành như trong hình ảnh tham chiếu. Khi bạn đã hoàn tất, hãy chọn và nhóm (Control-G) tất cả những hình còn lại trước khi chuyển sang nút tiếp theo.

finishing off the eq button

19. Cách vẽ nút Cast

Giả sử bạn đã hoàn thành công việc trên nút trước đó, hãy chuyển sang Artboard tiếp theo và bắt đầu vẽ biểu tượng Cast nhỏ.

Bước 1

Tạo hình dạng chính của nút này bằng cách sử dụng hình chữ nhật 24 x 20 px với nét Stroke dày 4 px (#152730) và Round CapJoin, căn giữa với vùng vẽ đang hoạt động bên dưới.

creating and positioning the main shape for the body of the cast button

Bước 2

Điều chỉnh hình dạng mà chúng ta vừa tạo, bằng cách chuyển sang chế độ Pixel Preview (Alt-Control-Y) và sau đó thêm một điểm neo mới 4 px từ góc trên bên trái của nó, tiếp theo là một vị trí khác 8 px từ góc dưới cùng bên phải của nó bằng Add Anchor Point Tool (+).

adding a set of new anchor points to the body of the cast button

Bước 3

Mở đường path mà chúng ta vừa điều chỉnh bằng cách chọn điểm neo dưới cùng bên trái của nó bằng Direct Selection Tool (A), sau đó xóa nó bằng cách nhấn Delete.

adjusting the shape of the body of the cast button

Bước 4

Bắt đầu vẽ phần dưới bên trái bằng cách tạo một hình tròn 8 x 8 px với nét Stroke dày 4 px (#EF815B), mà chúng ta sẽ đặt như trong hình ảnh tham chiếu.

creating and positioning the smaller circle for the cast button

Bước 5

Tạo một hình tròn 20 x 20 px lớn hơn một chút với cùng nét Stroke dày 4 px (#EF815B), căn giữa để căn chỉnh với hình tròn từ bước trước.

creating and positioning the larger circle onto the cast button

Bước 6

Hoàn thành nút này bằng cách chọn và xóa hai điểm neo bên trái và dưới cùng của hình tròn, nhóm các hình dạng kết quả và khung lớn hơn lại với nhau bằng phím tắt Control-G.

finishing off the cast button

20. Cách vẽ nút Share

Bây giờ chúng ta đang xuống nút thứ 16 và là nút cuối cùng của chúng ta, vì vậy hãy chắc chắn rằng bạn đã ở Artboard còn lại và hãy hoàn thành nút này!

Bước 1

Bắt đầu bằng cách tạo khung bằng hình chữ nhật 24 x 16 px với nét Stroke dày 4 px (#152730) với Round CapJoin, căn giữa với cạnh dưới của vùng vẽ đang hoạt động, đặt nó cách một khoảng 2 px từ nó.

creating and positioning the main shape for the body of the share button

Bước 2

Điều chỉnh hình dạng mà chúng ta vừa tạo bằng cách thêm một điểm neo mới ở khoảng cách 4 px từ góc trên cùng bên trái của khung hình, tiếp theo là một điểm khác ở khoảng cách 6 px từ góc dưới bên phải của nó. Mở đường path của hình dạng kết quả bằng cách chọn điểm neo trên cùng bên phải của nó với Direct Selection Tool (A) và sau đó xóa nó bằng cách nhấn Delete.

opening up the path of the body for the share button

Bước 3

Hoàn thành nút hiện tại và với chính dự án này, bằng cách thêm mũi tên quay phải bằng một bản sao (Control-C) của hình từ nút lặp lại, chúng ta sẽ dán (Control-F) vào Artboard hiện tại và sau đó điều chỉnh bằng cách rút ngắn chiều dài thân của nó từ 18 px xuống 16 px.

Khi bạn đã thực hiện xong, hãy đặt các hình dạng kết quả như trong hình ảnh tham chiếu, đảm bảo chọn và nhóm (Control-G) tất cả các hình tạo thành của nút này lại với nhau trước khi nhấn nút lưu.

finishing off the share button

Thế là xong!

Bạn đã vẽ xong rồi - một hướng dẫn hay và dễ dàng về cách tạo tập hợp các nút điều khiển của riêng bạn. Như mọi khi, tôi hy vọng bạn có thể thực hiện theo từng bước và quan trọng nhất là học được một hoặc hai mẹo mới khi thực hiện.

finished project preview
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.