Cách tạo đồ họa với Adobe XD: Hướng dẫn cho người mới bắt đầu

Adobe XD là một công cụ mạnh mẽ cho phép bạn tạo thiết kế UI / UX cho phần mềm, ứng dụng, trang web, v.v. Điều này cũng bao gồm việc tạo mô hình, nguyên mẫu và các thành phần giao diện người dùng tùy chỉnh cho một giao diện. Bạn có thể tạo cả thiết kế đơn giản và phức tạp bằng Adobe XD.

Ở đây, chúng tôi sẽ phác thảo cách thêm đồ họa đơn giản bao gồm hình dạng, hình ảnh và văn bản vào một dự án Adobe XD mới. Tiếp theo là phần hướng dẫn về cách chuyển một nhóm hình dạng thành các thành phần và cách sử dụng lại các thành phần đó trên trang. Cuối cùng, bài viết cũng sẽ đề cập đến cách xuất đồ họa của bạn. Hãy bắt tay ngay vào.

Tạo một Dự án Adobe XD

Khi bạn tạo một dự án Adobe XD mới, bạn nên chọn kích thước bố cục cho dự án của mình. Nó cung cấp một vài mẫu cho bạn lựa chọn dựa trên một số thiết bị phổ biến.

Một vài ví dụ về điều này bao gồm iPhone X / XS / 11 Pro (375px x 812px), iPad (768px x 1024px) hoặc Web 1920 (1920px x 1080px). Ngoài ra, bạn cũng có tùy chọn để chọn chiều rộng và chiều cao tùy chỉnh cho dự án của mình.

Khi bạn đã tạo một dự án mới, Adobe XD sẽ mở ra một trang trống. Đây là nơi bạn có thể bắt đầu thêm hình ảnh, hình dạng, văn bản hoặc các yếu tố thiết kế khác. Tùy thuộc vào phiên bản Adobe XD nào bạn có, bạn có thể khám phá một số tính năng mới mà Adobe XD cung cấp.

Phần tử thiết kế cấp cao nhất là chính trang canvas. Nếu bạn đánh dấu nó, bạn có thể sử dụng ngăn bên phải để thay đổi trực tiếp một số thuộc tính của nó, chẳng hạn như chiều rộng hoặc chiều cao của canvas.

Cách thêm hình ảnh

Có nhiều cách để bạn có thể thêm hình ảnh vào dự án Adobe XD của mình.

• Tùy chọn đầu tiên là nhấp vào bánh hamburger biểu tượng menu ở đầu cột bên trái. Bấm vào Nhập khẩuvà mở tệp bạn muốn thêm.
• Một tùy chọn khác là điều hướng đến hình ảnh của bạn trong trình khám phá tệp và kéo tệp trực tiếp vào Adobe XD.
• Tùy chọn thứ ba là sao chép và dán hình ảnh của bạn nếu bạn mở nó trong một phần mềm khác, chẳng hạn như Microsoft Word.

Cách thay đổi kích thước và đặt lại vị trí của một hình ảnh

Bạn có thể đặt lại vị trí và thay đổi kích thước hình ảnh trực tiếp trên canvas hoặc bằng cách thay đổi các thuộc tính của nó.

1. Làm nổi bật hình ảnh. Khi bạn đánh dấu một phần tử thiết kế trên canvas, bạn sẽ có thể thấy các thuộc tính của nó trong ngăn bên phải.
2. Thay đổi chiều rộng và chiều cao của hình ảnh. Chúng được đại diện bởi W và H lĩnh vực.
3. Bạn cũng có thể thay đổi X và Y tọa độ của vị trí bắt đầu trên cùng bên trái của hình ảnh.

4. Để di chuyển hình ảnh xung quanh, hãy nhấp và kéo hình ảnh xung quanh trên canvas.
5. Để thay đổi kích thước, hãy kéo các điểm nằm ở các cạnh của hình ảnh.

Cách điều chỉnh các góc của hình ảnh

Bạn có thể điều chỉnh các góc của hình ảnh để thay đổi hình dạng của nó.

1. Làm nổi bật hình ảnh.
2. Bạn sẽ thấy một số điểm nằm xung quanh hình ảnh. Ngoài ra, cũng có một số điểm nằm bên trong các góc của hình ảnh.
3. Nhấp và kéo vào một điểm nằm bên trong hình ảnh. Thao tác này sẽ từ từ định hình lại hình ảnh thành một hình dạng khác.

Cách thêm các hiệu ứng khác vào hình ảnh

Bạn có thể thao tác thêm hình ảnh bằng cách thêm các hiệu ứng. Điều này bao gồm độ mờ, đường viền, hiệu ứng mờ và hơn thế nữa.

