Предпросмотр
Ознакомьтесь с тем, что мы сегодня будем делать в нашей статье.
Этап 1: Настраиваем документ в Photoshop
Создайте новый документ 512х512 пикселей. Залейте фоновый слой серым оттенком (#A6A6A6) или любым цветом, который позволит нам отчетливо видеть то, что мы будем рисовать. Вообще, цвет этот не особо важен, так как вы все равно сможете его поменять в дальнейшем (или вообще убрать).
Этап 2: Рисуем левую стену дома
Выберите инструмент Pen и нарисуйте фигуру, как показано ниже.
Придайте стене цвет за счет применения стиля слоя - Gradient Overlay.
А также не забудьте применить стиль Inner Shadow, чтобы придать некоторое ощущение глубины.
Этап 3: Рисуем лицевую часть дома
При помощи той же ручки, нарисуйте еще одну фигуру, которая будет олицетворять лицевую часть дома.
И точно также, как в предыдущем этапе, примените стиль заливки градацией.
И не забудьте применить внутреннюю тень.
Этап 4: Создаем боковые панели
Для того чтобы привнести нечто привлекательное в нашу иконку, мы добавим к дому боковые панели. Для начала, создайте новый слой, а затем зажмите CTRL и кликните по левой боковой панели дома, чтобы создать выделение вокруг нее.
Передвиньте выделение на 10 пикселей вверх и залейте ее черным цветом.
С активным выделением, нажмите один раз стрелку вверх и затем на кнопку Delete. Это поможет нам оставить полоску в 1 пиксель.
Сделайте несколько таких полосок на этом же слое по направлению вверх, но не забывайте оставлять одинаковые промежутки в примерно 20 пикселей.
Далее, примените к слою стиль Drop Shadow так, чтобы в полосках получился внутренний эффект, который окончательно дополнит внешний вид панелей.
Измените режим смешивания слоя на Overlay и понизьте уровень прозрачности до 80%.
Теми же шагами сделайте такие же ребра на лицевой стороне дома. Убедитесь, что ребра на обеих стенах выровнены.
Этап 5: Делаем крышу
Время перейти к укладке крыши. Первое, что нужно сделать – нарисовать фигуру крыши, как показано на изображении, при помощи ручки.
Для того, чтобы придать крыше коричневый/красноватый цвет, примените стиль слоя заливки градацией к слою с фигурой.
Для того, чтобы крыша выглядела более объемно, примените стиль внутренней тени и внутреннего свечения.
Далее, нам нужно сделать основу крыши. Создайте новый слой и расположите его под слоем с крышей.
Зажмите Ctrl и кликайте по слою с фигурой крыши, затем переместите выделение на 1 пиксель вниз и залейте его черным цветом.
Не снимая выделение, передвиньте его дальше на 1 пиксель вниз, и опять залейте черным цветом.
Повторите это еще три раза, пока у вас не получится 5-пиксельный кусочек крыши.
И наконец, примените стиль слоя заливки градацией темных цветов, что придаст основанию крыши эффект более реалистичного освещения.
Завершите крышу, дорисовав оставшуюся часть и придав ей тот же стиль, как и у остальной крыши.
Этап 6: Придадим крыше эффект тени
Теперь можно добавить тень на стенах от крыши. Для этого, создайте новый слой и загрузите выделение, как показано на картинке при помощи наиболее удобного вам инструмента (мы посоветуем воспользоваться инструментом Polygonal Lasso).
Залейте выделение коричневым/бежевым цветом (#9C8151).
Не снимая выделение, передвиньте выделение на 15 пикселей вниз и нажмите Delete.
Снимите выделение и примените фильтр Filter > Blur > Gaussian Blur со значением радиуса в 5 пикселей.
Понизьте уровень прозрачности слоя до 50%, передвиньте его вверх и удалите области, которые выходят за пределы стен, используя инструменты на ваше усмотрение.
Этап 7: Создаем окна
Нарисуйте ручкой или инструментом создания многоугольников (Rectangle Tool) фигуру, похожую на окна. Если вы воспользовались инструментом создания многоугольников, то можете воспользоваться свободной трансформацией (Free Transform – CTRL+T) для того, чтобы подогнать окошки под размер всего дома.
Затем, примените стиль слоя заливки градацией, используя соответствующие цвета для окон.
А также, не забудьте применить стиль внутренней тени и внутреннего свечения, что придаст окнам ощущение глубины.
Для того, чтобы наши окошки выглядели более интересными, мы сделаем небольшой эффект отражения. Добавьте отражение, как показано на картинке. Для того чтобы сделать это, нарисуйте фигуру отражения и затем используйте инструмент заливки градацией с применением цветов от белого к прозрачному.
Зажмите CTRL и кликните по фигуре окна, чтобы создать выделение, а затем создайте новый слой.
Залейте выделение в новом слое коричневым цветом (#C2AE89).
Переместите выделение по направлению вверху и вправо, а затем нажмите Delete. Это придаст окну некоторую глубину.
Сделайте копию окна и поверните её горизонтально (Edit > Transform > Flip Horizontal).
Растяните дубликат окна по направлению вниз с помощью Free Transform, а затем воспользуйтесь инструментом перемещения для того чтобы сместить окно над домом (это будет окном для чердака).
Этап 8: Делаем дверь
Сейчас мы приступаем к созданию двери в основной стене дома. Используйте ручку и нарисуйте фигуру, олицетворяющую дверь.
Воспользуйтесь инструментом заливки градацией для того, чтобы придать двери коричневый/древесный цвет.
Примените к двери стиль слоя Stroke для того, чтобы по краям получился некоторый эффект глубины.
А также, примените стиль внутренней тени, чтобы дверь обрела трехмерный вид.
Также как и в этапе с окнами, нам нужно придать двери некоторый реалистичный вид. Для этого, создайте полоску в 7 пикселей точно также, как вы делали для окон.
Этап 9: Рисуем дверную ручку
Сейчас мы собираемся сделать дверную ручку, чтобы люди, живущие в нашем доме, смогли войти внутрь. Выдерите инструмент создания окружностей (Ellipse Tool) и создайте окружность, как показано на изображении. Зажмите Shift, чтобы окружность получалась равномерной.
Для того чтобы придать ручке золотой отблеск, мы воспользуемся инструментом заливки градацией, так же, как мы делали в остальных этапах нашей статьи.
Примените стиль слоя отбрасывания тени для того, чтобы придать ручке некоторое ощущение глубины.
Этап 10: Рисуем крыльцо
Для того чтобы мы могли завершить работу над лицевой стороной нашего дома, нам нужно создать крыльцо. Воспользуйтесь ручкой или инструментом создания окружности, вместе со свободной трансформацией для того, чтобы сделать верхнюю ступеньку.
Примените к ней стили заливки градацией и внутреннюю тень (как мы уже делали в предыдущих этапах).
Нарисуйте основу для ступенек, используя такую же технику, как и при создании основы для крыши. Делайте их примерно по 10 пикселей и заливайте темно-коричневым/древесным цветом (#78350B).
Этап 11: Добавляем общую тень
Для того чтобы завершить нашу иконку, нам нужно придать тень к ее общему виду. Создайте новый слой и расположите его под всеми остальными слоями (за исключением фонового слоя).
После того, как вы создадите слой, сделайте выделение, как показано на картинке.
Передвиньте выделение на 3 пикселя вниз и залейте его черным цветом. Не убирая выделения, передвиньте его на 4 пикселя вверх и нажмите Delete.
Теперь примените фильтр Filter > Blur > Gaussian Blur со значением радиуса в 1.5 пикселя.
И наконец, уменьшите его уровень прозрачности до 10%, или же по вашему усмотрению.
В заключение
В этой статье вы обучились созданию иконки в приложении Photoshop. Мы пользовались ручкой и различными инструментами для создания фигур и различных деталей домика. Мы пользовались различными стилями слоев для того, чтобы придать цвет и улучшить внешний вид всей иконки. А также мы руководствовались некоторыми методами создания выделений вручную для некоторых частей дома. Надеемся, что вы научились всему этому, изучив нашу статью.
Скачать исходники
* 3d_house_icon (ZIP, 0.22мб)
Внимание! У вас нет прав для просмотра скрытого текста.
