Дизайн блога (фон + футер + пример составления задания) — часть 2

Дата публикации:

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

Фон блога

   К этому моменту стоит отнестись очень внимательно. Что такое фон сайта? Это сплошной цвет, который заполняет все пространство вокруг вашего сайта. Если уменьшить мой блог в масштабе, то можно увидеть следующее:

   Зеленое "море" вокруг контента - это фон моего сайта. Как образуется этот фон? Все очень просто. Готовится специальная картинка. Если по-русски, называется она «бесконечный фон для сайта». Можете набрать в поисковике картинок. Если такой картинкой замостить любую площадь, то получится однородный рисунок без стыков и переходов.

   То есть картинка для фона может быть размером 10×10 px, весить несколько килобайт и создавать ровный фон для вашего сайта. Это был бы идеальный вариант.

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

   В идеале шапка и фон должны гармонировать или плавно переходить друг в друга. Как это сделать? Есть один хороший вариант: нужно побеспокоиться о красивом переходе между шапкой блога и фоном. Вот опять я приведу в пример блог Александра Борисова:

 

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

   А вот еще один пример, Вовкин блог: здесь тоже выполнен плавный и аккуратный переход на картинке шапки к цвету фона.

   А вот идея, которая возникла у меня с ходу для блога о путешествиях (не судите строго за мои каракули):

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

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

Картинка в футере

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

 

Вовкин блог:

 

   Как видите, фантазия тут не ограничена ничем. Главное помните, что за такую картинку вам придется заплатить столько же, сколько вы заплатите за шапку. Если есть средства, желание, и вы чувствуете необходимость в таком футере, вперед!

Подведем итоги

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

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

   Естественно, эта схема может изменяться, в зависимости от ваших предпочтений. Например, у вас может не быть нарисованного футера, тогда вам его учитывать не нужно. Плавного перехода по вертикальной линии тоже можно не делать, если картинка шапки будет шире 2000 пикселей, то есть перехода не будет видно даже при разрешении монитора 1920×1080 px. Так, например, сделано у Александра Борисова:

   Теперь вам необходимо определиться с четкими цифрами и составить из этого всего следующее задание. Лучше, если вы это все сделаете в письменном редакторе. Вот краткий пример такого задания:


1. Шапка сайта: картинка высотой 300 px, шириной 1940 px (по ширине большого экрана). Вся важная информация (основное изображение, логотип и слоган) должны уместиться в размерах 250*980 px (по центру и вверху, относительно всей картинки).

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

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

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

2. Логотип и слоган

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

3. Фон

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

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


   Вот, пожалуй, и все. По этому заданию вы потом проверите результат, который получите от фрилансера. Заметьте, все должно быть очень подробно с максимальным количеством примеров. Это нужно в первую очередь для вас, чтобы вы получили тот результат, на который рассчитываете. Ну и, конечно же, чтобы не тратить зря время и не просить фрилансера переделывать по несколько раз.

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

Кто рисовал мне шапку и логотип?

   Дизайн блога, а точнее, шапку и логотип мне нарисовала замечательная девушка с ником Странная Анна, вот ее профиль в ВК. У нее есть группа и сайт, где выложены ее работы. Как я уже говорила, шапка сайта + логотип обошлись мне в 3600 рублей. Но учитывайте, также, что это было год назад. Естественно, за это время она наверняка выполнила множество других работ, повысила уровень своего профессионализма, и, что вполне закономерно, могла повысить цены на свои услуги.

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

Что дальше?

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

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

   Надеюсь, после этой статьи вам стало понятно, чем нужно руководствоваться, чтобы дать правильное задание художнику-иллюстратору для создания красивого дизайна блога. А у меня на сегодня все, если у вас есть какие-то вопросы по каким-то моментам, касающихся дизайна блога, не стесняйтесь, пишите, обсудим. А на сегодня у меня все, надеюсь, это были полезные статьи. Всем пока!

С уважением, Елена Исхакова

Получать статьи этого блога почтой:

9 комментариев
  • Алиса

    Да, все не просто :scratch: . С рисунком я вроде как определилась, с размерами вроде более-менее понятно, на счет фона, вот. Вы пишите, что можно просто набрать в поисковике картинок, а потом, как определимся, в задании фрилансеру говорим подготовить эту бесконечную картинку, что это значит, не поняла...

    10 февраля 2015-02-10 Ответить
    • Елена Исхакова

      Набрать в поисковике — это просто для примера и общего понятия, что это вообще такое. Что из себя представляет эта картинка. Но вам-то нужно, чтобы картинка ваша была уникальной, значит иллюстратор должен вам такую картинку подготовить. Там есть специальный метод, инструменты, которые помогают создать такую бесконечную картинку. А ваша задача, придумать, что это будет за бесконечная картинка: просто цвет, какая-то текстура, песок, волна, звездное небо или просто легкий узор.

      10 февраля 2015-02-10 Ответить
    • Алиса

      Все, теперь понятно. Спасибо. Уникальность везде!

      10 февраля 2015-02-10 Ответить
      • Елена Исхакова

        Старайтесь, чтобы так было)

        10 февраля 2015-02-10
  • Оксана

    Лен, а напиши во сколько обходится ежемесячное содержание блога, ну или ежегодное. Есть же какая-то плата за домен и хост.

    17 февраля 2015-02-17 Ответить
    • Елена Исхакова

      Домен — 150 рублей в год. Хостинг — 1300 в год. Я сижу на таймвеб, но рекомендовать его не буду. Он, конечно один из лучших, но не самый-самый.

      18 февраля 2015-02-18 Ответить
  • Андрей Гончаров

    А куда логотип делся? :sad:

    19 февраля 2015-02-19 Ответить
    • Елена Исхакова

      Какой логотип?

      19 февраля 2015-02-19 Ответить
  • juliadiets.com

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

    13 марта 2016-03-13 Ответить

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: