--- sidebar_position: 3 --- # Hướng dẫn cắt vòng quay Dưới đây là một số cách cắt vòng quay cơ bản, dễ làm và miễn phí. :::tip Nếu bạn muốn Vòng quay nhiều `màu sắc, hoạt ảnh, hiệu ứng...` xin vui lòng liên hệ bộ phần **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được tư vấn thêm về thiết kế. ::: ## Thiết kế bằng Figma **[Figma](https://www.figma.com/)** là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng website. Với Figma, bạn có thể sáng tạo không giới hạn giao diện người dùng (UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế khác. ### Đăng kí tài khoản (Miễn phí) Để sử dụng một cách đầy đủ nhất vui lòng **đăng ký tài khoản (miễn phí)** tại **[Figma](https://www.figma.com/)**, sau đó ấn . ![Figma Homepage](./img/minigame-tutorial-design-wheel-1.png) :::danger Sau khi `Đăng ký` xong tài khoản, vui lòng `Đăng nhập` để thực hiện bước tiếp theo. ::: ### Sử dụng thiết kế có sẵn Nhằm đảm bảo cho việc rút ngắn thời gian, đơn giản hóa công việc tạo **Ô sản phẩm trên vòng quay**, chúng tôi xin cung cấp các mẫu có sẵn theo từng số lượng cố định ở Link: - **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 1](https://www.figma.com/file/EOx1EPnA2OkzQD5FEZzNJo/Thi%E1%BA%BFt-k%E1%BA%BF-v%C3%B2ng-quay-may-m%E1%BA%AFn-c%C6%A1-b%E1%BA%A3n-1?t=0U0p17qqc1kVnfjl-1)** - **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 2](https://www.figma.com/file/T2aqeEFOUoB2o9fIA67wak/VONGQUAY_6-8-10-12?t=vLvTMihgA3xTmQKr-1)** Để chỉnh sửa vui lòng làm theo các bước: - Ấn vào dấu mũi tên đi xuống `(vị trí 1)`. - Ấn **Duplicate to your drafts** `(vị trí 2)`. - Ấn **Open** khi có thông báo đã thành công `(vị trí 3)` hoặc quay lại **[Figma](https://www.figma.com/)** để tìm, lưu ý cuối tên file có chữ `(Copy)`. ![Figma Duplicate Draft](./img/minigame-tutorial-design-wheel-2.png) :::caution - Thiết kế mẫu chỉ bao gồm `Hình ảnh các ô trên vòng quay`. Bạn cần chọn `ảnh sản phẩm` phù hợp cùng với `tên giải thưởng` để chèn vào bên trong. - Khi **[Cài đặt vòng quay](../tutorial-minigame/wheel)** vui lòng `theo thứ tự như mẫu, màu sắc SOLE với nhau` để hình Vòng quay được hiển thị đẹp nhất. ::: ### Thiết kế theo số lượng tự chọn - Figpie :::caution - Cần thời gian và sự tỉ mỉ. - Số lượng ô trên vòng quay khuyến nghị là từ 4 - 12. - Nếu gặp khó khăn vui lòng liên hệ bộ phận **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được giúp đỡ. ::: - Vào Link **[Figpie](https://www.figma.com/community/plugin/924390003304842148/Figpie)**, sau đó ấn để cài đặt. - Bạn sẽ được chuyển về trang Thiết kế của Figma, một Popup thông báo sẽ hiển thị, Ấn . - Plugin **Figpie** hiển thị báo gồm các cài đặt sau: - **DATA:** số lượng ô trên vòng quay. - ấn `+` để thêm và ấn `-` để xóa. - nhập `value` giống nhau, mặc định là `5`. - **DIAMETER:** `chiều cao và chiều rộng` của Vòng quay. - **THEME:** màu sắc mặc định của các ô. - **PREVIEW:** xem trước Vòng quay hiển thị. ![Figpie](./img/minigame-tutorial-design-wheel-3.png) - Ấn để tạo. - **Một biểu đồ** sẽ hiển thị `(1)`, vui lòng chọn `1 ô (mảnh)` (tạm gọi là 🍕) trong số đó và làm theo hướng dẫn: - Kéo ra ngoài `(2)` - Xóa viền trắng mặc định `(3)`, ấn dấu `-` - Chỉnh màu `(5)` - Chỉnh lại góc nghiêng `(4)` sao cho 🍕 dựng thẳng đứng `(6)`image.png ![Figpie Tutorial 1](./img/minigame-tutorial-design-wheel-4.png) - **Tạo Frame** để bọc khung `Ô vòng quay` vừa lấy được: - Ấn trên bàn phím nút `F`, sau đó kéo thả chuột tạo 1 **Frame** với `chiều cao` bằng với 🍕, `chiều rộng` sẽ tự căn chỉnh sau `(1)`. - Kéo 🍕 `(2)` vào bên trong **Frame** `(1)` sẽ được **Frame** `(3)` - Xòa màu nền bằng cách ấn vào `-` `(4)` - **Frame** hoàn thiện `(5)`, copy `Ctrl + C` và dán `Ctrl + V` lại ở vị trí khác rồi đổi màu sẽ có 🍕 khác `(6)`. ![Figpie Tutorial 2](./img/minigame-tutorial-design-wheel-5.png) - Việc cuối cùng là tạo thêm các 🍕 để thêm nội dung vào đó rồi xuất ảnh. ## Thiết kế bằng Photoshop `Đang cập nhật`