Лучшие уроки по Adobe Photoshop. 20 подробных уроков по Photoshop

Citation preview

1

К СОДЕРЖАНИЮ

КНИГА ПРЕДОСТАВЛЕННА САЙТАМИ BLOGOHELP.RU И PHOTOSHOP-HELP.RU, ДАННУЮ КНИГУ ВЫ МОЖЕТЕ РЕКОМЕНДОВАТЬ ДРУЗЬЯМ И ЗНАКОМЫМ БЕСПЛАТНО

Урок №1. Как сделать шапку для сайта или блога

Урок №5. Добавляем огненный эффект на фотографию

Урок №9. Как сделать коллаж в фотошопе

Урок №13. Техника выделения и вырезания волос в Фотошопе

Урок №17. Как сделать быструю рамочку для фотографии в Фотошопе

Урок №2.Как сделать дизайн сайта? Просто!

Урок №6. Удаление человека из фотографии в Фотошопе

Урок №10. Создание рамки для фото в виде кадров киноплёнки в Фотошопе

Урок №14. Как сделать красивый тонированный коллаж в Фотошопе

Урок №18. Как размыть края в фотошопе

Урок №3. Как сделать аватар в фотошопе

Урок №7. Как сделать собственный новогодний календарь со своей фотографией в Фотошопе.

Урок №4. Как размыть задний фон в фотошопе

Урок №8. Как изучить работу со слоями в Фотошопе.

2

Урок №11. Создаем в фотошопе профессиональный psd-макет для веб-сайта

Урок №15. Пример использования обтравочной маски в Фотошопе

Урок №19 Как в Фотошопе сделать матовую кожу

Урок №12. Как сделать красивую надпись на фото в фотошопе.

Урок №16. Добавление авторских копирайтов на ваши работы с помощью Фотошопа

Урок №20. Как сделать фигурную обработку краев фотографии в Фотошопе

К СОДЕРЖАНИЮ ЗАПРЕЩЕНЫ ЛЮБЫЕ ИЗМЕНЕНИЯ В КНИГЕ, А ТАКЖЕ ЕЕ ПРОДАЖА!

Урок №1. Как сделать шапку для сайта или блога

Дорогие друзья сегодня мы с вами рассмотрим такой актуальный вопрос – как сделать шапку для сайта или блога? После изучения данного урока вы научитесь делать шапки для сайтов в фотошопе. Делать мы будем вот такую шапку:

У меня стоит Photoshop CS4 (английская версия). Будем считать, что к нам поступил заказ на изготовление шапки для сайта или блога. Заказчик прислал образец будущей шапки и пояснил: Слева на шапке хочу тематическую иконку + название сайта и слоган, справа будет 3 тематических картинки из мультфильмов и фильмов. Снизу на шапке будет горизонтальное меню (по центру).

К СОДЕРЖАНИЮ

3

И так, садитесь по удобнее, я начинаю свой рассказ: 1. Создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп). В окошке я указал следующие параметры:

В итоге получился новый документ:

После этого сделаем небольшую настройку фотошопа: Ставлю галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

К СОДЕРЖАНИЮ

4

Включаем шкалу-линейку для документа: Идем Views→Rules (Вид→Линейки или просто жмем CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

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

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

К СОДЕРЖАНИЮ

5

Направляющие можно Показывать/Прятать с помощью View→Show→Guides(Вид→Показывать→Направляющие) или CTRL+; 2. Приступим к созданию основных элементов шапки. Создадим фон для шапки. Идем Windows→Layers (Окно→Слои или F7). Дважды щелкаем по слою Background, тем самым преобразуем его в простой слой (название слоя я указал –fon-shapki)

6 Далее еще раз дважды щелкаем по слою fon-shapki и открывается окошко со стилями слоя, там выбираем нужный стиль для слоя, я выбрал градиентную заливку - Gradient Overlay (Заливка градиентом) и поставил следующие настройки. Щелкаем два раза по полоске с градентом:

К СОДЕРЖАНИЮ

В следующем окошке щелкаем мышкой по левому маркеру:

7 В открывшемся окошке, внизу указываем цвет 196ca6 и жмем OK.

К СОДЕРЖАНИЮ

Далее щелкаем по правому маркеру и в открывшемся окошке указываем цвет 0048a0 и жмем OK. Далее копируем наш слой с фоном. В палитре Layers (Слои, F7) выбираем наш слой мышкой, далее кликаем мышкой на слои и не отпуская кнопки мыши переносим слой на следующую иконку и отпускаем мышку. Создастся новый слой – копия предыдущего (можно просто нажать CRTL+J). Не снимая выделение со нового слоя, установим ему Opacity (Непрозрачность) в 18%.

Далее щелкаем два раза новому слою, снимаем галочку с Gradient Overlay(Заливка градиентом) и ставим галочку Pattern Overlay (Заливка текстурой), ставим следующие настройки:

Все фон для шапки у нас готов. 3. Далее сделаем фон для горизонтального меню снизу. Делаем новый слой – нажимаем по пиктограмме или просто жмем Shift+Ctrl+N (у нас получился новый прозрачный слой). После этого выбираем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение.

К СОДЕРЖАНИЮ

8

После этого заливаем наше выделение произвольным цветом. Берем инструмент Paint Bucket Tool (Ведро, G) и кликаем по выделению (я выбрал цвет 165394).

Переходим в стили нового слоя и ставим галочки напротив следующих пунктов: Drop Shadow (Отбрасывать тень), Gradient Overlay (Градиентная заливка),Stroke (Обводка), со следующими настройками:

9

К СОДЕРЖАНИЮ

После этого укажем Opacity (Непрозрачность) слою в 80%.

После того как у нас готов фон, можно приступать к созданию других элементов шапки. 4. Напишем название сайта, слоган и текст для горизонтального меню. Для этого выбираем инструмент Horizontal Type Tool (Горизонтальный текст) и щелкаем на шапке в том месте, в котором планируем написать надпись, и пишем ее. Маленькая подсказка. Cлои очень удобно двигать или перетаскивать из документа в документ с помощью инструмента

Move Tool.

Я выбрал для названия сайта надпись “Myvideo.com” и настройки текста выбрал следующие:

Для слогана выбрал надпись “только лучшее видео и фильмы” и следующие настройки текста:

Для пунктов меню я выбрал надписи “Главная”, “О сайте”, “Контакты”, “Поиск”, “Реклама на сайте”, “Блог” я выбрал следующие настройки текста:

И вот что у меня получилось.

К СОДЕРЖАНИЮ

10

Для слоя с названием сайта, применил следующие настройки для стилей слоя (Drop Shadow и Bevel and Emboss).

11

Что бы изменить цвет текста, выбираем инструмент , щелкаем прямо по тексту с названием сайта и выделяем текст для которого нужно изменить цвет (я выбрал цвет add7fe).

К СОДЕРЖАНИЮ

5. После этого нам нужно подобрать тематическую иконку. Иконку можно легко найти на интересном сайте Iconfinder.com , просто заходим на сайт, вводим слово характеризующее нужную нам тематику (я ввел слово - Video) и нажимаем Search(Поиск). Выбираем понравившуюся иконку и сохраняем (кликаем правой кнопкой мыши по картинке и выбираем пункт Сохранить изображение…) ее на компьютер. Я выбрал такую картинку:

Далее открываем картинку в фотошопе File→Open. Теперь нужно перенести слой с иконкой в наш документ с шапкой. Для этого выбираем инструмент Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).

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

К СОДЕРЖАНИЮ

12

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

Для этого идем Edit→Free Transform (Правка→Свободная Трансформация, Ctrl+T). Вокруг картинки образовалась рамочка с маркерами. Далее для равномерного уменьшения картинки, нажмем Shift и не отпуская его делаем рамку меньше (уменьшая мышкой рамку) тем самым трансформируем картинку как нам нужно.

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

Как видите большую часть шапки мы уже сделали, осталось добавить тематические картинки справа и у нас получиться интересная шапка для сайта или блога. 6. Покажу, на примере как я делал первую картинку. Как видите на конечном образце шапки (картинка в самом начале этой новости), все картинки вставлены в рамочки. Нам нужно создать рамку и поместить в нее картинку с нашим изображением. Для этого создадим новый слой Shift+Ctrl+N. Выбираем инструмент инструмент Rectangular Marque Tool (Прямоугольное выделение) и рисуем прямоугольное выделение. Удобно делать выделение с направляющимися (если нужен точный размер), но можно и без них (на глаз).

К СОДЕРЖАНИЮ

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool(Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow, Color Overlay:

14

Тематические картинки мультфильмов и фильмов я взял с сайта Kinomania.ru . После того как мы подобрали картинки, открываем их в фотошопе. Переносим каждую картинку в документ с нашей шапкой. (Внимание! Слой с картинкой после добавления в новый документ может оказаться ниже других слоев распложенных в этом документе. Порядок слоев в документе можно изменять мышью. Для этого в палитре Layer (Слои, F7) выберите нужный слой, нажмите мышью на него, теперь не отпуская мышь перетащите слой выше или ниже других слоев в документе.) Если вы хотите, чтобы слой оказался выше всех слоев – выделите слой и нажмитеShift+Ctrl+].)

К СОДЕРЖАНИЮ

Далее будем делать эффект выхода картинки из кадра. Для этого мы будем использовать маски в фотошопе. Выбираем слой с нашей картинкой, после этого выбираем инструмент инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение поверх сделанного фона.

После этого в палитре Layers (Слой, F7), нажимаем на кнопочку

.

Далее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской. После этого выбираем саму картинку.

К СОДЕРЖАНИЮ

15

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

Move Tool.

Двигая и трансформируя картинку добьемся нужного нам результата:

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

Далее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с К СОДЕРЖАНИЮ

16

помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).

После этого выбираем инструмент Brush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет - как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться.

Проще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает какВосстановитель (восстанавливает все то, что скрыто). Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки).

Добавим внутреннюю тень для картинки. Добавим стиль для слоя Inner Shadow(Внутренняя Тень).

К СОДЕРЖАНИЮ

17

Вот что получилось:

18 Осталось повторить все эти действия для второй и третьей картинки. В конечном итоге у меня получилась готовая шапка для сайта или блога.

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

К СОДЕРЖАНИЮ

Урок №2.Как сделать дизайн сайта? Просто!

Дорогие друзья, сегодня я хочу показать вам как можно сделать дизайн сайта в фотошопе. Урок получился очень большим и думаю будет полезным для вас. Изучив данный урок вы научитесь самостоятельно делать дизайн сайта в psd формате, также вы научитесь работать с формами, линейкой, направляющими, изменять размер документа и многое другое. Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).

К СОДЕРЖАНИЮ

19

20

Если по какой-то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd формате - кликайте сюда и качайте Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас. К СОДЕРЖАНИЮ

Для работы с дизайном нам понадобятся следующие файлы:        

фон с бабочками (для шапки сайта); шрифты; картинка c девушками; картинки для слайдера; иконки социальных сервисов; картинки для новостей; картинка рассылки; картинка счетчика.

Перед началом работы разделим наш дизайн на составляющие:

21

К СОДЕРЖАНИЮ

1. Фон и подложка для сайта; 2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню) 3. Слайдер, в просторечье карусель; 4. Поиск по сайту; 5. Основной контент (сами новости); 6. Сайдбар - боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование) 7. Пейжер - постраничная навигация по сайту; 8. Футер - нижняя часть сайта. Приступим к созданию нашего дизайна в фотошопе. Настройка фотошопа 1. Открываем фотошоп и создаем новый документ File→New (Файл→Новый илиCTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши - если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп). В окошке я указал следующие параметры:

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

К СОДЕРЖАНИЮ

22

- поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

- отобразим палитру History (История) идем Windows→ History - с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.

- включаем шкалу-линейку для документа, идем Views→Rules (Вид→Линейкиили CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

23

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

К СОДЕРЖАНИЮ

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

24

Если вы только начинаете пользоваться фотошопом, направляющие помогут вам при создании/рисовании обектов в фотошопе. Создание фона и подложки для сайта 3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O, фаил fon.jpg из архива). Полностью выделяем наш документ - нажимаем CTRL+A.Делаем из нашего рисунка фон в фотошопе, идем во вкладочку Edit→ Define Patter (Правка→ Определить узор), пишем название (я написал pattern).

К СОДЕРЖАНИЮ

4. Переходим на наш основной документ, идем Edit→Fill (Правка→ Заливка, SHIFT+F5), в окошке выбираем Pattern, далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).

25

К СОДЕРЖАНИЮ

26

5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой→ Новый→ Слой). Даем ему любое название и жмем OK. В палитре со слоями (Windows→ Layers, Окно→ Слои, F7) должен появится новый слой.

