Google Web Designer

Обзор галерей

Изучите дополнительные возможности галерей в Google Web Designer. Узнайте, как улучшить стандартный баннер 300 x 250.

Расширенный режим
Интерфейс

Масштабирование в расширенном режиме временной шкалы

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

Расширенный режим
Видеоруководство

Интерфейс Google Web Designer

Ознакомьтесь с интерфейсом Google Web Designer. Узнайте, какие инструменты доступны и где они расположены.

Обзор
Интерфейс

Рекомендации по работе с Google Web Designer: часть 1

Создавайте трехмерный контент и управляйте им с помощью технологии CSS3. Вращайте объекты и плоские изображения вокруг любой из трех осей координат и таким образом создавайте 3D-анимацию.

3D
Блог

Изменение стилей при помощи панели CSS

На панели CSS можно просмотреть стиль оформления любого выбранного элемента. Здесь также можно изменять стили для классов, использовать встроенные стили и создавать новые.

Справочная статья
Стили CSS

Управление объектами в библиотеке

Объекты – это изображения, аудио- и видеофайлы, которые используются в документе. Импортированные объекты хранятся в библиотеке, их можно просматривать и использовать повторно.

Справочная статья
Библиотека

Выбор нескольких кадров в расширенном и быстром режимах

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

Расширенный режим
Видеоруководство

Пять полезных функций

Рассмотрим пять самых полезных функций и рабочих процессов в Google Web Designer: работа с группами, цветами, создание пользовательских компонентов, публикация на Google Диске и резиновые макеты.

Обзор

Примечания к выпуску

Зарегистрируйтесь на последний выпуск, чтобы узнать о новых функциях.

Справочная статья
Техническая информация

Системные требования

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

Справочная статья
Техническая информация

Рекламная платформа

Google Web Designer поддерживает несколько рекламных платформ, например Google Рекламу, Google Рекламу в приложении и Дисплей и Видео 360. Выбрать платформу можно одним нажатием.

Справочная статья
Создание и изменение контента
Рекламная платформа

Использование инструмента "Текст"

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

Справочная статья
Создание и изменение контента
Добавление элементов

Использование инструментов "Перо" и "Фигура"

Рисуйте линии и фигуры SVG всех уровней сложности.

Справочная статья
Создание и изменение контента
Добавление элементов

Использование 3D-инструментов

В Google Web Designer можно передвигать и поворачивать объекты в трех измерениях. Это позволяет просматривать элементы под любым углом.

Справочная статья
Создание объявления
Перемещение элементов и изменение их размера

Использование градиентов

Градиент – это многоцветная заливка с плавными переходами цвета. Градиенты можно применять к заливке и контуру элементов HTML, canvas и SVG.

Справочная статья
Создание и изменение контента
Цвета
Градиенты

Упаковка и объединение элементов в группы

Группы и пакеты позволяют работать с любым количеством элементов как с одним объектом.

Справочная статья
Создание и изменение контента
Упаковка элементов
Объединение элементов в группы

Обзор адаптивного макета

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

Справочная статья
Адаптивная реклама

Изменение размера области просмотра

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

Справочная статья
Адаптивная реклама
Область просмотра

Об анимации

Чтобы создать анимацию в Google Web Designer, необходимо разместить ключевые кадры в определенных точках временной шкалы. В каждом ключевом кадре настраиваются свойства CSS анимируемого элемента, и во время перехода элемент постепенно меняется, приобретая свойства последующего кадра.

Справочная статья
Анимация
Взаимодействие

Анимация в быстром режиме

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

Справочная статья
Анимация
Взаимодействие

Анимация в расширенном режиме

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

Справочная статья
Анимация
Расширенный режим

О видах динамики

Динамика позволяет ускорять и замедлять анимацию.

Справочная статья
Анимация
Взаимодействие
Динамика

Вложенная анимация

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

Справочная статья
Анимация
Взаимодействие
Вложенная структура

Повтор анимации

Существует два способа повтора анимации: отдельно для каждого слоя или для всех слоев одновременно с помощью событий.

Повтор
Взаимодействие
Анимация
Справочная статья

О путях перемещения

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

Справочная статья
Анимация
Взаимодействие
Движение

Создание анимации в расширенном режиме

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

Справочная статья
Анимация
Взаимодействие
Расширенный режим

Предварительный просмотр и прокрутка анимации

Предварительный просмотр и прокрутка помогают корректировать анимацию по мере работы с ней.

Справочная статья
Слои
Расширенный режим
Анимация
Взаимодействие

