Читать
Главная » Архив » Урок 17. Рисуем заглушку

Урок 17. Рисуем заглушку

07.06.2016 / Уроки

Вы планируете запустить сайт и уже купили домен (адрес в сети), но сайт ещё не готов? Или вы хотите выдержать время до заветного запуска? Значит вам обязательно нужна так называемая «заглушка» для сайта!

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

Руководствуясь именно этими задачами, создадим в этом уроке простую страницу-заглушку.

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

Определим главные составляющие заглушки:

  1. Название компании (бренда, фирмы и т.д.)
  2. Информация о запуске сайта или контакты для получения информации
  3. Не пугающий, расслабляющий фон.

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


Урок 17. Рисуем заглушку



Если есть логотип, то обязательно помещаем его в верхнюю часть. Если же логотипа нет или пока ещё нет, то можно просто написать название используемым шрифтом. И добавляем надпись, объясняющую посетителю, что вообще происходит:


Урок 17. Рисуем заглушку



Далее рекомендуется использовать счётчик, показывающий время, оставшееся до запуска сайта. Можно использовать готовый скрипт, а можно нарисовать свой вид счётчика и попросить верстальщика над ним потрудиться.

Фигурой со скруглёнными углами рисуем плашки - подложки для цифр: дни, часы, минуты, секунды. Нарисовав одну, копируем её (при выбранном инструменте «Стрелка» (A)) и вставляем на этот же слой. Затем «Стрелкой» передвигаем в сторону. Повторяем действие для создания 4-х плашек, отстоящих друг от друга на равных интервалах.


Урок 17. Рисуем заглушку



Представим, что это табло и цифры меняются при перелистывании плашек. Затеним верхнюю половину, для чего нарисуем прямоугольник поверх плашек, а затем кликнем одновременно клавиши Ctrl+Alt+G, создав тем самым обтравочную маску.


Урок 17. Рисуем заглушку



Добавим объёма. Для этого вернёмся на слой с четырьмя плашками, дублируем его (Ctrl+J), выбираем нижний слой (оригинал) с плашками и подвигаем его немного вверх.


Урок 17. Рисуем заглушку



Добавляем цифры и счётчик готов!


Урок 17. Рисуем заглушку



Осталось добавить контакты и доброжелательное обращение к посетителю (можно ещё добавить кнопки соц.сетей, если у вас уже есть действующие и часто обновляемые группы). Например:


Урок 17. Рисуем заглушку



Вот и всё!


Урок 17. Рисуем заглушку



Вы можете скачать заглушку бесплатно. Вес архива - 6,3 МБ

Скачать архив


Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА