Как сделать фон в Adobe XD

Обновлено: 20.11.2024

При создании дизайна пользовательского интерфейса, особенно в сложном макете, нам может потребоваться часто повторять некоторые элементы дизайна, например списки и карточки. Чтобы сделать дизайн более живым, нам также необходимо изменить данные контента (текст, изображения и т. д.) внутри этих повторяющихся шаблонов, а не просто использовать один и тот же контент-заполнитель. В Adobe XD есть функция, с помощью которой можно выполнять повторение компонентов дизайна. Эта функция позволяет быстро дублировать компоненты по вертикали и горизонтали и известна как «Повторяющаяся сетка».

Инструмент повторения сетки работает быстрее по сравнению с обычным методом копирования и вставки. Но после использования этого инструмента все дублированные элементы дизайна будут иметь одинаковые данные содержимого. Нам нужно изменить данные, чтобы дизайн представлял реальную жизнь/производственный дизайн и сделать его визуально более интересным. Используя инструмент повторяющейся сетки, мы можем массово импортировать данные одним простым перетаскиванием вместо того, чтобы изменять их по частям. Исходя из моего опыта, текст и изображения можно импортировать с помощью этих приемов перетаскивания. В этом уроке я расскажу, как использовать повторяющуюся сетку для более быстрого импорта содержимого данных. Мы будем практиковать эту технику, создав дизайн календаря и брошюру, сложенную втрое.

Создавайте простые и простые дизайны календарей

Первый шаг — подготовка контента

Чтобы создать дизайн календаря, сначала нам нужно подготовить несколько файлов, содержащих необходимые данные. Вы можете подготовить полные данные за один месяц с датой, названием дня и названием месяца, сохраненными в текстовом файле или в вашем любимом формате для текстового процессора. Я подготовил данные с помощью Google Sheets и преобразовал их в файл .txt. Вы можете скачать Google Таблицы здесь, открыть их и скопировать и вставить в файл .txt.

В этом руководстве мы будем использовать шрифты Barlow и Barlow Condensed, которые можно бесплатно загрузить в Google Fonts. При желании вы можете использовать другой шрифт в дизайне календаря.

Второй шаг — создание новой монтажной области

Мы создадим календарь в формате A4. Создайте новый файл в Adobe XD размером 565 пикселей по ширине и 842 пикселя по длине, портретный формат. Дизайн календаря будет представлять собой концепцию макета три на четыре месяца. Мы используем систему сеток для создания руководства по макету с тремя столбцами шириной 161 пиксель, шириной промежутка 20 пикселей и левым и правым полем шириной 21 пиксель.

Чтобы узнать, как создать новый файл Adobe XD и создать сетку, посмотрите видео ниже

Третий шаг — создание компонента дизайна месяца

Повторите сетку этого текста на семь элементов, которые будут использоваться в качестве названий дней с первыми тремя буквами. Удерживая клавиши Shift + Alt, снова скопируйте строку и перетащите ее под текст названия дня.

Теперь скопируйте текст названия дня под линией, продолжайте повторять сетку до пяти строк, которые будут дизайном даты. Не забудьте установить текст в формате центральной линии.

Опять же, удерживая клавиши Shift + Alt, скопируйте строку и перетащите ее под дату. Скопируйте название месяца под линией, измените его размер до 10. Это будет описание особой даты или праздника каждого месяца.

Измените текст названия дня, перетащив файл .txt в его первый текст. Ударь, и именины изменятся автоматически. Проделайте тот же шаг с датой, перетащите файл .txt в первую текстовую группу даты.

Чтобы узнать, как создать один календарный месяц, посмотрите видео ниже.

Обратите внимание, что дата «31 января 2021 г.» не отображается. Он помещает его в шестой ряд дизайна даты. Мы изменим это вручную.

Четвертый шаг. Дублирование компонента дизайна месяца

Теперь мы продублируем дизайн с одним календарным месяцем на двенадцать месяцев:

Сгруппируйте все компоненты дизайна за январь в одну группу, переименовав ее в Jan21.

Дублируйте группу "21 января", используя повторяющуюся сетку, в три столбца и четыре строки.

Измените название месяца, перетащив файл .txt.

Измените оформление даты каждого месяца, перетащив файл .txt.

Измените дату описания каждого месяца и присоедините дату, расположенную в шестой строке.

Чтобы узнать, как продублировать один календарный месяц в двенадцать месяцев и отредактировать компоненты внутри, посмотрите видео ниже.

Разработан первоначальный дизайн календаря на один год.

Шаг пятый. Украсьте календарь

Чтобы сделать дизайн календаря более привлекательным, вы можете украсить его, изменив фон, добавив в календарь логотипы, изображения, иллюстрации или другие компоненты. Я украсил дизайн с помощью Topcoder GUI Kit. Подробности смотрите в видео ниже.

Вы также можете скачать файлы Adobe XD и png по этой ссылке.

Простой дизайн брошюры, сложенной втрое

После того, как вы закончите с учебным пособием по календарю, мы продолжим практиковать эту технику повторяющейся сетки, импортируя текст и изображения, чтобы разработать тройную брошюру о мероприятиях Topcoder Open 21. Обратите внимание, что эта брошюра официально не предназначена для мероприятий Topcoder Open 21, а предназначена только для практических целей.

Первый шаг — создание новой монтажной области

Второй шаг. Приступим к проектированию (часть 1)

На этом шаге мы создадим заголовок TCO и два типа событий; Выездные соревнования ТШО и региональные мероприятия ТШО:

Сначала мы копируем текстовые данные из дизайна календаря, чтобы создать заголовок брошюры, Topcoder Open 2021 и слоган. Загрузите логотипы TCO21 и Topcoder и вставьте в наш дизайн, перетащив их, расположив их в центре первой части.

Создайте прямоугольник для изображения типа события, скопируйте текст, затем сгруппируйте эти два компонента.

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

Выберите прямоугольник в первой группе, выберите изображения, которые мы хотим вставить, затем перетащите их в прямоугольник.

Измените текст названия мероприятия, скопировав его с веб-сайта TCO21.


Первая часть брошюры, сложенной втрое

Третий шаг — продолжение проектирования (часть 2)

В этой части мы создадим обзор соревнований с шестью типами соревнований. У каждого типа соревнования есть значок, название и описание.

Мы копируем текстовые данные из первой части, чтобы создать подзаголовок и описание конкурса.

Чтобы создать подзаголовок видов соревнований, продублируйте эти тексты, удерживая клавишу Alt, перетащите текст.

Добавьте прямоугольник для значка, сгруппируйте эти три компонента. Используя инструменты повторения сетки, продублируйте группу компонентов шесть раз и вертикально опустите. Отрегулируйте расстояние между группами, чтобы сделать дизайн более привлекательным.

Чтобы импортировать текст заголовка, выберите текст в первой группе и перетащите в него файл .txt. Мы используем ту же технику, чтобы вставить текст описания.

Чтобы вставить значок, выберите прямоугольник в первой группе, выберите значки, которые мы хотим вставить, перетащите их в прямоугольник. Значок можно массово импортировать для формата изображения (.jpg/.jpg). Между тем, для значков в виде файлов SVG мы не можем выполнить трюк с массовым импортом с помощью перетаскивания, мы должны заменять их одну за другой.


Вторая часть брошюры, сложенной втрое

Четвертый этап — последние этапы проектирования (часть 3)

В этой третьей части мы создадим вспомогательную информацию о TCO21; Как участвовать в соревнованиях, получать призы и выигрывать поездки:

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

Сгруппируйте эти три компонента, повторите три раза и спуститесь по вертикали.

Чтобы импортировать текст заголовка, выберите текст в первой группе и перетащите в него файл .txt. Мы используем ту же технику, чтобы вставить текст описания.

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

Под разделом "Победа в путешествии" есть три подтемы. Мы можем дублировать и импортировать эти изображения и тексты с помощью той же техники.


Третья часть брошюры, сложенной втрое

Шаг пятый. Украсьте брошюру по своему желанию

Чтобы сделать дизайн брошюры более привлекательным, вы можете украсить его, изменив фон с помощью градиентного цвета. Мы можем скопировать цвет градиента из календаря, используя технику копирования внешнего вида. Выделите объект, нажмите Ctrl+C для копирования, выберите объект, который мы хотим вставить, нажмите Alt+Cmd+V (macOS), чтобы вставить внешний вид объекта. Внесите последние штрихи по своему желанию.

