Мастер-класс: Новогодний дизайн на сайт

Новогодний дизайн на сайт - Мастер-классСегодня сайт 4esnok усыпало снегом, появились сосульки, а чеснок устроился под Новогодней Ёлочкой. Но это не всё, о чем мы хотели Вам рассказать. В процессе изменения дизайна мы решили подробно описать, как самостоятельно сделать новогоднюю тему своему сайту.

Если у Вас есть блог или сайт, то можете воспользоваться данной статьёй как инструкцией.

Подготовка

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

Зайдите в раздел настроек и найдите, что можно менять, а что нельзя.

Например, в блогах Я.ру нужно нажать ссылку «Настройка» (правый верхний угол страницы), слева выбрать в разделе «Фон шапки» пункт «Загрузить другой», при этом нужно учесть необходимый размер картинки (в Я.ру 114 пикселей).

Если у Вас блог на WordPress и есть доступ к хостингу через FTP, то возможности вообще безграничны :). Данный мастер-класс как раз больше всего подходит для блогов на WP.

Рисуем на бумаге

Даже если художественного таланта нет, всё равно нужно зарисовать то, что хотите сделать.

Начертите на листе А4 основные элементы дизайна Вашего блога или сайта:

  • Шапку;
  • Меню;
  • Боковые колонки (сайдбары).

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

Набросок новогоднего дизайна

Набросок новогоднего дизайна

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

Фотографируем картинку в шапку

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

Наверняка у Вашего сайта есть какой-то символ. У нашего сайта – это, конечно же, чеснок. Именно этот символ мы и обыграем в Новогоднем дизайне.

Новогодний 4esnok

Новогодний 4esnok

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

Освободите стол, положите лист ватмана, разместите веточку, нарядите её и поместите символ сайта в центре композиции.

Для хорошего освещения понадобятся две настольные лампы, которые нужно разместить между фотоаппаратом и предметами съёмки: одну слева, другую справа. Мы уже давно сделали себе небольшую установку для фотографирования небольших предметов, поэтому ей и воспользовались (смотрите фотографию ниже).

Самодельная фото-установка

Самодельная фото-установка

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

Творческий процесс

Творческий процесс

Находим файлы шаблона сайта

Если Вы используете WordPress, то все картинки шаблона находятся на сервере по такому пути: «public_html/wp-content/themes/название_темы/images»

Скопируйте все изображения себе на компьютер – их мы и будем изменять.

Копируем изображения (папка images)

Копируем изображения (папка images)

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

Редактируем шапку сайта

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

Нам понадобятся красивые кисти и некоторые базовые знания работы в графических редакторах.

Чтобы найти подходящие кисти можно в поисковике написать «Морозные узоры на стекле фотошоп» и «Кисти для фотошопа завитушки».

Мы нашли кисти «Морозные узоры и Лёд» здесь, а завитушки здесь.

1. Открываем файл шапки (обычно называется «header.jpg» или «logo.jpg») или создаём новый документ с размерами шапки Вашего блога.

2. Вставляем фотографию, которую получили ранее.

3. Рисуем снег, морозные узоры, гирлянды, подарки и всё, что захотите. Можно также вставлять любые изображения (соблюдая авторские права 😉 ).

Редактирование шапки сайта 4esnok

Редактирование шапки сайта 4esnok

4. Сохраняем получившееся изображение.

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

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

Редактируем меню и элементы дизайна

Посмотрите, какие еще элементы Вы хотели бы украсить. Мы решили добавить сосульки на главное горизонтальное меню и шапку каждого блока боковых меню.

1. Откройте изображение в редакторе.

2. Нарисуйте снег, сосульки или что-то еще.

Рисуем сосульки и снег

Рисуем сосульки и снег

3. Сохраните то, что получилось.

4. Скопируйте на сервер для просмотра.

При  необходимости подправьте новые элементы и еще раз скопируйте на сервер.

Запускаем снег

Есть несколько способов запустить снег на сайте.

Можно установить плагин для WordPress, но при этом нужно учитывать, что не все плагины совместимы и могут увеличивать нагрузку на сервер. Поэтому мы использовали java-скрипт. Звучит страшно? Не беспокойтесь, следуйте за белым кроликом идите по шагам за нами 🙂

1. Скачиваете архив отсюда (вирусов нет, проверено);

2. Загружаете файл «snowstorm.js» из архива на хостинг в корневую папку сайта «public_html»;

3. Заходите в админку ВордПресса и выбираете «Внешний вид» — «Редактор» — «Заголовок (header.php)»;

4. Вставляете перед строчкой </head> код:

[php]<script type="text/javascript" src="http://адрес_вашего_сайта/snowstorm.js"></script>[/php]

5. Жмете кнопку «Обновить файл»;

Готово!

Если у Вас сайт не на основе WordPress, то действия выполняются похожие, главное найти в исходном коде строчку </head>.

Может быть что-то еще?

Можно еще добавить в сайдбары (боковые колонки) и подвал (нижняя часть сайта) различные новогодние картинки.

Мы в нижнюю часть сайта сделали коллаж из старой советской открытки, бесплатных клипартов и нарисовали некоторые элементы.

Создаём новогодний подвал сайта

Создаём новогодний подвал сайта

Эффект мерцания

Для совсем уж зимнего настроения мы решили сделать мигающие блёстки в шапку сайта (ведь красиво, когда снег на солнце блестит?!). Брать готовые «мерцалки» не хотелось, да и нет их нормальных. Сделали сами себе эксклюзивные блёстки.

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

Было  — стало

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

Вот как изменился дизайн сайта 4esnok после перечисленных действий.

Обычный дизайн сайта 4esnokНовогодний дизайн сайта 4esnok

Пробуйте, всё в Ваших руках!

Я участвую в классном конкурсе «Укрась свой блог к новому году«Время проведения конкурса: со 2 декабря по 29 декабря 2011 г. включительно.

I место3000 рублей + призы!

II место2000 рублей + призы!

III место1000 рублей + призы!

Но и это еще не все. Все подробности на этой странице.

Организаторы конкурса:

www.isif-life.ru — Блог Александра Борисова

www.pervushin.com — Блог Сергея Первушина

www.shantarin.ru — Блог Андрея Шантарина

Если у Вас есть свой блог, то Вы тоже можете попробовать свои силы в этом новогоднем конкурсе. Теперь Вы знаете как изменить дизайн сайта на новогодний!

Следующая статья тоже на новогоднюю тематику, небольшой подарок из детства – следите за новостями сайта и получайте их сразу на e-mail.

Обсуждение: 5 комментариев
  1. Фотоустановка (лайт-бокс) понравилась! И про джумлу поподробней надо!!!

    • Чеснок:

      Спасибо, Игорь за оценку «лайт-бокса»! 😀
      По поводу Joomla:
      С этой CMS я не работал, поэтому полноценной инструкции не получится.
      Хотел добраться до установки и экспериментов, но времени свободного очень мало.

      Так что, пишу только то, что получилось накопать после экспериментов на демо-сайте джомлы:

      Шапка сайта:
      Если я правильно понял, изображение из шапки находится по пути «public_html/templates/название_темы/images/header.jpg»
      Наверняка, в папке «images» и остальные графические элементы шаблона.
      Также, как и для ВордПресса: скопировать, обязательно сделать резервную копию, редактировать по примеру в статье.

      Запустить снег на Joomla:
      Сначала скопировать скрипт снега в корневую папку сайта (описано в статье выше), затем:
      1. Зайти в Extension — Template Manager
      2. Выбрать закладку Templates
      3. Нажать на название своей темы (шаблона)
      4. Выбрать ссылку Edit main page template, откроется страница редактирования файла «index.php»
      5. Вставить код упомянутый в статье перед строчками кода в редакторе:
      </head>
      <body>

      Приблизительно так. Надеюсь, помог 🙂

  2. Ну и как результаты конкурса? Обескуражили?

    • Чеснок:

      Да, результаты, мягко говоря, удивили.

      Наше мнение уже озвучили в комментариях в соответствующей теме:
      1. Должны быть четкие критерии оценки работ;
      2. Хорошо было бы видеть, что было «до» и стало «после» (иногда сложно оценить, а были ли изменения :));
      3. Не помешало бы мнение профессионала по теме конкурса, желательно, чтобы он был в составе жюри.

      Не смотря на результаты конкурса, мы довольны итогом своей работой 🙂
      Главное, что Новогодний дизайн создает праздничное настроение посетителям сайта!

  3. *Главное, что Новогодний дизайн создает праздничное настроение посетителям сайта!*
    Это — да!

Поделитесь своим мнением

Пожалуйста, зарегистрируйтесь, чтобы комментировать.

Рассылки новостей
  RSS-лента сайта

Новости сайта на e-mail:


Рассылки

Хостинг ТаймВэб
Статистика сайта
© 2017 4esnok  Войти