13 сентября 2017 г.

Обучающий проект "Нарисуй свой блог". Часть вторая.

Привет, мои драгоценные девочки!


Вот и пролетела неделька и мне хочется от всего сердца поблагодарить всех девочек, кто проявил интерес, написал доброе слово и главное (!!!) смог выкроить драгоценные минутки и присоединиться к обучающему проекту. Знайте, я люблю вас безгранично, безмерно :). Вы все такие умнички, такие талантливые! Восхищаюсь вашими умениями и быстрой обучаемостью. Кто ещё не с нами, присоединяйтесь скорей ;). Линки первой части будут доступны до 17 сентября, до этого же времени могу детально разобрать ваши шапочки, поговорить о нюансах, сильных и слабых сторонах. 

Сегодня же начинаем нашу вторую часть, второй урок. Поехали? )

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

Мы с Наташей выбрали подходящую фотографию, посмотрите, какая красавица!


Мне кажется, эта фотография соответствует ярким лисичкам :). Итак, открываем наш Photoshop. Кстати, информация для тех, у кого ещё нет этой чудной программы:
я скачала и заархивировала его, можно найти программу здесь (это безопасный файлообменник): http://hdd.tomsk.ru/desk/rsvdsnxh. Доступно будет ещё около 20 дней.

Первое, что я делаю, перетаскиваю фотографию в окно Photoshop (можно также открыть её следующим образом: Файл -> Открыть...):


Размер моей фотографии 707х819 пикселей. Больше нам не понадобится. Вы можете отрегулировать размер самостоятельно. Для этого заходим вверху в меню "Изображение"  и выбираем строчку "Размер изображения". Обратите внимание, что единицей измерения должны быть выбраны "пикселы". Можно также подрезать фотографию при необходимости.


Следом создаю новый файл размером 1000х1200 пикселей, больше нам не нужно. Обратите внимание, что содержимое фона должно быть прозрачным. 


В панели инструментов нахожу второй пункт - прямоугольную пунктирную рамку, кликаю правой кнопкой мыши на неё, выбираю инструмент "Овальная область" (если мы хотим сделать баннер круглым) или "Прямоугольная область" (если хотим сделать баннер прямоугольный/квадратный соответственно).


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


Когда очертания нас устраивают (если не устраивают, просто рисуем заново, прежний контур исчезнет автоматически), мы нажимаем сочетание клавиш Ctrl+C, переходим в новый документ, который создали недавно, и нажимаем Ctrl+V. Изображение переносится в эту область. 


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


В панели нахожу инструмент "Заливка":


Выбираю белый цвет:


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


Должно получиться следующее:


Перетаскиваю в рабочую область из папки с иллюстрациями выбранного бельчонка. Как видим, сейчас его можно трансформировать (масштабировать, поворачивать), потому советую сделать большинство манипуляций прямо сейчас :). Помним, для того чтобы мой бельчонок сохранял свои пропорции в процессе масштабирования, я зажимаю клавишу 'Shift" или нажимаю на цепочку вверху экрана ("Сохранять пропорции"); в противном случае мой рисунок деформируется и растянется в какую-то из сторон.


Уменьшаю бельчонка, сажу в правый нижний "уголок":



Мне кажется, что угол оказывается перегружен: у Наташи наклонена голова в правую сторону на снимке, потому решаю отразить бельчонка по горизонтали. Для этого захожу в Редактирование -> Трансформирование -> Отразить по горизонтали:


Вот что у меня получилось. Конечно же, так он не останется, а потому...


Передвигаю его в левую часть. Не забываем переименовать слой :).


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


Отлично, положение пока мне нравится.


