Сервис для
сео - оптимизаторов

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

Советы и рекомендации по использованию Google Web Designer

  1. дизайн
  2. Открытие GWD
  3. Настроить файл
  4. оживляющий

Вы использовали Google Web Designer для создания баннерной рекламы? До начала работы в Агентстве Джеймса я даже не слышал об этом! Для тех, кто читает, кто не знает, Google Web Designer - это приложение, используемое для создания рекламы HTML5 без необходимости углубляться в грязную часть кода. GWD позволяет вам извлекать изображения и ресурсы для создания анимации, в то время как он заботится о части HTML и CSS. Это идеально, если вы дизайнер, но на самом деле не увлекаетесь кодированием (как я). Интерфейс прост в навигации, и это бесплатная программа. Недостатком является то, что программа все еще находится в бета-версии, поэтому она может быть довольно неуклюжей, а иногда и очень неприятной.

Теперь, когда у меня есть некоторый опыт работы с программой, я хотел бы поделиться несколькими советами, которые действительно помогли мне. Во-первых, просто начинайте пробовать вещи. Если вы знакомы с AfterEffects, GWD достаточно похож, чтобы вы могли учиться на практике. Во-вторых, держите ваши файлы чрезвычайно организованными. Как я уже упоминал, GWD может быть привередливым, и оставаться на вершине вашей организации будет иметь большое значение.

Чтобы начать использовать Google Web Designer, перейдите на google.com/webdesigner и скачать приложение. Я предоставил обзор моего процесса ниже, в комплекте с несколькими видео для ясности.

Я предоставил обзор моего процесса ниже, в комплекте с несколькими видео для ясности

дизайн

Начните с размещения рекламы в Illustrator (тоже работает Photoshop), затем выясните, какие фрагменты вы будете анимировать. В этом случае я собираюсь перемещать белый текст на экране и за его пределами, вращая его между заголовком и ценой. Убедитесь, что вы развернули все элементы и разделите их на разные монтажные области. В этом объявлении логотип, блок красного цвета и кнопка были на артборде, а заголовок и ценовая категория имели свои собственные артборды. Далее вам нужно сохранить все монтажные области в виде файлов .SVG. Для любых изображений сохраните в правильном размере как .JPG

Открытие GWD

После того, как вы открыли GWD (это может занять минуту, так что наберитесь терпения), вам нужно будет назвать свой файл. Убедитесь, что он сохраняется в правильном месте и выберите правильный размер.


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

Настроить файл

Перед анимацией вам необходимо убедиться, что все активы названы правильно. По какой-то причине GWD предпочитает, чтобы активы назывались без пробелов. Если вы не называете их так до импорта, вам нужно будет сделать это, прежде чем начать анимацию. Перетащите элементы в рабочую область (здесь я тоже переименую слои). Иногда элементы будут иметь очень маленький размер, но если вы создали их в Illustrator нужного размера, вы можете перейти на панель «Свойства» и отрегулировать там ширину и высоту.

оживляющий

Пришло время оживить! Я разделяю слои и выравниваю все так, как это будет оживлять. Подобно AfterEffects, вы добавите ключевые кадры на временную шкалу для анимации. Чтобы добавить кадры, вы можете щелкнуть правой кнопкой мыши и добавить или использовать F6. Я выделил все три слоя и добавил ключевые кадры одновременно. Далее вам нужно будет зациклить вашу анимацию. Для этого нажмите на отметку 0 в строке «События» и выберите «Добавить ярлык». Введите «startLoop» и нажмите клавишу ввода. В той же строке в конце анимации (3 с для этого примера) щелкните правой кнопкой мыши и выберите «Добавить событие». Дважды щелкните по ключевому кадру, который появляется, и переключите опцию «Временная шкала». Выберите «gotoAndPlay», выберите страницу и выберите метку «loopStart». Чтобы просмотреть объявление в браузере, выберите «Предварительный просмотр» в верхнем правом углу.

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

И это все! Это супер базовая анимация, но прекрасное начало освоения в программе. Если у вас есть какие-либо вопросы или советы, пишите в Твиттере @TheJamesAgency.

Последние сообщения агентства Джеймса ( увидеть все )

← Вернуться в блог

Похожие

