Создавайте рекламную графику для любого устройства с помощью Google Web Designer

Характеристики
Требования
Начало работы с Google Web Designer
Установка Google Web Designer
Использование Google Web Designer
Заключение

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

Новый инструмент Google для веб-дизайнеров позволяет создавать рекламные дизайны и графику на основе HTML5, которые можно запускать на любом устройстве. Бесплатный инструмент фокусируется на дизайне рекламы и использует HTML5 и CSS3 за кулисами, но при этом дает вам возможность изменять код, если вы хотите создать свой собственный без ограничений. Веб-дизайнер Google в настоящее время находится в бета-версии.

Характеристики

Google Web Designer включает в себя следующие функции:

Режимы анимации , которые позволяют вам развиваться либо в быстром, либо в расширенном режиме, дают вам возможность создавать построчную графику, пока инструмент создает кадры, которые связывают сцены вместе. В расширенном режиме вы можете создавать слои и анимировать отдельные элементы в стеке.
Инструменты среды 2D и 3D авторинга , которые позволяют создавать преобразования и переводы с помощью CSS3 для поворота объектов вдоль любой оси.
Двойные экраны дают вам представление «Дизайн» и «Код», так что вы можете переключаться между живым дизайном и кодом, лежащим в основе дизайна, во время работы над проектами.
Инструменты для иллюстрации могут использоваться для создания вашей графики, или вы можете импортировать изображения или графические ресурсы из других наборов креативов для разработки своих векторных иллюстраций. Кроме того, вы можете включить HTML-теги для ссылки на файлы изображений, используя инструмент Tab.

Требования

Это минимальные требования для установки Google Web Designer в Windows или Mac OS.

Операционная система: Windows 7 / Windows 8, Mac OS X 10.7.x или выше
Процессор: процессор Intel Pentium 4 или AMD Athlon 64
Память: 2 GM RAM
Разрешение экрана: 1280x1024
Размер окна приложения: 1024x768
Подключение к Интернету: требуется для первоначального использования после загрузки, для обновлений и для доступа к справке.

Начало работы с Google Web Designer

Для углубленного обзора инструмента Google Web Developer вы можете проверить Справка Google Web Designer страницы, которые включают эти разделы и темы: Вступление , Начиная , Создать и изменить контент , Создать объявление , Предварительный просмотр и публикация вашей работы , а также Устранение неполадок и решение общих проблем , Снимок экрана раздела справки показан на рисунке A.

Рисунок А

Узнайте, как установить и использовать бесплатный инструмент веб-дизайнера Google для создания дизайнов и графики на основе HTML5 для рекламных кампаний

На страницах справки также есть несколько видеоуроков YouTube по таким темам, как Обзор Google Web Designer , Обзор текстового инструмента и Обзор Pen Tool ,

Установка Google Web Designer

Следующие шаги установки предназначены для ПК с Windows 7.

Нажмите на Скачать веб-дизайнер бета кнопка. Когда вы увидите соглашение об условиях обслуживания Google, прочитайте его, а затем нажмите кнопку «Согласен и загрузите» ( рисунок B ).

Рисунок Б

Рисунок Б

Загрузка начнется немедленно и отобразится в файле googlewedesigner.exe ( рисунок C ).

Рисунок С

Дважды щелкните файл googlewedesigner.exe и выберите «Выполнить» в диалоговом окне «Открыть файл - предупреждение системы безопасности» ( рисунок D ).

Рисунок D

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

Рисунок Е

После того, как установщик завершит свои действия, вы увидите сообщение с благодарностью ( рисунок F ).

Рисунок F

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

Нажмите значок Google Web Designer в списке «Программы», и вы увидите начальный экран-заставку, когда он запускается ( рисунок G ).

Рисунок G

После запуска откроется программа по умолчанию ( рисунок H ).

Рисунок H

Чтобы начать первый проект по созданию нового документа, выберите «Новый файл» в меню «Файл». Откроется диалоговое окно «Создать новый файл» ( рисунок I ).

Рисунок I

Новый файл по умолчанию предназначен для рекламного баннера Google, использующего среду Rich Media DoubleClick Studio, с размерами 300x500, который называется HTML-файлом. Расположение по умолчанию для ПК - / Users / username / Documents, а режим анимации по умолчанию - Quick. После того, как вы установили свои соглашения, нажмите кнопку ОК. Ваш первый файл создан и отображается в представлении «Дизайн» по умолчанию ( рисунок J ).

Рисунок J

Щелкните по представлению «Код» (в левом нижнем углу экрана), чтобы увидеть, что стоит за дизайном ( рисунок K ).

Рисунок К

Простые шаги по созданию основной страницы баннера:

Импортируйте изображения, перетаскивая их в рабочую область в представлении «Дизайн» или используя теги изображений в представлении «Код».
Расставьте свои изображения и любые другие элементы, которые вы хотите использовать на сцене.
Создавайте анимацию или добавляйте другие компоненты на страницу, если хотите.

Я играл с инструментом около 30 минут, не читая никаких дальнейших инструкций и не следуя инструкциям, и я смог перетащить несколько изображений в рабочую область; вероятно, понадобятся метод проб и ошибок, прежде чем я смогу создать какую-либо серьезную анимацию. На рисунке L показана моя первоначальная попытка создания демонстрационного баннера с 360-градусным компонентом галереи и рукопожатием «Добро пожаловать!».

Рисунок L

Заключение

После того, как я рассмотрю видеоуроки, я смогу создать что-то подходящее для использования в пропорциях, но в настоящее время я думаю, что есть возможность освоить этот инструмент. Будет интересно посмотреть, насколько Google будет продолжать поддерживать этот инструмент (т. Е. Выйдет ли он за пределы стадии бета-тестирования?). Мне также любопытно посмотреть, не отвлекает ли Google внимание от продвижения веб-дизайнера в качестве инструмента для создания рекламы и превращает его в универсальный инструмент веб-разработки.