1. Đánh dấu hình ảnh và thay đổi Osự ngu xuẩn trong ngăn bên phải.

2. Khi vẫn ở trong ngăn bên phải, hãy thay đổi màu của Bgọi món. Tại đây, bạn cũng có thể thay đổi độ dày, phong cách gạch ngangvà kiểu góc của biên giới.

3. Thêm hiệu ứng mờ vào hình ảnh và thay đổi Số lượng làm mờ đối tượng để tăng hoặc giảm cường độ mờ.

Cách thêm hình dạng

Bạn có thể thêm hình dạng trong Adobe XD thông qua ngăn bên trái.

1. Trong ngăn bên trái, bạn có thể chọn tạo nhiều hình dạng cơ bản bao gồm hình chữ nhật, hình tròn, hình tam giác và đường thẳng. Chọn hình dạng bạn muốn vẽ.
2. Nhấp vào bất kỳ điểm nào trên canvas và kéo con trỏ để bắt đầu tạo hình dạng.

Cách thêm hình dạng tùy chỉnh

Bạn có thể sử dụng công cụ hình dạng tùy chỉnh để tạo hình dạng của riêng bạn.

1. Trong ngăn bên trái, hãy chọn cái bút biểu tượng.
2. Nhấp vào bất kỳ đâu trên canvas để thêm điểm đầu tiên của bạn, hoặc “góc”, cho hình dạng. Đối với mọi điểm của hình dạng, hãy nhấp vào canvas trên khu vực bạn muốn nó ở đó.

3. Khi bạn đã hoàn thành việc tạo hình dạng, hãy nhấn Esc trên bàn phím của bạn.

Cách thay đổi màu sắc của hình dạng

Bạn có thể thay đổi màu của hình dạng bằng cách sử dụng ngăn bên phải.

1. Đánh dấu hình dạng.
2. Trong ngăn bên phải, thay đổi Ftôi sẽ.

3. Ngoài ra, bạn cũng có thể thêm đường viền, hiệu ứng làm mờ và thay đổi độ mờ của hình dạng giống như hình ảnh.

Cách thêm văn bản

Bạn cũng có thể thêm và chỉnh sửa văn bản giống như cách bạn thêm hình dạng.

1. Bấm vào Bản văn biểu tượng trong ngăn bên trái.
2. Nhấp vào bất kỳ đâu trên canvas để thêm một hộp văn bản mới. Nhập văn bản mong muốn của bạn vào hộp văn bản.
3. Sử dụng ngăn bên phải để chỉnh sửa kích thước, họ phông chữvà sự liên kết lĩnh vực.

Cách tạo các thành phần

Thành phần là một nhóm các phần tử thiết kế có thể được sử dụng lại. Để tạo và sử dụng một thành phần, trước tiên bạn cần có một nhóm các hình dạng hoặc các đối tượng thiết kế khác.

1. Đánh dấu nhóm hình dạng trong canvas. Nhấp chuột phải vào nhóm và chọn Làm thành phần.

2. Ở cuối ngăn bên trái, hãy nhấp vào Tài sản. Một menu mới sẽ mở ra liệt kê bất kỳ nội dung nào bạn có, bao gồm cả thành phần bạn vừa thêm.

3. Nhấp và kéo thành phần từ danh sách các thành phần vào canvas. Làm như vậy sẽ tạo ra cùng một nhóm các phần tử.

Cách xuất các mặt hàng

Bạn có thể xuất các mục riêng lẻ cũng như toàn bộ trang.

1. Nếu bạn muốn xuất một mục, hãy đánh dấu mục bạn muốn xuất.
2. Bấm vào bánh hamburger thực đơn ở đầu cột bên trái.
3. Lựa chọn Xuất khẩusau đó nhấp vào Đã chọn.
4. Nếu bạn muốn xuất toàn bộ trang (hoặc tất cả các trang), hãy chọn Tất cả các Artboards thay thế.

5. Bạn có thể chỉ định định dạng tệp (PNG, JPG, SVG hoặc PDF), mục được xuất sẽ dùng để làm gì (chẳng hạn như Web hoặc iOS) và nơi bạn muốn lưu tệp của mình.

Có kỹ năng trong Adobe XD

Đây chỉ là những điều cơ bản. Một số tính năng khác bao gồm khả năng thêm siêu liên kết, biểu tượng, tích hợp ứng dụng và Bộ giao diện người dùng. Adobe XD cũng luôn đưa ra các tính năng mới để giúp cải thiện và hợp lý hóa việc tạo mô hình và thiết kế giao diện người dùng tùy chỉnh của bạn.

Có nhiều khóa học trực tuyến để giúp nâng cao kỹ năng thiết kế mới của bạn.

Đọc tiếp

Giới thiệu về tác giả