Создание и настройка баннера в Google Web Designer

Шаг 1: Начало работы

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

Скачать Google Web Designer с официального сайта

Установка программы

  1. Щелкните по представленной выше ссылке для перехода на главную страницу софта и нажмите кнопку «Download Web Designer». Учтите, что программа поддерживает только Windows 7 и более поздние версии.
  2. Переход к скачиванию Google Web Designer с официального сайта

  3. Через всплывающее окно «Сохранить» выберите место на компьютере и воспользуйтесь отмеченной кнопкой на нижней панели.
  4. Сохранение файла Google Web Designer на компьютере

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

    Открытие файла установки Google Web Designer на компьютере

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

  6. Процесс установки Google Web Designer на компьютер

Авторизация

  1. Если вы хотите сохранять проекты в интернете или в целом создаете баннер специально для внутренних сервисов Google, дополнительно стоит выполнить авторизацию. Для этого запустите программу с помощью соответствующей иконки, закройте приветственное окно и нажмите кнопку «Войти» на верхней панели.
  2. Переход к авторизации в Google Web Designer

  3. Укажите данные от учетной записи Google, нажмите «Далее» и по необходимости выполните подтверждение. После этого аккаунт будет сразу же добавлен, не требуя каких-то отдельных настроек.
  4. Процесс авторизации через Google в Google Web Designer

Изменение настроек

  1. Разобравшись с подготовкой, теперь желательно внести изменения в основные настройки софта, чтобы облегчить работу в будущем. С помощью верхней панели разверните меню «Правка» и выберите раздел «Настройки» в конце списка.
  2. Переход к разделу Настройки в Google Web Designer

  3. На вкладке «Основные» можно поменять начальное поведение программы для быстрого открытия проектов, назначить папку для сохранения созданных шаблонов, а также установить значения по умолчанию для разновидности объявления при создании.
  4. Изменение основных настроек в Google Web Designer

  5. Следующая страница «Режим просмотра макета» содержит параметры внешнего вида редактора. Меняя представленные настройки, вы можете откорректировать сетку и привязку объектов для более точного позиционирования элементов.
  6. Настройки режима просмотра макета в Google Web Designer

  7. В Google Web Designer присутствует редактор кода со своими настройками. Так, на вкладке «Режим просмотра кода» можно назначить стиль оформления, установить параметры форматирования и добавить привязку клавиш к задачам.
  8. Настройки режима просмотра кода в Google Web Designer

  9. Последняя вкладка «Расширенные» содержит всего два параметра — «Ведение журналов» и «Масштаб приложения». В первом случае включение приведет к созданию журнала изменений, тогда как второй пункт позволяет установить новый стандартный масштаб для рабочей области редактора.

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

  10. Просмотр расширенных настроек в Google Web Designer

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

Шаг 2: Создание баннера

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

Читайте также: Создание баннера в Adobe Photoshop

Подготовка макета

  1. Чтобы создать новый проект, воспользуйтесь ссылкой «Создать файл» в стартовом окне. Для повторного открытия можно воспользоваться пунктом «Создать» в меню «Файл».
  2. Переход к созданию нового файла в Google Web Designer

  3. В блоке «Объявления» выберите «Баннер» и заполните основное поле «Название», без которого не получится выполнить сохранение. Также можете указать место размещения подготавливаемого проекта.
  4. Изменение основных настроек нового баннера в Google Web Designer

  5. При помощи выпадающего списка «Контекст» установите один из вариантов в зависимости от будущего применения баннера. Само же разрешение можно поменять с помощью меню «Размеры».

    Изменение размеров баннера в Google Web Designer

    Если нужно, размеры макета могут быть откорректированы самостоятельно. Для этого установите параметр «Пользовательские» и укажите нужное разрешение.

    Установка пользовательских размеров баннера в Google Web Designer

    Установив галочку «Адаптивный макет», можно не заботиться о размерах, так как после добавления на сайт объявление будет вытянуто в соответствии с родительским блоком.

  6. Дополнительные настройки баннера в Google Web Designer

  7. Возможности настроек можно расширить, если выбрать другую вкладку, будь то «Раскрывающееся» или «Межстраничное». Рассматривать данные варианты мы не будем, потому как в качестве примера вполне хватит стандартного макета.

    Пример альтернативного варианта баннера в Google Web Designer

    Отдельно отметим, что «Баннер AMPHTML» следует использовать, если вы хотите адаптировать рекламу для мобильных устройств. Это позволит ускорить загрузку объявлений, но при этом заблокирует некоторые возможности редактора.

Работа с инструментами

  1. После подготовки макета, нужно ознакомиться с инструментами. На верхней панели основного внимания заслуживает список «Вид», позволяющий включить и отключать вспомогательные элементы.
  2. Просмотр меню Вид в Google Web Designer

  3. Через меню «Окно» можно временно отключить тот или иной элемент интерфейса. Например, если вы хотите сделать статичный баннер, «Временная шкала» будет только мешаться, и потому лучше всего снять соответствующую галочку.
  4. Просмотр меню Окно в Google Web Designer

  5. Основные инструменты редактора представлены в левой колонке. Рассматривать каждый вариант мы не будем, так как далеко не все элементы используются при создании, однако рекомендуем поэкспериментировать самостоятельно.
  6. Просмотр основной панели инструментов в Google Web Designer

  7. Рядом с панелью инструментов представлен «Инспектор объявлений» с несколькими вкладами. Особого внимания заслуживают «События», отвечающие за действия с тем или иным объектом баннера, и «CSS», где устанавливаются параметры стиля.
  8. Просмотр Инспектора объявлений в Google Web Designer

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

  11. По необходимости с помощью «Временной шкалы» может быть создан анимированный баннер. При этом для управления основной областью редактора используйте зажатый пробел и ЛКМ, а также блок с параметрами масштаба.

