Что можно нарисовать в фотошопе: 225+ уроков Photoshop для начинающих от профессионалов

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

В этом уроке мы будем рисовать реалистичную слезу в Adobe Photoshop.

Пример HTML-страницы

Шаг 1.

Работаем с изображением

Откройте фото в  Adobe Photoshop. Выбирайте модель с грустным выражением лица (не улыбающуюся или смеющуюся и т.п.). Для начала нужно увеличить красноту глаз.
Создайте новый слой (Ctrl + Shift + N) и возьмите Инструмент Кисть – Brush Tool (B), мягкую кисть цвета #4b241c, и закрасьте области в белках глаз, как показано на рисунке. Измените режим наложения этого слоя на Перекрытие (Overlay) с Непрозрачностью (Opacity) 100%.

Шаг 2.

Работаем с изображением

Когда человек плачет, сосуды глазного яблока выделяются больше, чем обычно. Создайте новый слой (Ctrl + Shift + N) и снова возьмите Инструмент Кисть – Brush Tool (B), но уже жесткую кисть цвета #aa6555, размер примерно 2-3 пикселя (это зависит от исходного размера вашего изображения). Нарисуйте красные сосуды.

Шаг 3.

Работаем с изображением

Далее создайте новый слой (Ctrl + Shift + N) и возьмите Кисть – Brush Tool (B) цвета #e6d1c8, поставьте значения Непрозрачность (Opacity) и Нажим (Flow) 10-15% и закрасьте область в нижней части правого глаза (правого с вашей позиции). Измените режим наложения слоя на Перекрытие (Overlay) с Непрозрачностью (Opacity) 100%, чтобы глаз выглядел влажным.

Шаг 4.

Работаем с изображением

Создайте новый слой (Ctrl + Shift + N) и возьмите Инструмент Лассо — Lasso Tool (L), чтобы сделать основу формы слезы. Залейте форму цветом #e6d1c8.

Измените режим наложения этого слоя на Перекрытие (Overlay) с Непрозрачностью (Opacity) 100%.

Шаг 5.

Работаем с изображением

Далее добавьте маску слою со слезой: кликните на иконку Добавить маску слоя (Add layer mask) внизу панели слоев. Используйте мягкую черную

Кисть – Brush Tool (B), чтобы смягчить край слезы и сделать ее реалистичней.

Шаг 6.

Работаем с изображением

Важно помнить, что у слезы есть объем и тень. Определение источника света поможет вам узнать, где нужно нарисовать тень. На этом фото свет падает справа налево, поэтому тень должна быть слева.

Создайте новый слой (Ctrl + Shift + N) и возьмите мягкую Кисть – Brush Tool (B) цвета #cca396. Уменьшите Непрозрачность (Opacity) кисти до 20-30% и нарисуйте тонкую тень. Тень должна быть мягкой и едва заметной, иначе она будет выглядеть ненатурально.

Шаг 7.

Работаем с изображением

Используйте ту же кисть, чтобы нарисовать внутри слезы детали для придания ей объема. Измените режим наложения слоя на Умножение (Multiply) с Непрозрачностью (Opacity) 60%:

Шаг 8.

Работаем с изображением

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

Используйте мягкую Кисть – Brush Tool (B) цвета #e6d1c8. Затем измените режим наложения этого слоя на Осветление основы (Color Dodge) с Непрозрачностью (Opacity) 100%:

Шаг 9.

Работаем с изображением

Возьмите ту же кисть, чтобы нарисовать блик в районе зрачка и по всей длине слезы. Уменьшение размера кисти, использование стилуса (или пера планшета), а также масштабирование позволят вам достичь наилучшего результата. Затем измените режим наложения слоя на Осветление основы (Color Dodge) с Непрозрачностью (Opacity) 100%:

Шаг 10.

Финальное изображение

Поздавляем!

Надеюсь, вам понравился этот урок.

Ссылка на источник

Пример HTML-страницы

Как нарисовать волосы в Adobe Photoshop

