—»     —»   Уроки Photoshop: Создаем трехмерную иконку дома в Фотошоп'е
  Раздел: Иконки, Образование и Изучение   Комментариев: 1  

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

В этой статье мы расскажем вам о том, как сделать иконку дома в 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мб)

Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: иконки, Photoshop
Опубликовал Mysterious Master   Прочитано (раз): 14357   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 ноября 2010 @ 22:33
Написал: Seo — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо! Очень хороший и полезный урок!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2019    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930