() translation by (you can also view the original English article)
Trong video này, tôi sẽ giải thích cách tạo lại, vòng hoạt động mà bạn thấy trên Apple Watch, sử dụng Sketch. Đây là bài tập hoàn hảo để chứng minh Sketch yêu toán học như thế nào; bạn sẽ ngạc nhiên khi thấy Sketch có thể tính toán cho bạn bao nhiêu. Hãy hoạt động nào!
Xem hướng dẫn nhanh
Vòng hoạt động
Hãy xem những gì chúng ta đang nhắm đến ở đây. Tấm hình này được chụp từ trang www.apple.com và biểu diễn các vòng trong ngữ cảnh:
1. Artboard
Bắt đầu với một artboard hình vuông 521px; có một thiết lập sẵn cho nó.
Thêm một màu nền đen tự nhiên (#000000) sau đó thêm một đối tượng hình tròn 300px vào giữa. Đường tròn này không có một fill (phần tô màu), nhưng hãy cho nó một stroke (nét vẽ) sặc sỡ 25px.
2. Các vòng
Nhân đôi vòng tròn đầu tiên, sau đó thay đổi kích thước của nó bằng cách trừ 52px khỏi chiều rộng của nó. Bạn có thể làm điều này bằng cách nhập chính xác 300-52 vào trong trường size và Sketch sẽ tính toán cho bạn.
Canh giữa nó với vòng tròn đầu tiên.
Tô màu lại cho nó, sau đó lặp lại bước trên cho vòng tròn thứ ba.
Nhóm ba vòng tròn lại với nhau và đặt tên nhóm thứ gì đó đại loại như "back". Nhân đôi nhóm và đặt tên nó là "front". Bây giờ chúng ta sẽ làm việc trên nhóm ở trên, vì vậy bạn có thể ẩn cái ở phía dưới.
3. Phân đoạn nó
Để tạo cho các vòng một hiệu ứng "thanh tiến trình" chúng ta sẽ sử dụng một stroke dash (nét đứt). Sketch có một thủ thuật cho điều này: chúng ta sẽ yêu cầu nó tính toán chính xác đường kính của hình tròn bằng cách nhân chiều rộng (300px) với pi π. Nhập công thức 300*3.14159265359 vào trong trường nhập liệu Gap của bảng Borders và hình tròn sẽ biến mất một cách hiệu quả. Điều này là bởi vì khoảng cách giữa các dấu gạch của stroke bao gồm toàn bộ đường kính của hình tròn. Bằng cách tăng độ dài sự đo lường Dash (vạch), chúng ta sẽ thấy vòng tròn bắt đầu xuất hiện trở lại.
Với điều đó đã được thực hiện xong, một lần nữa trong bảng Borders, bo tròn điểm đầu cuối của stroke:
Cuối cùng vào Layer > Transform > Flip Vertical để lật vòng tròn xung quanh vì thế nó bắt đầu tại không độ.
4. Mang nhóm nằm dưới trở lại
Với các vòng tròn ở trên đã hoàn tất, hãy làm cho nhóm ở dưới xuất hiện một lần nữa, và nhấn 1 để giảm opacity xuống 10%.
5. Các biểu tượng
Tất cả những thứ còn lại cần phải làm là thêm các biểu tượng vào các điểm cuối của stroke. Tạo một artboard 16px, và tạo bất kỳ kiểu biểu tượng mà bạn cần. Tôi cần một vài biểu tượng mũi tên đơn giản, nhưng bạn còn có thể lấy một vài bộ biểu tượng phù hợp từ GraphicRiver:
Bạn đã hoàn thành!
Dưới đây là những gì mà chúng ta đã tạo:
Cảm ơn bạn đã theo dõi, tôi hy vọng bài tập nhanh về Giao diện người dùng này đã dạy bạn một số thủ thuật mới trong Sketch.
Các bài hướng dẫn tương tự