К СОДЕРЖАНИЮ

Сейчас нам помогут направляющие (щелкаем по линейке и тянем мышку вправо сделаем одну направляющую, а потом вторую - на глаз делаем что бы расстояние слева и справа было примерно одинаковым). Удобно делать выделение с направляющими (если нужен точный размер области), но можно обойтись и без них (на глаз). После этого берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.

27

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool(Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow(Отбрасывать тень) - цвет выбрал #5F1338:

К СОДЕРЖАНИЮ

На этом с фоном закончим и перейдем к созданию шапки для сайта. Делаем шапку для сайта 6. В начале создадим фон для шапки, из предложенного мною архива берем файлbatterfly.jpg, открываем его в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш основной документ. Для этого выбираем инструмент Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).

К СОДЕРЖАНИЮ

28

29 В появившемся окошке вводим название слою (я назвал fon-header), чуть ниже в поле Document (Документ) выбираем документ в который нужно вставить слой, у нас womandesign-blogohelp.psd и нажимаем OK.

Слой должен вставиться ровно посередине документа.

К СОДЕРЖАНИЮ

Теперь передвинем наш слой в самый верх, это можно сделать 2 способами: Первый способ: берем инструмент Move Tool, кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишу Shift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой. Второй способ: выбираем слой с бабочками и слой с фоном в палитре Layers (F7)

После этого в настройках элемента Move Tool , выбираем иконку Align top edges (Выравнить обекты по верхнему краю):

В итоге у нас получилось:

К СОДЕРЖАНИЮ

30

Я специально сделал фон с бабочками больше белого фона, сейчас расскажу, как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область - выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.

31 Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По аналогии делаем с правым кусочком слоя. После этого для слоя fon-header, не снимая выделение со слоя, установим ему Opacity (Непрозрачность) в 20%.

7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой Shift+Ctrl+N. Даем ему любое название (у меня shadow-top) и жмем OK. После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header.

К СОДЕРЖАНИЮ

После этого заливаем слой любым цветом - Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаем Ctrl+H. Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:

32

Далее кликаем по полоске с градиентом и ставим такие цвета:

К СОДЕРЖАНИЮ

Теперь нужно слой с затемнением (shadow-top) поместить ниже слоя (fon-header). Жмем F7, выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+} - опустить слой на порядок или Ctrl+{ - поднять слой на порядок).

Делаем логотип для сайта 8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент Horizontal Type Tool (Горизонтальный текст, T) и щелкаем на шапке в том месте, в котором планируем написать надпись - у меня этоWomanSite.ru, и пишем ее. Настройки для надписи я задал такие:

Если у вас на компьютере нет такого шрифта, то его можно взять из моего архива. C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.

К СОДЕРЖАНИЮ

33

Далее с помощью этого же инструмента Horizontal Type Tool(Горизонтальный текст), выделим текст "Woman" и поменяем его цвет на другой#c9584a.

Точно так же поступим и с текстом "Site.ru", только цвет поставим #797878.

34

Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).

К СОДЕРЖАНИЮ

35

На этом с текстом все, переходим к логотипу. К СОДЕРЖАНИЮ

9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.

Открываем в фотошопе файл logo.jpg, переносим картинку логотипа в основной документ и расплагаем рядом с текстом.

Слою с логотипом задаем Opacity (Непрозрачность) - 25% и отключаем видимость некоторых слоев - что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7)

К СОДЕРЖАНИЮ

36

Логотип будем рисовать (можно сказать отрисовывать) с помощью путей, они, так же называют векторными элементами или векторное включение в растровую картинку (кому интересно, подробнее про пути можно почитать тут ). Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (Окна→Пути). Далее с помощью лупы (инструмент Zoom tool, Увеличитель , Z) приблизим нашу область перед текстом. Я увеличил на 500%.

37

Берем инструмент Pen Tools (Перышко, P), поставим ему такие настройки:

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

К СОДЕРЖАНИЮ

Далее рисуем второй узелок, кликаем мышкой чуть ниже и левее предыдущего узла, не отпускаем мыши ведем ее вдоль нашего контура:

38

К СОДЕРЖАНИЮ

39

К СОДЕРЖАНИЮ

40

К СОДЕРЖАНИЮ

41

К СОДЕРЖАНИЮ

42

К СОДЕРЖАНИЮ

43

К СОДЕРЖАНИЮ

44

К СОДЕРЖАНИЮ

По аналогии делаем остальные 6 завитушек.

К СОДЕРЖАНИЮ

45

На этом создание логотипа закончено. С помощью стилей слоев закрасим каждую завитушку градиентом. Кликаем по нужному слою два раза и в настройках слояGradient Overlay (Градиентная заливка) заливаем его нужным нам градиентом. В итоге у меня получилось.

После этого обьеденим все слои с нашими путями, выделяем все слои в палитре Layers и обьеденяем, нажимаем Ctrl+E.

46

Для полученного слоя применим эффекты с текстового слоя. Выбираем слой с текстом, кликаем правой кнопкой мыши и в открывшемся списке выбираем Copy Layer Style. Выбираем слой с нашим логотипом и вставляет эффекты, правой кнопкой и в меню выбираем Past Layer Style.

К СОДЕРЖАНИЮ

10. Теперь сделаем горизонтально тектовое меню. Нам понадобиться инструмент Raunded Rectangle Tool ()

настройки поставим такие:

Далее просто рисуем наш фон с закругленными углами и радиусом скругления в 10 пикселей:

(нажмите на картику для просмотра оригинала) Теперь поверх напишем наш текст, все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #FFFFFF. Выставил такие настройки:

К СОДЕРЖАНИЮ

47

В итоге получилось.

Теперь вставим нашу тематическу картинку, открываем файл ladies.png, копируем слой с нашей картинкой в основной документ и в палитре Layers переносим слой с картинкой ниже нашего меню. В итоге у меня получилась, вот такая симпатичная шапка для нашего сайта.

Делаем слайдер для сайта 11. Теперь давайте сделаем дизайн слайдера для сайта. Создаем новый слойCtrl+Shift+N. С помощью напрвляющих определим место под слайдер. Далее берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.

Заливаем ее любым цветом, после этого применим к этому слою градиентную заливку:

К СОДЕРЖАНИЮ

48

49

К СОДЕРЖАНИЮ

Напишем поверх текст "Лучшее на сайте".