2021-10-14

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

• Как рисовать прически в Adobe Photoshop — основные принципы создания коротких волос
  • Как красиво нарисовать волосы? Следуйте направлению
  • Как рисовать волосы в фотошопе? Бросьте себе вызов
  • Как добавить волосы в фотошопе? Выберите правильное фото волос
• Как нарисовать волосы человека — какие кисти использовать
  • Как дорисовать волосы в фотошопе — пользовательские кисти волос и шаблоны
• Как нарисовать короткие волосы: Помпадур
  • Шаг 1
  • Шаг 2
  • Шаг 3
  • Шаг 4
  • Шаг 5
  • Шаг 6
  • Шаг 7
• Как нарисовать короткие волосы: прическа с завитыми локонами
  • Шаг 1
  • Шаг 2
  • Шаг 3
  • Шаг 4
  • Шаг 5
  • Шаг 6
• Как нарисовать бороду на лице с помощью Adobe Photoshop
  • Как рисовать бороду в Adobe Photoshop — шаг 1
  • Как рисовать щетину в Adobe Photoshop — шаг 2
  • Шаг 3
  • Шаг 4
  • Шаг 5
  • Шаг 6
• Заключение

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

Что мы будем создавать

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

Рассмотрим этот принцип на практике:

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

Попытайтесь нарисовать волосы, которые вы раньше не рискнули бы изобразить, и изучите различные узоры локонов, которые будут выглядеть интересно:

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

• Прическа Помпадур;
• Короткая стрижка;
• Борода.

Я буду использовать кисти из списка пресетов кистей Adobe Photoshop. С помощью базовой круглой кисти можно нарисовать много чего. Поэкспериментируйте со значениями «Жесткости» кистей для прически волос в Фотошопе, чтобы получить мягкие или жесткие края для нужных эффектов:

Жесткость кисти — 0% (вверху) и Жесткость кисти — 100% (внизу)

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

Убедитесь, что для параметра «Непрозрачность» установлен «Нажим», что сделает кисть еще более универсальной

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

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

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

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

Обратите внимание, что сверху волосы зачесаны назад, а по бокам они направлены вниз:

Нанесите сплошной коричневый цвет для основы. Разместите этот слой под слоем наброска. Установите новый слой в качестве «Обтравочной маски» для основы, и измените его режим наложения на «Умножение». На этом новом слое нарисуйте тени, используя оттенки того же коричневого цвета:

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

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

Можно убрать черные жесткие штрихи наброска, смешав их с цветными частями. Для этого установите для слоя наброска режим наложения «Перекрытие». Затем добавьте новый слой и задайте для него режим «Линейный осветлитель». Создайте светлые области лица, зарисовав области вокруг них кистями волос для Фотошопа светло-бежевым цветом:

Скорректируйте цвет волос с помощью корректирующего слоя. Перейдите в Слой> Новый корректирующий слой> Цветовой баланс и настройте параметры корректирующего слоя таким образом, чтобы углубить красный, синий и пурпурный оттенки волос:

Теперь, когда мы скорректировали цвета, на следующем этапе сделайте мелкие детали четче. Задайте кисти для прорисовки волос в Фотошопе жесткость 100% и прорисуйте дуги, которые будут представлять собой линии волос:

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

Вот как будет выглядеть законченная прическа Помпадур!

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

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

Теперь нанесите базовые цвета. Наносите каждый цвет на отдельном слое. Используйте их в качестве обтравочной маски, чтобы создать тени. Снова установите режим наложения для слоев теней на «Умножение» и используйте, те же цвета, которыми вы наносили основу, чтобы нарисовать тени:

Уменьшите непрозрачность слоя наброска до 25%. Создайте два новых слоя, для одного установите режим наложения «Перекрытие», а для второго – «Осветление основы». На первом слое нарисуйте яркие голубые блики. А затем нарисуйте области розовых отблесков на волосах, чтобы получить интересный эффект:

