Логотипчик



Назад


Создание композиции из канцелярских кнопок и картинки в Adobe Photoshop

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

Для начала откроем какую-нибудь картинку в Adobe Photoshop (фотошопе). Пусть это будет такая фотография

Исходная картинка

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

Для начала уменьшим размер изображения. Для этого идем Изображение>>Размер изображения…

Вкладка для изменения размера изображения

Появиться окошко, в котором установим такие значения

Окно для параметров изменения размеров

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

Нажмем на кнопку Да и получим

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

Теперь увеличим размер холста. Не изображения, а именно холста. Для этого идем Изображение>>Размер холста…

Вкладка для изменения размеров холста

Появиться окно. Зададим значения параметров как на картинке

Окно для параметров холста

Нажмем на Да и получим такую картинку

Картинка после изменения размеров холста

2. Поставим на задний план какую-нибудь подходящую текстуру. Я выбрал такую

Выбранная текстура

Окончательно у нас получиться, как будто картинка прикреплена на фанеру канцелярскими кнопками.

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

Приведем результат работы на данном этапе

Текстура на заднем плане

Добавим к картинке небольшую тень. Для этого щелкнем по слою с картинкой. Появиться окно стилей слоя

Окно стилей слоя

Перейдем к пункту Тень и поставим значения параметров как на картинке

Вкладка для эффекта Тень

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

Первая кнопка

Вторая кнопка

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

Кнопка в файле с основной картинкой

Уменьшим размер кнопки. Для этого щелкнем по слою с кнопкой и выберем инструмент «Перемещение», тогда по периметру кнопки появиться сетка, с помощью которой можно уменьшить объект. Для сохранения пропорций зажмите клавишу Shift. Затем передвинем кнопку в необходимое место с помощью все того же инструмента «Перемещение»

Кнопка уменьшена и передвинута

Теперь повернем кнопку. Для этого идем Редактирование>>Трансформирование>>Наклон

Вкладка для инструмента Поворот

Появиться возможность для поворота кнопки. Повернем вот так

Кнопка повернута

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

Вкладка для эффекта Наложение градиента

Подберем цвета для градиента. Примерно вот так

Окно для подбора цветов градиента

Получим вот такую картинку, нажав два раза на кнопку Да

Добавлен слой для тени кнопки

Еще нужно наклонить тень и исказить ее, чтобы она была похожа на настоящую. Наклоним ее с помощью инструмента «Поворот», а инструментом «Перемещение» подвинем ее к острию кнопки

Слой с тенью повернут

Теперь исказим тень. Для этого идем Редактирование>>Трансформирование>>Искажение

Вкладка для инструмента Искажение

Получим вот так

Слой с тенью искажен

Для применения изменений нужно просто нажать на клавишу Enter. Еще передвинем слой с тенью от кнопки ниже слоя с самой кнопкой

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

Таким же образом поступим и со второй кнопкой. И окончательно получим

Окончательная композиция

4. Еще приведу вам мою работу с пазлов из одного прошлого урока

Пазл с кнопками

Только здесь кнопки имеют совсем простую структуру.



К верху страницы


<- К предыдущей статье   К следующей статье ->

Низ сайта