12. Далее рисуем фон для нашего слайдера так же инструментом Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область. Создаем новый слой Ctrl+Shift+N и заливаем любым цветом (у меня #FFD9DE).

50

13. Фон сделали, теперь сделаем подложку поверх фона, для этого уменьшим нашу выделенную область на 4 пикселя, идем Select - Modify - Contact (Выделить-ИзменитьУменьшить). Создаем новый слой Ctrl+Shift+N и заливаем ее белым цветом - #FFFFFF.

К СОДЕРЖАНИЮ

Далее не снимая выделения, при выбранном слое с нашей подложкой, с помощью еще одной направляющей поделим слой на 2 неравные части (слева будет большая часть, а справа чуть меньше). Снимаем наше выделение, нажимаем Ctrl+H. Слева у нас будет большая тематическая картинка с описанием, а справа будет 4 маленьких картинки с описанием.

51

Картинки можно трансформировать с помощью команды Edit-Free Transform (Правка Свободная Трансформация, Ctrl+T) Картинки я подготовил (файлы slider-base-picture.jpg, slider-picture1.jpg, sliderpicture2.jpg, slider-picture3.jpg, slider-picture4.jpg), открываем их в фотошопе и переносим в наш основной документ. Распологаем как нам нужно, у меня получилось.

К СОДЕРЖАНИЮ

14. Создаем подложку для основной картинки - создаем новый слой Ctrl+Shift+N, рисуеv пряямоугольное выделение и заливаем его цветом #e15c6c. Для этого слоя поставим Opacity (Непрозрачность), поставим в 90%.

52

Поверх нее пишем наш текст.

К СОДЕРЖАНИЮ

После этого рядом с 4 картинками тоже напишем нужный текст.

53

На этом со слайдером все, переходим к следующему пункту - Поиск по сайту. Делаем дизайн блока поиск по сайту 15. Создаем новый слой Ctrl+Shift+N. Чуть ниже слайдера рисуем прямоугольную область и заливаем #ccf8aa.

К СОДЕРЖАНИЮ

16. Поверх пишем наш текст "Поиск по сайту:", далее берем инструмент Raunded Rectangle Tool (), угол скругления ставим 5 пикслей и рисуем форму поиска. Поверх формы пишем текст "Введите слово или словосочетание...", после этого делаем кнопку для поиска. Так же инструментом текст "Найти".

Raunded Rectangle Tool () рисуем нашу кнопку и поверх наш

В итоге у меня получилось.

Делаем оформление блока с новостями 17. Теперь переходим к рисованию самих новостей на сайте. Фон блока будем делать с помощью путей. Берем инструмент Rectangle Tool и рисуем прямоугольную область. Эту область можно трансформировать с помощью команды Edit-Free Transform (Правка - Свободная Трансформация, Ctrl+T).

К СОДЕРЖАНИЮ

54

Теперь поверх напишем текст - загголовок для первой новости, все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #b14757. Выставил такие настройки:

18. Далее открываем ранее заготовленные мною картинки для новостей (файлыnewspicture1.jpg, news-picture2.jpg, news-picture3.jpg, news-picture4.jpg, news-picture5.jpg). Берем первую и распологаем снизу под заголовком.

19. После этого пишем текст справа от картинки. Все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал черный цвет #000000.Только теперь мы не просто кликаем инструментом, а кликаем и не отпуская мыши тянем вправо.

далее пишем наш текст и чуть ниже вставляем текст "Читать далее>>".

К СОДЕРЖАНИЮ

55

20. Чуть ниже сделаем разделительную полоску. Полоска будет выполнена в виде пунктирной линии размером в 1 пиксель. Создаем новый слой Shift+Ctrl+N. Берем инструмент Pencil Tool (Карандаш). Цвет для рисования я выбрал: #c8c8c8.Теперь давайте настроим наш карандашь, жмем F5 и ставим вот такие настройки:

56

И после этого рисуем нашу разделительную линию (с нажатой клавишей Shift).

21. После этого по аналогии делаем наши остальные 4 новости.

К СОДЕРЖАНИЮ

57

К СОДЕРЖАНИЮ

Делаем оформление пейжера 22. Теперь давайте сделаем Пейжер - постраничнyю навигацию по сайту. Берем инструмент Rectangle Tool и рисуем прямоугольную форму. Что бы форма получалась квадратной, рисуем ее вместе с нажатой клавишей Shift. Так же форму можно трансформировать с помощью команды Edit-Free Transform (Правка - Свободная Трансформация, Ctrl+T).

После этого напишем наш текст.

58 Делаем сайдбар 23. Нам осталось сделать Сайдбар (оформление боковой колонки сайта) и Футер (оформления низа сайта). Начинаем рисовать первый блок "Популярное на сайте", берем инструмент Tool и рисуем прямоугольную форму.

К СОДЕРЖАНИЮ

Rectangle

Для этого слоя применим эффекты Color Overlay (Заливка фоном) и Stroke(Обводка).

59

24. Сделаем шапку для блока, берем инструмент Rectangular Marque Tool(Прямоугольное выделение, M) и рисуем прямоугольную область. Далее уменьшим нашу выделенную область на 1 пиксель, идем Select - Modify - Contact(Выделить-Изменить-Уменьшить). И в окошке поставим единичку и жмем ОК. Создаем новый слой Ctrl+Shift+N и заливаем любым цветом.

К СОДЕРЖАНИЮ

60

Далее для слоя с шапкой блока применяем свойство слоя Gradient Overlay(Градиентная заливка) и поверх напишем наш текст "Популярное на сайте ".

Для слоя с фоном блока применим эффект Color Overlay (заливка цветом) цветом и Stroke (обводка) цветом #FFC486.

К СОДЕРЖАНИЮ

25. Пишем текст наших популярных новостей.

61 Рядом с каждой новостью сделаем иконочку-маркер, откроем мой заготовленный файл marker.png название_файла.jpg, копируем слой с маркером в наш основной документ и инструментом Move Tool распологаем наш маркер рядом с названием новости, далее копируем (Ctrl+J) этот слой 4 раза и распологаем в нужных нам местах.

26. Перейдем к следующему блоку с социальными кнопками. Блок делается по аналогии с предыдущим, только для шапки блога используем такой градиент . Текст пишем "Присоединяйтесь к нам в:".

К СОДЕРЖАНИЮ

а для фона такие эффекты: заливка белым цветом и обводка цветом #95d9ee.

Иконки берем из моего приготовленного архива: twitter.png, facebook.png, vkontakte.png. Вставляем иконки в наш документ и располагаем в нашем блоке. Ниже делаем текст для социалок.

62

27. Далее рисуем блок подписки. Делаем фон для блока, делаем шапку блоку, пишем текст, картинку берем из архива название картинки subscribe.jpg, делаем форму подписки и кнопочку "Подписаться" (форму мы уже делали когда рисовали блок Поиск по сайту) и располагаем как на рисунке.

К СОДЕРЖАНИЮ

28. Далее рисуем блок Голосование на сайте. Все по аналогии с предыдущими блоками. Только еще вставим переключатель Radiobutton. Берем файл из архива и вставляем в наш документ.

63

На этом с блоками все, перейдем к созданию нижней части сайта - Футеру. Рисуем футер для сайта 29. Создаем новый слой. В самом низу сайта рисуем прямоугольное выделение инструментом Rectangular Marque Tool (Прямоугольное выделение, M), заливаем его любым цветом. Далее делаем этому слою градиентную заливку.

После этого сделаем разделительную полоску (между футером и пейжером). Ее тоже зальем градиентной заливкой.

К СОДЕРЖАНИЮ

64

30, Далее пишем текст для меню. Я выбрал цвет и для инструмента поставил такие настройки.

К СОДЕРЖАНИЮ

Получилось вот так.

31. Чуть ниже сделаем полоску разделитель. Приблизим место под текстовым меню с помощью лупы. Создаем новый слой, берем инструмент Pencil Tool(Карандаш). Кисть ставим в 1 пиксель, цвет берем #f2cbcf и рисуем линию. Сразу под ней рисуем еще одну линию цветом #ffe4e6.

В итоге у меня получилось

32. Далее копируем слои с нашим логотипом и текстом, расположим их справа, предварительно уменьшив их с помощью команды Edit-Free Transform (Правка - Свободная Трансформация, Ctrl+T). Ниже текстового меню расположим счетчик (картинку можно взять из архива файлcounter.jpg) и чуть правее напишем наш копирайт.

На этом все, как сумел раскрыл вопрос - как сделать дизайн сайта в фотошопе.

К СОДЕРЖАНИЮ

65

66

Если у вас есть вопросы, задавайте их в комментариях, с радостью на них отвечу. А вот по этой ссылке http://www.masalkinn.ru/kak-verstat-saity-podrobnoerukovodstvo вы найдете подробное руководство, как данный дизайн сверстать (перевести в интернет формат). Верстку сделал мой хороший знакомый Андрей Масалкин автор блога http://www.masalkinn.ru . Так же вы можете бесплатно скачать дизайн женского сайта в PSD формате: Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop.

К СОДЕРЖАНИЮ

Урок №3. Как сделать аватар в фотошопе

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

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

К СОДЕРЖАНИЮ

68

Перейдем к самому уроку. Создание аватара из фото 1. Открываем в фотошопе нашу картинку File→Open (Файл→Открыть илиCTRL+O). 2. Берем инструмент

Crop (Кадрирование, C) и выбираем вот такие настройки:

К СОДЕРЖАНИЮ

В полях Witdh (Ширина) и Height (Высота) указываем значение: 100 px. 3. Далее просто выделяем квадратную область (ее можно двигать, если нажать клавишу Shift при рисовании или после выделения просто двигая область мышью)

69

После этого нажимаем Enter и у нас получается аватар размером 100 на 100 пикселей. 4. Теперь добавим нашему аватару обводу в 1 пиксель. Идем в палитруWindows→Layers (Окна→Слои или F7). Выделяем фоновый слой "Background" и кликаем по нему два раза

К СОДЕРЖАНИЮ

мышкой (переводим фоновый слов в простой слой). Название слою даем любое и жмем OK.

Еще раз кликаем два раза по слою и попадаем в настройки стилей слоя. Выбираем пункт Stroke (Обводка), ставим такие настройки и нажимаем OK.

70

Теперь, добавим текстовую анимацию в наш баннер в виде бегающей буквы. Сделать анимированный аватар в фотошопе

К СОДЕРЖАНИЮ

5. С помощью инструмента Horizontal Type Tool (Горизонтальный текст, T), напишем текст "Sponge Bob". Настройки для текста применяем такие:

6. Сделаем обводу для текста. В палитре Layers (Слои, F7) выбираем слой с текстом, кликаем по нему два раза левой кнопкой мыши и в стилях слоя для Stroke(Обводка) ставим такие настройки:

71

7. Далее копируем слой с текстом. В палитре Layers (Слои, F7) выбираем слой с текстом и нажимаем CTRL+J (получается копия слоя). После этого берем инструмент Horizontal Type Tool (Горизонтальный текст, T), кликаем им по нашему тексту и удаляем (выделяем текст мышкой и нажимаем Delete) все буквы кроме "S". К СОДЕРЖАНИЮ

После этого для слоя с буквой "S", применяем заливку цветом, впалитре Layers(Слои, F7) кликаем по слою два раза и в стилях выбираем Color Overlay (Заливка цветом) , так же уберем у слоя обводку.

72

8. После этого копируем слой с буквой "S" - нажимаем CTRL+J. После этого сдвинем скопированный слой немного вправо (двигать слой можно клавишами "Вверх", "Вниз", "Вправо", "Влево"). Далее берем инструмент Horizontal Type Tool (Горизонтальный текст, T), кликаем им по тексту и заменяем букву "S" на "P".

К СОДЕРЖАНИЮ

Далее по аналогии повторяем со всеми буквами.

В итоге должно получится, так:

73 9. Для анимации у нас все готово, приступим к ее созданию. ИдемWindows→Animation (Окна→Анимация).

Далее в окошке кликаем по кнопочке Convert to Frame Animation (справа внизу) и переходим в окошко покадровой анимации.

К СОДЕРЖАНИЮ

10. Настроим наш первый кадр. Идем в палитру Layers, F7, и отключаем видимость ненужных нам слоев (что бы включить/выключить отображение слоя, нужно убрать «глазик" рядом с его названием в палитре слоев).

74

11. Теперь скопируем наш кадр. В палитре Animation, нажимаем кнопкуDublicates selected frame (Копировать выбранный кадр).

К СОДЕРЖАНИЮ

Далее настраиваем анимацию для второго кадра. В палитре Layers (F7) отключаем видимость ненужных нам слоев. Оставляем только основной текст и красную букву "P".

75

К СОДЕРЖАНИЮ

76

12. Далее копируем еще один кадр и по аналогии настраиваем его уже для следующей буквы и так далее. В итоге у меня получилось 9 кадров:

К СОДЕРЖАНИЮ

13. Уже теперь можно нажать кнопочку "Play" и посмотреть анимацию. Так же можно настроить время показа кадра, так как у нас все кадры практически одинаковые, время для каждого кадра можно поставить одно и тоже (выделяем с клавишей Shift, все наши кадры, кликаем правой кнопкой мыши под любым кадром), я выбрал 0,2 секунды.

77

14. Все осталось только настроить, что бы наша анимация повторялась постоянно, для этого кликаем левой клавишей мыши надписи Once (Один раз, находится слева внизу) и в выпадающем списке выбираем пункт Forever (Постоянно).

.

К СОДЕРЖАНИЮ

15. Сохраняем нашу анимацию, идем меню File→Save for Web & Devices(Файл→Сохранить для веб... или ALT+SHIFT+CTRL+S). В окошке справа выбираем формат файла "GIF" и нажимаем OK. Вот и все урок закончен, открываем полученный файл у себя на компьютере в любом браузере или просмотрщике изображений и любуемся анимацией:

Теперь можно себя похвалить, мы научились самостоятельно делать анимированные аватары в фотошопе! Вы так же можете этот анимированный аватар скачать бесплатно в PSD формате (ссылка на скачивание архива с файлами - в конце новости). У вас есть вопросы по уроку? Может, что-то не получается? Пишите в комментариях, с радостью на них отвечу. Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop.

78

К СОДЕРЖАНИЮ

Урок №4. Как размыть задний фон в фотошопе Дорогие друзья, если вас мучает вопрос как сделать размытый задний фон у фотографии в фотошопе, то данный урок 100% для вас. В уроке я показываю, как в программе Adobe Photoshop с помощью простых техник шаг за шагом можно легко и быстро размыть фон у любого изображения.

79 И так давайте делать все по порядку. В уроке я буду использовать вот эту фотографию невесты . Подробный урок - Как размыть задний фон в фотошопе 1. Скачиваем фотографию себе на компьютер и открываем в фотошопе Файл→Открыть (File→Open или CTRL+N – в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп).

К СОДЕРЖАНИЮ

80

К СОДЕРЖАНИЮ

81

2. Фотография имеет большой размер, давайте немного его уменьшим (что бы помещалась на экране, этот шаг можно пропустить), идем в меню Изображение→Размер изображения (Image→Image Size... или Alt+Ctrl+I) и уменьшаем размер нашей фотографии, я сделал по ширине 500 пикселей, по высоте программа автоматически сделала 750 пикселей, далее нажимаем ОК.

К СОДЕРЖАНИЮ

3. Давайте поставим 100% масштаб для фотографии, для этого два раз кликаем левой кнопкой мыши по инструменту

Масштаб (Zoom или Z).

82

4. После этого идем в меню Окно (Windows) и выбираем палитру Слои (Layers или F7). Открывается палитра для работы со слоями в фотошопе.

К СОДЕРЖАНИЮ

83 Выбираем наш слой, сейчас он единственный в документе, кликаем по нему правой кнопкой мыши и выбираем пункт Создать дубликать слоя (Dublicate Layer...).

Создается копия слоя (слои полностью идентичный начальному). Назовем его Копия и нажимаем ОК.

К СОДЕРЖАНИЮ

4. Теперь перейдем к созданию размытия на фотографии. Идем в меню Фильтр (Filter) и выбираем команду Размытие (Blur, как видите способов размытие несколько, мы выберем пункт Размытие по Гауссу, Gaussian Blur).

84

Я выбрал значение 3 пикселя.

К СОДЕРЖАНИЮ

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

85

К СОДЕРЖАНИЮ

И так фон мы с вами размыли (надесь тут все понятно и у вас больше не будет вопросов как сделать размытый фон в фотошопе), осталось сделать четкой нашу невесту на переднем плане. Для этого идем в палитру Слои (Layers, F7), выбираем наш размытый слой и кликаем по кнопочке Добавить слой-маску (Add Layer Mask).

На слой добавляется маска.

86

Вкратце расскажу, как работают маски в фотошопе, рисуя по маске черным цветом мы удаляем (как бы протираем) содержимое слоя, рисуя по маске белым цветом мы восстанавливаем содержимое слоя. Вернемся к нашему примеру. Берем инструмент Кисть (Brush, B), ставим для нее цвет переднего фона: #000000 - черный (в палитре с инструментами внизу 2 квадратика – первый цвет переднего фона, второй – заднего фона) и нажимаем ОК.

К СОДЕРЖАНИЮ

После этого выбираем наш размытый слой, выбираем пиктограмму маски в палитре слоев.

87

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

К СОДЕРЖАНИЮ

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

Если с размером кисти все понятно, чем больше число, тем больше размер кисти. По поводу жесткости поясню, чем больше процент жесткости у кисти, тем четче получаются края при рисовании. Если же поставить жесткость меньше 100% края кисти при рисовании получаются размытыми, тем самым получается плавный переход в нашем уроке. Нам нужно экспериментировать с жесткостью во время обработки изображения. Я взял кисть с жесткостью в 20% и порисовал ей в области лица девушки и вот что у меня получилось:

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

К СОДЕРЖАНИЮ

88

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

89

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

К СОДЕРЖАНИЮ

Урок №5. Добавляем огненный эффект на фотографию Представляем вашему вниманию новый урок по фотошопу, в котором подробно рассказано как добавить огненный эффект на фотографию. В уроке мы с вами будем использовать разные кисти для фотошопа, работать со стоковыми фотография, использовать маски и корректирующие слои, в итоге у нас получится очень классный эффект огня на фотографии в фотошопе. Конечный результат урока. Версия в холодных тонах:

90 Версия в теплых тонах:

И так давайте начнем! Если вы захотите повторить данный урок, вам понадобятся следующие материалы:    

Crack Brushes Model Fire 1 Fire 2 К СОДЕРЖАНИЮ

 Crow  Feather Brush Шаг 1 - Предварительная подготовка Создаю новый документ File-New (Файл-Новый) размером 1280x700 пикселей с черным фоном #000000. Создаю новый слой Ctrl+Shif+N. Далее используем мягкую белую кисть и рисуем ей в центре и внизу полотна. После с помощью инструмента Free Transform Tool (Свободная трансформация, Ctrl+T) изменяем форму как нам необходимо. Небольшой совет: Вы можете сначала нарисовать пятно в центре, а после просто скопировать этот слой Ctrl+J. Далее с помощью инструмента Free Transform Tool (Свободная трансформация, Ctrl+T) изменяем форму пятна и поместить его ниже.

91 Создаю еще один слой и с помощью кистей Crack Brushes (выбираем любую кисть из набора) рисуем где нижнее пятно - текстуру в виде трещин на земле (немного трансформируем слой, чтобы результат был реалистичным).

Я решил добавить на землю немного искр от огня – загружаем картинку file 1 и с помощью инструмента Quick Selection (Быстрое выделение) выделяю нужную мне часть изображение.

К СОДЕРЖАНИЮ

Копирую это выделение Ctrl + C и вставляю Ctrl + V в основной документ и немного трансформирую его.

Вызываю инструмент регулировки уровней с помощью команды Ctrl + L и применяю следующие параметры:

92

Теперь уменьшаю Opacity (Непрозрачность) слоя до 80-90%. После этого инструментом Erase Tool (Ластик) в форме кисти из набора Crack удаляю часть с огненной текстуры.

К СОДЕРЖАНИЮ

В итоге у меня получается такой эффект:

Шаг 2 - Работа с моделью Загружаю фотографию модели, отделяю от фона и вставляю ее в центр нашего документа.

Немного увеличиваю масштаб нашего документа и с помощью того же Ластика в форме кисти Crack удаляем часть ног модели: К СОДЕРЖАНИЮ

93

Далее добавляю 3 корректирующих слоя с обтравочной маской (нажимаем CTRL+ALT+G) со следующими параметрами Black and White (Черно-белый): Black and White (Черно-белый):

94

Редактирую маску корректирующего слоя Black and White (Черно-белый):

К СОДЕРЖАНИЮ

95

Редактирую Levels (Уровни)

К СОДЕРЖАНИЮ

Маска корректирующего слоя Levels (Уровни):

96 Curves (Кривые)

Как вы видите, цвета на левом и правом предплечье четко отличаются от остальных на изображении (именно к этим местам мы добавим эффект огня):

К СОДЕРЖАНИЮ

97 Далее мягкой белой кистью добавляем свечение за шляпой девушки, после мягкой темной кистью добавляем немного теней под ногами девушки. После с помощью кистей в виде трещин (brush Crack) с белым цветом добавляем еще трещин за ногами девушки.

Должно получится, что-то наподобие: К СОДЕРЖАНИЮ

98

Шаг 3 - Добавляем огненый эффекта за девушкой Теперь добавляю несколько огненных эффектов за моделью, тем самым добавим больше сверхъестественности нашей работе. Загружаю в фотошоп картинку с огнем Fire 1. Беру инструмент Lasso Tool (Лассо), ставлю ему значение Feather (растушевка) равное 30% и делаю выделение огня.

К СОДЕРЖАНИЮ

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

99

Так же я решил немного деформировать огонь и придать ей форму крыла

К СОДЕРЖАНИЮ

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

100

Добавляем 2 корректирующих слоя с обтравочной маской (выше слоя с огненным крылом) Curves (Кривые)

К СОДЕРЖАНИЮ

Color Balance (Цветовой баланс)

101

В итоге должно получится, что-то наподобие:

К СОДЕРЖАНИЮ

В палитре Layers (Слои, F7) выделяем слой с огненным крылом и 2 корректирующих слоя. Нажимаем Ctrl+G, тем самым группируя все слои в папку. После этого дублируем папку (выделяем папку, с помощью мыши и зажатой клавиши Alt производим копирование папки). Отобразим новую группу по горизонтали с помощью свободной трансформации Ctrl+T. После просто изменяем расположение и размер группы.

Шаг 4 - Добавляем реалистичности Теперь мы можем добавить немного огня возле руки девушки. Загружаем в фотошоп, фотографию огня Fire 2, копируем и вставляем изображение в наш основной документ, трансформируем и меняем Blending Mode (наложение слоя) c Normal (Нормальный) на Lighten (Замена светлым).

Изменить цвет огня, можно используя корректирующий слой.

К СОДЕРЖАНИЮ

102

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

103

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

Шаг 5 - Добавление ворона Загружаем изображение птицы Crow, вырезаем его и вставляем его в наш документ, уменьшаем изображение и располагаем как на рисунке:

К СОДЕРЖАНИЮ

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

104

Для слоя этого слоя добавим Opacity (Непрозрачность) примерно в 60%, в итоге получается:

А вот так должна выглядеть вся наша работа : К СОДЕРЖАНИЮ

105

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

К СОДЕРЖАНИЮ

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

И в конце, я добавил яркости и подкорректировал цвета на нашем изображении с помощью корректирующих слоев (Curves (Кривые), Color Balance (Цветовой баланс)), и в итоге у меня получилось две версии окончательные версии: Версия в холодных тонах

Версия в теплых тонах

К СОДЕРЖАНИЮ

106

На этом все, очень надеюсь, что вам понравилось и вы нашли что то полезное для себя. До встречи в следующих уроках, хорошего вам дня! Автор: PSD Vault Переводчик: Сергей Иванов

107

К СОДЕРЖАНИЮ

Урок №6. Удаление человека из фотографии в Фотошопе В этом уроке вы узнаете, как удалить человека с фотографии. Предварительный просмотр (до и после)

108

Ресурсы

 Девушка

Шаг 1 Откройте фото.

К СОДЕРЖАНИЮ

109

Создайте новый слой (Ctrl + Shift + Alt + N) и сделайте выделение стены за девушкой (здесь можно использовать любой инструмент: Перо (Pen Tool) или Прямолинейное Лассо (Polygonal Lasso Tool).

К СОДЕРЖАНИЮ

110

Шаг 2 Используйте инструмент Штамп (Clone Stamp Tool), чтобы удалить девушку из изображения. Поскольку мы имеем выделение, все клонирование будет сделано внутри выделенной области, не затрагивая остальную часть изображения. Кроме того, вы должны сохранить выделение, потому что мы будем нуждаться в нём для последующего использования. Чтобы сохранить выделение перейдите в меню Выделение> Сохранить выделение (Select> Save Selection).

К СОДЕРЖАНИЮ

111

Шаг 3 Обратите внимание, как девушка появится снова. Вы можете подумать, что инструмент Штамп (Clone Stamp Tool) и кропотливое удаление объекта, что это единственное решение. Но есть ещё более простой способ, и имя этого метода инструмент Заплатка (Patch Tool), который идеально подходит для такой работы. Выберите инструмент Заплатка (Patch Tool) и дублируйте слой, на котором вы использовали инструмент Штамп (Clone Stamp Tool).

К СОДЕРЖАНИЮ

Вот как ваши слои должны выглядеть (за исключением названия).

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

Теперь создайте произвольное выделение на девушке и перетащите его куда-нибудь на хороший район.

112

К СОДЕРЖАНИЮ

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

113

К СОДЕРЖАНИЮ

Шаг 4 Помните про сохраненное выделение? Загрузите его, перейдя в меню Выделение> Загрузить выделение (Select> Load Selection) и инвертируйте его (Ctrl + Shift + I). Теперь с помощью инструмента Штамп (Clone Stamp Tool) удалите все, что осталось от колена девушки, и некоторые части ее ног.

114

К СОДЕРЖАНИЮ

Шаг 5 Перейдите в меню Фильтр> Исправление перспективы (Filter> Vanishing Point). Нажмите клавишу C и создайте сетку, как показано на изображении ниже.

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

115 Шаг 6 Хорошо, мы почти закончили, и теперь нужно исправить небольшие недостатки и несовершенства. Обратите внимание, что угол стены выглядит поддельно, потому что там закончилось наше выделение.

К СОДЕРЖАНИЮ

Для устранения этого несовершенства выберите инструмент Штамп (Clone Stamp) и нажмите кнопку, чтобы выбрать источник точки, как показано ниже, затем щелкните один раз в основание угла и зажмите клавишу Shift и кликните на верхнюю точку угла.

К СОДЕРЖАНИЮ

116

117

К СОДЕРЖАНИЮ

118

Вот и всё. Окончательное изображение

К СОДЕРЖАНИЮ

119

Урок по теме - Удаление дерева из изображения за три минуты . Автор урока: photoshopstar.com Переводчик урока: Ирина Шипилова

К СОДЕРЖАНИЮ

Урок №7. Как сделать собственный новогодний календарь со своей фотографией в Фотошопе. В этом уроке мы вами будем учиться делать собственный календарь на 2013 год с применением готовых исходных материалов. Нам потребуются несколько клипартов, вырезрамка для фото, календарные сетки на 2013 год по месяцам и красивые новогодние фоны. Все это можно найти в большом количестве и, что самое главное, в отличном качестве на нашем сайте. Вот здесь найдете рамочки-вырезы, вот здесь красивые клипарты, по этой ссылке есть симпатичные календарные сетки по месяцам, а роскошные новогодние фоны скачаете перейдя сюда . Вот когда все скачали и подготовили, можно приступать к сборке календаря. Шаг 1. Открываем новый документ. Выбираем размер его сразу такой, чтобы не было проблем при печати формата А4.

120

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

К СОДЕРЖАНИЮ

Заходим на вкладку Редактирование – Трансформирование – Масштабирование и подгоняем размеры фона под размер документа. При этом держим зажатой клавишу Shift, чтобы сохранить пропорции.

121

Шаг 2. Открываем документ с рамочкой вырезом и также инструментом Перемещение тащим вырез на фон.

К СОДЕРЖАНИЮ

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

122

Шаг 3. Начинаем заполнять фон месяцами. Прошу обратить внимание, что для данного размера изображения (297*210 мм формат А4) я выбрала календарную сетку вот такую, но предварительно проверила размеры картинки месяца. Оказалось, что размер этот примерно 4,8*4,9 см. Это меня вполне устраивает, не надо будет масштабировать.

К СОДЕРЖАНИЮ

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

Отпускаем мышку и появляется рисуночек с месяцем. Ничего не трогаем, просто нажимаем галочку на верхней панели.

К СОДЕРЖАНИЮ

123

Называем полученный слой словом «январь». Как переименовать – посмотрите на скриншоте.

124

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

К СОДЕРЖАНИЮ

Картинка меняется на февраль – нажимаем галочку.

125

Картинку с январем не видно, так как слой с ним лежит ниже слоя «февраль». Не волнуйтесь, потом все найдем и расставим по местам. Называем полученный слой «февраль».

К СОДЕРЖАНИЮ

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

126

Смотрим, что появился март и новый слой (03 на скриншоте), нажимаем галочку в верхней части панели.

К СОДЕРЖАНИЮ

Называем новый слой словом «март».

127

Таким образом мы поступаем со всеми месяцами. В результате должны получитьстопочку лежащих один на другом слоев. На картинке как будто один месяц, а напалитре слоев большой список. Папочку со всеми месяцами теперь можно закрыть. Шаг 4. Расставим месяцы по местам. Берем инструмент Перемещение и ставим на место месяц декабрь. Проверяем, что находимся на слое «декабрь».

К СОДЕРЖАНИЮ

Затем ставим на место месяц ноябрь, также применяя инструмент Перемещение.Проверяем, что находимся на слое «ноябрь»

128

Переходим к октябрю. Активируем слой «октябрь» (встаем на него мышкой) и инструментом Перемещение сдвигаем месяц октябрь из общей стопки на нужное место.

К СОДЕРЖАНИЮ

Вот таким манером расставляем по местам все 12 месяцев. Шаг 5. Теперь повернем немного наши картинки. Опять начнем с декабря месяца, с верхнего слоя «декабрь». Заходим на вкладку Редактирование – Трансформирование – Поворот и немного поворачиваем картинку с декабрем.

Потом делаем активным слой «ноябрь». Шагаем на вкладку Редактирование – Трансформирование – Поворот и поворачиваем картинку с ноябрем.

К СОДЕРЖАНИЮ

129

Активируем слой «октябрь», повторяем Редактирование – Трансформирование – Поворот и поворачиваем картинку с октябрем.

130

Таким образом спускаясь по слоям разворачиваем картинки в разные стороны, чтобы смотрелись повеселей. Вот такая картинка получилась на данном этапе.

К СОДЕРЖАНИЮ

Шаг 6. Месяцы расставили, теперь напишем, что год 2013-й. Выбираем цвет текста. На скриншоте подробно написано, как это делаем: щелкаем по квадратику на верхней панели и в выпавшем окне выберем нужный цвет. Далее активируем слой с фоном, так как цифры будем писать на нем. Берем инструмент Горизонтальный Текст и пишем цифры 2013.

Далее на слое с текстом (на палитре слоев это слой 2013, даже переименовывать не будем) щелкнем 2 раза левой кнопкой мышки и придадим слою Стиль (много хороших стилей здесь). Вы можете выбрать другие отделки для своих цифр, здесь полет фантазии не ограничен. К СОДЕРЖАНИЮ

131

Шаг 7. Теперь придадим стили картинкам с месяцами. Выбираем для них Тень и Тиснение. Для этого 2 раза левой кнопкой мышки щелкнем по слою «январь».Выбираем то, что планировали. Смотрим на картинку с месяцем и наблюдаем, как меняется изображение. Как только понравилось (а можно применить и другие параметры), то нажимаем ОК.

Чтобы не заниматься с каждым слоем отдельно просто скопируем стиль слоя «январь». Правой кнопкой нажимаем на слой и в выпавшем меню выбираем Скопировать стиль слоя.

К СОДЕРЖАНИЮ

132

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

133

Шаг 8. Занимаемся навешиванием клипартов. Открываем в фотошопе предварительно скачанные отсюда картинки с клипартом. Берем инструмент Перемещение и перетаскиваем украшения по очереди на календарь.

К СОДЕРЖАНИЮ

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

134

Шаг 9. Занимаемся рамочкой. Для того, чтобы вырез в рамочке был прозрачным, удалимсамый нижний слой. Это наш исходный документ, который открывали в самом начале, он свое дело сделал и нам больше не нужен. Правой кнопкой мышки щелкаем по слою и выбираем Удалить слой.

К СОДЕРЖАНИЮ

Далее смотрим какие слои будем стирать. Внимательно рассматриваем вырезрамочки и палитру слоев. Обращаем внимание на слои, которые под слоем с рамочкой. Внутри рамочки вылезает кусочек клипарта. Находим этот слой на палитре слоев, встаем на него. Берем инструмент Ластик и стираем внутри рамочки ненужный клипарт. Другие клипарты нам не мешают, их не трогаем.

Далее на палитре слоев идет слой с текстом, его не трогаем – он нам не мешает.Переходим на слой «фон» и Ластиком стираем ненужный фон, не вылезая за края рамочки.

К СОДЕРЖАНИЮ

135

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

136

Сохраняем наш календарь

К СОДЕРЖАНИЮ

В формате PNG, чтобы вырез для фото остался прозрачным.

137

Теперь можно вставить фото и календарь готов. Можно подарить маме на новый год.

К СОДЕРЖАНИЮ

Желаю удачи! Урок подготовила для вас Марина Колесова.

138

К СОДЕРЖАНИЮ

Урок №8. Как изучить работу со слоями в Фотошопе. В сегодняшнем уроке мы расмотрим работу со слоями фотошопе. Урок рассчитан на самых-самых новичков, в нем я расскажу и покажу некоторые приемы работы со слоями в Adobe Photoshop. Фотошоп такая программа, что одно и то же действие, например – дублирование слоя, можно делать несколькими способами. Я покажу вам те приемы работы, которые применяю я. А те, кто уже начал изучение фотошопа возможно применяет другие приемы. Переучиваться не надо, пользуемся тем, что удобно и что привычно. Приступаем к изучению урока. Шаг 1 - Работа со слоями в Фотошопе Открываем палитру слоев в фотошопе. Для этого идем Окно и ставим галочку напротив Слои.

139

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

К СОДЕРЖАНИЮ

Слои можно сравнить со стопочкой книг, листов из тетрадки или альбомом. Мы их складываем, а вернее накладываем слои друг на друга как книги в стопочку. Можно поменять книги (слои) местами, можно убрать из стопки книгу, или добавить ещё одну. Надеюсь, что для тех, кто совсем незнаком со слоями, сравнение со стопкой книг немного помогло в этом разобраться. Шаг 2 - Как создать слой в фотошопе Добавляем слой. Рассмотрим это на примере. Добавим на наше изображение еще один слой – это яблоко. Открываем в фотошопе картинку с яблоком. Изображение — это в формате PNG, поэтому на прозрачном фоне. Просто инструментом Перемещение тащим яблоко на наш документ. Потом картинку с яблоком закрываем (нажимаем на красный крестик).

К СОДЕРЖАНИЮ

140

Рассматриваем то, что получилось. В палитре слоев теперь видим два слоя. Один слой с фоном, он снизу, а второй слой с яблоком, он сверху. На иконке слоя с яблоком даже видно, где оно расположено – примерно в центре и на прозрачном фоне.

Шаг 3 - Основные операции со слоями в Adobe Photoshop Активность слоя. Слой с яблоком окрашен в синий цвет. Это значит, что этот слой активен, мы на нем стоим, с ним работаем и можем делать с ним много операций. Чтобы выделить другой слой нужно кликнуть по нему мышкой и он станет активным.

К СОДЕРЖАНИЮ

141

Шаг 4 - Действия над слоями Видимость слоя. Вот мы с вами стоим на слое с яблоком. Но яблоко мешает обозревать всю картину с розой. Чтобы не мешалось, слой с яблоком сделаем невидимым – погасим глазок на слое (просто щелкнем по глазку) – яблоко пропало. Чтобы снова его увидеть, нужно еще раз щелкнуть по глазку – включить глазок.

Если захочется не смотреть на розу, то можно погасить глазок на слое с розой, нажав на глазок, а потом снова включить его. Делать невидимым можно любой слой, независимо от того активен он или нет. Посмотрите, например, на скриншот. Слой с розой не активен, но глазок на нем погасить можно. К СОДЕРЖАНИЮ

142

Шаг 5 - Перемещаем слои Перемещение изображения. Снова встаем на слой с яблоком. На иконке слоя хорошо видно, что яблоко находится в левом нижнем углу. На скриншоте вышехорошо видно, что было яблоко в правом верхнем. Это инструментомПеремещение я перетащила яблоко из верхнего угла в нижний. И сразу положение отразилось на иконке. Это помогает ориентироваться в том, где находится нужный объект.

Шаг 6 - Как скопировать слой в Фотошопе Копирование слоя. Нужно еще одно яблоко. Для этого скопируем слой. Я применяю для этого сочетание клавиш Ctrl+J. Есть и другие способы, но я в самом начале говорила, что К СОДЕРЖАНИЮ

143

показывать буду приемы, которыми пользуюсь сама. Мне так привычнее. Видим, что на палитре слоев появился новый слой – копия слоя 1, на нем даже написано «Слой 1 копия». А вот на экране изменений не видно, потому что новый слой создан и лежит строго над тем слоем, который копировали.

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

Шаг 7 - Как переименовать слои в Фотошопе К СОДЕРЖАНИЮ

144

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

Шаг 8. Как в фотошопе разблокировать слой Разблокирование слоя. Многие свои уроки я начинаю со слов «снимаем замочек со слоя», это и есть разблокирование слоя. Как правило, когда мы открываем фотографию или картинку в фотошопе на слое висит замок. Это значит, что некоторые действия, например, трансформирование, копирование мы с картинкой сделать не сможем – нужно разблокировать слой. Для этого два раза левой кнопкой мышки щелкаем по замочку и в выпавшем окне чаще всего просто тупо нажимаем ОК. Можно еще сразу дать название слою.

К СОДЕРЖАНИЮ

145

Шаг 9 Создаем новый слой Создание нового пустого слоя. Самый, на мой взгляд, понятный способ создать новый пустой слой – это нажать вторую справа иконку на панели слоев. Новый слой создается над тем слоем, на котором стоим. Сейчас стоим на слое «обои фон», нажимаем иконку и видим, что создан новый слой над ним и он же сразу становится активным, то есть работу продолжаем уже на новом слое.

Шаг 10 - Как удалить слой Удаление слоя. Чтобы удалить ненужный слой, правой кнопкой мышки щелкаем по нему и выбираем – Удалить слой. Яблоко снизу нам не нужно. К СОДЕРЖАНИЮ

146

И вот яблока снизу не стало. И в панели слоев нет слоя.

147

Шаг 11 - Меняем положение слоев Меняем слои местами. Когда на стопку книг смотришь сверху вниз, то видна только обложка верхней книги, а хочется, чтобы сверху была обложка покрасивее, от другой книги. Вот и поменяем их местами. То же и со слоями. Поставили на самый верх розу и не видно стало яблока. Захватываем мышкой нужный слой и тащим вниз или вверх.

К СОДЕРЖАНИЮ

А чтобы убедиться, что яблоко на месте, сделаем слой с розой невидимым – погасим глазок. Вот и получилось, что роза сверху, но невидимая, а яблоко снизу, но хорошо видно.

148

Вот основные операции со слоями рассмотрели. Надеюсь, что объяснила понятно. Теперь можно браться за урок Как сделать быстрый коллаж в фотошопе . Все у вас получится! Желаю удачи! Урок подготовила для вас Марина Колесова

К СОДЕРЖАНИЮ

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

149

Так же в конце этого урока, вы найдете подробный видеоурок о том как создать подобный коллаж в фотошопе. 1. Начнём. Создаём документ 1024х968 (пикс.)

К СОДЕРЖАНИЮ

2. Вот такого размера будет наш коллаж:

150

3. Открываем фоновую фотографию для заднего фона коллажа (здесь – небо и горы)

К СОДЕРЖАНИЮ

4. Перетаскиваем её на документ который мы создали в самом начале

К СОДЕРЖАНИЮ

151

5. При желании эту фотографию можно переместить (Инструмент Перемещение) или отмасштабировать (Редактировать > Трансформировать >Масштабировать) 6. Открываем первую фотографию для коллажа и так же перетаскиваем её уже на фон с небом и горами

152

7. Вот, что у нас получается:

К СОДЕРЖАНИЮ

Если картинка получилась большая, её следует отмасштабировать (Редактировать> Трансформировать > Масштабировать) 8. Теперь повернём её в любую сторону

153

9. Сделаем рамку, а именно применим эффект обводки белого цвета в окне Стиль слоя (для его открытия - дважды нажать на слой)

К СОДЕРЖАНИЮ

10. Получается вот что:

154 11. Далее применим эффект тени

12. Добавляем следующую фотографию на фон с небом

К СОДЕРЖАНИЮ

13. Так же масштабируем

155

14. Применяем Обводку

К СОДЕРЖАНИЮ

15. И тень как на первой фотографии

156

К СОДЕРЖАНИЮ

16. Добавляем третью фотографию и применяем к ней те же эффекты (Тень иОбводку)

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

К СОДЕРЖАНИЮ

Примечание: здесь сверху будет фотография - Слой 1, а под ним фотография – Слой 6 18. Так же добавляем все остальные фото, с такими же эффектами, как и у двух первых фото

158

19. Теперь пишем текст (пользуемся инструментом Текст в панели инструментов) 20. После того, как написали текст, меняем его вид. Нажимаем кнопку, которая выделена на рисунке:

21. И выбираем там любой формат текста. Я выбрал такой:

К СОДЕРЖАНИЮ

22. Изменяем форму текста. Нажимаем на выделенную кнопку

159 23. Выбираем в появившемся окне понравившуюся форму для текста. Я выбралФлагом

24. Это выглядит так:

К СОДЕРЖАНИЮ

25. Теперь применим Градиент для текста. Дважды кликаем на слой с текстом "We’re love to trip" (англ. - Мы любим путешествовать)

160

26. И в окне Стиль слоя нажимаем Наложение градиента, где выбираем цвета для каждого из ползунков. Для первого:

К СОДЕРЖАНИЮ

27. Для второго:

28. Получается вот такой градиент:

161

29. Применим для текста Тень:

К СОДЕРЖАНИЮ

30. Получается вот, что:

162

31. И, наконец, к тексту применим Обводку (как и к фотографиям):

К СОДЕРЖАНИЮ

И в итоге у нас получается вот такой коллаж:

163

Автор урока: Арсений Королев К СОДЕРЖАНИЮ

Урок №10. Создание рамки для фото в виде кадров киноплёнки в Фотошопе Из этого небольшого урока вы узнаете, как можно легко и просто создать рамки на фотографии в виде киноленты с помощью нескольких простых шагов. Мы создадим киноленту в виде векторной формы, и вы сможете легко изменить размер формы без потери качества в соответствии с вашим размером фото. Создайте простой черный прямоугольник с помощью инструмента Прямоугольник (Rectangle Tool). Назовите этот слой "Кинолента".

Выберите слой слой "Кинолента" и нажмите на кнопку векторной маски. На этот раз выберите инструмент Прямоугольник со скруглёнными углами (Rectangle Tool) и установить радиус скругления в 5 пикселей, чтобы получить закругленные углы. Выберите вычесть область из формы, как показано на рисунке и нарисуйте маленький прямоугольник.

Выберите инструмент Выделение контура (Path Selection) и нажмите на маленький прямоугольник. Нажмите комбинацию клавиш CTRL + C, чтобы скопировать его и CTRL + V , чтобы вставить его, используйте стрелку вправо на клавиатуре, чтобы переместить копию вправо.

К СОДЕРЖАНИЮ

165

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

Когда с прямоугольниками будет закончено и результат будет вас устраивать, объедините все прямоугольники в одну форму. Теперь Вы можете полученную форму как Пользовательскую фигуру (Custom Shape) и использовать её в дальнейшем в других проектах. Вот, что должно у вас получиться на данный момент.

Снова воспользуйтесь инструментом Прямоугольник (Rectangle Tool) и нарисуйте белый прямоугольник, как показано на изображении ниже, это будет наша первая фотография. Назовите этот слой "Форма фото 1".

К СОДЕРЖАНИЮ

166

Теперь пришло время добавить первое фото в наш коллаж. Скопируйте изображение и поместите его над " Форма фото 1". Назовите этот слой "Фото 1".

Щелкните правой кнопкой мыши на слое "Фото 1"и в контекстном меню выберите команду Создать обтравочную маску (Create Clipping Mask). Вы увидите маленькую стрелку прикрепленную к слою. Изображение не исчезает, оно маскируется прямоугольником и помещается позади. Вы все еще можете изменить размер изображения или переместить его с помощью инструмента Перемещение (Move Tool) .

Сделайте ещё два белых прямоугольника.

К СОДЕРЖАНИЮ

167

Разместите два других фото таким же образом.

Выберите все слои, щелкните правой кнопкой мыши и в контекстном меню выберите команду Преобразовать в смарт-объект (Convert to Smart Object). Теперь добавим отражение на кинопленке. Дублируйте смарт-объект и выполните командуОтразить по вертикали (Flip Vertical), добавьтемаску слоя и с помощью инструмента Градиент (Gradient Tool), чтобы скрыть половину дубликата смарт-объекта.

168

Теперь можно добавить некоторые дополнительные эффекты. Например, можно согнуть рамку помощью инструмента Деформация (Warp Tool), для этого перейдите в менюРедактирование> Трансформирование> Деформация (Edit> Transform> Warp Tool). Выберите из списка арку с радиусом изгиба в 17 пикселей.

К СОДЕРЖАНИЮ

Вот и всё! Автор урока: psd-dude.com Переводчик урока: Ирина Шипилова

169

К СОДЕРЖАНИЮ

Урок №11. Создаем в фотошопе профессиональный psdмакет для веб-сайта Материалы для урока:

 Function Icon Set - wefunction.com  Twitter Icons - iconeden.com  Bebas Font - dafont.com

Шаг 1 : Макет Прежде чем приступить к разработке дизайна, мы должны спланировать его внешний вид и функциональность. Затем нужно придуманную идею макета выполнить визуально, создать каркас. Я для отрисовки первоначального макета использую только серые тона. Отсутствие ярких цветов помогает сконцентрироваться на плане в целом, и тщательно всё продумать. Это дает большую свободу действий, можно быстро менять и переставлять блоки местами.

170

К СОДЕРЖАНИЮ

Шаг 2: Настройка Холста Давайте создадим дизайн вместе, шаг за шагом! Итак, ширина макета пусть будет в 960 пикселей. Создайте новый документ размером 1200 х 1500 пикселей.

Макет в 960 пикселей достаточно широкий, поэтому нам необходимо определить рабочую область. Нажмите комбинацию клавиш Ctrl + А, чтобы выделить весь холст целиком.

К СОДЕРЖАНИЮ

171

Перейдите в меню Выделение > Трансформировать выделенную область (Select> TransformSelection). Измените ширину выделения до 960 пикселей. Расположите выделение по центру холста.

172

Добавьте направляющие линии для выделенной области справа и слева.

К СОДЕРЖАНИЮ

173

Теперь нам нужно создать небольшие отступы между границей и содержанием макета, которое мы добавим позже! Снова перейдите в меню Выделение > Трансформировать выделенную область (Select > TransformSelection) и измените размер выделения до 920 пикселей в ширину. Тем самым отступ с каждой из сторон составит по 20 пикселей.

К СОДЕРЖАНИЮ

174 Добавьте направляющие линии.

К СОДЕРЖАНИЮ

Шаг 3 : Создание шапки макета (хедера) Давайте создадим шапку для нашего макета! Сделаем выделение высотой в 465 пикселей

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

К СОДЕРЖАНИЮ

175

Теперь добавим градиент для нашей шапки. Дважды щелкните на пиктограмме слоя. Выберите Наложение Градиента (Gradient Overlay). Создайте градиент, используя настройки, показанные на изображении ниже. Примените настройки.

176

Градиент должен выглядеть следующим образом.

К СОДЕРЖАНИЮ

Далее нужно добавить светлое пятно в шапку. Создайте новый слой, нажав комбинацию клавиш Ctrl + Alt + Shift + N. Возьмите мягкую кисть диаметром 600 пикселей. Установите цвет #19535a для кисти. И просто один раз нажмите на центр верхней части шапки.

Создайте сверху выделенную область высотой в 110 пикселей.

К СОДЕРЖАНИЮ

177

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

178

Сожмите светлое пятно по вертикали, нажав комбинацию клавиш Ctrl + T.

К СОДЕРЖАНИЮ

179

Теперь нам нужно убедиться в том, что светлое пятно идеально центрировано в шапке макета. Выделите слой с пятном и нажмите клавишу "V" для переключения на инструмент Перемещение (Move Tool). На панели управления выбранным инструментом (Options) нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

К СОДЕРЖАНИЮ

180 Создайте новый слой, С помощью инструмента Карандаш (Pencil Tool ) нарисуйте горизонтальную линию толщиной в 1 пиксель и цветом #01bfd2.

К СОДЕРЖАНИЮ

Теперь скроем края линии с помощью маски градиента. Выберите инструмент Градиент (Gradient Tool), на панели управления выбранным инструментом (Options) выберите Редактор градиентов и создайте градиент как показано на изображении ниже.

181

Примените созданный градиент.

К СОДЕРЖАНИЮ

Шаг 4 : Создание текстурного шаблона Теперь создадим простой шаблон текстуры и применим его к шапке. Возьмите инструмент Карандаш (Pencil Tool), установите размер кисти в 2 пикселя и добавить две точки, которые касаются друг друга углами. Выключите фон и выделите точки. Выберите пункт меню Редактирование > Определить узор (Edit > Define Pattern).

182

Создайте новый слой и поместите его под выделенный слой. Выделите область, к которой мы хотим применить текстуру. Нажмите Shift + F5, чтобы загрузить текстуру. Заполните диалоговое окно. Выберите текстуру, которую только что создали, нажмите ОК.

К СОДЕРЖАНИЮ

183

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

К СОДЕРЖАНИЮ

Смешивание текстуры плавно переходит в шапке. Добавьте маску слоя к слою с текстурой. Возьмите кисть с большой мягкостью. Выберите белый (#FFFFFF) цвет для кисти. Уменьшите Непрозрачность (Opacity) кисти до 60% и рисуйте. Если вы слишком сильно нанесёте краску, то потом можно будет настроить прозрачность слоя отдельно.

К СОДЕРЖАНИЮ

184

185

Прекрасно получилось.

К СОДЕРЖАНИЮ

186

Шаг 5 : Добавление логотипа Создание фона шапки в большей степени завершено. Теперь добавим логотип. Но перед этим в то место, где он будет находиться, добавим небольшое светлое пятнышко.Возьмите мягкую кисть, установите цвет #19535a. Добавьте светлое пятно.

К СОДЕРЖАНИЮ

187

Добавим текст логотипа. Я использовал шрифт "Bebas Font ". Скачать его можно абсолютно бесплатно.

К СОДЕРЖАНИЮ

Добавим некоторые эффекты к логотипу. Смотрите изображения ниже.

188

К СОДЕРЖАНИЮ

189

Шаг 6 : Навигация Добавляем навигационные ссылки.

К СОДЕРЖАНИЮ

190

Создайте навигационные кнопки. Используйте инструмент Прямоугольник (Rectangular Marquee Tool). Заполните любым цветом. Далее сделаем нижнюю часть прямоугольника полностью прозрачной.

К СОДЕРЖАНИЮ

Дважды щелкните на пиктограмме слоя, выберите Наложение градиента (Gradient Overlay). Используйте настройки, показанные на изображении ниже.

191

К СОДЕРЖАНИЮ

Шаг 7 : Контент-слайдер Создайте выделение размером в 580 х 295 пикселей.

Залейте выделенную область серым цветом.

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

К СОДЕРЖАНИЮ

192

Теперь добавим эффект тени под слайдер. Создайте новый слой. Выберите инструментКисть (Brush Tool), установите диаметр до 400 пикселей. Откройте Палитру кистей(Brushes palette), и в ней используйте следующие настройки.

Установите цвет кисти #000000 и нарисуйте ей в нужном месте .

К СОДЕРЖАНИЮ

193

Примените фильтр Размытие по Гауссу (Gaussian Blur), чтобы смягчить края.

194

Выделите нижнюю половину тени и удалите её.

К СОДЕРЖАНИЮ

Поместите тень чуть выше слайдера по середине.

Уменьшите её по вертикали. Далее необходимо центрировать тень со слайдером. Выберите оба слоя и на панели управления выбранным инструментом(Options) нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

К СОДЕРЖАНИЮ

195

Сделайте дубликат слоя с тенью и разверните его вертикально. Поместите его на нижний край слайдера.

196 Далее создадим кнопки управления для слайдера с помощью инструментаПрямоугольник (Rectangular Marqee). Залейте их чёрным цветом (#000000).

Установите Непрозрачность (Opacity) кнопки в 50%. К СОДЕРЖАНИЮ

Выберите инструмент Произвольная фигура (Auto shapes) и на панели управления выбранным инструментом (Options) выберите стрелку. Добавьте её в кнопки.

197

Добавляем полоску в нижней части слайдера. Заливаем её чёрным цветом (#000000).

К СОДЕРЖАНИЮ

Делаем Непрозрачность (Opacity) полоски в 50%.

198

Здесь мы можем добавить описание картинки.

К СОДЕРЖАНИЮ

Шаг 8: Добавление ; описания Теперь добавим приветствие и краткое описание сайта.

199

К СОДЕРЖАНИЮ

Шаг 9 : Заканчиваем с шапкой Мы почти закончили шапку. Давайте добавим тонкий эффект тени чтобы завершить шапку! Создайте тень так же, как мы создавали её ранее для слайдера, используя инструмент Кисть (Brush Tool).

200

Оставьте разрыв в 1 пиксель между шапкой и тенью.

К СОДЕРЖАНИЮ

Шаг 10 : Создание градиента для фона Создайте градиент от светло-серого до белого цвета.

201

Создайте новый слой ниже шапки и примените градиент.

К СОДЕРЖАНИЮ

202

К СОДЕРЖАНИЮ

Шаг 11 : Добавление элементов управления вращением слайдера Создайте элементы слайдера.

Чтобы указать текущий активный элемент управления в слайдере примените к нему Внутреннюю тень (Inner Shadow).

203

Шаг 12 : Создание разделителя Выберите инструмент Карандаш (Pencil Tool) и нарисуйте линию в 1 пиксель. Цвет возьмите светло-серый (#aaaaaa).

К СОДЕРЖАНИЮ

Скройте края линии используя градиент маски.

204 Шаг 13 : Добавление основного содержимого Настал момент создать основную часть макета, место для контента. Нам нужно создать три равных столбца с небольшими отступами между ними. Я сделал простой расчет и разделил имеющееся пространство на 3 равные части с помощью прямоугольников и отступом между ними в 25 пикселей.

Добавьте направляющие линии для столбцов. Затем уберите прямоугольники. У вас останутся просто столбцы.

К СОДЕРЖАНИЮ

205

Добавьте услуги, которые будет оказывать будущий сайт. Подберите иконки из набора функциональных значков. Добавьте текст.

К СОДЕРЖАНИЮ

Теперь создадим простую кнопку "Подробнее". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Нарисуйте кнопку на новом слое.

206

Нанесите на кнопку градиент и сделайте обводку.

К СОДЕРЖАНИЮ

207

К СОДЕРЖАНИЮ

208

Дублируйте кнопку.

Добавим ещё некоторые функциональные элементы. Я нарисовал три прямоугольника для изображений и сделал обводку в 3 пикселя.

К СОДЕРЖАНИЮ

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

209

К СОДЕРЖАНИЮ

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

Добавьте немного описаний к картинкам.

Давайте создадим иконку для твиттера. Найдите значок синей птички.

К СОДЕРЖАНИЮ

210

Добавьте анонс для твиттера.

211

Создадим кнопку для прочтения полного твитта.

Примените стили, показанные на изображении ниже.

К СОДЕРЖАНИЮ

212

К СОДЕРЖАНИЮ

213

Добавьте текст на кнопку.

Шаг 14 : Создание подвала и заключительные штрихи Выделите область для футера и залейте её серым цветом.

К СОДЕРЖАНИЮ

Перейдите в Наложение цвета (Color Overlay) и измените цвет.

214

Добавьте в футер ссылки навигации и информацию об авторских правах. Макет закончен. Взгляните на окончательный макет сайта.

К СОДЕРЖАНИЮ

Preview of Final Results

215

Header image provided by DepositPhoto Автор урока: Nikola Lazarevic Переводчик урока: Ирина Шипилова

К СОДЕРЖАНИЮ

Урок №12. Как сделать красивую надпись на фото в фотошопе. Дорогие друзья, из этого урока вы узнаете, как сделать красивую надпись на фотографии в фотошопе. Специально для вас, я сделал пошаговую инструкцию по добавлению красивого текста на вашу фотографию или изображение, и если вы хотите научиться делать это самостоятельно, тогда данный урок для вас.

216

В этом уроке мы с вами так же попутно обучимся поиску новых шрифтов для фотошопа, научимся устанавливать их программу, научимся изменять размер и разрешение изображения, познакомимся с инструментами кадрирование и свободная трансформация. Надеюсь данный урок будет вам полезен и после изучения урока вы без проблем сможете сделать красивую надпись в фотошопе. Перед началом работы, давайте выберем фотографию, на которую будем добавлять текст. Для урока я выбрал вот эту фотографию с изображением природы. Сразу же нужно определиться что мы будем делать с этой фотографией (картинка отличного качества и имеет разрешение в 300 пикселей на дюйм - сразу нужно понимать, что чем больше разрешение, тем качественнее будет фотография, но есть и минус - на диске будет занимать больше места): 1. Распечатывать в фотосалоне.

К СОДЕРЖАНИЮ

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

217

Сразу посмотрите картинка иметь большой размер: ширина 1024, высота 768 и разрешение: 300 пикселя на дюйм (что бы вывести это окошечко, идем в менюИзображение Размер изображения, Image - Image Size).

К СОДЕРЖАНИЮ

Мне для картинки в блог, нужно сделать ее размером по ширине - 550 пикселей(высота мне не важна), а также разрешение сделать - 72 пикселя/дюйм, нужно обрезать не нужное на изображении. Есть два способа как это сделать: а) можно просто в окне Размер изобржения, поставить сначала разрешение 72 пикселя на дюйм, ширину поставить 550 пикселей и нажать ОК. б) можно в одно действие сразу обезать на фотографии все не нужное, сделать ее по ширине 550 пикселей и с разрешением в 72 пикселя. Интересно как это сделать? Кадрирование фотографий в фотошопе Берем инструмент Кадрирование (Crop, C) и сверху в панели настроек инструмента ставим такие параметры.

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

К СОДЕРЖАНИЮ

218

В итоге получаем изображение с нужными нам параметрами - 550 ширина и 72 dpi разрешение.

К СОДЕРЖАНИЮ

219

Все картинку мы подготовили. Теперь нам нужно добавить красивую надпись на изображение. Добавляем новые шрифты в фотошоп 2. Можно использовать стандартный шрифт, но мы с вами не ищем легких путей, правильно?) Правильно, один раз разберемся и будем потом постоянно использовать этот навык - найдем понравившийся нам шрифт в интернете, скачаем его на компьютер, добавим его в фотошоп и уже потом сделаем красивую надпись. Идем в любую поисковую систему, я использую google.com, ввел фразу “русские шрифты” (также можно попробовать на англиском russian fonts), попал на сайт xfont.ru и выбрал вот этот шрифт (Archangelsk Regular). Переходим по ссылке, на странице внизу есть кнопка скачать, щелкаем по ней и скачиваем шрифт на компьютер.

220 Для того что бы загрузить шрифт в фотошоп, его нужно скопировать в папку со шрифтами, название папки Font на вашем компьютере, эта папка находится на диске Cв папке Windows, а там папка Font Вот полный путь – C:\Windows\Fonts. Так же можно открыть папку со шрифтами, просто через Пуск - Панель управления Шрифты.

К СОДЕРЖАНИЮ

После нужно обязательно перезагрузить фотошоп – что бы изменения вступили в силу. Перезапустили, открываем нашу фотографию и начинаем работать с текстом в фотошопе. Добавляем красивую надпись на фотографию в фотошопе 3. Как же написать текст в фотошопе и наложить его на фото? Все просто берем инструмент Горизонтальный текст (Horizontal Type Tool, T).. В настройках выбираем наш шрифт - Archangelsk, ставим размер - 25 пунктов, насыщенный и любой цвет.

И пишем нужный нам текст, в моем примере Италия, 2012.

К СОДЕРЖАНИЮ

221

Теперь давайте добавим эффекты нашему тексту. Идем в палитру со слоями (меню Окно - Слои, Window - Layers), кликаем два раза левой кнопкой мыши по этому слою и выбираем такие настройки:

Добавляем тень нашей надписи. Выбираем пункт Тень, ставим Непрозрачность - 75%, Смещение - 10 пикслей и Размер - 10 пикселей.

222

Добавляем внешнее свечение для надписи, выбираем пункт Внешнее свечение, ставим цвет, размах - 8%, размер - 27 пикслей.

К СОДЕРЖАНИЮ

Делаем градиентную заливку для надписи. Выбираем пункт Наложение градиента, щелкаем по градиенту, целкаем по нижнему левому ползунку и ставим такое цвет#fbfea0, после щелкаем по нижнему правому ползунку и ставим такой цвет #ffef04.

Остается добавить обводку для надписи. Выбираем пункт Обводка, выбираем размер - 3 пикселя и цвет #031f01.

К СОДЕРЖАНИЮ

223

В итоге у нас получилось отличнная надпись с эффектами.

224

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

К СОДЕРЖАНИЮ

Edit - Free Transform или просто нажимаете Ctrl+T), поворачиваете слой на нужный угол и нажимаете Enter.

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

К СОДЕРЖАНИЮ

225

Урок №13. Техника выделения и вырезания волос в Фотошопе В этом уроке мы покажем вам технику выделения и вырезания волос используя очень полезную функцию Уточнить край (Refine Edge). Этот новый инструмент действительно может помочь вам справиться с выделением достаточно мелких и неоднородных объектов, таких как человеческий волос или меха, которые практически не возможно выделить другими способами. Новые версии Фотошопа справляются с этой задачей очень легко. Предварительный просмотр

226

Ресурсы

 sunbathing 2  Sunset from Astoria, Queens

Шаг 1 Откройте изображение sunbathing 2 и обрежьте его примерно до 24 × 24 дюймов, удаляя при этом большую часть неба. К СОДЕРЖАНИЮ

Шаг 2 Используйте инструмент Быстрое выделение (Quick Selection Tool), чтобы сделать грубое выделение девушки. Сделайте размер кисти примерно 37 пикселей в диаметре и 100% твердости. Пройдитесь кистью по изображению девушки, чтобы сделать быстрое выделение.

К СОДЕРЖАНИЮ

227

Шаг 3 Теперь воспользуйтесь помощью новой функции Уточнить край (Refine Edge), которая впервые появилась в Photoshop CS5. Нажмите на кнопку Уточнить край(Refine Edge). Первое, что вы должны сделать, это решить в каком режиме просмотра Вы хотите работать, это будет зависеть от изображения с которое вы работаете. На данном изображении мы хотим видеть контуры волос, так что установите режим просмотра Черно белое (Black and White), в результате получим хорошую маску.

228

К СОДЕРЖАНИЮ

Шаг 4 Установите галочку Умный радиус (Smart Radius) и измените значение Радиус(Radius) до 99,0 пикселей.

Шаг 5 Измените режим просмотра на На черном (Black), вы заметите, что в волосах модели и по краям ее кожи остались некоторые остатки синего неба.

К СОДЕРЖАНИЮ

229

Шаг 6 Установите галочку Очистить цвета (Decontaminate Colors) и измените значение Эффект (Amount) до 68%. Измените значение Вывод в (Output) на Новый слой со слоем-маской (New Layer With Mask). Затем нажмите кнопку OK. Photoshop автоматически создаст новый слой с маской и выключит оригинальный слой изображения.

230

К СОДЕРЖАНИЮ

Шаг 7 Теперь откройте изображение Sunset from Astoria, Queens , скопируйте его и вставьте ниже новой слой-маски (слой с девушкой). Финальный результат

231

К СОДЕРЖАНИЮ

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

232

Шаг 1. Чтобы правильно разделить фотографию на 4 части позовем на помощь линейку. Идем на вкладку Просмотр и ставим галочку напротив Линейки.

К СОДЕРЖАНИЮ

Шаг 2. Берем инструмент Прямоугольная область и делаем выделение одной четвертой части фотки. Ориентируйтесь по линейке.

233

Сделаем растушевку, чтобы край был немного размыт. Щелкаем правой кнопкоймышки внутри выделения и выбираем Растушевка

К СОДЕРЖАНИЮ

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

234

Шаг 3. Сразу копируем выделенное на новый слой клавишами Ctrl+Jи переименовываем его.Для нового названия щелкаем два раза левой кнопкой мышки по названию слоя и называем «зима».

К СОДЕРЖАНИЮ

Шаг 4. Проверяем, что остались на слое «зима» и идем на вкладку Коррекция – Микширование каналов

235

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

К СОДЕРЖАНИЮ

Шаг 5. Режим наложения слоя поменяем на Точечный свет и сразу увидим, как на зеленой травке лежит снег.

236

Шаг 6. Переходим на самый нижний слой, на общую фотографию и выделяем второйпрямоугольник.

К СОДЕРЖАНИЮ

Также применяем Растушевку. Щелкаем правой кнопкой мышки внутри выделения.

237

Радиус растушевки принимаем такой же, как и в первом случае – 30 пикселей.

К СОДЕРЖАНИЮ

Шаг 7. И тут же копируем выделенное на новый слой, применяя сочетание клавиш Ctrl+J. Видим, что над общей фоткой появился новый слой на панели слоев с прямоугольничком чуть левее серединки. Переименовываем слой, называем его «весна».

Шаг 8. Двигаем слой «весна» на самый верх.

К СОДЕРЖАНИЮ

238

Шаг 9. Применяем к этому слою Выборочную коррекцию цвета

239

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

К СОДЕРЖАНИЮ

Шаг 10. Сделаем слой «лето». Для этого повторяем шаги 6,7 и 8. Только выделяем третийпрямоугольник, который назовем «лето».

Шаг 11. Чтобы получить лето, применим коррекцию яркости.

К СОДЕРЖАНИЮ

240

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

241

Шаг 12. Таким же образом делаем прямоугольник «осень». Повторяем шаги 6,7 и 8.

К СОДЕРЖАНИЮ

К слою «осень» применим тоже Выборочную коррекцию цвета.

242

Корректировать также будем желтый цвет. Смотрим на экран и подбираем ползунками цвета пожухлой осенней травки.

К СОДЕРЖАНИЮ

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

243

Также вы можете посмотреть интересный урок по оформлению фотографий Создание марки из фотографии Желаю удачи! Урок подготовила для вас Марина Колесова.

К СОДЕРЖАНИЮ

Урок №15. Пример использования обтравочной маски в Фотошопе При использовании корректирующего слоя он по умолчанию влияет на каждый слой под ним. Для того, чтобы он влиял только на первый слой под корректирующим слоем, необходимо его закрепить для этого слоя. В этом уроке мы на практическом покажем вам, как работает обтравочная маска.

244 Посмотрите видео. Рассмотрим простой пример. У нас есть фоновый слой с текстурой дерева и слой с фигурой в виде чёрного круга.

Теперь добавьте слой с девушкой. Как видите слой довольно большой.

К СОДЕРЖАНИЮ

Теперь нужно сделать так, чтобы слой был видимым только в площади круга. Для этого вы должны поместить его над слоем с кругом и закрепить его к нему. Мы можем обрезать слой с девушкой женщина по слою с кругом, для этого щелкните правой кнопкой мыши по слою с девушкой и в контекстном меню выберите команду Создать обтравочную маску (Create Clipping Mask). Вы также можете использовать другой способ, для этого нажмите и удерживайте клавишу Alt и подведите курсор мышки между слоем с девушкой и слоем с кругом, и вы увидите, что курсор изменится на небольшой квадрат со стрелкой, далее просто нажмите в том месте и вы создадите обтравочную маску.

К СОДЕРЖАНИЮ

245

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

Теперь давайте добавим эффект к этому изображению. Выберите слой с девушкой и перейдите в меню Изображение> Коррекция (Image> Adjustments) и выберите любую коррекцию (Цветовой баланс (Color Balance), например) и сделайте изменение цвета, которое повлияет на слой с девушкой. Мы намерено не стали использовать Цветовой баланс (Color Balance) в виде слоя, чтобы коррекция не влияла на другие слои. На изображении ниже вы можете видеть, эффект от корректирующего слоя и простой коррекции.

Вот и всё.

К СОДЕРЖАНИЮ

246

Урок №16. Добавление авторских копирайтов на ваши работы с помощью Фотошопа В этом уроке мы покажем вам, как легко добавить водяные знаки авторского права на ваши фото. Они могут быть полезны и защитить ваши авторские работы от воровства.Так же их часто используют, чтобы показать заказчику предварительный результат Мы будем использовать это фото для нашего примера:

247 Шаг 1 Откройте новый документ с прозрачным фоном, для этого перейдите в меню Файл в верхней части экрана и выберите Новый документ, в результате откроется диалоговое окно Новый документ. Введите значения размеров и разрешения. Установите прозрачный фон.

Нажмите кнопку OK, и у вас появится новый пустой документ. К СОДЕРЖАНИЮ

Шаг 2 Возьмите текстовый инструмент и выберите чёрный цвет. Введите ваш текст. Для того чтобы получить доступ к символу авторского права "©" нажмите и удерживайте клавишу Alt и введите 0169 на цифровой клавиатуре.

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

К СОДЕРЖАНИЮ

248

Когда вы закончите, то нажмите клавишу Enter, чтобы применить вращение,. Шаг 4 Сделайте обрезку вокруг текста по прозрачным пикселям из меню Изображение. В результате ваш документ с текстом станет гораздо меньше по размерам.

Нажмите кнопку ОК и Photoshop обрежет пространство вокруг текста.

Шаг 5 Перейдите в меню Редактирование и выберите команду Определить шаблон. Созайте шаблон из вашего текста. К СОДЕРЖАНИЮ

249

Введите название и нажмите кнопку ОК. Шаг 6 Закройте документ с текстом и оставьте только исходное изображение открытым. Шаг 7 Перейдите в исходное изображение и добавьте новый слой любым удобным для вас способом.

250 Шаг 8 Заполните слой вашим сохранённым узором. Для этого выберите заливку и в качестве заполнения из выпадающего меню выберите Узор.

Далее выберите ваш узор из выпадающего списка других узоров. Ваш будет в самом низу.

К СОДЕРЖАНИЮ

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

251

Шаг 9 Единственной проблемой станет слишком заметный текст. Он будет блокировать часть изображения из вида. Чтобы исправить это измените режим наложения слоя на Перекрытие и уменьшите непрозрачность до 50%.

К СОДЕРЖАНИЮ

И вот окончательный результат.

252

К СОДЕРЖАНИЮ

Урок №17. Как сделать быструю рамочку для фотографии в Фотошопе В сегодняшнем уроке я покажу вам, как быстро и просто сделать рамочку для фотографии в фотошопе, применяя для этого только инструмент Лассо. Урок особенно подойдет новичкам, делающим первые шаги в фотошопе. Приступаем к изучению урока. Шаг 1. Создаем документ, который сразу можно распечатать в нужном формате. Задаем сразуразмеры в сантиметрах. И сразу выбираем заливку фона белым цветом. Потом при желании цвет можно заменить.

253

Шаг 2. На панели инструментов выбираем Лассо

К СОДЕРЖАНИЮ

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

К СОДЕРЖАНИЮ

254

Шаг 3. Так как нам нужно только то, что находится за контуром, а не внутри его, то инвертируем выделение, для этого идем на вкладку Выделение - Инверсия

255 Шаг 4. Копируем выделенное на новый слой. Самое, на мой взгляд, простое действие для этого – это нажать сочетание клавиш Ctrl+J. Видим, что появился слой выше, серединка у него прозрачная (видно на иконке слоя). Для того, чтобы получше рассмотреть, какая получилась рамочка, сделаем нижний слой невидимым – просто нажмем глазок на панели слоев.

К СОДЕРЖАНИЮ

256

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

К СОДЕРЖАНИЮ

Проверяем, чтобы слой с кошкой стоял под слоем с рамочкой.

Шаг 6. Немного приукрасим рамочку. Вариантов множество. Покажу вам парочку самых простых. Первый – придадим тень. Для этого встаем на слой с рамочкой и два разалевой кнопкой мышки щелкаем по нему. Выпадает окошко со Стилями слоя. В нем выбираем Тень. Смотрим на экран и двигаем ползунки.

К СОДЕРЖАНИЮ

257

А можно вместо Тени выбрать Стиль. Здесь уже можно ползунки не двигать, а просто перескакивать с одного стиля на другой и смотреть на экран на результат.

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

А еще фотографию можно забавно оформить, если посмотреть урок Как сделать веселый 3D эффект на фотографии . Желаю удачи! Урок подготовила для вас Марина Колесова.

К СОДЕРЖАНИЮ

Урок №18. Как размыть края в фотошопе В сегодняшнем уроке я покажу вам самый простой способ как сделать размытые края в фотошопе. Урок очень простой, прекрасно подойдет новичкам в фотошопе, которые делают свои первые шаги и смотрят первые уроки по фотошопу. Приступаем к изучению урока. Шаг 1. Открываем в фотошопе исходную фотографию.

259

Шаг 2. Выбираем на фотографии область, которая точно не будет подвергаться изменениям. В моем варианте это мордочка моей кошки Масяни. Применим для выделения инструментОвальная область. Выделим овал, на котором затем сделаем растушевку краев в фотошопе.

К СОДЕРЖАНИЮ

Шаг 3. Для растушевки краев в фотошопе правой кнопкой мышки щелкнем внутривыделенной области, выпадает список, в котором выбираем Растушевка.

260

Сразу выпадает окошко, в котором нужно выбрать Радиус растушевки. Его выбираем в зависимости от того в какой степени нужно размыть края фотографии в фотошопе. Чем больше нужно размытие, тем больше выбираем радиус. Еще нужно учитывать и размер изображения. Вот у меня, например, сейчас размер изображения 375*500 пикселей, при этом радиус растушевки я выбрала 5 пикселей, чтобы края были не очень размытыми.

К СОДЕРЖАНИЮ

Шаг 4. Чтобы иметь отдельно выделенный фрагмент с размытым краем, сделаем его копию на новом слое. Для этого нажимаем сочетание клавиш Ctrl+J – это самый легкий способ сделать копию. Видим, что на панели слоев появился новый слой. Шаг 5. Чтобы посмотреть, что получилось, погасим глазок на слое с общей фотографией (просто нажмем на глазок и слой стал невидим)

К СОДЕРЖАНИЮ

261

Шаг 6. Такую круглую кошкину мордочку на прозрачном фоне сохраним, чтобы в дальнейшем использовать в своих работах. Идем Файл – Сохранить как

И сохраняем файл в формате PNG в какой-нибудь папочке.

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

К СОДЕРЖАНИЮ

262

263 А вот такой результат получим, если применять для выделения будем не Овальную, а Прямоугольную область.

А еще можно посмотреть урок Как изменить задний план с помощью фильтра искажение Желаю удачи! Урок подготовила для вас Марина Колесова.

К СОДЕРЖАНИЮ

Урок №19 Как в Фотошопе сделать матовую кожу В сегодняшнем уроке мы с вами будем изучать как в фотошопе сделать матовую кожу.Уроков такого рода на просторах интернета великое множество. Есть сложные, с применением большого количества различных фильтров, масок и настроек. Я думаю, что новичкам в фотошопе для первого знакомства очень подойдет урок, который предлагаем мы на нашем сайте. Урок простой, понятный и его даже можно выучить. Приступаем к изучению урока. Шаг 1. Открываем в фотошопе исходную фотографию. Кстати, хочу заметить, что подобрать фотографию для обработки в фотошопе тоже не очень-то просто. Так что не волнуйтесь, если что-то не получится, просто попробуйте поработать с другой фотографией.

264

Шаг 2. Сразу копируем слой, применяя сочетание клавиш Ctrl+J.

К СОДЕРЖАНИЮ

Стоя на новом слое, идем на вкладку Фильтр – Размытие – Размытие по Гауссу

265

Радиус размытия подбираем глядя на экран. Личико должно быть размыто, но не сильно. Ориентируйтесь по щекам, потому что они такими же и останутся в результате.

К СОДЕРЖАНИЮ

Шаг 3. Чтобы личико было не совсем уж туманное, поставим непрозрачность слоя примерно 50%. Можно варьировать непрозрачностью. Подбирайте на свой вкус.

266

Шаг 4. Начинаем обработку лица. То есть выделяем то, что должно быть поярче – глаза, волосы, носик и прочее. Работать будем на маске слоя. Для этого нажимаем иконкумаски на панели слоев и видим, что появляется маска. Притом что она активна (обведена черной полоской).

К СОДЕРЖАНИЮ

Шаг 5. Берем небольшую мягкую круглую кисть, ставим ее непрозрачность примерно 50 %

267

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

К СОДЕРЖАНИЮ

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

268

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

К СОДЕРЖАНИЮ

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

269

Шаг 6. Теперь сделаем личико посветлее, применим для этого кривые. Идем Изображение – Коррекция – Кривые.

К СОДЕРЖАНИЮ

Чуть–чуть поднимем кривую и сразу будет видно, как посветлело лицо девушки.

270

Смотрим на результат.

К СОДЕРЖАНИЮ

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

271

А еще новичкам будет интересен урок Как сделать зеркальное отражение в фотошопе. Желаю удачи! Урок подготовила для вас Марина Колесова.

К СОДЕРЖАНИЮ

Урок №20. Как сделать фигурную обработку краев фотографии в Фотошопе В сегодняшнем уроке мы с вами рассмотрим один из вариантов как сделать фигурную обработка краев фотографии в фотошопе. Такая обработка применялась раньше на нецветных фотографиях, поэтому и учиться будем на одной из старинных сканированных фоток. Такие наверняка есть в каждом домашнем архиве. Применять будем команды выделения, вспомним про быструю маску и стандартные фильтры фотошопа. Урок несложный и прекрасно подойдет новичкам в фотошопе. Приступаем к изучению урока. Шаг 1. Открываем в фотошопе исходную фотографию.

272

Проверяем, чтобы стояла галочка у нужного нам цветового режима. Это обязательно, если фотография сканированная.

К СОДЕРЖАНИЮ

273

Шаг 2. Берем инструмент Прямоугольная область и делаем выделение будущего фигурного края.

К СОДЕРЖАНИЮ

Шаг 3. После этого переходим в режим быстрой маски. Нажимаем иконку на панели инструментов. Сразу появится красная маска.

274 Шаг 4. Переходим на вкладку Фильтр – Штрихи - Разбрызгивание

К СОДЕРЖАНИЮ

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

275 Шаг 5. Выходим из режима быстрой маски, снова нажав иконку на панели инструментов. Пропала красная маска, появилась линия выделения.

К СОДЕРЖАНИЮ

Шаг 6. Копируем выделенное на новый слой. Применяем для этого сочетание клавиш Ctrl+J.

276 Шаг 7. Теперь можно залить нижний слой каким-нибудь цветом. Идем на вкладку Редактирование – Выполнить заливку. Проверяем, что стоим на нижнем слое.

К СОДЕРЖАНИЮ

Цвет заливки я выбрала песочный.

277

Шаг 8. Чтобы оттенить фотографию, придадим стиль слою с мальчиком. Два раза левой кнопкой мышки щелкаем по слою с фоткой и в выпавшем окне стилей слоя выбираемТень. Цвет, угол и размеры тени подбираем, глядя на экран.

Шаг 9.

К СОДЕРЖАНИЮ

Когда нижний слой, на котором лежит фигурная фотография однотонный, мне лично не очень нравится, поэтому я применила к слою Фильтр - Текстуризатор

Параметры фильтра подобрала опять же глядя на экран просмотра.

Шаг 10. В заключение объединяем слои в один. Правой кнопкой мышки щелкаем по слою и выбираем – Объединить видимые.

К СОДЕРЖАНИЮ

278

Любуемся результатом.

279

Урок подготовила для вас Марина Колесова.

К СОДЕРЖАНИЮ