Создание артбордов в Adobe XD — это первый шаг в разработке ваших дизайнов. Независимо от того, создаете ли вы адаптивные веб-сайты, приложения или прототипы, умное расположение артбордов имеет решающее значение для рабочего процесса. В этом руководстве вы узнаете, как создавать и оптимизировать артборды для различных разрешений и устройств. Это позволит вам всегда быть в курсе своих проектов.
Основные выводы
- Создайте артборды для различных устройств и разрешений.
- Осторожно наименуйте свои артборды и объекты, чтобы иметь возможность отслеживать их.
- Учитывайте плотность пикселей для Retina-дисплеев, чтобы максимизировать качество изображения.
- Используйте сочетания клавиш для более быстрого и продуктивного рабочего процесса.
Пошаговое руководство
Начало: Создание собственного артборда
Чтобы начать работать в Adobe XD, вам нужно создать свой первый артборд. Вы найдете панель артбордов, которую можно открыть с помощью маленькой иконки в нижней панели. Там вы можете управлять всеми артбордами, которые у вас есть в проекте. Используйте двойной щелчок, чтобы переименовать свой первый артборд, например, в «Главная». Это поможет вам сохранить организованность.
Создание нового артборда
Хотите добавить новый артборд? Используйте сочетание клавиш «A» для инструмента артборда. Один щелчок создаст новый артборд. Убедитесь, что вы переименовали артборд при повторном щелчке на него, например, в «Функции». Обратите внимание, что используете различные размеры для своих артбордов, чтобы достичь гибкости в вашем дизайне.
Настройки артборда
Артборды предлагают множество вариантов настройки. Щелкните на соответствующий артборд и перейдите в панель настроек. Вы можете легко изменить ориентацию с горизонтальной на вертикальную. Это позволяет вам быстро имитировать, как ваш дизайн будет выглядеть на различных устройствах, таких как планшеты или смартфоны. Особенно в веб-дизайне важно создавать адаптивные дизайны.
Увеличение и изменение размера
Теперь вы можете изменить размер своего артборда. Просто перетащите за ручку вниз, и вы сразу увидите новую область, которая изменится соответственно. По пунктирной линии вы можете видеть, какие части вашей страницы видимы в текущем окне просмотра. Часть, выходящая за пределы, придется прокрутить.
Настройка цвета и сетки
Теперь перейдите к настройкам цвета и определите нужные вам цвета. Вы можете ввести цветовые коды или использовать ползунок. Кроме того, есть возможность активировать сетку для вашего дизайна, что поможет вам точно настраивать макеты. Эти инструменты очень полезны для структурирования ваших дизайнов и придания им визуальной привлекательности.
Настройка для различных устройств
Создайте как минимум три различных артборда для распространенных форматов экранов: настольный компьютер, планшет и смартфон. Вам следует обратить внимание, чтобы ваши дизайны хорошо смотрелись на всех устройствах. Частое разрешение настольных компьютеров составляет 1366 пикселей, но вы также можете использовать 1920 пикселей (Full HD). Для планшета выберите пример iPad или Surface, а затем перейдите к размерам смартфонов, например iPhone 10.
Учет плотности пикселей
Одной из деталей, которые необходимо учитывать при дизайне, являются дисплеи с высоким разрешением, которые используются во многих современных устройствах. Эти дисплеи имеют высокую плотность пикселей, что означает, что качество изображения очень важно. Поэтому, когда вы вставляете графику или изображения из Photoshop в свой проект, обратите внимание на разрешение этих изображений. Для Retina-дисплеев вам нужно как минимум удвоить размер изображения, чтобы добиться идеального качества.
Расположение артбордов
С помощью Adobe XD у вас есть возможность легко переставлять свои артборды. Это полезно, если вы хотите получить лучшее представление. С помощью клавиши удаления или «Назад» вы можете удалить нежелательные артборды. Кроме того, используя сочетание клавиш «Command + D», вы можете создать дубликат артборда, чтобы на его основе разрабатывать новые дизайны.
Оптимизация рабочего пространства
Используйте пробел, чтобы активировать инструмент «Рука» и свободно перемещаться по своему рабочему пространству. Это особенно полезно, если на вашем артборде есть несколько элементов. Дважды щелкните по объектам, чтобы перейти к их детальному просмотру и продолжить редактирование. Убедитесь, что все ваши объекты четко названы и аккуратно расположены внутри артбордов, чтобы в дальнейшем было проще работать.
Резюме — Артборды в Adobe XD: шаг за шагом к эффективному дизайну
В этом руководстве вы узнали, как создавать и настраивать артборды в Adobe XD. Вы понимаете, насколько важно правильно их называть и настраивать, чтобы сохранять обзор в вашем проекте.
Часто задаваемые вопросы
Как создать новый артборд в Adobe XD?Используйте сочетание клавиш «A» для инструмента артборда и щелкните на место, где вы хотите разместить артборд.
Можно ли изменить размер артбордов?Да, вы можете изменить размер, используя управляющие ручки или вводя значения в правой панели.
Почему важна плотность пикселей?Плотность пикселей имеет значение, чтобы обеспечить четкое отображение изображений и графики на дисплеях с высоким разрешением.
Как можно лучше организовать свои артборды?Используйте четкие обозначения для каждого артборда и поддерживайте аккуратность вашего рабочего пространства, чтобы сохранить порядок.
Можно ли дублировать артборды?Да, используйте сочетание клавиш «Command + D», чтобы дублировать артборд.
