Thiết kế nút giỏ hàng

Thiết kế nút giỏ hàng

Trong hướng dẫn hôm nay, bạn sẽ được học cách tạo một nút giỏ hàng đơn giản với sự trợ giúp của Adobe Illustrator. Bạn có thể tạo nhiều nút mua sắm khác hoặc thương mại điện tử với sự trợ giúp của nút giỏ hàng tương tự.

Bắt đầu 

Bước 1

Thiết lập một tài liệu trong Adobe Illustrator bằng cách vào menu File và nhấp vào New Document. Trong kích thước chúng ta sẽ sử dụng A4 với một hướng nằm ngang.

Bước 2

Lưu tài liệu dưới dạng cartbutton.ai trong ổ đĩa của bạn. Tôi muốn lưu tài liệu ngay sau khi nó được tạo ra và lưu giữ nó ở giữa để tránh mất những gì chúng tôi đã thiết kế và sẽ thiết kế.

Tạo nút giỏ hàng 

Bước 1

Chúng tôi sẽ bắt đầu bằng cách chọn công cụ Pen từ các công cụ hoặc nhấp vào P để kích hoạt công cụ Pen. Thay đổi thuộc tính foreground hoặc fill thuộc None và thuộc tính stroke thành None.

Bước 2

Với sự trợ giúp của công cụ Bút, chúng tôi sẽ vẽ hình dạng cơ bản của nút giỏ hàng. Lưu ý rằng để tạo đường thẳng, tôi đang nhấn phím Shift trong khi vẽ nó. Khi bạn hài lòng với hình dạng của giỏ hàng, hãy nhấp vào hộp điền và chọn màu để điền vào hình dạng của giỏ hàng và nhấp vào OK.

Bước 3

Để vẽ bánh xe của nút giỏ hàng, chúng tôi sẽ sử dụng công cụ Ellipse (phím tắt từ bàn phím L). Nhấn Shift trong khi kéo một vòng tròn bằng công cụ để có kích thước chính xác mà không chuyển đổi bất kỳ. Sao chép và dán cùng một bánh xe và kéo nó theo chiều ngang từ bánh xe đầu tiên để làm cho chúng trông song song với nhau.

Bước 4

Bây giờ chúng tôi sẽ thiết kế giỏ hàng theo cùng một cách với sự trợ giúp của công cụ Pen gần tay cầm của giỏ hàng. Nhưng trước khi bắt đầu, chúng ta sẽ thiết lập các thuộc tính điền vào None lần nữa.

Để tạo đường cong của giỏ hàng, hãy thả một điểm và không phải nhấp vào con trỏ, kéo nó lên phía trên bên phải để tạo đường cong về phía dưới; khi bạn cảm thấy đường cong là OK, hãy thả con trỏ. Nhấn Alt trong khi nhấp vào   gần điểm neo và sau đó tiếp tục thiết kế phần còn lại của giỏ hàng. Điền vào khu vực thiết kế với màu sắc giống với phần còn lại của giỏ hàng.

Bước 5

Tạo một dấu cộng bên trên giỏ hàng được tạo thành từ hai bước. Đầu tiên chúng ta sẽ tạo một vòng tròn đơn giản với sự trợ giúp của công cụ Ellipse, giống như chúng ta đã làm trước đó nhưng lần này lớn hơn để phù hợp với diện tích của giỏ hàng. Trong khi tạo hình tròn, bạn có thể kéo và căn chỉnh nó với giỏ hàng bằng cách nhấn phím cách trên bàn phím của bạn.

Bước 6

Để tạo một dấu cộng, chúng ta sẽ sử dụng công cụ Chữ nhật (M); để điền màu, chúng ta sẽ sử dụng màu trắng (#ffffff). Sau khi vẽ hình chữ nhật, chọn nó bằng công cụ Selection và kéo nó lên trên cùng của hình tròn lớn hơn và căn giữa nó. Sao chép và dán hình chữ nhật tương tự và xoay nó bằng cách nhấp chuột phải vào hình chữ nhật, chọn Chuyển đổi và chọn Xoay. Bây giờ đặt góc 90º và nhấn OK. Hình chữ nhật bây giờ sẽ nằm ngang. Kéo nó vào vòng tròn để canh lề và đặt nó ở giữa và tạo một dấu cộng.

Bước cuối cùng

Lưu tệp lại. Ngoài ra, bạn có thể xuất tệp tin dưới dạng tệp PNG để tạo hình ảnh cho trang web của mình.

Vì vậy, đây là cách bạn có thể dễ dàng tạo một nút giỏ hàng cho dự án của mình. Bạn có thể ẩn hình chữ nhật đứng để tạo dấu hiệu trừ hoặc xóa nút giỏ hàng từ nút giỏ hàng được thiết kế ở trên.

Tôi hy vọng điều này hữu ích cho bạn! Để có thêm hướng dẫn và nội dung miễn phí khác, bạn có thể trở thành một phần của Tutpad.
Hãy đến với Phạm Khôi in tag giá, in mạc giá, in tag giá thời trang