Делаем шапку блога на blogger в photoshop: часть 2

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

 
Вот такая интересная штука получается. Следуйте шагам, которые описаны ниже, и я уверена, у вас получится ничуть не хуже, и даже лучше. На самом деле, всё довольно просто.
А пока вы не перешли к чтению, предлагаю прочесть ещё один очень полезный материал: “Как привязать домен к Blogger” (откроется в новом окне).

Как вырезать в Photoshop сложные объекты для шапки блога на blogger

Принцип всё тот же, как при закруглении углов прямоугольника, только вместо инструмента “прямоугольник” мы будем создавать произвольный контур, преобразовывать его в выделенную область и вырезать нужный нам объект. Кстати, если у вас не установлен фотошоп, то можно воспользоваться онлайн фотошопом сервиса Webmasta. Он компактный и быстро подгружается. Найти его можно на левой панели сайта в блоке “Другие инструменты”. Итак, начнём.
  1. Выбираем изображение, из которого нужно вырезать какой-то объект. В нашем случае – это кошачья мордочка и девушка.
  2. Ctrl+O (или меню файл – открыть), и открываем нужное изображение + фон, который мы сделали в предыдущем уроке.
  3. Подгоняем размеры нашего изображения под сделанный нами фон. Для этого: Alt+ctrl+I, выбираем в открывшемся окне (в блоке “размерность”) пикселы и задаём нужные размеры. Смотрите, чтобы высота и ширина не превышала аналогичные размеры шапки. О том, как их определить, я рассказывала в предыдущем посте.
  4. Если справа не отображается панель слоёв, нажимаем F7 на клавиатуре.
  5. Разблокируем слой, чтобы производить над ним изменения: 
  6. Делаем активным инструмент 
  7. Небольшими шажками начинаем обводить контур нашего кота:
  8. Полностью замкните контур, кликнув по начальной точке курсором.
  9. После того как контур замкнётся, все маркеры исчезнут и появится сплошная замкнутая линия. Внутри контура кликнем правой кнопкой мыши и выберем в контекстном меню “Образовать выделенную область”.
  10.  Выберем в окне “Радиус растушевки” равным 2 пикс. ОК.
  11. Скопируем котёнка Ctrl+c, затем перенесём его на наш фон, сделав активным файл с этим фоном (он у нас уже открыт, нужно только кликнуть по вкладке вверху) и кликаем ctrl+v.
  12. Наш первый герой перемещён. Чтобы поместить его в нужном месте фона, нужно сделать активным новый слой, который появился в файле с фоном. Для этого кликнем по нужному слою. Затем выберем инструмент и, кликнув правой кнопкой по коту (удерживая её), перетащим его в нужное место.
То же самое было проделано и с девушкой (которая слева на шапке блога). Теперь вы знаете, как вырезать в Photoshop. Ближе к концу поста я расскажу, какие эффекты были применены к вырезанным изображениям. А сейчас перейдём к тексту.
 

Красивый текст в Photoshop для шапки блога на blogger

  1.  В том же файле, где и фон, напечатайте нужный текст. Для этого нужно выбрать инструмент “Текст” и в панели, появившейся сверху, задать нужные параметры (цвет шрифта, шрифт, начертание, величина и т.п.)
  2. Затем кликните в нужном месте левой кнопкой мыши и напечатайте текст.
  3. Обратите внимание, что появился новый слой на панели слоёв: текстовый. Дважды кликнем по нему на панели слоёв. В появившемся окне поставим галочку “Внешнее свечение” и зададим нужные параметры с помощью бегунков. То, как изменяется текст, можно увидеть в процессе редактирования. Поэтому сдвиньте окно так, чтобы был виден написанный вами текст. Я, к примеру, выбрала такие значения (но вы слепо не делайте так, как у меня, экспериментируйте):
  4. Чтобы придать тексту объём, я использовала вот эти параметры:
  5. Кликнем правой кнопкой мыши по слою с текстом на панели слоёв и выберем в контекстном меню “Растрировать текст”.
  6. Чтобы сделать эффект удаления (см. рисунок шапки блога на Blogger вверху), меню Редактирование – Трансформирование – Искажение:
  7. В итоге вокруг текста появятся маркеры. Перетаскивая каждый из них, можно создать эффект удаления нашей надписи. Выберем какой нибудь инструмент на панели слева и в появившемся окне кликнем “Применить”. Вот уже шапка блога на blogger обретает интересный вид. Идём далее.
  8. Применим ещё один эффект – называется “Наложение градиента”. Для этого дважды кликнем по слою на панели слоёв и в появившемся окне поставим галочку “Наложение градиента” и поэкспериментируем с разными настройками в этом окне.
  9. Я не буду приводить фотографию текста, который уже есть в моей шапке. Приведу лучше другое изображение. Так вот что получилось после всех нехитрых махинаций:

Эффекты Photoshop для шапки блога на Blogger

Как и обещала, вернусь к тем эффектам, которые были применены к слоям (текстовому, и тем слоям, где находятся вырезанные изображения). Чтобы их применить, нужно дважды кликнуть по нужному слою, находящемуся в панели слоёв справа. Итак, все эффекты:
  • Внешнее свечение;
  • Тиснение (кстати, его можно использовать и непосредственно для нашего фона, чтобы придать ему некоторый объём);
  • Градиент
  • Тень (её мы не использовали, однако такая функция имеется)
Для эффекта отдаления : Редактирование – Трансформирование – Искажение. Причём можно использовать не только для текста.
 

На этом пока всё. Основные принципы мы с вами разобрали, теперь можете сделать лицо вашего блога на blogger краше с помощью Photoshop.

 
P.S. Подучите Фотошоп: в голодные времена пригодится 🙂 Нужно совсем немного навыков, чтобы начать зарабатывать, делая тизеры.
08.04.2012 / SEO оптимизация сайта комментария 2
Похожие записи
комментария 2
  1. Ирина
    02.02.2018 в 20:48 – Ответить

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

  2. Наталья
    12.06.2019 в 18:47 – Ответить

    Забрала в копилку несколько ваших советов! Спасибо!

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