Изменить хедер на блоге

Добрый день, уважаемые читатели! Создавая блог следует продумывать не только его содержание, но и внешний вид. Написать шаблон подсилу не каждому начинающему блогеру и тогда мы отправляемся на поиск бесплатного оформления блога в сеть. А это , я скажу вам, дело не простое. Сложно найти «чистый», свободный от посторонних ссылок, простой и к тому отвечающий нашим желаниям шаблон. Но найдя такой нас довольно часто какая -то мелочь не устраивает. Это может быть кнопка тви или rss -ленты или какая -то деталь в хедере. И вот порой только из- за  них мы отказываемся от данного шаблона, не подозревая что хедер, и кнопочки можно спокойно изменить самостоятельно.

Найдя и скачав понравившийся шаблон я первым делом проверяю его на лишние ссылки, посредством простого плагина wordpress  — TAC. Если шаблон «чистый» я его устанавливаю на блог, но всегда какая — то незначительная деталь мне не нравится.

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

В папке с шаблоном содержатся не только системные файлы, но и несколько папок, среди которых обязательно будет папка images.

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

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

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

Первоначально мне необходимо удалить цветочный узор

Для этого в палитре Слои создаю копию этого слоя и отключаю видимость оригинального

Теперь в палитре инструментов выбираю Прямоугольное выделение и очень точно выделяю вот этот участок изображения

Беру инструмент Перемещение и перетаскиваю выделенную область на цветочный узор, а затем применяю Редактирование — Трансформирование — Отражение по горизонтали ( Edit — Transform- Flip Gorizontal). Делается это из-за того, что по краем изображение более светлое нежели по центру. В итоге получаю следующее

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

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

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

Теперь пременив инструмент Перемещение перетаскиваю выделенную область на фон под хедер, а затем применяю Свободное трансформирование, для уменьшения девочки . И сразу же также  переворачиваю фигуры девочки с помощью Редактирование — Трансформирование — Отражение по горизонтали.В итоге получаю

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

Первым делом следует удалить зеленый фон снизу. Снова беру Фоновый ластик и осторожно удалю все ненужное

После приминения Ластика изображение становится следующим

Далее следует уменьшить игрушку, Редактирование — Трансформирование — Свободное трансформирование, до необходимого размера и с помощью инструмента Перемещение расположить около девочки. В итоге у меня получается

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

Захожу во вкладку Layer — Merge Visible или использую комбинацию клавиш Shift+Ctrl+E и к полученному слою применяю два стиля слоя -Внешняя тень (drop shadow)

И Внешнее свечение (outer glow)

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

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

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

Запускаю Денвер и проверяю как полученный хедер будет отражаться. У меня все получилось как и было задуманно. Теперь можно спокойно с помощью ftp- клиента забросить новый файл хедера на хост в директорию /public_html/wp-content/themes/название темы/images/(это в моем случае). И обновить блог. Единственно, хочется заметить , что вы первое время будете видеть старое изображение, а ваши посетители новое. Связано это с кешированием.

Итак, это было у меня изначально

а как стало потом я уже показала на предыдущем скрине.

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

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

Если вы не очень поняли как я это делала, то предлагаю Вам посмотреть два видео ролика, где я подробно обо всем рассказываю и показываю

[youtube]AvURd43OXsU[/youtube]

[youtube]5CjncuGOcE8[/youtube]

На этом все. Всем удачи !

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

Вам понравилась статья? Расскажите о ней друзьям!