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

Всем привет!

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

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

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

Давайте начнем с палитры, ведь цвет оказывает очень большое влияние на впечатление, которое посетитель получит от посещения вашей странички.

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

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

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

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

2. Выберите не более 3-4 цветов, сочетающихся между собой (не считая оттенков).

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

3. Цвета фона и текста сообщений должны быть контрастными. По статистике, светлый фон лучше темного.

4. Не забывайте про цветовые ассоциации. Конечно, это все спорная информация, но, может быть, вам будет интересно почитать:

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

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

Синий: Мир, спокойствие, устойчивость, гармония, объединение, доверие, истина, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, технология, депрессия, подавитель аппетита.

Оранжевый: Энергия, баланс, тепло, энтузиазм, оживление, экспансивность, пышность.

Зеленый: Природа, среда, здоровье, восстановление, молодость, бодрость, весна, щедрость, плодородие, ревность, неопытность, зависть, неудача.

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

Серый: Безопасность, надежность, интеллект, степенность, скромность, достоинство, завершенность, твердость, консервативность, практичность, старость, печаль.

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

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

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

---

Создание палитры блога в Фотошопе

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

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

Если вы уже определились с цветовой схемой будущего дизайна, давайте создадим ее в графической программе. Зачем? Для наглядности, а еще для удобства - когда мы будем создавать дизайн, нам не нужно будет каждый раз искать нужный цвет, мы сможем просто тыкать в палитру инструментом Eyedropper (Пипетка).

Я буду создавать дизайн блога для своего агентства по оформлению праздников, мы назвали его Lavender Blue. Поэтому дизайн блога будет в сиренево-зеленой гамме.

У меня получилась вот такая палитра:

Для нее я нашла в интернете подходящие картинки для вдохновения и сохранила их.

Откроем одну в Фотошопе:

Нам нужно место для палитры, для этого увеличим канву: Image -> Canvas Size...

Увеличим немного канву по горизонтали или вертикали (в моем случае на 200 пикселей).

Канва увеличилась.

Теперь обратим внимание на поле со слоями нашего документа (Layers). Если это окошко у вас не включено, его надо включить (Window -> Layers). Здесь отображаются все существующие слои активного документа, пока он у нас один. На нем висит замочек - это значит, что он закреплен и его нельзя двигать и изменять. Чтобы снять замок, дважды кликнем на слой.

В открывшемся окошке выбираем ОК.

Мы можем двигать наш слой (нажав на стрелочку Move Tool на боковой панели).

Свободное место надо закрасить инструментом Paint Bucket Tool.

Теперь можно рисовать палитру.

Выберем одну из фигур. Мне захотелось круг (Ellipse). :)

Чтобы выбрать цвет круга, в верхнем меню нажмем Fill.

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

Создаем нашу фигуру.

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

Она сразу появляется на отдельном слое в окошке со слоями.

Чтобы дублировать слой, нужно выделить его и нажать Ctrl+J. Сделаем столько дубликатов, сколько у нас будет цветов в палитре.

И выберем для них разные цвета.

Двойной клик на наших фигурках в окне слоев открывает меню цвета.

Теперь обрежем лишнее.

На боковой панели выберем инструмент Rectangular Marguee и выделим нужную область.

Обрежем: Image -> Crop.

Сохраним наше изображение на компьютере: File -> Save as...

Выбираем формат JPEG:

Нажимаем Save, и наша палитра готова!

upd. (18.02) Я также записала процесс создания палитры на видео, надеюсь, оно поможет вам.

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

Не бойтесь экспериментировать, пробовать разные функции, нажимать разные кнопочки! Многие люди, в том числе я, узнали обо всем именно методом тыка. :) А если что, всегда можно вернуться на один или несколько шагов назад (Edit -> Step Backward).

---

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

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

Я нашла несколько порталов с бесплатными шрифтами, тут их просто тысячи! Надеюсь, вы сможете найти такой, который подойдет именно вам. :)

Фонтов.нет

FontRiver

1001 Free Fonts

1001 Fonts

Попробуйте скачать и установить красивые шрифты! Это очень просто!

Вам в помощь я нашла вот такие наглядные руководства:

Установка шрифтов для Mac OS

Установка шрифтов для Windows

Видите, как все просто? Теперь можно и кисти установить :)

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

Просто введите в поисковике Кисти для фотошопа и наслаждайтесь. :)

Устанавливать кисти так же просто, как и шрифты. Вот тут есть неплохое описание процесса:

Как установить кисти для Фотошопа.

После установки выберите нужную кисть и экспериментируйте! Можно менять ее размер, цвет и прозрачность.

---

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

Далее использован Фотошоп CS4.

Создадим новый документ, например, размером 500 х 500 пикселей.

File->New...

Выберем инструмент Type Tool, красивый шрифт и напишем нужное слово или имя. :)

На новом слое можно написать другую информацию, например, адрес вашего блога.

Теперь передвинем наш надписи друг к другу с помощью инструмента Move Tool.

Если мы довольны видом нашей будущей кисти, идем в Edit, а там выбираем Define Brush Preset...

В открывшемся окошке вписываем название нашей кисти.

Теперь можем создать новый документ и опробовать нашу кисть. Выберем инструмент Brush Tool.

В коллекции кистей она сейчас отображается последней.

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

Экспериментируйте при создании вашей кисти! Пусть она будет такой же уникальной, как и ваши работы! :)

Домашнее задание:

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

2. Найдите в Интернете, скачайте и установите несколько понравившихся шрифтов и кистей.

3. Создайте свою собственную кисть для подписи фотографий.

В своем посте дайте, пожалуйста, активную ссылку на второй урок. :)

Линки для добавления постов будут открыты до 19 февраля 12:00 (по Москве).

Следующий урок выйдет 20 февраля.

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

Желаю всем успехов! :)