Как настроить Wi-Fi на ноутбуке?
Как настроить Wi-Fi на ноутбуке? Любой современный ноутбук имеет встроенный модуль для работы с беспроводными сетями. Это означает, что можно подключить его к интернету через Wi-Fi соединение и иметь доступ к глобальной сети в любой точке квартиры, дома или даже дачи, не беспокоясь о прокладке ненужных проводов к рабочему месту. Все что для этого нужно, кроме самого ноутбука,
Обзор Google Nexus 9: превосходный, мощный Android-сервер
Примечание редактора (25 мая 2016 г.): Google больше не выставляет Nexus 9 на продажу в своем интернет-магазине, и HTC подтвердила, что больше не производит планшет , хотя оставшийся инвентарь все еще может быть доступен. Альтернативы можно найти на нашем список лучших планшетов Android
uTorrent блокируется Google Chrome и антивирусами
uTorrent является фаворитом фирмы, когда речь идет о клиентах BitTorrent, зарабатывая деньги с помощью рекламы в приложении и программного обеспечения, предлагаемого во время установки. Но похоже, что это программное обеспечение может вызывать некоторые проблемы для uTorrent, который теперь помечается как «вредный» по ассоциации.
Файл EPS - что это такое и какие программы могут его открыть? > Фондовый Фото Секреты
Если вы когда-либо работали с векторной графикой, вы можете быть знакомы с тем, каким может быть формат файла EPS и как его использовать. Если вы плохо разбираетесь в формате файла Encapsulated PostScript (EPS), то это по сути графический формат для векторных изображений, который использует Adobe Illustrator, так же, как формат файла фотографического
Мобильные сайты будут лучше позиционированы - Mobile First Index
Google снова меняет свой алгоритм. Это еще один поклон для мобильных пользователей. Более того, по словам интернет-гиганта, эта версия сайта кажется более важной, чем его традиционный аналог для настольных компьютеров. Mobile First Index - новый алгоритм Google До недавнего времени Google в результатах поиска для мобильных устройств также рассматривал, как это выглядит на рабочем столе. В настоящее
Прогноз дизайна: 10 тенденций на 2016 год
Когда мы закрываем дверь в 2015 году, давайте посмотрим, что говорят эксперты индустрии дизайна о наступающем году. Поскольку современная жизнь становится все более напряженной и напряженной, наши дома стали нашими прибежищами. Интерьер 2016 года, основанный на простоте, безмятежности и плавности, отражает нашу потребность в отключении и детоксикации. Теплые, но успокаивающие цвета дополняются естественными текстурами и мягкими формами, а мебель становится все более индивидуальной и интуитивно
Проект, посвященный самым требовательным компаниям. Реализация уникального проекта включает в се...
Проект, посвященный самым требовательным компаниям. Реализация уникального проекта включает в себя все функциональные возможности веб-сайта в пакете CMS, а также дополнительные графические макеты для отдельных выбранных веб-сайтов. Сайт оснащен интуитивно понятной CMS (системой управления контентом) WordPress- панелью для самостоятельного редактирования контента, расположенного на подстраницах сайта.
Как и его предшественник - только больше, дешевле и лучше
... настроить с помощью Moto Maker. Сам Moto Maker предлагает покупателю Moto X Play снова большой выбор и множество вариантов дизайна. Хотя кумде нельзя, как с Moto X Style Также можно выбрать заднюю часть из кожи или дерева, но есть 14 различных задников из поликарбоната, каждый из которых имеет ребристую структуру. Он также может устанавливать цветовые акценты, делать гравировки и выбирать между двумя вариантами хранения
Удалить Artnewsupdate.info (Chrome, Firefox, IE, Edge)
Artnewsupdate.info - приложение с поддержкой рекламы, которое изменяет домашнюю страницу браузера без разрешения пользователя Artnewsupdate.info - рекламное ПО, которое создает раздражающую рекламу, которая может вызывать регулярные сбои браузера. Artnewsupdate.info - еще одно потенциально нежелательное приложение, которое связано с семейством рекламного
одержание Что такое Android Termux? Что такое PHP Termux API? Учебник по Termux по использованию PHP ...
одержание Что такое Android Termux? Что такое PHP Termux API? Учебник по Termux по использованию PHP Учебное пособие по Termux для Android: доступ к функциям устройства Android с помощью API Termux Учебное пособие по Termux PHP: шаги для полной настройки использования Termux PHP Доступ к устройству с помощью клавиатуры Termux FTP доступ к файлам Запуск PHP из Termux в бесконечном цикле Управление планшетом

Комментарии

Может быть, даже умнее, чем Google?
Может быть, даже умнее, чем Google? Жаль, что основатель Шульчевский видит себя в какой-то момент на уровне глаз: « Мы хотим быть Google AdWords для продавца. " По сути, Wish будет дешевой версией Google Shopping в цвете. Статус кво:
Какие еще у вас есть советы по созданию векторов в Photoshop?
Какие еще у вас есть советы по созданию векторов в Photoshop? Поделитесь своими мыслями ниже! Узнайте больше о: Adobe Photoshop , Фотошоп Учебник , Векторная графика ,
Когда я должен рассмотреть файл EPS, а не JPEG?
Когда я должен рассмотреть файл EPS, а не JPEG? Некоторые агентства изображений, как Стоковое Фото секреты , предлагает как иллюстрации
Как настроить Wi-Fi на ноутбуке?
Как настроить Wi-Fi на ноутбуке? Любой современный ноутбук имеет встроенный модуль для работы с беспроводными сетями. Это означает, что можно подключить его к интернету через Wi-Fi соединение и иметь доступ к глобальной сети в любой точке квартиры, дома или даже дачи, не беспокоясь о прокладке ненужных проводов к рабочему месту. Все что для этого нужно, кроме самого ноутбука, это беспроводной маршрутизатор, с подключением к широкополосному доступу к сети Интернет и современная операционная система,
Вы хотите изучить хороший графический дизайн резюме?
Вы хотите изучить хороший графический дизайн резюме? Вы пришли в нужное место! Все это ждет вас в моей публикации! А теперь немного подробнее. Что, короче говоря, я приготовил для тебя? Прежде всего, я представлю вам довольно большую коллекцию графических резюме . Я нашел бесплатные шаблоны резюме, собранные здесь, в разных «уголках» Интернета, и вам не нужно беспокоиться об их разнообразии!

Как настроить Wi-Fi на ноутбуке?
Файл EPS - что это такое и какие программы могут его открыть?
Что такое PHP Termux API?
?одержание Что такое Android Termux?
Что такое PHP Termux API?
Может быть, даже умнее, чем Google?
Какие еще у вас есть советы по созданию векторов в Photoshop?
Когда я должен рассмотреть файл EPS, а не JPEG?
Как настроить Wi-Fi на ноутбуке?
Вы хотите изучить хороший графический дизайн резюме?