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

Всем доброе утро!

Сегодня четверг, а значит быть новому уроку курса Мой красивый блог! :)

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

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

Прежде чем начать сегодняшнюю тему, хочу задержаться еще на одном моменте. :) Некоторые из вас пишут, что испытывают неудобства из-за того, что в уроках используется английская версия Фотошопа, а у вас стоит русская. Словари и переводчики могут давать неточные переводы терминов, и пользоваться ими неудобно. Я нашла для вас отличные таблицы, где даны переводы всех терминов из ФШ + изображения иконок. Думаю, используя эту таблицу, вам будет гораздо проще ориентироваться: Грамотный перевод терминов Photoshop

Итак, начнем. Сегодня мы будем разговаривать о фоне и вкладках - их создании, оформлении и размещении.

Фон

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

Часто фон в блогах просто оставляют белым:

Butik Sofie

Это самый простой способ, но довольно симпатичный. И, главное, подходит к любому стилю. :)

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

Для этого выберем вкладку Шаблон->Настроить, а затем Фон.

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

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

Давайте начнем поиски идеального фона! Каким он должен быть?

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

Нашли мы в интернете красивую картинку и решили, что она отлично подойдет нам для фона:

А на деле оказывается, что в блоге она смотрится вот так:

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

 Или вот замечательный фон, созданный Альбиной:

Здесь хорошо видно, как узоры с левого края переходят в узоры с правого, а с верхнего - в нижний, и наоборот:

Используя такое изображение, мы получим красивый ровный фон без стыков:

В поисковиках подходящие картинки можно найти по запросу бесшовные фоны или tile backgrounds. Если вы создавали свою шапку с помощью цифрового скрап-набора, то, скорее всего, в него входили и фоны, которые отлично вам подойдут.

Вот пара порталов с бесплатными фонами:

PatternCooler

BackgroundLabs

365PSD

А тут я взяла фон для своего блога: Bene.be

Если вы не смогли найти подходящей картинки, можно сделать бесшовный фон в Фотошопе самому! Я в это погружаться не стала - в сети очень много готовых хороших фонов. Но если вам захочется экспериментов, дам пару ссылок. :) Вот тут можно почитать мастер-класс создания фона из фотографии: Shkolazhizni.ru А здесь объясняется, как сделать фон с нуля: PhotoshopMaster

Итак, подходящую картинку вы нашли или сделали сами, теперь нужно ее установить.

Снова заходим туда, где расположены стандартные фоны блогера: Шаблон -> Настроить -> Фон. Здесь выбираем Загрузить изображение:

Указываем путь к нашей картинке:

Если наше изображение подходит по размеру и весу, оно появится в превью. Нажимаем Готово.

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

Совсем иначе смотрятся фоны, которые как бы обрамляют центральную зону сообщений и боковые панели:

ChigElena

Сами со себе они выглядят иначе, чем обычные узоры:

В таких фонах предусмотрена зона для текста и декор по бокам. В блог они ставятся одной картинкой, а не мозаикой.

Их тоже можно скачивать готовыми. Например, на всеми любимом Shabbyblogs.com просто море таких фонов, с простой инструкцией по применению:

Вот тут тоже есть симпатичные фоны: KinziesKreations.

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

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

Я не очень люблю активные фоны, поэтому они у меня вот такие бледненькие)

Чтобы сделать такой фон, создадим в Фотошопе документ размером 1000 на 1600 пикселей. Заполнять декором нужно зоны по краям, отмерив 300 пикселей.

После загрузки фона в шаблон, зададим ему такие параметры:

Выравнивание - сверху по центру; Не разделять на мозаику; убираем галочку у пункта Прокручивать со страницей.

Сохраняем. Наш фон должен красиво встать  в блог. :)

Как же решить, какой фон выбрать? Тут важно, как и в скрапе, не переборщить. :) Если у вас скромная шапка в стиле минимализма, то яркий и активный фон может оказаться очень к месту. И наоборот - к большой шапке с множеством сложных элементов лучше подобрать более спокойный и нейтральный фон. Глазам посетителя нужно давать возможность отдыхать. :)

---

Вкладки

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

Давайте создадим ваши вкладки. Заходим в раздел Страницы:

Здесь страницы создаются и редактируются как обычные сообщения.

Когда вы создали нужные страницы, в разделе Дизайн добавляем гаджет Страницы (добавить можно в любом месте, а потом перетянуть в нужное):

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

Если вы хотите создать ссылку на любой другой сайт (например, на ваш магазин на Ярмарке Мастеров или другой блог), нужно нажать надпись Добавить станицу со ссылкой:

Здесь заполняем поле названия и вставляем ссылку:

Если вы размещаете вкладки над/под шапкой, не создавайте их слишком много. По крайней мере, они должны умещаться в одной строке. Я создала четыре - Главная, Обо мне, Магазин и Контакты. Так же довольно уместно тут будет смотреться вкладка с вашим портфолио, мастер-классами и профессиональными успехами. Менее важные странички лучше вынести на боковую панель.

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

В поле для кодов добавляем такой код:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

Нажимаем кнопку Применить к блогу. Теперь наши вкладки располагаются по центру.

В редакторе шаблонов можно настроить внешний вид вкладок.

Зайдем в Шаблон->Дополнительно->Текст вкладок. Здесь можно выбрать шрифт, размер надписей, их цвет и цвет текста на выбранной вкладке:

Ниже находится раздел Фон вкладок. Здесь можно поменять общий фон и фон на выбранной вкладке:

И еще один раздел - Цветовые акценты. Здесь мы выберем цвет границ вкладок:

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

Их можно размещать и на боковой панели:

Все примеры с сайта DesignerBlogs

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

Я сделала простые кнопки с мазком кисти:

Теперь загрузим их в блог. Для этого в разделе Дизайн создадим новый Гаджет HTML.

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

<a href="адрес сайта"><img src="адрес изображения"></a>

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

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

Вот так простенько, но симпатично. :) А главное - мимо такого заметного меню никто не пройдет! :))

Если вы хотите разместить такие кнопки на боковой панели, ставьте между кодами <p>. Тогда кнопки точно будут располагаться друг под другом.

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

<a href="адрес сайта" target="_blank"><img src="адрес изображения"/></a>

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

Немного иной вариант оформления меню - с "монолитной" картинкой. В этом случае все кнопки связаны между собой  выглядят одним целым:

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

Создадим новый документ размером примерно 150 х 800 пикселей. Чтобы нам было легче ориентироваться, включим отображение сетки: View->Show->Grid.

С помощью инструмента Pen Tool нарисуем ленту.

Инструментом Dodge Tool можно высветлить некоторые участки ленты:

Далее инструментом Horizontal Type Tool напишем заголовки страниц.

Теперь, когда цельная картинка готова, нужно поделить ее на части - будущие кнопки. Не промахнуться со стыками нам снова поможет сетка. :) Выделяем нужную область инструментом Rectangular Marguee Tool, обрезаем и сохраняем как отдельный документ JPG или PNG. Проделываем это со всей лентой. Главное, чтобы конец предыдущей кнопочки совпадал с началом следующей - тогда в картинке не будут заметны переходы.

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

Вот и все! Результат я уже показала выше. :)

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

А в одном из магазинов на Etsy я нашла такие вот кнопочки:

Почему бы нам не поэкспериментировать  в этом направлении? :) По-моему, это замечательный способ сделать свой блог уникальным и запоминающимся. :)

А теперь домашнее задание.

1. Найдите и установите в блог понравившийся вам фон. Если будет время и желание, попробуйте сами создать фон.

2. Продумайте размещение вкладок в вашем блоге. Если вам понравился вариант с кнопками, создайте и установите их, используя материалы из урока.

3. Позади бОльшая половина курса. Ответьте, пожалуйста, на несколько вопросов. Видите ли вы существенные изменения в своем блоге? Оправдываются ли ваши ожидания от уроков? Интересно ли вам, хотите ли вы дойти до конца?

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

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