Главная / Список статей / Как подготовить html5 растяжку в Google Web Design

Google Web Design. Как подготовить html5 растяжку? Особенности работы "смещения контента" для тянущихся баннеров

— Немного теории

— Растяжка с одним брекпоинтом и центрально расположенным контентом. Особенность работы смещения

— Рассмотрим смещение при работе с группой и объектами внутри нее

Данная публикация нацелена на разъяснение процесса формирования растяжки в программе Google Web Design. В множестве мануалов, что мною были прочитаны вскользь поясняют «тонкость» работы «смещения» внутри растяжки. А именно эта деталь и отвечает за корректное отображение тянущегося баннера.

Что такое «резиновый» (тянущийся) html5 баннер? Это баннер который тянется на всю допустимую ширину сайта, и заполняет собой все доступное пространство. Как правило встречаются растяжки баннеров по «ширине» сайта, но так же можно найти размещения, где растяжка тянется по высоте.

Рассмотрим задачу создания адаптивного баннера для использования на десктопной версии веб-сайта. В этом случае, общая структура такого баннера будет следующей:

Важно обратить внимание, на то, что у баннера есть минимальный размер. Этот тот размер, в рамках которого при минимальном экране браузера гарантировано будет корректно отображаться рекламный баннер. На множестве площадок этот размер обычно равен 840, 960, 970 или 1025 пикселям. Точный минимальный размер всегда указан в технических требованиях рекламной площадки.

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

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

Создадим файл с правильным названием у растяжки. «100pr970x250», где 100pr - «100%», 970 – указатель минимального размера и 250 – высота баннера. Выберем «пользовательские настройки размера и укажем размер в пикселях.

Так же поставим галочку «Адаптивный макет». Эта галочка поможет нам в создании адаптивного баннера в программе Google Web Design.

Теперь создадим заготовку фона, который будет тянутся на всю ширину нашего баннера. В поле «Положение и размер» укажем размещение на нулевых координатах и размер 970х250. Так же для удобства можем указать данному слою «ID», что бы визуально его выделить среди всех слоев. В данном случае фон мы назвали «_bg».

Теперь сделаем так, что бы наш фон всегда тянулся на всю ширину баннера. Даже если это ширина будет более 4к – мы увидим наш фон растянутым.

Для этого нужно перейти во вкладку «Адаптивные» и нажать галочку «Адаптивный макет».

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

Теперь вернемся во вкладку «Свойства». В ней найдем блок свойств «положение и размер» и найдем поле отвечающее за ширину баннера. Сейчас там указано 970 px. Нажмем на слово «px» и выберем символ «%». Как только вы выберите отображение ширины в процентах – ваши 970 изменятся на 100. Теперь ваш фон всегда будет 100%.

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

Вернем размер баннера в начальное положение, если вы изменили его. Я обычно нажимаю «cntl+z» и возвращаю баннер на нужную ширину. В данном случае она равна 970 пикселей.

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

Теперь перейдем к магии работы растяжек в Google Web Design.

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

Я умышленно начну делать «не совсем верно», что бы акцентировать внимание на работе «смещения». И в последствии покажу, с какой именно сложностью сталкиваются дизайнеры при разработке растяжек в Google Web Design.

Представим, что мы начинаем создавать центральный контейнер с маленького текста. Напишем по центру баннера фразу «Some Content». Отцентрируем его по середине баннера и поместим в группу.

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

Следом у вас появится модальное окно, в котором нужно указать «название» этой группы. Мое стандартное название «main».

Группа создана.

Если выделить группу и посмотреть на нее в поле таймалайна, то мы увидим, что теперь поле называется «группа». Давай в поле «id» раздела «Свойства» укажем ей название, что бы не путаться.

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

Вот здесь и начинается магия «смещения». Выделите вашу группу и в разделе «свойства» посмотрите блок «положение и размер». Найдите параметр, который отвечает за «горизонтальное положение». Теперь выберем процентное размещение нажав на «px», и увидим, как вместо координат размещения появились проценты размещения. Что бы контент всегда был по середине баннера нам нужно, что бы он размещался на 50%. Давайте укажем это.

Если вы жестко следовали инструкциям, то ваша группа должна сдвинутся «вправо».

Особенность элементов в программе Google Web Design в том, что координаты группы считаются от левого верхнего угла объекта. Следовательно наш объект своей левой стороной встал ровно на 50% баннера.

А для того что бы отцентровать группу по центру нам потребуется сместить всю нашу группу «на половину» ширины группы влево.

Для этого давайте запомним ширину нашей группы (205 px) и прокрутим раздел «Свойства» до блока «Преобразование, вращение, масштаб». В этом блоке нужно выставить галочку «Абсолютное значение» и в координате «Х» указать «минус половина ширины нашей группы». Наша группа 205px. Следовательно укажем в поле «X» - «-102».

После указания «смещения» ваша группа встанет по центру баннера. Теперь вы можете потянуть за баннер и посмотреть как размещается наша группа. Ровно по центру.

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

Зайдем двойным кликом по нашей группе внутрь нее и изменим элементы.

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

Мы создали фон, который несколько «шире», чем наш начальный текст. Если мы выйдем из группы и попытаемся тянуть баннер, то увидим, что контент уже совсем не по середине нашего баннера.

Это и есть особенность сбора растяжек внутри Google Web Design. Изменив контент внутренней группы, вы можете изменить размер этой группы. При этом в настройках «смещения» размеры не были скорректированы.

Давайте все исправим.

Сначала выделим нашу группу и укажем в блоке «положение и размер» размещение на «50%» по координате «Х».

Далее в разделе «Преобразование, вращение, масштаб» в координате «Х» укажем смешение влево на половину ширины нашей группы - «-165px».

Теперь потянем наш баннер и убедимся, что позиционирование группы происходит ровно по центру.

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

Поздравляю!

Вы разобрались со смещением для групп, а значит теперь умеете делать растяжки с центрально размещенным контентом.

Вернуться к списку статей...