Чтобы увидеть весь процесс проектирования с использованием этих инструментов повторяющейся сетки, посмотрите видео ниже.

Используя хитрости инструментов повторяющейся сетки, массового импорта текста и графических данных, вы сделаете свой дизайн живым и визуально более интерактивным, а также сократите время разработки.

Вот обзор того, как загружаются плагины, когда выполняется код плагина и как работают "операции редактирования" плагина.

Загрузка плагина

Каждое окно документа XD загружает отдельную копию кода JavaScript вашего плагина с отдельным глобальным документом пользовательского интерфейса UXP (как если бы они были, скажем, отдельными окнами браузера).JavaScript в одном окне пока не может взаимодействовать с другими окнами, за исключением использования веб-сервера или другого внешнего канала.

Каждый подключаемый модуль загружается в изолированный контекст с собственным набором глобальных переменных. Различные подключаемые модули не могут совместно использовать объекты или функции друг с другом.

Код вашего подключаемого модуля остается резидентным, пока документ не будет закрыт (или пока разработчик не выполнит команду «Перезагрузить подключаемые модули»). Это означает, что вы можете хранить временное состояние «сеанса» в глобальных переменных или переменных уровня модуля.

Когда запускаются плагины

Несколько различных ситуаций могут привести к выполнению кода в вашем плагине:

Инициализация
  • При загрузке любой код «верхнего уровня» в каждом модуле (файле JS) выполняется немедленно. На данный момент вы не можете редактировать документ или показывать пользовательский интерфейс. Выполняйте только те задачи, которые абсолютно необходимы для базовой загрузки и инициализации — по возможности откладывайте их на потом, когда пользователь впервые вызовет ваш подключаемый модуль.
Команды меню прямого действия
  • Вызов. Каждый раз, когда вызывается одна из команд меню вашего подключаемого модуля, XD вызывает вашу функцию обработчика команд для соответствующего commandId . Ваш обработчик команд может редактировать документ или открывать диалоговое окно; если вы возвращаете промис, эти привилегии распространяются до тех пор, пока промис не завершится. Подробнее см. в разделе «Операции редактирования». события box DOM. Поскольку диалоговые окна обычно открываются во время операции редактирования, этот код обработчика событий также может редактировать документ.
Интерфейс панели
  • Обратные вызовы жизненного цикла панели. XD вызывает обратные вызовы панели вашего подключаемого модуля, когда панель отображается, скрывается или требует обновления. Эти обратные вызовы могут обновлять только пользовательский интерфейс; вы не можете редактировать документ.
  • События DOM пользовательского интерфейса панели. Большинство событий пользовательского интерфейса на панелях позволяют редактировать документ, но вы должны инициировать операцию редактирования явным образом.
Сетевые ответы и таймеры

Другие события могут произойти в любое время, например завершение сетевого вызова или срабатывание setTimeout().

  • Если вы настроили обещание асинхронной операции редактирования для ожидания этих событий перед разрешением, то эти обработчики также могут редактировать документ.
  • Вы также можете запускать сетевые запросы и таймеры полностью в фоновом режиме, вне какой-либо операции редактирования, хотя это не рекомендуется. Код подключаемого модуля, работающий в фоновом режиме, может замедлить работу XD. И хотя у вас будет доступ только для чтения к графу сцены, это небезопасно, поскольку ваш фоновый код может выполняться в середине какой-либо другой операции асинхронного редактирования (будь то из встроенной команды XD, другой плагин и т. д.), поэтому ваш код может увидеть неверное промежуточное состояние документа.

Операции редактирования

Операция редактирования — это временное окно, в течение которого ваш подключаемый модуль вносит пакет связанных изменений в документ. Грубо говоря, одна операция редактирования равна одному шагу отмены.

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

Операции редактирования могут выполняться только через инициированные пользователем действия в вашем плагине: вызов команды меню плагина (и все, что из нее вытекает, например диалоговые окна, открываемые командой) или взаимодействие с пользовательским интерфейсом панели плагина.

