Мой Красивый Блог - Урок №3

Здравствуйте, мои хорошие!

Как же меня радует наш проект! Мне так нравятся положительные эмоции, которым мы с вами обмениваемся в процессе! Как приятно наблюдать за вашими успехами и читать о том, что вы узнаете что-то новое! Я так и вижу, какими яркими красками заиграют наши блоги в конце курса! :)

Сегодня будет большой урок. Прошу вас сразу не пугаться - информации много, но все описанное - довольно просто. Не пытайтесь проглотить все сразу, у вас есть для этого как минимум целая неделя. :)

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

Начнем мы с шапки (хедера).

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

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

Наборы для цифрового скрапбукинга

Вот примеры дизайнов, созданных с помощью таких наборов:

DesignerBlogs

Наборы для цифрового скрапбукинга (scrapbooking digital kits) - это комплекты "материалов": бумаги и украшений, выполненных в одном стиле. В свободном доступе есть очень много таких наборов. Я ввела в поисковике цифровые наборы для скрапбукинга и получила огромное количество результатов:

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

В Google можно ограничить круг поиска цветом или ввести определяющее слово (ведь мы уже определились с темой и палитрой). У меня лавандовая палитра, и я добавила слово lavender:

Осталось только выбрать и скачать! :) Не все наборы бесплатны, возможно, вам придется немного поискать, но вы обязательно найдете подходящий! Мне повезло - я нашла свой на 4-й ссылке. :)

Итак, нашли, скачали и распаковали. Смотрим:

У меня тут несколько папочек, в которых много вот таких декоративных элементов:

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

Начнем создавать нашу шапку: откроем понравившиеся элементы в Фотошопе.

Я создала новый документ с шириной, чуть меньше ширины моего блога - на 20-30 пикселей. Высоту я пока поставила произвольную, лишнее потом можно будет убрать. Не стоит делать слишком большую по высоте шапку. Самое оптимальное, если при загрузке страницы видно шапку, начало первого поста и информацию о вас на боковой панели. Если видно одну только шапку, это странно и неудобно, даже если она очень красивая. :)

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

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

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

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

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

Размер и наклон любого объекта можно менять прямо в нашем документе. Выберем нужный слой, а затем кникнем в верхнем меню Edit -> Free Transform. Теперь мы сможем уменьшать/увеличивать и вращать только выбранный слой (потянув за любой из углов слоя).
При изменении размера нужно удерживать кнопку Shift, тогда пропорции объекта не изменятся.

Я примерно разложила элементы, уже что-то вырисовывается :)

Добавим название блога при помощи инструмента Type Tool.

Размер, стиль и шрифт надписи меняется на верхней панели. Здесь можно посмотреть и выбрать один из установленных на вашем компьютере шрифтов:

Моя шапочка готова! Обрезаем лишнее по высоте и сохраняем в формате JPG или PNG.
Формат PNG позволяет сохранять изображение без фона, для этого перед сохранением просто сделайте фон невидимым (глазик в слоях). Но с PNG нужно быть осторожным, так как изображение такого формата весит намного больше чем JPG, а значит дольше грузится при открытии страницы. Чтобы в будущем иметь возможность изменять шапку, сохраните ее также в формате PSD (Photoshop). Так вы сможете открывать ее в Фотошопе, не теряя всех слоев.

Устанавливаем шапочку в блог. Думаю, вы это уже делали и всё знаете, но на всякий случай, напомню, как. :) Во вкладке Дизайн выбираем Изменить заголовок.

Загружаем изображение с компьютера...

Если мы все сделали правильно, оно появится в предпросмотре.

Ставим галочку у пункта Вместо заголовка и описания и нажимаем Сохранить.

В цифровые наборы часто входят и фоны. Их можно использовать как фон для нашего блога, что я и сделала.

Очень интересно, что же у нас получается?

Вот так! Пока еще сыро и недоделано, но зато уже свое и ни на кого непохожее)))

Фото-коллаж

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

---

---

---

Источник.

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

Итак, подберем фото для коллажа, По иронии судьбы, для примера я взяла фото из интернета. :)) Но эту шапку я не собираюсь использовать для блога, поэтому, надеюсь, вы меня простите)))

Откроем одну из фотографий в Фотошопе.
Если необходимо, откадрируем ее, то есть обрежем лишнее. Для этого выберем инструмент Rectangular Marquee Tool:

Выделим нужную область:

Выберем Image -> Crop.

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

Размер канвы мы меняли в первом уроке. Надо зайти в Image -> Canvas Size... у меня получилось так:

Откроем остальные фотографии, обрежем до нужного размера и вставим в первый документ.
Напомню, что размер картинок можно менять прямо здесь. Для этого выделим нужный слой, далее - Edit -> Free Transform...
После всех этих манипуляций у меня получился такой коллаж:

Теперь добавим надпись!
Выберем инструмент Rectangle Tool и зададим ему свойства - белый цвет, без обводки.

Растягиваем такой вот прямоугольник:

Увеличиваем его прозрачность в окошке слоев. Поставим значение, которые нам понравится, в моем случае 55%: 

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

Сохраняем и посмотрим, что получилось:

По моему, просто, но симпатично. :) А вам как?)

Конечно, это только один из миллиона способов сделать фото-шапку. Фотографии можно размещать в любом порядке, в несколько рядов; надпись можно размещать сверху-снизу-сбоку или прямо посередине. :)) Можно сделать черно-белый вариант или красивые разделители между фотографиями. А еще можно добавить элементы из скраповых наборов в фото-шапку, например, так:

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

