Мой красивый блог. Уроки Алены-Sineoka

Пришло время отчитаться. Я миллион раз перечитала все уроки от Алены (искать тут), возвращалась ко многим вещам не один раз и готова представить вам окончательный пост о проделанной работе по оформлению моего блога. Самое интересное, я уверена, что существующий на сегодняшний день дизайн не станет последним, потому что я практически полностью разобралась в настройках blogger и теперь чувствую себя мудрой совой. Надеюсь, кого-то этот пост вдохновит на свои творческие поиски и красивых блогов в интернете станет больше! Заметки в этом посте я делала по мере выполнения уроков, здесь прямо вся история изменений дизайна, разные абзацы написаны в разные дни, надеюсь, это не затруднит чтение. Пост будет интересен тем, кто только планирует браться за свой блог. Остальным рекомендую только посмотреть картинки. :) Ну что? Поехали!

Урок 1. Домашнее задание

1. Мой блог на 29.06.2014:

Я давно уже гляжу на него с печалью. А как скрин сделала, так вообще хоть слезу пускай: куцый, страшненький, блеклый. Дизайн не меняла с момента его создания. Стыд мне и срам, ведь голова вроде на плечах, HTML знаю, хоть и не в совершенстве, продукт Adobe PhotoShop знаком уже едва ли не 10 лет, причем на достаточно хорошем уровне. А блог вот такой... Над его названием особо не задумывалась в момент создания, а очень хотелось бы, чтобы в названии был смысл, идея. И эту идею поддерживало оформление, не стандартное, а очень даже "изюмное". Готова поработать!

2. Блог был создан. И имел название, которое вдруг выдумалось. Такое название будет носить мой "родной" блог, когда придет время. Блог живет тут! Из настроек изменила шаблон (расположение элементов), все шрифты поменяла на Courier, пожалуй, это самый красивый моему глазу из предложенных, немного поигралась с цветом.

3. Я уже давно размышляла над тем, каким хочу видеть свой блог. Вот, палитру для оформления подобрала, название придумалось. Безусловно, хочу, чтобы оформление было в стиле клин, ну, или с графическими заморочками. Поживем - увидим. Так как уроки я стала выполнять только тогда, когда все желающие уже их завершили, у меня имелась возможность поразглядывать результаты прохождения курса записавшимися на эту авантюру. К своему удивлению я обнаружила, что значительное число участников не дошло до конца. Зато если я вижу блог с круглой фотографией автора, я понимаю, что для оформления блога были применены знания Алены. :) Итак, какие же блоги меня вдохновили... Фото кликабельны и ведут в блоги авторов:

Обновила картинки 21.08.2014. Все блоги в стиле клин-н-симпл. Ничего удивительного. :)

Урок 2. Домашнее задание

1. К своему удивлению обнаружила, что первое задание уже выполнила. :) Правда, палитру создавала не сама, она честно украдена с сайта {design seeds}. Это я себе так работу упростила. И если создать палитру по фото в PS для меня не составляет труда, то как найти вдохновляющие фотографии, я не знаю. А на этом сайте что фото, что палитры ну о-о-очень классные! Кому не хватает вдохновения - всем туда! Моя палитра-вдохновлялка:

2. Шрифтов и кистей у меня вагон и маленькая тележка. Хотя по сайтам с шрифтами я все же прогулялась и пополнила свою коллекцию 20 новыми (цель была поставлена и достигнута). Ради интереса заглянула в папку со шрифтами компьютера: 457 элементов. Пользуюсь от силы десятком любимых. Однако перед созданием очередного проекта все же просматриваю все шрифты с помощью программы FontExpert. Если среди вас есть такие же шрифтохомяки, программа очень удобная. Самый приятный бонус - можно написать свою фразу, и в окне просмотра тут же увидеть, как она будет смотреться в итоге, попереключаться между шрифтами и прийти к конечному результату.

3. Создание кисти для подписи фотографий оставляю "на потом". Хочу, чтобы подпись фотографий сочеталась с оформлением блога, а шрифты для его оформления еще окончательно не подобраны.

Подпись для фото создала 03.07.2013 и сразу стала активно применять. Скажу только, что моя подпись совсем не является кистью. Наверное, с кистью кому-то работать удобнее, а я по старой привычке, сделала файл с прозрачным фоном и белым текстом. Мне удобнее работать со слоями, иногда я играюсь с их прозрачностью (хотя с кистью тоже можно поиграться), но в общем и целом это моя странность, мой любимый "таракан". :) Итог работ:

Урок 3. Домашнее задание

1. А вот и "шапочка" готова. Сначала хотела поиграться с облачными кистями, но они все какие-то не такие... Тогда возникли ассоциации, что облака я раскрашиваю с высоты своего 8-го этажа, отсюда и высотки. Даже не знаю, какой это по счету вариант, но из сохраненных - вторая версия третьего файла. И на эти 3 элемента на картинке я потратила весь день - 30.06.2014, а потом еще облака дорисовывала. :) Вот, что вышло:

Урок 4. Домашнее задание

