UXPUB

UXPUB - спільнота з 4,813 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Создаем красивый график дашборда за 1 минуту в Sketch
Редакція
Редакція

Опубліковано

Создаем красивый график дашборда за 1 минуту в Sketch

Часто, при поиске вдохновения для создания дашборда на Dribble, я сталкиваюсь с прекрасными работами, в которых постоянно есть один изъян - график. Создаем красивый график дашборда за 1 минуту - 1 Выглядит неплохо, но график явно не вписывается. Для того, чтобы график хорошо выглядел, он должен быть идеально симметричным. Я имею в виду, что расстояния между точками должны быть идентичными. Я решил создать простое наглядное руководство для того, чтобы показать вам процесс создания идеального графика. Этот гайд был создан в Sketch, но он будет работать в любом другом графическом редакторе, в котором есть инструмент “перо”. Создаем красивый график дашборда за 1 минуту - 2 Одна из моих работ, в которой я использовал данный метод.

Создайте линию и продублируйте ее

Для начала создайте линию и продублируйте ее 10 раз. Сделайте расстояние между линиями в 41 пиксель (для этого примера). Для этого можно использовать Craft by InVision LABS. https://vimeo.com/198650438

Продублируйте группу линий

Далее, создайте группу линий и продублируйте ее. Задайте центр копируемой группы первой группой и измените прозрачность группы до 35%. Аккуратнее с позиционированием потому, что все должно быть идеальным. https://vimeo.com/198650428

Добавьте точки графика

Теперь просто придерживайтесь ваших линий. Помните, что направление точки идет от дескриптора и должно быть такой же ширины, как и пространство между точками графика… ну, это проще понять, если взглянуть на GIF. https://vimeo.com/198650423

Исходный файл

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


Перевод статьи Wojciech Zieliński

Обговорення (0)