Как нарисовать шапку сайта

 RSS

Post 43 of 64
как нарисовать шапку сайта

Приветствую вас друзья, и читатели моего блога multigon.ru. Сегодня я вам расскажу как нарисовать шапку сайта приавильно! Да-да, вы не ослышались, ключевое слово «правильно».

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

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

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

Итак, как нарисовать шапку сайта?

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

Для решения этого вопроса, есть два способа. Легкий и посложнее.
Начну с легкого:

Первый (легкий) способ.

  • Вы композицию рисуете в трех ключевых размерах. Фактически один и тот же сюжет в 3-х разных форматах. После чего, програмно будет подставляться та или иная картинка, в зависимости от носителя (телефона, планшета, или компьютера) с которого пользователь просматривает сайт.

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

создание комиксов

Рассмотрим второй способ как нарисовать шапку сайта

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

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

Дополнительные сложности которые могут возникнуть в процессе работы.

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

Но не стоит отчаиваться! Есть хитрости, которые позволяют решить любую заморочку с форматом вашей иллюстрации.

Лайфхак от мултигона. Как нарисовать шапку сайта под заданную ширину экрана

Если вы твердо решили, что будете делать иллюстрацию на основе второго способа, т.е двигать отдельные композиционные фрагменты шапки сайта, тогда я рекомендую начинать работу с крайнего максимума по ширине. Крайний максимум зависит от технических требований. Если ваша иллюстрация должна быть адаптирована под разрешения широкоформатных мониторов, тогда берем крайний максимум по ширине (диапазон 1400 – 1600 px) Шире этих размеров делать картинку нет смысла.

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

Для более наглядного примера я будут апеллировать «живыми» цифрами.

Пример:

1-й размер иллюстрации: W = 1600 px | H = 500 px
2-й размер иллюстрации: W = 1200 px | H = 500 px

В диапазоне между 1600 px и 1200 px сюжет иллюстрации будет «резинится» и крайне желательно предусмотреть «плавающие» эллементы, чтобы при уменьшении ширины часть сюжета скрывалась, а плавающая часть сжималась.

как нарисовать шапку сайта

3-й размер иллюстрации: W = 1000 px | H = 500 px

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

А я возьму усредненное значение для смартфона с диагональю экрана 4’’ (дюйма) ширина будет 640 px — это и будет наш крайний минимум. В итоге ответить на вопрос данной статьи “как нарисовать шапку сайта правильно» можно одним предложением.

Чтобы нарисовать грамотную иллюстрацию, нужно продумать и просчитать весь цикл изменений сюжета композиции в диапазоне от 1600 px – 640 px

Вот такие вот заморочки. Пока!

  • Алексей Иванов

    Александр, подскажите, у меня такая ситуация.
    Когда я просматриваю свой блог на мобильном устройстве у меня почему то шапка растянута и уходит за поля, а остальное всё нормально. В чём может быть причина?

    • http://multigon.ru/ Оника Александр

      Не видя “пациента” сложно ставить диагноз ;) Причин по которой возникают проблемы могут быть разные. Например, адаптирована ли шапка вообще под мобильные устройства т.е она “резинится” при уменьшении ширины, или пропорционально уменьшается. Или же она остается фиксированных размеров где задана крайняя минимальная ширина под экраны компьютера. В последнем случае рекомендую найти грамотного верстальщика, чтобы решить данный вопрос.

Menu