1. Фон нашла тут. Люблю этот сайт с момента своего первого dial-up коннекта. :) Цвета подправила в PhotoShop, чтобы в палитру попали. Вообще нашла 7 фонов. 6 остальных отсеялись за ненадобностью.

2. Вкладки сделала 24.08.2014 (так давно об этом мечтала)! Пошла по простейшему пути, создала страницы с гаджетом "Страницы". Может быть, когда-нибудь кнопки нарисую, но мне кажется, в мой постепенно прорисовывающийся "клин" кнопки не нужны, разве что потом со шрифтом поиграться. Мои страницы еще предстоит заполнить, сейчас на них собрана не вся информация, которой я хотела бы поделиться. С удивлением обнаружила, что в блоге есть не все МК, которые я создавала, надо срочно исправлять несправедливости!

3. Половина курса пройдена. Ай да я, ай да молодец! :) Шучу, конечно... Молодец у нас Алёнка, которая вдохновляет на такие подвиги. Безусловно, изменения в моем блоге еще не заметны, зато рядом растет новый блог, как раз такой, каким я себе представляла качественный красиво оформленный блог. Ожидания от уроков оправдываются и даже переоправдываются, потому что все казалось сложнее, чем выходит на самом деле. Уроки отлично написаны, понятным языком, четко и по пунктам. Спасибо тебе, Алена! До конца дойду однозначно. Еще раз спасибо!

Урок 5. Домашнее задание

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

2. На панели остались только самые нужные виджеты. Виджет с тегами облагородила, лишние теги удалила. Нужно все же придумать какую-то систему, а то надерганные слова безо всякой организации. Дольше всего времени отняли значки социальных сетей. Я взяла один из этих набор, заменила цвет на нужный мне бледно-фиолетовый, сама нарисовала значок ВКонтакте и разобралась с HTML-кодом значка Skype. Теперь все работает так, как было задумано! :)

Урок 6. Домашнее задание
Домашнего задания в этом уроке не было, но было несколько полезных советов, которыми я воспользовалась. Совет о шаблоне сообщений беру на заметку, не пользуюсь им исключительно потому, что повторяющихся элементов в моих сообщениях нет. Кнопкой "Читать далее" пользоваться умела, но забыла. Внешний вид блога от нее только выигрывает. Пользуюсь с начала июля 2014 года. Рамка вокруг изображений меня полностью устраивает, но если вдруг когда-нибудь начнет мешать, в этом уроке прочитаю, как от нее избавиться. Хотела поставить гаджет "Похожие сообщения", и даже поставила. Но он так загромождает блог, что решила от него отказаться.
Отдельное внимание уделила разделителю между сообщениями. Нарисовала сердечки. 25.08.2014 они поселились в моем блоге.

Кнопка "Вверх" тоже заслуживает отдельного внимания. И почему я раньше не придумала, что это очень удобная штучка? Хотела пойти по простому пути и добавить стандартный гаджет, но не нашла! Ни одного! Нарисовала стрелочку, такую себе дудло-стрелочку в тему оформления блога, воспользовалась скриптом, который предложила Алена! Все круто: плавный ход, появляется красиво... Стрелка проходит обкат. Найдете стрелку? Удобно пользоваться?

Урок 7. Домашнее задание
И снова нет домашнего задания. Что полезного я вынесла из этого урока? Скрыла панель NavBar. Сказать откровенно, я частенько пользовалась ею, чтобы написать новое сообщение в блог, поэтому сначала сделала ее всплывающей. Внешний вид этого безобразия меня не впечатлил, поэтому убила ее совсем. Буду пользоваться "правильными" местами для общения с blogger.
Убрала надпись "Технологии Blogger" внизу блога. Убрала надпись "Подписаться на: Сообщения (Atom)". Ну, и все отцентрировала (уже давно, но центровка почему-то слетела), надо наблюдать за этим изменением в шаблоне... Скрин того, что у меня получилось:

А дальше - картинка-сравнение. Напомню, что первый скрин сделан 29.06.2014, второй - 25.08.2014. Не много, не мало, мне потребовалось 2 месяца на неспешное преображение блога, были периоды, когда я даже не вспоминала о дизайне, были периоды, когда я сидела возле компа каждую свободную минутку. Последние 3 дня были именно такими. :)

Вот и все! Проект подошел к концу. Всем, кто только планирует взяться за свой блог рекомендую уроки Алены еще раз! Никаких проблем в процессе их выполнения не возникало!
От себя хочу добавить, что мне очень не хватало красной строки в моих сообщениях, и я немного порылась в интернете, чтобы претворить свою давнюю идею в жизнь. Делается все опять-таки несложно. В шаблоне блога находим фрагмент приблизительно такого кода: .post-body {. Внутри фигурных скобочек добавляем стилевой атрибут text-indent (строку, типа text-indent: 30px;) и будет вам счастье. Мое счастье было недолгим, отступы я хотела делать большие и красивые, но вместе с ними поехали вправо и картинки. Поэтому отступы я уменьшила до 10 px, чтобы смотрелось это более или менее терпимо. На этом эксперименты с блогом заканчиваю. Вместо сидения за столом я 3 дня сидела за ноутом и открывала для себя премудрости blogger. Удачных Вам экспериментов!