Добавляю ещё одну веточку и масштабирую в очередной раз. Все помним? Напишу-ка ещё раз :).
ОБРАТИТЕ ВНИМАНИЕ: Если вдруг нам захочется изменить размер изображения в процессе, для этого нужно:
  1. Выбрать слой, на котором оно находится (панель со слоями в правом нижнем углу);
  2. Зайти в "Редактирование" - "Трансформирование" - "Масштабирование". Повернуть изображение в данном случае мы не можем (можем, но только на n-количество градусов, так что этот вариант не считается), поэтому, если мы хотим повернуть изображение...
  3. Зайти в "Редактирование" - "Трансформирование" - "Поворот"
  4. Там же мы можем отразить изображение по горизонтали и вертикали (например, мне захочется, чтобы бельчонок смотрел вправо, а не влево).

Создаю новый слой под кодовым названием "Акварель":


Перетягиваю его в панели слоёв НИЖЕ, чем фотография:


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


Выбираю в палитре цвет (кликаю на палитру в нижнем левом углу, выбираю цвет пипеткой (появляется автоматически) - навожу на ушко белочки и кликаю), рисую. Создаю слой "Акварель 2" - все цветовые пятна должны располагаться на разных слоях, чтобы, в случае чего, мы могли оперативно исправить/удалить их.


Добавляю кисти до тех пор, пока окончательно не удовлетворит картинка. Я добавила ещё жёлтых брызг. Теперь мне кажется, что нужно убрать излишнюю яркость розового цвета - она отвлекает от главного героя. Помните, ваша задача сделать баннер ярким, но помнить о том, что гости должны видеть в первую очередь вас, а не чрезмерный декор на половину блога! Все помним, что работаем с тем слоем, который выбран в панели? Я выбираю "Акварель 2" и приступаю к задуманному. Для этого уменьшаю непрозрачность до 80% (тяну бегунок влево):


И заливку:


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


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


Вновь меняю значения непрозрачности и нажима, делаю их не более 30-35:


И, раз за разом прохожусь по границам штампа, размывая их.


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


И вновь вооружаюсь ластиком и удаляю лишнее. Не тороплюсь, делаю всё очень аккуратно:


Промежуточный этап:


Вот так-то лучше. Смотрите, что получилось в итоге. А главное - всё чудесно сочетается с шапочкой.


Теперь дело за малым: добавим текст для нашего баннера. Выбираем соответствующий значок на панели инструментов:


Пишем главное приветственное слово :). Помним, что цвет шрифта мы можем выбрать.


После того, как написала приветствие, ставлю галочку и завершаю работу со слоем. Теперь создадим новую область для текста и напишем несколько слов. Не пишите здесь много информации, основное должно располагаться во вкладке "О себе"! Не перегружайте блог, не делайте его тяжёлым для восприятия.


Только если текст нас устраивает и вам всё нравится (вы уверены, что не будете менять его), выбираем два слоя с текстом в панели слоёв (используем для этого клавишу Shift или Ctrl) , нажимаем на кнопочку, обведённую жёлтым кружком, и выбираем "Объединить слои". 



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


Меняю:
  

Цвет тени мне кажется жёстким, поэтому выбираю другой оттенок в палитре (кликаем на прямоугольник в строчке "Режим наложения" - "Умножение", а дальше наш прямоугольник):


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


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


А теперь - самое интересное. Это то, почему пост опубликовался позже запланированного. Долго билась с картинкой - такое ощущение, будто в блоггере что-то изменилось, чёткость совершенно пропала. В итоге уже рано утром удалось разобраться, поэтому делюсь с вами актуальной и апробированной информацией прямо сейчас. Для этого сохраняем получившийся баннер в ДВУХ форматах: .PSD и .PNG. Сохранили первый? Отлично, теперь поколдуем над вторым: заходим в "Изображение", выбираем "Размер изображения". Устанавливаем значение ширины - 300 пикселей (обратите внимание, пикселей). А теперь сохраняем (.PNG). Именно это позволило сохранить мой баннер чётким. Возможно, для вас это будут другие значения, пробуйте!

Для начала захожу в блог, выбираю вкладку "Дизайн":


Здесь же, в правом столбце, где планирую расположить баннер, нажимаю на синюю ссылку "Добавить гаджет". Появляется такое окно:


Выбираю из списка гаджет "Изображение", кликаю на плюс:


В окне выбираю наш баннер и УБИРАЮ галочку с пункта "Сжать до размеров экрана". Именно из-за этого пункта изображение получалось невероятно маленьким и нечётким. Используем то и тот размер, что мы сохранили выше:


Вот так должно выглядеть в итоге:


А вот и новые изменения в блоге :).



Следующий важный момент! Эту информацию легко добыть на просторах интернета, особенно, если учесть, сколько обучающих материалов накопилось с 2008-го года, но, исключая вопросы, напишу: если у ваших изображений - конкретно в нашей ситуации - баннера есть обводка, рамка, их нужно удалить (если, конечно, это вам наравится, то можно всё оставить); для этого нам нужно сделать следующие операции:

а) заходим во вкладку "Тема":


б) выбираем "Дополнительно":


в) прокручиваем до заветной строчки "Добавить CSS" и нажимаем на неё:


г) в окно вводим код, который приведу ниже:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Нажимаем "Применить к блогу" и возвращаемся назад к Blogger.

Ну что ж, на сегодня это вся информация, которой хотела поделиться с вами. После обеда добавлю линки, буду ждать вас в течение 9 дней. Думаю, этого вполне достаточно. 
БОЛЬШАЯ ПРОСЬБА: об этом совершенно забыла сказать в начале проекта, но скажу сейчас: сделайте, пожалуйста, скриншот вашего блога. Создайте пост в своём блоге, который будете изменять и дополнять в течение всего проекта. Часто вы меняете что-то и просите посмотреть, но мне это очень неудобно - я, к сожалению, не могу помнить предыдущий вариант, а если их было несколько, то становится совершенно неясно, какой из всех оценивать. Туда же записывайте всё полезное, делайте скриншоты с разными вариантами, вашими проблемами (лучше успехами) и прочим. И пусть о проекте узнает больше людей! У меня нет коммерческого интереса, но есть один и очень важный - человеческий. Мне искренне хочется, чтобы уютных блогов стало больше. И пока я занята всего в четырёх ДК и веду лишь один проект, у меня ЕСТЬ время на каждого страждущего. Почему бы не попытаться сделать всех чуточку счастливей? :) Также вам самим будет интересно посмотреть на свой прогресс, на то, как преобразится блог после всех частей обучающего проекта, более того, вы сможете проходить по блогам в линках и говорить друг другу добрые слова поддержки.

P.S. Иногда я не могу ответить в течение получаса-6 часов. Пожалуйста, отнеситесь к этому с пониманием. С момента операции прошло 3 недели, я совершенно не восстановилась, но мне хочется довести начатое до конца. Я отвечу всем и всегда, думаю, вы видели, что искренне стараюсь давать максимально развёрнутые комментарии, чтобы каждый смог найти ответ на свой вопрос :).

А теперь я, пожалуй, прилягу на полчасика - ночь была почти бессонной. Люблю и обнимаю вас!

Алёна (Литтл Иви)

