Изменить хедер на блоге
Добрый день, уважаемые читатели! Создавая блог следует продумывать не только его содержание, но и внешний вид. Написать шаблон подсилу не каждому начинающему блогеру и тогда мы отправляемся на поиск бесплатного оформления блога в сеть. А это , я скажу вам, дело не простое. Сложно найти «чистый», свободный от посторонних ссылок, простой и к тому отвечающий нашим желаниям шаблон. Но найдя такой нас довольно часто какая -то мелочь не устраивает. Это может быть кнопка тви или 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 записки отчаянной«, то предлагаю подписаться на обновления блога в удобной для вас форме.
Возможно Вам это будет интересно:
Вам понравилась статья? Расскажите о ней друзьям!