Главная > Иконки, Образование и Изучение > Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е


30 марта 2010, 18:55. Разместил: Mysterious Master
В этой статье мы расскажем вам о том, как сделать иконку дома в Adobe Photoshop. Мы концентрируем внимание, в основном, на гибком использовании стилей слоя, что позволяет нам придавать различным фигурам цвет, а также возможность изменять их в размерах, если потребуется. Все фигуры, использованные в статье очень просты, и вы с легкостью сможете сделать их при помощи инструментов создания фигур. Заранее скажем вам, что вы должны обладать хорошим навыком инструментов создания выделений и фигур, чтобы пройти некоторые этапы этой статьи.

Предпросмотр

Ознакомьтесь с тем, что мы сегодня будем делать в нашей статье.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 1: Настраиваем документ в Photoshop

Создайте новый документ 512х512 пикселей. Залейте фоновый слой серым оттенком (#A6A6A6) или любым цветом, который позволит нам отчетливо видеть то, что мы будем рисовать. Вообще, цвет этот не особо важен, так как вы все равно сможете его поменять в дальнейшем (или вообще убрать).

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 2: Рисуем левую стену дома

Выберите инструмент Pen и нарисуйте фигуру, как показано ниже.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Придайте стене цвет за счет применения стиля слоя - Gradient Overlay.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

А также не забудьте применить стиль Inner Shadow, чтобы придать некоторое ощущение глубины.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 3: Рисуем лицевую часть дома

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

И точно также, как в предыдущем этапе, примените стиль заливки градацией.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

И не забудьте применить внутреннюю тень.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 4: Создаем боковые панели

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

Передвиньте выделение на 10 пикселей вверх и залейте ее черным цветом.

С активным выделением, нажмите один раз стрелку вверх и затем на кнопку Delete. Это поможет нам оставить полоску в 1 пиксель.

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Далее, примените к слою стиль Drop Shadow так, чтобы в полосках получился внутренний эффект, который окончательно дополнит внешний вид панелей.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Измените режим смешивания слоя на Overlay и понизьте уровень прозрачности до 80%.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Теми же шагами сделайте такие же ребра на лицевой стороне дома. Убедитесь, что ребра на обеих стенах выровнены.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 5: Делаем крышу

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

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

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

Повторите это еще три раза, пока у вас не получится 5-пиксельный кусочек крыши.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Завершите крышу, дорисовав оставшуюся часть и придав ей тот же стиль, как и у остальной крыши.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 6: Придадим крыше эффект тени

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Залейте выделение коричневым/бежевым цветом (#9C8151).

Не снимая выделение, передвиньте выделение на 15 пикселей вниз и нажмите Delete.

Снимите выделение и примените фильтр Filter > Blur > Gaussian Blur со значением радиуса в 5 пикселей.

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 7: Создаем окна

Нарисуйте ручкой или инструментом создания многоугольников (Rectangle Tool) фигуру, похожую на окна. Если вы воспользовались инструментом создания многоугольников, то можете воспользоваться свободной трансформацией (Free TransformCTRL+T) для того, чтобы подогнать окошки под размер всего дома.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Зажмите CTRL и кликните по фигуре окна, чтобы создать выделение, а затем создайте новый слой.

Залейте выделение в новом слое коричневым цветом (#C2AE89).

Переместите выделение по направлению вверху и вправо, а затем нажмите Delete. Это придаст окну некоторую глубину.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Сделайте копию окна и поверните её горизонтально (Edit > Transform > Flip Horizontal).

Растяните дубликат окна по направлению вниз с помощью Free Transform, а затем воспользуйтесь инструментом перемещения для того чтобы сместить окно над домом (это будет окном для чердака).

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 8: Делаем дверь

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 9: Рисуем дверную ручку

Сейчас мы собираемся сделать дверную ручку, чтобы люди, живущие в нашем доме, смогли войти внутрь. Выдерите инструмент создания окружностей (Ellipse Tool) и создайте окружность, как показано на изображении. Зажмите Shift, чтобы окружность получалась равномерной.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 10: Рисуем крыльцо

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Примените к ней стили заливки градацией и внутреннюю тень (как мы уже делали в предыдущих этапах).

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Нарисуйте основу для ступенек, используя такую же технику, как и при создании основы для крыши. Делайте их примерно по 10 пикселей и заливайте темно-коричневым/древесным цветом (#78350B).

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Этап 11: Добавляем общую тень

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

После того, как вы создадите слой, сделайте выделение, как показано на картинке.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Теперь примените фильтр Filter > Blur > Gaussian Blur со значением радиуса в 1.5 пикселя.

И наконец, уменьшите его уровень прозрачности до 10%, или же по вашему усмотрению.

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

В заключение

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

Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е

Скачать исходники
* 3d_house_icon (ZIP, 0.22мб)

Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад