Как создавать графику с помощью Adobe XD: руководство для начинающих

Adobe XD — это мощный инструмент, который позволяет создавать дизайн UI/UX для программного обеспечения, приложений, веб-сайтов и многого другого. Это также включает создание макетов, прототипов и пользовательских компонентов пользовательского интерфейса для интерфейса. Вы можете создавать как простые, так и сложные дизайны с помощью Adobe XD.

Здесь мы расскажем, как добавить простую графику, включая фигуры, изображения и текст, в новый проект Adobe XD. За этим последует руководство о том, как преобразовать группу фигур в компоненты и как повторно использовать эти компоненты на странице. Наконец, в статье также будет рассказано, как экспортировать вашу графику. Давайте прыгать прямо в.

Создание проекта Adobe XD

Когда вы создаете новый проект Adobe XD, вы должны выбрать размер макета для своего проекта. Он предоставляет несколько шаблонов на выбор для некоторых популярных устройств.

Несколько примеров этого включают iPhone X/XS/11 Pro (375 пикселей на 812 пикселей), iPad (768 пикселей на 1024 пикселей) или Web 1920 (1920 пикселей на 1080 пикселей). Кроме того, у вас также есть возможность выбрать пользовательскую ширину и высоту для вашего проекта.

После создания нового проекта Adobe XD откроет пустую страницу. Здесь вы можете начать добавлять изображения, фигуры, текст или другие элементы дизайна. В зависимости от того, какая у вас версия Adobe XD, вы можете изучить некоторые из новых функций которые предлагает Adobe XD.

Элементом дизайна верхнего уровня является сама страница холста. Если вы выделите его, вы можете использовать правую панель, чтобы напрямую изменить некоторые его свойства, такие как ширина или высота холста.

Как добавить изображения

Существует несколько способов добавления изображений в проект Adobe XD.

• Первый вариант — нажать на кнопку гамбургер значок меню в верхней части левого столбца. Нажмите на импорти откройте файл, который хотите добавить.
• Другой вариант — перейти к изображению в проводнике и перетащить файл прямо в Adobe XD.
• Третий вариант — скопировать и вставить изображение, если оно открыто в другом программном обеспечении, таком как Microsoft Word.

Как изменить размер и положение изображения

Вы можете изменить положение и изменить размер изображения либо непосредственно на холсте, либо путем изменения его свойств.

1. Выделите изображение. Когда вы выделите элемент дизайна на холсте, вы сможете увидеть его свойства на правой панели.
2. Измените ширину и высоту изображения. Они представлены Вт и ЧАС поля.
3. Вы также можете изменить Икс и Д координаты начала верхнего левого угла изображения.
4. Чтобы переместить изображение, щелкните и перетащите изображение на холсте.
5. Чтобы изменить размер, перетащите точки, расположенные по краям изображения.

Как настроить края изображения

Вы можете настроить углы изображения, чтобы изменить его форму.

1. Выделите изображение.
2. Вы увидите несколько точек, расположенных вокруг изображения. Кроме того, есть также некоторые точки, расположенные внутри углов изображения.
3. Нажмите и перетащите точку, расположенную внутри изображения. Это будет медленно изменять форму изображения в другую форму.

Как добавить другие эффекты к изображению

Вы можете манипулировать изображением, добавляя эффекты. Это включает в себя непрозрачность, границы, эффекты размытия и многое другое.

1. Выделите изображение и измените Оспокойствие на правой панели.
2. Находясь на правой панели, измените цвет Бпорядок. Здесь же можно изменить толщина, тире стиль, и угловой стиль границы.
3. Добавьте к изображению эффект размытия и измените Степень размытия объекта чтобы увеличить или уменьшить интенсивность размытия.

Как добавить фигуры

Вы можете добавлять фигуры в Adobe XD через левую панель.

1. На левой панели вы можете создать несколько основных фигур, включая прямоугольник, круг, треугольник и линию. Выберите фигуру, которую хотите нарисовать.
2. Щелкните любую точку на холсте и перетащите курсор, чтобы начать создание фигуры.

Как добавить пользовательские фигуры

Вы можете использовать инструмент пользовательской формы, чтобы создать свою собственную форму.

1. На левой панели выберите ручка икона.
2. Щелкните в любом месте холста, чтобы добавить первую точку или «угол» фигуры. Для каждой точки фигуры щелкните на холсте в той области, где вы хотите, чтобы она была.
3. Закончив создание формы, нажмите кнопку ЕСК клавишу на клавиатуре.

Как изменить цвет фигуры

Вы можете изменить цвет фигуры, используя правую панель.

1. Выделите форму.
2. На правой панели измените Фбольной.
3. Кроме того, вы также можете добавлять границы, эффекты размытия и изменять непрозрачность фигуры так же, как и изображения.

Как добавить текст

Вы также можете добавлять и редактировать текст так же, как вы добавляете фигуры.

1. Нажми на Текст значок на левой панели.
2. Щелкните в любом месте холста, чтобы добавить новое текстовое поле. Введите желаемый текст в текстовое поле.
3. Используйте правую панель для редактирования размер, семейство шрифтов, и выравнивание поля.

Как создавать компоненты

Компонент — это группа элементов дизайна, которые можно использовать повторно. Чтобы создать и использовать компонент, сначала необходимо иметь группу фигур или других объектов дизайна.

1. Выделите группу фигур на холсте. Щелкните правой кнопкой мыши группу и выберите Сделать компонент.
2. В нижней части левой панели нажмите на Ресурсы. Откроется новое меню со списком всех имеющихся у вас активов, включая только что добавленный компонент.
3. Щелкните и перетащите компонент из списка компонентов на холст. Это создаст точно такую ​​же группу элементов.

Как экспортировать предметы

Вы можете экспортировать как отдельные элементы, так и всю страницу.

1. Если вы хотите экспортировать один элемент, выделите элемент, который хотите экспортировать.
2. Нажми на гамбургер значок меню в верхней части левого столбца.
3. Выбирать Экспорт, затем нажмите на Выбрано.
4. Если вы хотите экспортировать всю страницу (или все страницы), выберите Все монтажные области вместо.
5. Вы можете указать формат файла (PNG, JPG, SVG или PDF), для чего будет экспортироваться элемент (например, для Интернета или iOS) и где вы хотите сохранить файл.

Получите навыки работы с Adobe XD

Это только основы. Некоторые другие функции включают возможность добавления гиперссылок, символов, интеграции приложений и наборов пользовательского интерфейса. Adobe XD также время от времени выпускает новые функции, которые помогают улучшить и упростить создание ваших макетов и пользовательских дизайнов пользовательского интерфейса.

В Интернете доступно несколько курсов, которые помогут вывести ваши новые дизайнерские навыки на новый уровень.

Эти курсы Adobe превратят вас в мастера Creative Cloud

Читать дальше

Об авторе