Как да създавате графики с Adobe XD: Ръководство за начинаещи

Adobe XD е мощен инструмент, който ви позволява да създавате UI/UX дизайни за софтуер, приложения, уебсайтове и др. Това също включва създаване на макети, прототипи и персонализирани UI компоненти за интерфейс. Можете да създавате както прости, така и сложни дизайни с помощта на Adobe XD.

Тук ще очертаем как да добавите прости графики, включително форми, изображения и текст към нов проект на Adobe XD. Това ще бъде последвано от ръководство за това как да конвертирате група фигури в компоненти и как да използвате повторно тези компоненти на страницата. И накрая, статията ще обхване и как да експортирате вашите графики. Да скочим направо.

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

Когато създавате нов проект на Adobe XD, трябва да изберете размер на оформлението за вашия проект. Той предоставя няколко шаблона, от които можете да избирате въз основа на някои популярни устройства.

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

След като създадете нов проект, 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. Когато приключите със създаването на фигурата, натиснете Еsc клавиш на клавиатурата си.

Как да промените цвета на фигура

Можете да промените цвета на фигурата с помощта на десния панел.

1. Маркирайте формата.
2. В десния прозорец променете Фаз ще.
3. Освен това можете също да добавяте граници, ефекти на размазване и да променяте непрозрачността на формата по същия начин като изображенията.

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

Можете също добавяне и редактиране на текст по същия начин, по който добавяте форми.

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

Как да създадете компоненти

Компонентът е група от дизайнерски елементи, които могат да бъдат използвани повторно. За да създадете и използвате компонент, първо трябва да имате група от форми или други дизайнерски обекти.

1. Маркирайте групата от форми в платното. Щракнете с десния бутон върху групата и изберете Направете компонент.
2. В долната част на левия панел щракнете върху Активи. Ще се отвори ново меню, изброяващо всички активи, които имате, включително компонента, който току-що сте добавили.
3. Щракнете и плъзнете компонента от списъка с компоненти към платното. Това ще създаде точно същата група елементи.

Как да експортирате артикули

Можете да експортирате отделни елементи, както и цялата страница.

1. Ако искате да експортирате един елемент, маркирайте елемента, който искате да експортирате.
2. Кликнете върху хамбургер икона на менюто в горната част на лявата колона.
3. Изберете Експортиране, след което щракнете върху Избрано.
4. Ако искате да експортирате цялата страница (или всички страници), изберете Всички Artboards вместо.
5. Можете да посочите файловия формат (PNG, JPG, SVG или PDF), за какво ще бъде експортираният елемент (като уеб или iOS) и къде искате да запишете вашия файл.

Получете умения в Adobe XD

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

Налични са множество курсове онлайн, които да ви помогнат да изведете новите си дизайнерски умения на следващото ниво.

Тези курсове по Adobe ще ви превърнат в Creative Cloud Master

Прочетете Следващото

За автора