Уменьшите размер кисти для Фотошопа волосы пряди до 5 пикселей и установите жесткость — 100%. Раскрасьте пряди, соблюдая направление каждой из них. Постарайтесь не упустить из виду, какие части прядей накладываются друг на друга, и не забывайте удалять выходящие за границы прядей области:

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

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

Вот готовое изображение прически с завитыми локонами.

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

Борода для фотошопа — я использовал это изображение для примера. Начните с предварительного наброска, обращая особое внимание на направление волос. В данном случае мы должны помнить, что волосы направлены вниз:

Отрегулируйте базовые цвета и уменьшите «Непрозрачность» слоя наброска до 20%. С помощью мягкой круглой кисти нарисуйте на новом слое тени и установите для этого слоя режим наложения «Умножение». Цвет волос на лице зависит от тона кожи, поэтому убедитесь, что вы гармонично смешали участки кожи и примыкающие к ним участки бороды и усов:

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

Добавьте новый слой и установите для него режим наложения «Перекрытие». Установите белый в качестве цвета переднего плана и нарисуйте светлые блики. Светлых бликов должно быть больше в верхней части, где света на бороду падает больше. Отрегулируйте тона кожи, чтобы они выглядели естественно:

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

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

Вот окончательный результат. Не бойтесь добавить больше деталей лица или блеска бороды.

Чтобы создать реалистичные, «живые» волосы, нужно обращать внимание на то, как они двигаются и взаимодействуют со светом. Овладев этими приемами, вы сможете быстро создавать эффектные волосы!

Пожалуйста, оставляйте ваши мнения по текущей теме статьи. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «How to Paint Realistic Hair in Adobe Photoshop Short Hair & Beards»

Как рисовать здания в Photoshop CS5 | Малый бизнес

Дэвид Видмарк

Вы можете использовать инструменты формы в Adobe Photoshop, чтобы рисовать свои собственные здания и добавлять их к другим изображениям или использовать их отдельно. Это делается путем рисования ряда прямоугольников для стен, окон и дверей. Вы можете добавить перспективу к зданию, используя функцию «Преобразование перспективы», чтобы сторона здания казалась отступающей. Используйте разные тона при выборе цвета одной стены по сравнению с другой, чтобы имитировать разницу в свете и тени.

Рисование стен

1. Откройте новый документ в Adobe Photoshop.

2. Выберите инструмент «Прямоугольник» на панели инструментов. Выберите «Заполнить пиксели» на панели параметров, чтобы каждую фигуру можно было редактировать отдельно на отдельном слое. Щелкните значок «Цвет переднего плана», чтобы открыть «Палитру цветов». Выберите цвет стены и нажмите «ОК».

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

4. Щелкните значок «Цвет переднего плана». В палитре цветов появится кружок, показывающий цвет, который вы только что использовали. Нажмите на точку чуть ниже этого цвета, чтобы выбрать более темный оттенок. Это создаст впечатление, что сторона здания находится в тени.

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

6. Щелкните меню «Слой» и выберите «Объединить видимые», когда вас устраивают стены.

Добавление окон и дверей

1. Щелкните значок «Цвет переднего плана» на панели инструментов и выберите светло-серый цвет для окон в передней части здания.

2. Выберите инструмент «Прямоугольник» и нарисуйте маленькое окошко в правом верхнем углу передней стены.

3. Нажмите «Ctrl-A» на клавиатуре, чтобы выбрать окно, затем «Ctrl-C», чтобы скопировать его. Нажмите «Ctl-V», чтобы вставить копию. Перетащите новое окно в верхний левый угол передней стены. Нажмите «Ctrl-V», чтобы вставить дополнительные копии окна и перетащите их на место по мере необходимости.

4. Нажмите «Ctrl-V», чтобы вставить окно сбоку от здания. Выберите «Paint Bucket Tool» на панели инструментов. Щелкните значок «Цвет переднего плана» и выберите серый цвет, немного темнее, чем тот, который вы использовали для передних окон. Нажмите на окно, чтобы изменить его цвет.

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

6. Добавить окно под первым боковым окном. Скопируйте боковое окно, нажав «Ctrl-A», затем «Ctrl-C». Вставьте копию окна, нажав «Ctrl-V», и переместите новое окно на место под первым.

7. Добавьте окно справа от первого бокового окна, нажав «Ctrl-V» и перетащив его на место. Выберите «Преобразование» в меню «Файл» и нажмите «Масштаб». Удерживайте нажатой клавишу «Shift», чтобы сохранить пропорции, и перетащите верхний и нижний углы, пока левая сторона окна не станет той же длины, что и правая сторона первого окна.

8. Добавьте окно под последним окном, нажав «Ctrl-A», «Ctrl-C», затем «Ctrl-V». Перетащите окно на его место под последним окном.

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

Справочные материалы

• Adobe: Photoshop CS5: создание фигуры на слое формы
• Adobe: Photoshop CS5: преобразование объектов
• Adobe: Photoshop CS5: выбор цвета с помощью палитры цветов Adobe
Writer

Публикуемый автор и профессиональный оратор Дэвид Уидмарк более 20 лет консультирует предприятия и правительства по вопросам технологий, средств массовой информации и маркетинга. Он преподавал информатику в Алгонкинском колледже, основал три успешных предприятия и написал сотни статей для газет и журналов Канады и США.

Как нарисовать реалистичный мобильный телефон в Photoshop

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

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

Шаг 1: Определение источника света

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

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

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

Шаг 2: Рисование базовой формы

Приступим к рисованию. Сначала в Photoshop создайте новый документ (Ctrl/Cmd + N) с шириной 500 пикселей и высотой 1000 пикселей.

Начните с рисования основной формы мобильного телефона.