Для получения дополнительной информации об инструменте Google Web Designer обязательно ознакомьтесь с Форум пользователей бета-версии Google Web Designer и Страница Google Web Designer Google+ ,

Похожие

Создавайте баннеры с помощью Google Web Designer
... designer-1.png> Если вы хотите создавать красивые и причудливые HTML5-баннеры, вы можете использовать приложение от Google, и оно на самом деле бесплатно. Приложение называется Google Web Designer , Прежде чем вы сможете использовать баннеры, которые вы создаете с помощью Google Web Designer, GWD, в Adrecord вам нужно будет внести некоторые небольшие изменения. Выполните эти простые шаги, чтобы все это заработало: 1. Создайте свой баннер

5 сервисов гугл от которых я не могу отказаться, хотя и пытался
В этой статье я покажу вам пять сервисов, которыми не могу перестать пользоваться. Я попробовал замены, но когда я пришел к выводу, что они не очень хорошо работают для меня - я вернулся в Google с кротостью. Видите ли, я уважаю Google как компанию. В то же время я боюсь ее. Если бы SF фильмы о корпорации, которая правит миром, были бы пророческими, то такой корпорацией был бы Google (читай по алфавиту). В конце концов, я посмотрел «Терминатор» и «Матрицу»,

Как отключить рекламу с помощью Kaspersky Internet Security
... страницы и мешать сосредоточиться на контенте. Недавно мы объяснили, как работают эти интернет-объявления, и сегодня мы расскажем, как попрощаться с этими объявлениями с помощью Kaspersky Internet Security 2017. Включить анти-баннер

Использование таблицы начальной загрузки с GridView в ASP.NET
В моей предыдущей статье я писал об использовании загрузите 3 табличных класса с помощью GridView , По запросу посетителей я добавляю эту статью, используя классы начальной загрузки 4 таблицы. Добавление таблицы начальной загрузки с элементом управления GridView в веб-формах ASP.NET требует дополнительной настройки, чтобы GridView выглядел великолепно. Здесь я расскажу о дополнительных

Intel Compute Memory Stick для подключения к телевизору HDMI и компьютерам с Windows
... webopedia.com/TERM/H/HDMI.html> HDMI Порт в ПК с Windows. Шутка к компутеру на патику, кошелек тылко $ 149. Wymiary są 110,9 мм x 38 мм x 9,8 мм, с поддержкой HDMI. Wygląda jak duży dysk Pen, эль к комплектному компьютеру с системой Windows 8.1 System operacyjny z Bing. Он подключается к телевизору или монитору через HDMI. Он поставляется с небольшим адаптером питания micro-USB, который необходимо подключить к сетевой розетке для подачи необходимой мощности [Адаптер переменного

Тестирование компонентов ReactJS с помощью Karma и Webpack
Эта статья научит вас, как настроить Karma для тестирования компонентов ReactJS. Первоначально он был размещен на Codementor Джастин Ву «s блог , Бесполезный фон Около 8 месяцев назад я начал искать решения для тестирования компонентов React, но у меня не было хороших идей. Сначала я попробовал QUnit, который, кажется, работал нормально, но я хотел, чтобы

Google Pixel XL в наших руках. Что выделяет этот смартфон?
Google Pixel XL был со мной около недели. Это один из лучших - если не самый лучший - Android-смартфон. Только на самом деле, что отличает его от Nexus и других смартфонов? Google Pixel и Pixel XL - это два новых смартфона, которые должны определить, как Android должен работать и выглядеть. До сих пор устройства Nexus выполняли эту роль, но Google отказался от этой линии.

Топ сайтов фриланс тестирования - лучшие точки работы QA отдаленно
... ссии QA engineer. Фриланс тестирования отлично подходит для этого. Цель данной статьи не столько информационная, как искреннее желание нашего сообщества тестеров QualityAssuranceGroup спонуваты Вас зарабатывать первые деньги на тестировании ПО, наращивать свои скиллы, практиковаться в английском, приобретать опыт. Научиться самостоятельно искать работу, а кого-то дополнительный заработок. А еще быть предприимчивым, инициативным, смелым, ответственным, дисциплинированным

Компьютер в компании :: Fritz! Box 6820 LTE роутер тест
Содержимое коробки спартанское, но функциональное. Помимо самого маршрутизатора вы найдете блок питания, сетевой кабель и мини-руководство пользователя на 7 языках. Руководство ограничено несколькими простыми рисунками и пояснением светодиодного знака. Полное руководство можно загрузить в виде файла PDF. Кроме того, есть карта с SSID по умолчанию, заводским ключом WPA2 и паролем доступа к меню маршрутизатора. Само устройство, как и все маршрутизаторы AVM, выглядит очень солидно. Самые

Как отследить взаимоблокировки с помощью SQL Server 2005 Profiler

Популярные плагины для WordPress и как их использовать
Средний сайт сегодня имеет довольно жесткую битву. Для любого веб-сайта существует целый ряд конкурентов, которые борются за внимание потенциальных читателей или клиентов. Как можно отличить себя? У вас есть один шанс захватить сердца и умы большинства посетителей вашего сайта. Это означает, что вы должны сделать все возможное. Всплывающие окна, если все сделано правильно, могут помочь вам сделать это. WordPress это самая популярная

Выйдет ли он за пределы стадии бета-тестирования?
Что выделяет этот смартфон?
Только на самом деле, что отличает его от Nexus и других смартфонов?
Как можно отличить себя?