Изменить продолжительность операции

  • Операция редактирования начинается, когда:
    • a) Вызывается обработчик команды меню вашего плагина (это автоматически включается в операцию редактирования)
    • a) Код пользовательского интерфейса панели вашего плагина явно вызывает application.editDocument()

    Если редактирование вызывает исключение или его обещание отклонено, весь пакет изменений автоматически автоматически откатывается XD.

    Инициирование операции редактирования из пользовательского интерфейса панели

    Несмотря на то, что команды меню автоматически запускают пакет редактирования, события пользовательского интерфейса панели должны активировать его, специально вызывая API application.editDocument(). В этот момент функция, переданная в editDocument(), обрабатывается так же, как обработчик команды меню.

    Вызывать editDocument() можно только при обработке события пользовательского интерфейса панели, которое соответствует явному действию пользователя (например, событию "щелчок" или "ввод").

    Последовательные операции редактирования, запускаемые одним и тем же пользовательским интерфейсом и применяемые к одним и тем же выбранным узлам, могут быть объединены XD в один шаг отмены. Подробности смотрите в обсуждении параметра mergeId объекта editDocument().

    Модальный/эксклюзивный интерфейс

    Во время выполнения операции редактирования XD предотвращает любые изменения с помощью других подключаемых модулей или других функций. Пользователь не может взаимодействовать ни с каким пользовательским интерфейсом XD, кроме диалоговых окон, отображаемых вашим подключаемым модулем.

    Даже если ваш подключаемый модуль не открывает диалоговое окно во время операции асинхронного редактирования, пользовательский интерфейс XD все равно остается замороженным. Если операция редактирования продолжается более 1 секунды без отображения пользовательского интерфейса, XD показывает сообщение «Плагин работает», которое позволяет пользователям принудительно прервать операцию редактирования.По этой причине во время длительных асинхронных шагов, таких как сетевые запросы, лучше отображать свой собственный более приятный пользовательский интерфейс (пользователи всегда могут отменить это, нажав Escape в любое время).

    Обновления пользовательского интерфейса

    Как и в веб-браузере, XD не будет обновлять пользовательский интерфейс в процессе синхронного выполнения кода вашего подключаемого модуля. Как только в выполнении возникает асинхронный разрыв, любые изменения, внесенные вами в DOM диалогового окна или в граф сцены документа, будут отражены в пользовательском интерфейсе XD.

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

    В сегодняшнем видеоуроке я расскажу, как создавать градиенты в Adobe XD. Если вы вообще изучили мой сайт, вы можете определенно сказать, что мне нравится тренд градиента и его атмосфера. Поэтому я рад поделиться тем, как вы можете получить этот эффект градиента в Adobe XD. Я расскажу, как сделать как радиальный градиент, так и линейный градиент. На данный момент не существует отличного способа смешивания градиентов, как в Photoshop, но я также покажу вам, как это можно сделать.

    Отказ от партнерской ответственности. Обратите внимание, что этот пост содержит партнерские ссылки. Если вы пройдете через них, чтобы совершить покупку, я сделаю комиссию бесплатно для вас. Спасибо за вашу поддержку!

    Если вы не слышали о моей любви к Adobe XD, вы можете прочитать об этом здесь. Честно говоря, Adobe XD — один из моих любимых новых инструментов дизайна, и на данный момент я использую его практически для всего, что связано с бизнесом. Он был сделан в первую очередь для веб-приложений и прототипирования, с чего я и начал. Но вы также можете использовать его для графики, шаблонов, макетов и т. д. для социальных сетей. Если у вас нет Adobe XD, вы можете получить его здесь бесплатно!

    Посмотрите видео о том, как создавать градиенты в Adobe XD ниже:

    Вот шаги по созданию градиента в Adobe XD:

    <р>1. Начните с формы по вашему выбору (текстовые градиенты в настоящее время недоступны)

    <р>2. Выбрав фигуру, щелкните поле «Цвет заливки»

    <р>3. Здесь вы увидите параметры цвета, а в верхнем левом углу есть раскрывающееся меню с дополнительными параметрами

    <р>4. Нажмите и выберите «Линейный градиент» или «Радиальный градиент»

    <р>5. Это даст вам два варианта ввода цвета, каждый из которых представлен кружками на линии

    <р>6. Очерченный круг = выделен

    <р>7. Просто добавьте свой шестнадцатеричный цвет, используйте пипетку или поэкспериментируйте с инструментом выделения

    <р>8. Сделайте то же самое для другого цвета

    <р>9. Вы можете добавить дополнительные параметры цвета, щелкнув линию, и внести дополнительные корректировки, перемещая линию.

    <р>10. Теперь вы создали градиент! Наслаждайтесь!

    Не забудьте

    Прикрепите избранное

    Читать последние новости

    Бренд и веб-сайт вдохновлены Бруно из Энканто

    "Мы не говорим о Бруно. нет-нет-нет". Да, эта песня застряла у меня в голове последние несколько недель, и я ловлю себя на том, что напеваю в голове "время ужинать" перед тем, как пойти поужинать. и все другие удивительные тексты. Если вы еще не смотрели Encanto, обязательно посмотрите.

    Рисую свой первый NFT

    Рисую свой первый NFT! Это происходит, люди, это происходит! Я так рад поделиться, что работаю над NFT и начинаю рисовать и продавать их. Я хотел дать вам возможность заглянуть за кулисы, как я рисую первый NFT из моей новой коллекции: «Kravings». Кравингс — это а.

    Как изменить фон на странице «Присоединиться сейчас» / «Доступ запрещен»

    В сегодняшнем видеоруководстве я расскажу, как изменить фон на странице «Присоединиться к участнику сейчас» / «Отказано в доступе» на Squarespace с помощью небольшого количества CSS. Но не волнуйтесь, хотя мы и добавляем немного кода, он по-прежнему довольно прост, и вы можете копировать и вставлять его.

    Запуск веб-сайта OM Marketing

    OM MarketingИдентификация бренда Дизайн веб-сайта Разработка WordpressOM Marketing прибыл, и я очень рад поделиться этим проектом с вами. Для меня большая честь работать с Брендой Умана над двумя проектами (подробнее о проекте BeeUmana можно прочитать здесь). Бренда хотела.

    Когда объект выбран, вы сможете изменить все параметры его стиля в инспекторе свойств в разделе «Внешний вид»:

    Ползунок прозрачности

    Управляет прозрачностью выбранного объекта.

    100 % — это значение по умолчанию, что означает полную видимость.

    При 0% объект полностью невидим.

    Режимы наложения

    Режимы наложения определяют, как объект будет смешиваться с содержимым под ним.

    Измените настройки выбранного объекта, используя раскрывающееся меню инспектора свойств.

    У вас есть пятнадцать различных режимов наложения на выбор.

    Заполнить

    Управляет цветом выбранного объекта.

    Если щелкнуть маленький цветной прямоугольник, откроется окно выбора цвета (подробнее об этом в следующей главе).

    Рядом с ним есть значок пипетки. При нажатии вы сможете выбрать цвет из всего холста и интерфейса Adobe XD. Этот цвет станет новым цветом заливки выбранного объекта.

    Граница

    Он управляет свойствами границы выбранного объекта.

    Вы можете изменить цвет границы, установить выравнивание и ее толщину. Вы также можете выбрать существующий цвет с помощью значка пипетки или выбрать один из параметров шапки (стыковая, круглая, выступающая) и границы соединения (под углом, круглая, скошенная).

    Тень

    Он управляет свойствами тени выбранного объекта.

    • Установив значения x и y, вы определите, где будет отбрасываться тень (слева, справа, сверху или снизу).

    • Значение B управляет размытием тени.

    • Вы также можете изменить цвет и прозрачность тени с помощью палитры цветов.

    Размытие

    С помощью этого параметра вы можете добавить эффект размытия к выбранному объекту. Этот метод часто используется в дизайне пользовательского интерфейса, в основном применяется к фоновым изображениям или в качестве наложения на целые разделы приложения.

    Когда вы размываете объекты в Adobe XD, вносимые вами изменения не являются разрушительными, а это означает, что вы всегда можете восстановить исходную версию вашего объекта, просто отключив эффект размытия (это не относится к другим инструментам, таким как Photoshop). .

    Эту функцию можно использовать двумя способами. Вы можете выбрать нужный из небольшого раскрывающегося меню рядом с флажком размытия:

    Размытие фона:

    Этот метод подходит, если вы хотите размыть определенную часть изображения или монтажной области.

    Вот как это сделать:

    • нарисуйте фигуру поверх изображения или области монтажной области, которую вы хотите размыть

    • выберите фигуру и выберите «Размытие фона» в раскрывающемся меню

    • отрегулируйте 3 ползунка ниже, чтобы получить желаемый эффект размытия:

    Размытие: устанавливает силу размытия

    Читайте также: