January 23, 2021

Рисую элементы интерфейса пикселькой.

С чего начинается рисование? Конечно же, с подбора цвета. Сперва, захожу на сайт colorhunt.co и выбираю понравившуюся мне палитру цветов.

Мне понравилась вот эта

Открываю Aseprite и начинаю рисование.

Я составила список элементов, которые буду отрисовывать.

Для начала сделаю кнопочку Play.

После неё буду рисовать кнопку для настроек.

Теперь сделаю кнопочку для изменения громкости. У неё будут два состояния: со звуком и без звука.

Как видишь, милый я использую 3 цвета из палитры.

Теперь нужно создать поле для ввода текста.

Вот такое вот текстовое поле у меня получилось.

Думаю, теперь пора создать текстовый курсор.

Вот так выглядит textbox вместе с курсором.

Так, теперь пришла очередь рисовать Label.

Вот такой вот курсор получился.

Теперь самое время сделать загрузку.

Чтож, сейчас нужно сделать выпадающий список.

Выпадающий список готов.

Тут я закончила делать стрелочку для увеличения или уменьшения значения числа.

И последнее мне осталось сделать небольшой чекбокс.

Вот чекбоксик и готов.

Теперь нужно анимировать все элементы UI.

Вот так у меня все получилось.

Итоговый результат я уже выкладывала. Архив будет в постике ниже.

Мне самой очень понравился результат. С ограниченной палитрой элементы смотрятся более гармонично.