Заполнение макета

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

  3. Дальше в порядке очереди необходимо добавить графические элементы, подготовленные заранее. Сделать это можно на вкладке «Библиотека объектов», щелкнув по значку «+» на нижней панели.
  4. Переход к добавлению графических элементов в Google Web Designer

  5. Выберите нужные графические файлы и нажмите «Открыть». Сделать это можно как сразу для всех нужных слоев, так и по-отдельности, повторяя указанные действия.
  6. Процесс добавления графических элементов в Google Web Designer

  7. Чтобы выполнить размещение, зажмите нужную картинку на вкладке «Библиотека объектов» и перетащите в основную область редактора.

    Добавление изображений на баннер в Google Web Designer

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

  8. Позиционирование изображений на баннере в Google Web Designer

  9. Выбрав графический файл в рабочей области или на вкладке «Структурный редактор», откройте «Свойства». Здесь присутствует куда большее количество возможностей, нежели в случае с фоном, например, настройки границы или отступы.
  10. Изменение свойств изображений на баннере в Google Web Designer

  11. Если дизайн баннера предусматривает наличие текста, можно добавить соответствующий элемент с помощью стандартного инструмента Google Web Designer. Нажмите по значку «T» на левой панели, кликните в основном окне редактора и впишите нужный набор символов.

    Добавление текста на баннер в Google Web Designer

    Для управления текстом, выделите слой на вкладке «Структурный редактор», разверните «Текст» и установите подходящие параметры.

  12. Изменение свойств текста на баннере в Google Web Designer

Настройка анимации

  1. В блоке «Временная шкала» можно добавить и настроить эффекты анимации. Для начала нажмите кнопку «Добавить значок» с иконкой «+».
  2. Работа с временной шкалой в Google Web Designer

  3. Щелкните по значку «.5s» между кадрами и установите нужные вам параметры. К примеру, можно изменить длительность и стиль перехода.
  4. Настройка переходов между кадрами в Google Web Designer

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

    Создание анимации для баннера в Google Web Designer

    Завершив процесс редактирования, воспользуйтесь кнопкой «Повторять». Это позволит создать бесконечную анимацию.

  6. Успешное создание анимации для баннера в Google Web Designer

Добавление событий

  1. Разобравшись с макетом, нужно добавить события перехода для отдельных элементов или всего баннера в целом. Для этого в колонке «Инспектор объявлений» откройте вкладку «События» и нажмите по значку «+» на нижней панели.
  2. Переход к созданию нового события в Google Web Designer

  3. В открывшемся окне из списка «Цель» выберите объект, который будет выступать ссылкой.
  4. Указание цели события в Google Web Designer

  5. На странице «Событие» разверните «Мышь» и выберите «click». В зависимости от требований к результату, можно комбинировать разные установки.
  6. Указание свойств события в Google Web Designer

  7. Дальше из списка «Действие» откройте «Объявление Google» и установите значение «Переход». Такой выбор позволит сделать так, чтобы пользователь переходил на конкретную нужную вам страницу в интернете.
  8. Указание действия события в Google Web Designer

  9. В качестве «Получателя» выберите один единственный представленный вариант «gwd-ad».
  10. Указание получателя события в Google Web Designer

  11. На последнем этапе в поле «Идентиф. показателей» установите ссылку на ярлык и заполните «URL», указав нужную страницу. Для сохранения используйте «ОК».
  12. Завершение настройки события в Google Web Designer

Работа с исходным кодом

  1. Как мы упоминали, Google Web Designer содержит встроенный редактор кода. Его можно включить, воспользовавшись кнопкой «Код» в правой части верхней панели.
  2. Переход к редактору кода в Google Web Designer

  3. Можете вносить изменения в структуру баннера используя не только визуальный редактор, но и напрямую работая с кодом в файле проекта. Это может быть очень полезно при выравнивании множества мелких элементов или добавлении событий, не предусмотренных программой.
  4. Просмотр и изменение кода в Google Web Designer

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

Шаг 3: Завершение работы

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

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

  1. На верхней панели нажмите кнопку «Предпросмотр», чтобы открыть дополнительное меню. Здесь можно указать браузер, с помощью которого будет открыт баннер.
  2. Переход к предварительному просмотру баннера в Google Web Designer

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

  5. Если нужно, вы всегда можете продемонстрировать результат другим людям. Для этого выберите «Получить ссылку общего доступа» и подтвердите доступ приложения к учетной записи Google.

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

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

  6. Успешном создание ссылки общего доступа для просмотра баннера в Google Web Designer

Сохранение и публикация

  1. Чтобы выполнить сохранение проекта, для начала откройте меню файл и воспользуйтесь опцией «Сохранить». После этого исходный файл будет сохранен на компьютере и может быть открыт впоследствии.
  2. Процесс сохранения проекта с баннером в Google Web Designer

  3. Подготовить проект к размещению на сайте можно, открыв меню «Опубликовать» в правом верхнем углу программы и выбрав одно из мест сохранения.
  4. Процесс публикации баннера в Google Web Designer

  5. Измените параметры в окне публикации на свое усмотрение, оставив только нужные галочки, и нажмите «Опубликовать». Сохранение таким образом происходит быстро независимо от размеров проекта.

    Завершение публикации баннера в Google Web Designer

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Поделиться статьей в социальных сетях:



Еще статьи по данной теме:


Задайте вопрос или оставьте свое мнение

Примечание: если отправленный комментарий не появился на странице, значит он ушел на проверку и скоро будет опубликован. Пожалуйста, не дублируйте вопрос. Мы ответим Вам в ближайшее время.