О компонентах

Компоненты – это встроенные модули, которые позволяют добавлять определенные функции в объявления или HTML-документы.

Справочная статья
Обзор
Компоненты

Компонент "Панорамная галерея"

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

галерея
Справочная статья
Компоненты

Компонент "Круговая галерея"

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

Справочная статья
галерея
Компоненты

Компонент "Навигация по галерее"

Добавьте отдельную панель навигации к перелистываемой, круговой или панорамной галерее.

Справочная статья
галерея
Компоненты

Компонент "Перелистываемая галерея"

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

Справочная статья
галерея
Компоненты

Компонент "Добавить в календарь"

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

Справочная статья
Календарь
Компоненты

Компонент "Жест"

Регистрируйте взаимодействия пользователей с объявлениями.

Справочная статья
Компоненты
Жест

Компонент "Графическая кнопка"

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

Справочная статья
Кнопка
Компоненты

Компонент "Интерактивная область"

Разместите прозрачный элемент поверх любой части экрана, чтобы настроить реакцию на касание или нажатие мыши.

Интерактивная область
Компоненты

Компонент "Кнопка вызова/SMS"

Добавьте возможность звонить или отправлять SMS на номер, указанный в мобильном объявлении, с поддерживаемых смартфонов.

Справочная статья
Компоненты
Кнопка вызова/SMS

Компонент "Карта"

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

Справочная статья
Карты
Компоненты

Компонент "Просмотр улиц"

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

Справочная статья
Компоненты
Просмотр улиц

Компонент "Аудио"

Добавляйте аудио в объявления.

Справочная статья
Компоненты
Аудио

Компонент "Видео"

Простой способ добавить видео в объявление.

Справочная статья
Компоненты

Компонент YouTube

Добавляйте видео YouTube в объявления, настраивайте плеер и параметры воспроизведения.

Справочная статья
Компоненты
YouTube

Компонент "Окно iframe"

Загружайте в проект элементы с внешним URL, например внешние HTML-страницы.

Окно iframe
Компоненты
Справочная статья

Компонент "Таблица спрайтов"

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

Справочная статья
Компоненты
Таблица спрайтов

API компонентов

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

Справочная статья
Предварительный просмотр

О событиях

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

Справочная статья
События

Создание дополнительных действий

Для создания дополнительных действий применяется JavaScript. После определения их можно использовать несколько раз в пределах одного и того же объявления.

Справочная статья
События

Создание баннера

Баннеры – это простые объявления, которые соответствуют размеру определенного рекламного места на веб-странице или в приложении.

Справочная статья
Баннеры
Создание объявления

Создание раскрывающихся объявлений

Раскрывающееся объявление – это объявление, которое сначала отображается как баннер стандартного размера, а затем раскрывается до большего размера, предоставляя вам больше возможностей привлечь внимание пользователя.

Справочная статья
События
Раскрывающееся объявление

Создание межстраничного объявления

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

Справочная статья
Межстраничное объявление
Создание объявления

Создание динамического объявления

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

Справочная статья
HTML с технологией AMP
Создание объявления

Объявления HTML с технологией AMP

Используйте Google Web Designer для создания объявлений HTML с технологией AMP. Объявления, созданные по технологии Accelerated Mobile Pages (AMP), загружаются быстрее обычных и идеально подходят для мобильных устройств.

Справочная статья
Создание объявления
HTML с технологией AMP

Использование шаблонов

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

Справочная статья
Создание объявления
Шаблоны

Создание пользовательского шаблона

Любое объявление можно сохранить как шаблон. Это позволяет экономить время, особенно если нужно создать несколько версий одного объявления.

Справочная статья
Создание объявления
Шаблоны

Инспектор объявлений

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

Справочная статья
Создание объявления

Просмотр структуры документа в структурном редакторе

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

Справочная статья
DOМ

Предварительный просмотр объявлений и HTML-страниц

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

Справочная статья
Предварительный просмотр

Публикация работы

При публикации проекта создаются окончательные файлы, готовые для размещения рекламы. Google Web Designer может публиковать файлы в локальной папке, непосредственно на Google Диске или в Креативной студии.

Справочная статья

Масштабирование в расширенном режиме временной шкалы

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

Расширенный режим
Временная шкала
Видеоруководство

Функции динамики (начало/конец шага)

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

Видеоруководство
Динамика

Скрытие и блокировка слоев на временной шкале

Специалист по интерфейсу Натали объясняет, как скрывать и блокировать несколько слоев на временной шкале.

