Создаем зимнее оформление своего сайта

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

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

Фон сайта

Если дизайн вашего сайта примерно соответствует моему (default), то добавить фон не составит труда. Для подбора текстур существует множество онлайн-сервисов, но я покажу это на примере Pattern cooler.

На сайте вы найдете примерно 200 готовых дизайнов. Обратите внимание, что каждый дизайн (они пронумерованы) содержит по три варианта текстур.

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

Для своего сайта я выбрал дизайн №174 (снежинки). Кликаем на картинку и попадаем в редактор дизайна. В нём есть волшебная кнопочка «Show color variations as thumbs».

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

Теперь сохраним выбранную текстуру на свой компьютер. Для этого нажимаем кнопку «Preview | resize | download». В новом окне можно выбрать масштаб текстуры «Repeat size». После всех манипуляция сохраняем файл.

Оптимизируем изображение

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

Для оптимизации изображения обычно используется фотошоп. Действие элементарное. Открываем файл и выбираем пункт меню File - Save for web. В появившемся окне подбираем режим JPG или PNG и обращаем внимание на размер файла при разных параметрах качества.

Впрочем, не только в фотошопе можно это сделать. Существуют и другие альтернативы, например бесплатные Gimp или PixBuilder Studio. Покажу на примере последней программы.

Открываем файл и выбираем Файл - Сохранить с просмотром.

То есть опять же, подбираем качество, отслеживая итоговый размер файла.

Загружаем файл на свой сервер

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

Меняем css-стили

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

Идем в Настройки шаблона - Оформление. Здесь мы и разместим свои css-стили.

Пишем:

body {background: url("адрес картинки");}

Адрес вставляем тот, который скопировали в Загрузках. После сохранения настроек, проверяем сайт - на нем должен быть выбранный вами фон.

Если у вас шаблон Default (или на нем основанный), то вам также доступны различные css-профили - темы-оформления. Например я отметил профиль «theme-winter.css»

Устанавливаем падающий снег на сайте

С этим довольно просто: год назад я сделал плагин Snow, который достаточно установить на свой сайт. Установка стандартная: загружаем файлы в каталог плагинов, в админ-панели активируем плагин и в его опциях выстравиваем нужные нам эффекты.

Зимний фон шапки

Шапка, впрочем как и любой другой элемент дизайна, настраивается через CSS-стили. Но вот сказать какие именно стили, точнее к какому элементу его следует применить, затруднительно, поскольку шаблоны всё-таки различаются. Поэтому я приведу пример для шаблона Default. Если ваш шаблон также основан на нём, то проблем не возникнет.

Для шапки я поискал картинку в гугле. При поиске нужно указать критерий «Большой размер». Учитываем, что ширина сайта 960px, поэтому и изображение желательно иметь аналогичной шириной. Не меньше. Что касается высоты, то пока она не имеет значения.

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

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

Теперь пропишем стили для шапки. У меня, например, получилось так:

div.header {background: url("адрес"); border-radius: 10px 10px 0 0;}

Свойство border-radius я указал для того, чтобы скруглить верхние углы шапки.