adobe xd tutorial user interface dashboard

Hello, Ninja here. Before I start this tutorial, I’d like to say thanks to you GUI’s. I appreciate the feedback that you give in the comment section. I hope you find my videos useful so I will make them even better. Now… it’s time to start.

Продолжим наполнять блок Investments эллиментами UI
Let’s continue filling block “investments” by UI elements.
И продолжим мы с иконок валют
And first thing that we will work on is currency icons

Создадим два квадрата – это будут бэкгроунды для самих иконок, одна будет для доллоровой валюты а вторая для биткойна
Now I’m going to create two squares. They will be backgrounds for the icons themselves. One of them will be the dollar sign and the other one is bitcoin.

Я хочу создать эффект чтобы бэкгроунд биткойны вырезал бэкгроунд доллара, как будто накладывался друг на друга, заокругляем углы и выравниваем
I want to make an effect wherein the Bitcoin icon is on top of the dollar sign and make edges rounded and align them.

И перекрашиваем иконку биткоина в оранжевые тона
Then paint the bitcoin icon in orange tones.

Биткоин ассоциируеться с оранжевым цветом, я немного смухлюю и сделаю его розово – оранжевым для более выразительного эффекта
Bitcoin is associated with orange but I’m going to cheat a bit and make it pink-orange for more expressive effect.
Скопирую верхний квадрат и положу его между доллором и биткоином и перекрашу его в темный цвет
Copy the top square and put it between the dollar sign and the bitcoin icon, then make it darker.
Иеперь поменяю градиент для самого бэкгроунда доллара, Доллор ассоциируеться с зеленым цветом, но я его сделаю голубо-зеленым градиентом чтобы он был в стиле дешборда
Now it’s time to change the gradient for the background of the dollar. As we all know, dollar is associated with green, but I will make it with blueish-green gradient so it will have the same style with the dashboard.

Так же выравниваю и вставляю непосредственно иконку самого доллара – я ее написал текстом, добавлю к ней тени, чтобы немного выделялось
Also, I need to align and put the icon of the dollar itself. I typed it by text and add shadows to it, that’s how I make it stand out.

тень не должна быть черной, она всегда того цвета на котором лежит (но немного темнее)
The shadow is not supposed to be black. It is always the same color with the object (but a little darker).

Дальше скачаем иконку биткоина и вставим ее в соседний квадрат, так же добавим теней для большего обьема
Next, I have to download an icon of the bitcoin and put it in the adjacent square and put shadows for the bigger volume.

И дальше выравниваем соседнй блок относительно блока Investments и выравниваем по высоте оба блока
Next step is aligning the adjacent block relative to the “investments” block and then align both of them on top.
Меняем значения, чтобы контент не повторялся, как я говорил ранее это придает больше разнообразия и проект кажеться живее
Change values to not repeat content. As I have said, it makes it look more diverse [dAy-verz] and the project seems more alive.

Копируем текст и вставляем нужные нам значения в блок Investments
Copy the text and add the needed values in the block “investments.”

Немного подправим градиент, всегда можно вернуться к любому эллименту и доправить его если он не устраивает (на любом из этапов работы)
Let’s work a bit on the gradient. You can always come back to each element of the project and fix it if something doesn’t work for you.
Так же само и в CSS я думаю, если конечный результат не устраивает всегда можно его немного подправить
I think it’s the same in CSS. If the final result does not look good enough, you can just fix it.

adobe xd tutorial

#adobexd #tutorial #design

Post Author: hatefull