Соберем снова все фотографии в одном документе. Теперь будем кадрировать изображения не до прямоугольника, а до круга. Выберем инструмент Eliptical Marquee Tool:

На нужном слое растянем круг, зажимая клавишу Shift, чтобы он был ровным:

Теперь нажимаем клавиши CTRL+J (на Mac - CMD+J). Обрезанное до круга изображение появится на новом слое. Можно удалить или сделать невидимым изображение, которое мы кадрировали.

Проделаем это со всеми фотографиями:

Добавим надпись, пару кистей и получаем простую и очень быструю шапочку))

И последний разок экспериментируем) Сделаем минималистичную шапочку с фото!

Откроем любое фото и снова выберем Ellipse Tool.

Выделяем нужную область:

Обрезаем: Image->Crop

Теперь нажимаем CTRL+J, получаем обрезанное фото на новом слое. Нижний слой можно удалить или сделать невидимым.

Дальше добавляем надпись и пару кистей, получаем вот что:

Это изображение будет хорошо смотреться при таком расположении элементов в блоге:

Тут я убрала шапку сверху, а на панели разместила изображение, ее заменяющее.

Вот примеры блогов с такой схемой:

---

---

Если вам нравится, как смотрятся такие блоги, можно сделать такую схему и себе) Это не сложно, но для этого нужно зайти в редактор HTML.

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

Итак, в разделе Шаблон нажмите на кнопку Изменить HTML.

В появившемся коде нам надо найти вот этот:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Video in LightBox (заголовок)' type='Header'/>

</b:section>

Для этого поставим курсор в любое место кода и нажмем клавиши CTRL+F (на Mac - CMD+F). В верхнем углу появится окно поиска, куда вставим первую строчку этого кода и нажмем Enter. Нужный нам код выделится другим цветом:

Теперь просто удаляем весь этот код.

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

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

Минимализм

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

Вот примеры дизайнов хедера, где кроме кистей и надписи ничего не потребовалось:

---

---

Не буду подробро рассказывать что делать, вы ведь уже наигрались кистями в прошлом уроке? :) Просто покажу, что получилось у меня:

Не забывайте использовать созданную вами палитру - открывайте ее в Фотошопе и пипеткой определяйте цвета для кистей! :)

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

Вот мои результаты поиска лавандового клипарта, есть очень симпатичные картинки:

Ну, и наконец, можно создать рисунок самому. Об этом ниже...

Графические

К сожалению, рассказать обо всех премудростях Фотошопа у меня нет возможности. Пошагово объяснить, как создать графическую шапку за один урок - довольно сложно. :))

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

Вот тут есть 113 статей про основы Фотошопа: Egraphic.

А здесь тоже очень много уроков рисования, разных уровней сложности: Фотошоп Мастер. Например, можно создать вот такой крутой Винтажный постер! Или нарисовать Декоративный скотч.

Все эти мастер-классы можно применить в создании вашего дизайна!

Но есть один маленький момент, о котором я не могу не упомянуть. Это инструмент Pen Tool. Он для меня - палочка-выручалочка, я им делаю все! :) Все шаблоны для открыток были созданы этим инструментом. Некоторые элементы в дизайнах я тоже делала им.

Например, цветы в этой шапке:

Или птичка в этой:

Возможно, он вам сначала покажется странным, но его просто надо приручить. :)

На самом деле инструмент довольно сложный, вот тут хорошо объясняется, как он работает: Работа с инструментом Pen Tool. А здесь есть мастер-класс по его использованию: Мастер класс

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

Итак, давайте попробуем нарисовать простые листики для украшения заголовка, чтобы понять принцип работы магического инструмента Pen Tool)

Создаем новый документ и новый слой в нем. Далее выбираем инструмент Pen Tool:

В стилях заливки надо выбрать 100% Fill Opacity - серый квардатик, в моем ФШ он расположен последним.

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

Когда точек достаточно, кликнем снова на первую, чтобы завершить рисование.

На панели слоев можно менять цвет, дважды щелкнув на квадратике с цветом.

Чтобы добавить точки, надо выбрать Add Anchor Point Tool. Чтобы удалить, соответственно - Delete Anchor Point Tool.

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

Вот и получилась у нас форма листика.

Плюс такого способа в том, что для рисования достаточно только мышки. Но если у вас есть планшет, вы можете создавать объекты, пользуясь инструментом Freeform Pen Tool - это очень удобно. :)

Я записала видео о том, как все это делала - чтобы вам было более понятно. Видео делалось без репетиции, поэтому простите, если что не так))) Я старалась все делать медленно, но иногда забывала, что вообще записываю видео))) А иногда наоборот зависала в своих мыслях...)) Но, надеюсь, оно вам все равно окажется полезным.

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

---

Дорогие, я старалась как можно шире и подробнее охватить эту тему. Хотя, об этом можно говорить бесконечно - есть еще множество вариантов создания собственной уникальной шапочки. Я очень переживаю, публикуя этот урок. Надеюсь, вам будет все понятно и вы найдете ответы на свои вопросы. Если же я упустила какую-то информацию,  я всегда готова отвечать вам в комментариях, и стараюсь делать это быстро. И не забывайте про великую силу поисковых систем - там можно найти ответ на любой вопрос, по крайней мере, касательно Фотошопа. :)

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

Надеюсь, я вас не напугала количеством информации, и у вас это получится легко и с удовольствием. :)

В своем посте дайте, пожалуйста, активную ссылку на третий урок. Линки для добавления постов будут открыты до 26 февраля 12:00 (по Москве). Следующий урок выйдет 27 февраля.

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