Update 13/04/2023

adman/docs/tutorial-adman/tutorial-design-wheel.md

@@ -0,0 +1,101 @@
+---
+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 <button className="btn btn-submit">Get Started</button>.
+
+![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 <button className="btn btn-submit">Try it out</button> để 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 <button className="btn btn-submit">Run</button>.
+- 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 <button className="btn btn-figpie">Create a pie chart</button> để tạo.
+
+- **Một biểu đồ** sẽ hiển thị `(1)`, vui lòng chọn `1 ô (mảnh)` (tạm gọi là &#127829;) 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 &#127829; 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 &#127829;, `chiều rộng` sẽ tự căn chỉnh sau `(1)`.
+  - Kéo &#127829; `(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ó &#127829; 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 &#127829; để thêm nội dung vào đó rồi xuất ảnh.
+
+## Thiết kế bằng Photoshop
+
+`Đang cập nhật`