Расширенный режим
Временная шкала
Видеоруководство

Обзор интерфейса

Специалист по интерфейсу Джон делает обзор пользовательского интерфейса Google Web Designer. Научитесь использовать различные панели инструментов, а также упорядочивать и настраивать рабочую область.

Видеоруководство
Интерфейс

Обзор событий

Специалист по Google Web Designer Мачек рассказывает, как работать с событиями. Узнайте, как использовать события, чтобы настраивать стили, добавлять дополнительные действия и многое другое.

Видеоруководство
События

Обзор инструмента "Градиент"

Специалист по Google Web Designer Жан-Пьер делает обзор градиентов: рассказывает о линейном и радиальном градиентах и инструменте редактирования градиентов.

Видеоруководство
Градиенты

Обзор фигур

Специалист по Google Web Designer Жан-Пьер делает обзор инструментов добавления фигур, в том числе овала и прямоугольника.

Видеоруководство
Фигуры

Обзор текста

Специалист по Google Web Designer Шуо делает обзор работы с текстом, включая использование панели "Текст". Узнайте, как изменять размер текста и перемещать его, как копировать стили из одного документа в другой и о многом другом.

Видеоруководство
Текст

Обзор рисования в двух- и трехмерном пространстве

Специалист по Google Web Designer Лукас рассказывает о функциях рисования в двух- и трехмерном пространстве.

Видеоруководство
Создание и изменение контента

Обзор расширенного режима временной шкалы

Специалист по Google Web Designer Натали рассказывает о расширенном режиме временной шкалы. Узнайте, как создавать анимацию, работать с ключевыми кадрами, настраивать динамику и о многом другом.

Расширенный режим
Видеоруководство

Инспектор объявлений

Специалист по Google Web Designer Джон делает обзор функции инспектора объявлений. Инспектор объявлений проверяет объявление на возможные ошибки и показывает результаты на соответствующей панели. Хотя это не гарантирует утверждение объявления, вы можете сразу просмотреть и исправить ошибки.

Создание объявления
Видеоруководство

Управление рабочими областями

Специалист по Google Web Designer Яки рассказывает о том, как сохранять понравившиеся расположения панелей в рабочих областях Google Web Designer.

Видеоруководство
Рабочая область
Настройка

Обзор путей перемещения

Специалист по Google Web Designer Лукас делает обзор путей перемещения. Пути перемещения позволяют анимировать объекты, перемещая их по заданному пути. Чтобы настроить такую анимацию, необходимо установить опорные точки и соединить их соответствующе настроенной кривой.

Видеоруководство
Движение

Редактирование путей перемещения

Специалист по Google Web Designer Чиа-Лин рассказывает о редактировании путей перемещения. Узнайте, как можно изменять анимацию в рабочей области с помощью функций редактирования пути перемещения.

Видеоруководство
Движение

Обзор групп

В этом видео инженер веб-дизайнера Google Лукас представляет демо-версию группы.

Объединение элементов в группы
Видеоруководство

Обзор групп с событиями

Специалист по Google Web Designer Лукас рассказывает об использовании событий с новой функцией "Группы". Группы позволяют сохранять наборы элементов, чтобы использовать их как единый объект несколько раз. Добавляя в них события, можно быстро создавать эффективную анимацию.

Видеоруководство
События
Объединение элементов в группы

Работа с адаптивными объявлениями

Дизайнер из команды Google Web Designer Кент Майерс показывает, как создать адаптивное объявление. Узнайте, как быстро и просто создать адаптивное объявление по шаблону.

Адаптивная реклама
Видеоруководство

Структурный редактор

В этом видео инженер Google Web Designer Жан-Пьер дает обзор Outliner.

Видеоруководство
Структурный редактор

Масштабирование ключевых кадров на временной шкале

Специалист по Google Web Designer Натали рассказывает о функции масштабирования ключевых кадров. Чтобы изменить продолжительность анимации, сохраняя пропорции между ключевыми кадрами, нужно в расширенном режиме временной шкалы перетаскивать выделенные кадры, удерживая клавишу Shift.

Расширенный режим
Временная шкала
Видеоруководство

Использование галерей в Google Web Designer

Изучите дополнительные возможности галерей в Google Web Designer.

Блог
галерея
Компоненты

Рекомендации по работе с Google Web Designer: часть 2

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

Расширенный режим
Собственный код
Блог

Работа с текстом в Google Web Designer

Мы покажем вам, как управлять внешним видом текста в документе Google Web Designer.

Текст
Блог

Помощь всегда доступна

Начало работы