36 комментариев:

  1. Ой, Алёнушка, как же я пропустила! Сколько у тебя тут интересного, так здорово! Спасибо большое за подробное описание, пока не начала делать - все понятно :) Так красиво получается! Пойду искать первый урок, я тоже хочу преобразить свой блог. Только вот сначала надо покопаться в себе и разобраться, каким же я его вижу :)

    ОтветитьУдалить
    Ответы
    1. Анюточка, я тебя очень-очень жду, моё солнышко!

      Удалить
  2. Я всю ночь билась над шапкой, как оказывается, это тяжело в первый раз открывать эту программу!!!! Без вас, Алёна, я б в ней не вход не выход не нашла.... Все эти слои... тихий ужас.... но как мой папа говорит - пищит, но едет- скоро покажу свою авторскую шапочку.... и фигня, что она корявая зато своя и не такая, как у всех) Спасибо, и за новую порцию бесплатной инфы, это же как нас надо любить, чтобы так подробно, да и сколько времени ушло... от всего сердца- БлагО-дарю)))

    ОтветитьУдалить
    Ответы
    1. Я тоже с Алёной впервые Фотошоп открыла)) Двое суток с крошечным перерывом на сон билась, но шапочку сделала)) Так что всё возможно и получится, задора и успеха вам!)))

      Удалить
    2. Линочка, я плачу от радости!! Что же это за очаровательная крошка поселилась у Вас на тыковке! Это какая прелесть кудрявая :). Чудо, просто чудо какая!! Какая ж Вы умница, какая умница!
      Может быть, шрифт чуть увеличим? Пусть все знают героев в лицо :).

      Удалить
    3. Оооо, это уже очень тяжело... Но я попытаюсь)))
      P.S. плакать не надо, берегите свою нервную систему))) Рада, что вам понравилась Кудряшка)

      Удалить
  3. ( а я пропустила пост про шапку... пойду искать, читать... спс за подробности, столько их туууууттттт...

    ОтветитьУдалить
    Ответы
    1. Виталия, присоединяйтесь скорей! Смотрю, что с фоном разобрались, теперь и за шапочку пора приниматься ;). Всё должно быть красиво, здорово, а главное - уютно для нас самих!

      Удалить
  4. Алёнка, какая ты активная, Боже! Сил, здоровья и успехов!
    В проекте поучаствую- отдельная благодарность тебе за него!

    ОтветитьУдалить
    Ответы
    1. Леночек, я тебя так обнимаю, моя ты хорошая! Спасибо за похвалу, очень-очень приятно! И спасибо за добрые слова, буду очень рада твоим изменениям в блоге :).

      Удалить
  5. Алёнкааааа!!! Я влюбилась в эти бельчат!!! Неужели мой бложик становится таким уютным и таким родным!!! Не устану говорить тебе спасибо за то, что ты делаешь!!! Для меня это бесценно:*** Очень тебя люблю, мой дорогой ты человечек!!!

    ОтветитьУдалить
  6. Алёнушка, пожалуйста, загляни в почту, я очень жду твоего ответа по поводу АТС

    ОтветитьУдалить
    Ответы
    1. Еленушка, здравствуйте! Завтра понесу Вашу на почту ;).
      А из Ваших выбираю первую. Простите, пожалуйста, нужно ответить обстоятельно.

      Удалить
  7. Аленушка, спасибо огромное за такие подробные уроки. Я целую неделю боролась с компом, устанавливала фотошоп и вот наконец начинаю делать :) Очень и очень вдохновляющие уроки!

    ОтветитьУдалить

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

    ОтветитьУдалить
  9. Алена, спасибо за этот обучающий проект! Пока времени нет участвовать, но, когда немного освобожусь и решусь обновить свой бложик, обязательно воспользуюсь твоими наработками!

    ОтветитьУдалить
  10. Алена, добрый вечер! Не устаю благодарить вас за такие понятные уроки! Оставляю ссылочку на свой пост с изменениями. Если у вас будет минутка, загляните, пожалуйста! http://galuk2708.blogspot.ru/2017/09/blog-post.html

    ОтветитьУдалить
    Ответы
    1. Аллочка, всё прокомментировала, в линки внесла :). Вы - наша умничка! Очень красиво, очень.

      Удалить
    2. Аленушка, спасибо огромное за тёплые слова!!! Замечательные уроки! Все очень понятно- и результат красивый такой получается))) и ко мне на "ты" можно и нужно))) ещё раз спасибище))) и самые наилучшие пожелания скорейшего выздоровления!!!

      Удалить
  11. Аленушка, спасибо за новый урок, потихоньку осваиваю), вернее, урывками)) То что сделала, пока не нравится, сказываются отсутствие навыков и времени) Но останавливаться не собираюсь) И спасибо за зовет создать пост!!!!! Я поняла, как его мне не хватало!!! Сделаю обязательно и буду там уже резвиться)) в линки потом добавлю его:)) И ещё раз огромное СПАСИБО!!! за терпение и желание помочь, за теплые слова и душевное отношение... береги себя...здоровья тебе и счастья, моя хорошая и светлая фея:)

    ОтветитьУдалить
  12. P.S. У меня почему-то вокруг овала виден контур прямоугольной рамочки на белом фоне(( Думала будет просто овал, не получилось...

    ОтветитьУдалить
    Ответы
    1. Ох, девочки ))).
      Читаем внимательно:

      Следующий важный момент! Эту информацию легко добыть на просторах интернета, особенно, если учесть, сколько обучающих материалов накопилось с 2008-го года, но, исключая вопросы, напишу: если у ваших изображений - конкретно в нашей ситуации - баннера есть обводка, рамка, их нужно удалить (если, конечно, это вам наравится, то можно всё оставить); для этого нам нужно сделать следующие операции:

      а) заходим во вкладку "Тема":



      б) выбираем "Дополнительно":



      в) прокручиваем до заветной строчки "Добавить CSS" и нажимаем на неё:



      г) в окно вводим код, который приведу ниже:



      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: none !important;
      border: none !important;
      background: none !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Нажимаем "Применить к блогу" и возвращаемся назад к Blogger.

      Удалить
    2. Леночка, милая, нужно увеличить баннер твой прекрасный :*, а то он у нас такой малюююсенький :).

      Удалить
    3. ...про это тоже всё очень подробно написано, посмотри.

      Удалить
  13. Аленушка, это я сделала)) я хотела сказать контур в шапочке,т.е. не размытое окончание, а резкий обрыв рисунка... похоже надо пробовать делать все заново)) и пост уже опубликовала))

    ОтветитьУдалить
  14. Аленушка, прошли очередные выходные, и моя неугомонная душа пыталась исправлять и улучшать)) уж не знаю , как со стороны, но я пробовала и пробовала снова и снова!! То одно не нравится, то другое)) Не могу сказать, что довольна результатом...надо подумать и выслушать твое авторитетное учительское мнение...признаюсь очень боюсь плохой оценки...но!!! Очень хочу расти и улучшать свой блог, поэтому жду замечаний и предложений))
    P.S. Со мной только на "ты" , а то я уже совсем стала чувствовать себя старушкой((. Очень ценю твое внимание. Ещё раз спасибо:))

    ОтветитьУдалить
  15. Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Евочка, всё прочитала в оповещениях на почте: нужно выбрать в инструментах пятый по счёту, называется он "Рамка", им же сначала выделяете всю область, а после уже тянете в нужную сторону и обрезаете.

      Удалить
    2. Алён, я так боялась опаздать сдать вовремя урок, что сначала спросила, засуетилась, что не дождусь, поскакала мучить mr.Google... Вобщем, та еще ученица:-) Спасибо за подсказку, я успела!)))

      Удалить
  17. Алёночка! Сегодня и я осмелилась записаться в проект. Решила, что не хорошо это, молча делать свой блог красивее, что все должны знать, кто всему виной))) Спасибо!

    ОтветитьУдалить
    Ответы
    1. Иришка, Иринушка, спасибо огромное! Каждый шажок, каждый участник для меня становится таким родным и таким близким. Очень рада быть причиной перемен. Спасибо Вам!

      Удалить
  18. Аленушка, привет! Сделала банер с опозданием, т.к. была в отъезде. Вижу, что надпись слишком мелкая получилась. Но изменить шрифт уже не получается, хоть и сохранила в PSD. При открытии фотошоп предлагает "растрировать" изображение, что бы это ни значило )) И других вариантов нет. Опять я что-то не так сделала?

    ОтветитьУдалить