Обычно проще начать с рисования предопределенной базовой формы, такой как прямоугольник, эллипс или звезда, а затем отредактировать ее вручную с помощью инструмента «Перо» (P). В этом случае основной формой является прямоугольник со скругленными углами. Нарисуйте прямоугольник со скругленными углами Инструментом «Прямоугольник со скругленными углами» (U) с радиусом 10 пикселей и серым цветом (#acacac).

Инструментом «Перо» (P) создайте 4 дополнительные опорные точки, щелкнув по контуру фигуры в середине каждой стороны.

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

Нажмите Ctrl/Cmd + T, чтобы активировать команду Free Transform для выбранных точек.

Удерживая Alt, переместите их внутрь.

Повторите тот же процесс для нижней части базовой формы.

Примечание: Мы будем использовать эту технику довольно часто в этом уроке, поэтому лучше освоить ее сейчас.

Шаг 3: Добавление стилей слоя для 3D-эффекта

После создания базовой формы нам нужно добавить несколько стилей слоя к ее слою, чтобы придать ему реалистичный вид. Мы добавим внутреннюю тень, внутреннее свечение и наложение градиента. Эти стили слоя добавят 3D-эффект к фигуре.

Чтобы применить стили слоя, дважды щелкните слой на панели слоев, после чего откроется диалоговое окно «Стили слоя».

Внутренняя тень

Внутреннее свечение

Наложение градиента

Шаг 4. Нарисуйте внутреннюю область мобильного телефона

Используйте инструмент «Прямоугольник со скругленными углами» (U) в сочетании с командой «Свободное преобразование», чтобы нарисовать внутреннюю форму. Используйте ту же технику, которую мы использовали для рисования базовой формы. Обязательно удалите заливку этой фигуры, щелкнув правой кнопкой мыши внутри ее контура на холсте, выбрав «Параметры наложения» в контекстном меню, затем в разделе «Расширенное наложение» уменьшив непрозрачность заливки до 0%.

Мы создадим впечатление, будто внутренняя область вдавлена ​​в базовую форму.

Мы можем сделать это, присвоив этому слою стиль слоя Bevel and Emboss и стиль слоя Gradient Overlay.

Скос и тиснение

Наложение градиента

Шаг 5. Дублирование внутренней формы до 95% исходного размера с помощью Edit > Transform Path > Scale. Вы также можете сделать это от руки с помощью Free Transform (Ctrl/Cmd + T), насколько точным вы хотите быть, зависит только от вас.

Примените к нашей дублированной внутренней форме Outer Glow и Gradient Overlay (вы уже знаете упражнение).

Не забудьте настроить параметры стилей слоя, чтобы они соответствовали направлению нашего источника света. Шаг 6: Создайте правую кнопку Используйте инструмент «Перо» (P), но переключите режим на «Пути» и используйте параметр «Пересечение областей пути» на панели параметров (это избавляет нас от необходимости быть очень точным на краю внутренней формы).

Инструментом «Перо» нарисуйте контур, представляющий правую кнопку на самом последнем продублированном слое.

Затем примените Outer Glow, Bevel and Emboss и Gradient Overlay.

Внешнее свечение

Скос и тиснение

Наложение градиента

Шаг 7: Дублируйте кнопку

Дублируйте форму кнопки. Примените к нему Свободное преобразование, нажав Ctrl/Cmd + T.

Внутри блока управления преобразованием щелкните правой кнопкой мыши и выберите в меню Масштаб. Измените размер дублированной кнопки на 9.5%.

К дублированной кнопке, которую мы уменьшили, добавьте стиль слоя Outer Glow и стиль слоя Bevel and Emboss.

Внешнее свечение

Скос и тиснение

Шаг 8. Создание второй внутренней формы

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

С помощью инструмента «Перо» (P) нарисуйте дугообразный путь и убедитесь, что для инструмента «Перо» выбран параметр «Пересекать области пути».

Примените ко второй внутренней области стиль слоя Outer Glow и стиль слоя Bevel and Emboss. Шаг 9. Дублируйте вторую внутреннюю форму Установите его цвет заливки на черный (#000000) и уменьшите непрозрачность заливки до 40%, чтобы он казался темнее своего фона, но также позволял просвечивать градиентное наложение фигуры под ним.

Придайте дублированной форме Bevel and Emboss и Outer Glow. Шаг 10: Создание фона для центральных кнопок кнопки. Во-первых, продублируйте фигуру из предыдущего шага.

Инструментом «Прямоугольник» (U) создайте прямоугольный контур внизу (не забудьте выбрать параметр «Пересекать пути»).

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

Примените к этой фигуре стиль слоя Bevel and Emboss.

Шаг 11: Создайте экран мобильного телефона

Используйте инструмент «Прямоугольник», чтобы нарисовать форму экрана. У него не должно быть заливки.

Задайте три стиля слоя: Bevel and Emboss, Inner Shadow и Color Overlay.

Скос и тиснение

Внутренняя тень

Цветное наложение

Шаг 12. Нарисуйте главную кнопку

Нарисуйте дугу с помощью инструмента «Перо», как показано ниже.

Примените к этой фигуре стиль слоя Bevel and Emboss и стиль слоя Gradient Overlay.

Скос и тиснение

Наложение градиента

Шаг 13. Нарисуйте левую кнопку

Над основной кнопкой создайте другую форму кнопки.

Мы будем использовать те же стили слоя, что и для основной кнопки (Bevel and Emboss и Gradient Overlay).

Bevel and Emboss

Gradient Overlay

Шаг 14. Создайте правую кнопку Отразить по горизонтали в появившемся меню. После этого используйте инструмент Move Tool (T), чтобы переместить его вправо.

Шаг 15. Нарисуйте фон навигации с помощью джойстика

Нарисуйте круг в середине главной кнопки с помощью инструмента «Эллипс» (U).

Удерживайте Shift, чтобы сделать идеальный круг.

Придайте фону джойстика стиль слоя Bevel and Emboss.

Шаг 16: Нарисуйте джойстик

Нарисуйте другой круг (или просто скопируйте фон джойстика, уменьшите его и измените цвет).

Назначьте джойстику Bevel and Emboss и Gradient Overlay.

Скос и тиснение

Градиентное наложение

Шаг 17: Нарисуйте значки кнопок

Просто нарисуйте простые многоугольники на каждой кнопке с помощью Pen Tool (P). Не стесняйтесь заменять их собственной формой.

Шаг 18: Нарисуйте подсветку нижнего угла

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

Преобразуйте этот путь в выделение, щелкнув правой кнопкой мыши внутри пути и выбрав Сделать выделение (или просто нажав Ctrl/Cmd + Enter).

Создайте новый слой и залейте (Редактирование > Заливка или Shift + F5) выделение белым цветом (#ffffff) на этом новом слое.

Снимите выделение (Ctrl/Cmd + D), а затем примените фильтр размытия по Гауссу (Фильтр > Размытие > Размытие по Гауссу) с радиусом 5 пикселей.

Шаг 19: Создайте блик левого нижнего угла

Просто продублируйте слой с бликом, который мы только что нарисовали, и отразите его по горизонтали (Edit > Transform > Flip Horizontal). Поместите перевернутый блик на противоположную сторону с помощью Move Tool (V).

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

Шаг 20: Создайте темное пятно в левом углу

Создайте новый слой для темных пятен в нижних углах.

Инструментом «Кисть» (B) нарисуйте темное пятно в левом нижнем углу и уменьшите непрозрачность слоя примерно до 20%.

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

Шаг 21: Нарисуйте динамик

Нарисуйте динамик в форме полумесяца, используя два эллипса и Инструмент «Эллипс» (U). Смотрите изображение ниже, чтобы помочь вам.

Установите Непрозрачность на 100% и Заливку на 0% и выберите опцию Вычесть из области контура.

Придайте форме динамика Bevel and Emboss, Inner Shadow и Gradient Overlay.

Bevel and Emboss

Inner Shadow

Gradient Overlay

Шаг 22: Создайте шаблон Photoshop для заливки динамика

Давайте создадим шаблон для внутренней части динамика. Для начала создайте новый документ Photoshop размером 32x40px.

Используйте Zoom Tool (Z), чтобы увеличить масштаб очень близко к холсту. Нарисуйте черный круг в правом верхнем углу.

Дублируйте круг и поместите его в нижний левый угол.

Сохраните шаблон, выделив область холста (Ctrl/Cmd + A) и выбрав Правка > Определить шаблон. Я назвал наш шаблон «2 точки», но не стесняйтесь называть его как хотите.

Шаг 23: Примените шаблон «2 точки»

Вернитесь к слою динамика. Дважды щелкните слой, чтобы открыть диалоговое окно «Стили слоя».

Добавьте стиль слоя Pattern Overlay, выбрав узор «2 точки», который мы создали, из выпадающего меню Pattern.

Шаг 24: Добавьте имя мобильного телефона

Мы не будем придумывать имя нашего мобильного телефона. Просто используйте Horizontal Type Tool (T), чтобы написать простой текстовый блок для марки сотового телефона (в моем случае я просто назвал его «CELLPHONE»).

Шаг 25: Рисование значка «Подключение»

Помните кнопку, которую мы нарисовали на левой стороне телефона? Мы вернемся к нему и дадим ему значок.

Начните с создания маленького прямоугольника со скругленными углами с помощью инструмента Rounded Rectangle Tool (U).

Дублируйте контур и переместите его на несколько пикселей вниз и вправо. Преобразуйте размер дублированного пути примерно до 95% от оригинала и выберите параметр «Вычесть из области пути».

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

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

Дублируйте фигуру, отразите ее по горизонтали (Edit > Transform > Flip Horizontal), а затем отразите по вертикали (Edit > Transform > Flip Vertical).

Переместите эту кнопку поверх левой боковой кнопки. Используйте Free Transform, чтобы правильно наклонить его.

Шаг 26: Нарисуйте кнопку питания

Инструментом Rounded Rectangle Tool нарисуйте прямоугольник со скругленными углами, который проходит через верхнюю часть мобильного телефона.

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

Нарисуйте треугольный контур и выберите параметр «Вычесть из контура», чтобы сделать углубление в верхней части мобильного телефона.

Примените стиль слоя «Внутренняя тень» и стиль слоя «Скос и тиснение», чтобы придать 3D-эффект.

Внутренняя тень

Скос и тиснение

Шаг 27: Нарисуйте основу клавиатуры

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

Инструментом «Прямоугольник со скругленными углами» нарисуйте прямоугольник со скругленными углами в основании нашего мобильного телефона.

Используйте инструмент «Перо», чтобы изменить опорные точки прямоугольника со скругленными углами, чтобы получить форму, изображенную на изображении ниже.

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

Внутренняя тень

Скос и тиснение

Шаг 28: Дублирование базовой формы клавиатуры

Далее нам нужно создать внутреннюю область клавиатуры. Начните с дублирования базовой формы, а затем преобразуйте копию в меньший размер (около 80% от исходного размера). Также измените его цвет на #080808.

Добавьте стиль слоя «Внутренняя тень» и стиль слоя «Обводка».

Внутренняя тень

Обводка

Шаг 29: Создайте вторую внутреннюю форму клавиатуры

Дублируйте предыдущую форму, затем уменьшите ее размер.

Измените цвет на #323131.

Придайте второй внутренней форме Обводку и Внутреннюю Тень.

Обводка

Внутренняя тень

Шаг 30: Нарисуйте углубление внизу клавиатуры

Дублируйте вторую внутреннюю форму. Нарисуйте прямоугольный путь со скругленными углами в центре внизу и выберите параметр «Пересекать области пути».

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

Шаг 31: Нарисуйте основу клавиши

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

Примените к этой фигуре стиль слоя Bevel and Emboss.

Шаг 32: Создайте внутреннюю область кнопки

Дублируйте форму, которую мы только что создали, и уменьшите ее размер до 95% от исходного размера.

Измените цвет на #606060.

Добавьте к нему стиль слоя Bevel and Emboss, чтобы придать ему 3D-эффект.

Используйте Horizontal Type Tool (T), чтобы напечатать несколько букв на клавише.

Шаг 33: Дублируйте ключ

Созданный нами дубликат фигуры, нажмите Ctrl/Cmd + T, чтобы активировать Свободное преобразование, щелкните правой кнопкой мыши внутри поля преобразования и выберите Отразить по горизонтали. Переместите это на другую сторону клавиатуры, а также добавьте другую букву с помощью Horizontal Type Tool (T).

Шаг 34: Нарисуйте больше клавиш

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

Шаг 35. Придайте текстуру мобильному телефону

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

Чтобы сделать нашу работу максимально реалистичной, нам нужно добавить эти недостатки в наш дизайн.

Удерживая нажатой клавишу Ctrl/Cmd, щелкните миниатюру каждого слоя на панели слоев, пока вокруг мобильного телефона не появится выделение.

Создайте новый слой над всеми остальными слоями и залейте его (Shift + F5) черным цветом (#000000).

Выберите «Фильтр» > «Шум» > «Добавить шум».

После применения фильтра переключите режим наложения на Экран и уменьшите непрозрачность слоя до 80%.

Шаг 36: Уменьшите шум на экране мобильного телефона

Нам не нужно, чтобы текстура шума была слишком — скажем так, «шумной» — на экране нашего мобильного телефона.

Для этого обязательно выберите слой с шумом, а затем щелкните значок «Добавить слой-маску» в нижней части панели «Слои». Используйте Rectangular Marquee Tool (M), чтобы выделить экран мобильного телефона. Перейдите в Edit > Fill и в опции Use выберите 50% Gray.

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

Разница тонкая, но важная.

Шаг 37: Создайте тень

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

Залейте выделение на новом слое черным цветом.

Инструментом «Перемещение» (V) сдвиньте залитое выделение вниз и влево (потому что наш источник света находится в верхнем правом углу).