Обзор программы Google Web Designer 1.0.4 или как создать баннер

google0Эпоха визуальных веб-редакторов, казалось бы, ушла в прошлое. Новый стандарт HTML 5 довольно сильно поднял уровень современного веба. При оформлении страниц сайтов с тенями, наклонами, скругленными углами и др. прежде прибегали к помощи графических редакторов уровня Photoshop. Сегодня же все это по зубам HTML5 в паре с CSS3. Пожалуй, единственная область, где еще не обходятся без полноценных дизайнерских инструментов, остаются баннеры. Но гипертекстовые технологии уже наступают и в этом направлении.

Google Web Designer, несмотря на свое громкое название, инструмент далеко не универсальный. С его помощью не получится отредактировать веб-страничку. В первую очередь он создавался для конструирования HTML5-баннеров, адаптированных для сервисов онлайн-рекламы Google. Впрочем, при желании можно сконструировать и и отдельную веб-страницу с нуля — отдельно HTML, отдельно CSS, отдельно JavaScript. Никаких штатных средств объединить все эти инструменты в единый проект в текущей версии 1.0, увы, не предлагается.

google1

При создании нового файла задаются параметры баннера или создаются пустые HTML/CSS/JS-файлы

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

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

google2

Google Web Designer не позволяет редактировать произвольные веб-странички, править можно только то, что создано в программе

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

google3

Google Web Designer – это еще отличный инструмент для изучения HTML5/CSS3. «Поковырять» таблицы стилей в нем можно и вручную.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *