Уроки Photoshop » Рубрика: Дизайн/Рисование
В этом уроке я покажу вам, как нарисовать реалистичную компьютерную мышь в программе Photoshop. Использование стилей слоя – является ключевым в данном уроке, в частности это касается градиентов, теней и свечения. Для выполнения данного урока уйдёт немного больше времени, чем я предполагал.
Итоговый результат
Шаг 1
Мы начнём с создания нового документа 800 х 900 px, разрешение примерно 200 dpi. Вы можете выбрать инструмент Перо (Pen Tool (P), но для себя, я выбрал инструмент Свободное перо (Freeform Pen Tool), хотя вам будет лучше выбрать инструмент Перо (Pen Tool) для более точного выделения. В этом уроке, я просто хотел продемонстрировать, что, независимо от того, какую фигуру вы рисуете с зазубринами или неопределенной формы, вы можете использовать любой вариант инструмента Перо (Pen Tool), чтобы с лёгкостью нарисовать любую желаемую форму, имеющую прямые и плавные линии.
Выбрав инструмент Перо (Pen Tool) или Свободное перо (Freeform Pen Tool), в настройках инструмента, выберите опцию Контуры (Paths). Сейчас мы нарисуем верхнюю часть мышки (как я уже говорил ранее, инструмент Перо (Pen Tool) будет проще в использовании для тех, кто не обладает твёрдой рукой).
Шаг 2
В подменю инструмента Перо Добавить опорную точку (Add Anchor Point Tool), чтобы добавить опорные точки в нужных местах. Вы можете использовать мышку или клавиши управления со стрелками для непрерывного перемещения этих точек.
Шаг 3
Для создания кривых, опорные точки имеют дополнительные направляющие точки. Данные направляющие точки можно потянуть вовнутрь или наружу, чтобы создать кривые линии.
Шаг 4
Мышка начинает приобретать форму. Увеличьте масштаб (Ctrl+/-), чтобы посмотреть насколько ровными и круглыми стали углы мышки, а также провести коррекцию опорных точек, путём смещения точек верх или вниз, где это потребуется.
Шаг 5
Шаг 6
Шаг 7
Выберите инструмент Заливка (Paint Bucket Tool (G), залейте фигуру любым цветовым оттенком, т.к. цвет в данный момент не играет значения. Вы можете назвать этот слой “верхняя часть мышки”.
Шаг 8
Дважды щёлкните по слою “верхняя часть мышки”, чтобы появилось окно Стилей слоя (Layer style). Выберите опцию Наложение градиента (Gradient Overlay). Установите цвета Градиента, как показано на скриншоте ниже:
Результат:
Шаг 9
Находясь на том же самом слое, выберите следующую опцию стилей слоя Тиснение (Bevel and Emboss).
В результате мы получили более акцентированное затенение по всему контуру мыши.
Шаг 10
Мышка выглядит слишком гладкой, поэтому мы добавим небольшую зернистость к её поверхности. Идём Фильтр – Шум – Добавить шум (Filter>Noise>Add Noise), установите Количество (Amount) 6.5%. Как только вы применили фильтр Шум (Noise), продублируйте слой “ верхняя часть мышки ”.
Мы получили следующий результат:
Шаг 11
Находясь на слое “верхняя часть мышки”, добавьте следующую опцию стилей слоя Тень (Drop Shadow). Установите Смещение (Distance) 8px, Размер (Size) 5px, Угол (Angle) 100 градусов.
Шаг 12
Далее, к дубликату слоя с верхней частью мышки, добавьте Внутренне Свечение (Inner Glow), а затем уменьшите непрозрачность слоя до 85 % (уменьшите непрозрачность (opacity) слоя в палитре слоёв).
Результат:
Шаг 13
Шаг 14
Выберите инструмент Перо (Pen Tool), нарисуйте нижнюю половину мышки.
Шаг 15
Щёлкните правой кнопкой мыши по созданному контуру и в появившемся окне, выберите опцию Выполнить заливку контура (Fill Path), выберите чёрный цвет: #0d0e10.
Шаг 16
Создайте новый слой, назовите этот слой “Фаска для колёсика”. Выберите инструмент Эллипс (Ellipse Tool (U). Нарисуйте фигуру продолговатой формы. Далее, с помощью инструмента Свободная Трансформация (Free transform Tool (Ctrl+T) поверните нарисованную фигуру.
К слою “Фаска для колёсика”, примените стили слоя Тиснение
Шаг 17
Далее, мы придадим тиснению немного больше глубины, путём редактирования Контура (Contour). Выберите тип контура Cone, щёлкните по нему, чтобы появилось окно Редактор контуров (Contour Editor), добавьте точки к Графику Контура, как показано на скриншоте ниже:
Шаг 18
Шаг 19
Результат:
Шаг 20
Уменьшите непрозрачность слоя “Фаска для колёсика” до 85%.
Шаг 21
С помощью инструмента Эллипс (Ellipse Tool), нарисуйте эллипс поменьше внутри уже созданной фаски. Залейте этот эллипс чёрным цветом, назовите этот слой “Углубление”.
Шаг 22
Создайте новый слой, назовите этот слой “Линия”. Выберите инструмент Линия (Line Tool (U), установите Толщину линии (Weight) 4 px. Нарисуйте диагональную линию через почти большую часть половины корпуса мышки.
Шаг 23
В подменю инструмента Перо (Pen Tool), выберите инструмент Добавить опорные точки (Add Anchor Points Tool). Откорректируйте изгиб линии в определенных точках, как показано на скриншоте ниже:
Шаг 24
Залейте линию чёрным цветом, щёлкнув правой кнопкой мыши по линии и в появившемся окне, выберите опцию Выполнить заливку контура (Fill Path).
Шаг 25
К слою “Линия”, добавьте стили слоя Тиснение (Bevel and Emboss). Примените настройки, которые указаны на скриншоте ниже:
Шаг 26
Шаг 27
Расположите слой “Линия” ниже слоя “Углубление”.
Шаг 28
Создайте новый слой, назовите этот слой “Линия 2″. Нарисуйте горизонтальную линию поперёк корпуса мышки.
Шаг 29
Выберите инструмент Добавить опорные точки (Add Anchor Points Tool). Откорректируйте дополнительные точки для создания небольшого изгиба. Линия на концах должна немного сужаться.
Шаг 30
На верхней части линии, потяните две направляющие опорные точки верх для создания дуги. Проделайте то же самое с нижней частью линии (Примечание переводчика: также потяните нижнюю линию верх).
Шаг 31
Выполните заливку линии, а затем примените стили слоя. Вначале примените Тиснение (Bevel and Emboss).
Примечание переводчика: выполните заливку линии чёрным цветом.
Шаг 32
Шаг 33
Для более светлой части линии, левая сторона должна быть более чёткой, примените следующий стиль слоя Наложение градиента (Gradient Overlay).
Результат применения стилей слоя вы можете увидеть на скриншоте ниже. Стиль слоя Наложения градиента (Gradient Overlay) в частности добавляет блики к линии в соответствии с направлением света.
Шаг 34
Далее, мы нарисуем колёсико для мышки. Создайте новый слой, назовите этот слой ‘Колёсико’. Нарисуйте ещё один эллипс с помощью инструмента Эллипс (Ellipse Tool) в пределах фигуры ‘Углубление’. Нажмите клавиши (Ctrl+T) для активации инструмента Свободная трансформация (Free Transform), а затем щёлкните правой кнопкой мыши по документу и в появившемся окне, выберите опцию Искажение (Distort Tool). Примените искажение к эллипсу, чтобы наш эллипс подходил к правой кромке “углубления”, как показано на скриншоте ниже:
Шаг 35
К слою с колёсиком, примените стили слоя Наложение градиента (Gradient Overlay). Установите цвета градиента, как показано на скриншоте ниже:
Шаг 36
Также увеличьте значение непрозрачности Градиента (Gradients) до 100%, а также установите Угол (Angle) 148 градусов. Результат на скриншоте ниже:
Шаг 37
Далее, мы создадим ‘канавки’ для колёсика. Вы можете использовать Разграничительную сетку в этом шаге, нажав клавиши (Ctrl + ’). Нажмите клавишу (D), чтобы выставить цвета по умолчанию. Выберите инструмент Линия (Line Tool), в настройках данного инструмента, выберите режим Выполнить заливку пикселей (Fill Pixels). Теперь, нарисуйте несколько горизонтальных линий, все линии в одном ряду.
Примечание переводчика: 1. режим Выполнить заливку пикселей (Fill Pixels) расположен рядом с режимом Контуры (Paths) 2. как только вы нарисуете горизонтальные линии, ещё раз нажмите клавиши (Ctrl + ’), чтобы выйти из режима сетки 3. не забудьте создать новый слой для канавок.
Шаг 38
Далее, идём Редактирование – Трансформация – Поворот (Edit>Transform>Rotate) или просто нажмите клавиши (Ctrl+T). Поверните ряд линий; а затем щёлкните правой кнопкой мыши по документу и в появившемся окне, выберите опцию Масштабирование (Scale), чтобы уменьшить ширину линий.
Шаг 39
Для выбора инструмента Деформация (Warp Tool), идём Редактирование – Трансформация – Деформация (Edit>Transform>Warp). В настройках данного инструмента, в выпадающем меню, выберите опцию Выпуклость (Bulge), а также установите значение Изгиба (Bend) 10%. То же самое, разумеется, вы могли бы проделать с помощью мышки в режиме Деформация (Warp) инструмента Трансформация (Transform).
Шаг 40
Находясь всё ещё в режиме Свободной трансформации (Free Transform), щёлкните по окошку в самом дальнем углу панели настроек инструмента Переключение между свободной трансформацией и режимами деформации (switch in between other transform or warp transform modes). Мы переключимся на инструмент Искажение (Distort Tool), чтобы горизонтальные линии или канавки повторяли изгиб самого колёсика, а затем переключимся на инструмент Деформация (Warp Tool) (здесь необходимо поработать мышкой при создании деформации), чтобы канавки повторяла изгибы колёсика.
Примечание переводчика: автор сужает канавки на концах колёсика, затем дополнительно делает отдельные горизонтальные линии или канавки более выпуклыми.
Шаг 41
К слою с канавками, добавьте стиль слоя Тиснение (Bevel and Emboss). Примените настройки, которые указаны на скриншоте ниже:
Результат:
Шаг 42
Дважды щёлкните по слою “основа мышки” и в появившемся окне, выберите опцию Наложение градиента (Gradient Overlay). Отредактируйте цвета градиента, как показано на скриншоте ниже:
Примечание переводчика: ‘ основа мышки’ – это нижняя часть мышки, которую мы создали в Шаге 14-15.
Шаг 43
Как только вы применили Наложение градиента (Gradient Overlay), перейдите на слой с ‘канавками’ и уменьшите непрозрачность данного слоя до 85%.
Шаг 44
Возвращаемся на слой “основа мышки”, чтобы применить стиль слоя Тень (Drop Shadow). Мы создадим тень от падающего света.
Результат:
Шаг 45
Создайте новый слой, назовите этот слой “Задний фон”. Залейте этот слой инструментом Заливка (Paint Bucket Tool). Далее, примените стиль слоя Наложение градиента (Gradient Overlay).
Примечание переводчика: 1 слой с задний фоном поместите ниже всех созданных слоёв 2. выполните заливку любым цветом на своё усмотрение.
Мы придали всему изображению красивый задний фон, приблизив, таким образом, к реализму.
Шаг 46
Ниже слоя “основа мышки”, создайте новый слой, назовите этот слой “Тень”. Выберите инструмент Прямоугольник с округлёнными углами (Rounded Rectangle Tool), в настройках выберите режим Выполнить заливку пикселей (Fill Pixels), а также установите Радиус (Radius) на 35 px. Нарисуйте относительно большой прямоугольник.
Шаг 47
Нажмите клавиши (Ctrl+T), чтобы активировать инструмент Свободная трансформация (Free Transform); поверните прямоугольник, а также примените искажение к прямоугольнику. Расположите прямоугольник ниже мышки. Нажмите (Enter), когда вас устроит результат.
Шаг 48
В результате размытия тень расплывается и постепенно растворяется.
Шаг 49
Находясь на слое “основа мышки”, щёлкните правой кнопкой мыши по слою и в появившемся окне, выберите опцию Создать дубликат слоя (duplicate layer). Находясь на дубликате слоя “основа мышки”, щёлкните по значку “F” с маленьким треугольником (Примечание переводчика: значок показывает слой-эффекты или стили слоя), чтобы показать эффекты для данного слоя. Щёлкните по глазку рядом с текстом Эффекты (Effects), чтобы отключить стили слоя. Далее, идём Фильтр – Шум – Добавить шум (Filter>Noise>Add Noise), установите Количество (Amount) 1.55%. Отключение стилей слоя сделает эффекты фильтра видимыми, когда они применяются
И мы завершили урок! Наша мышка получилась красивой, всё просто и реалистично! Надеюсь, вам понравился этот урок.
Итоговый результат
Переводчик : Садыгалиев Марат
Данный урок подготовлен для Вас командой сайта http://www.photoshop-master.ru
«Фотошоп с нуля в видеоформате»
В современном мире владеть программой Photoshop должен почти каждый уважающий себя пользователь компьютера, даже если он не является дизайнером или фотографом. Ведь даже просто чтобы уменьшить или обрезать фотографию для публикации в социальной сети, вам нужно использовать графический редактор, не говоря уже о более серьезных задачах. Сегодня у вас появился шанс серьезно овладеть навыками работы в Фотошоп без скучных книг-самоучителей, без посещения дорогих семинаров и без утомительного метода тыка. Благодаря видеокурсу Зинаиды Лукьяновой обучение станет для вас не пыткой, а сплошным удовольствием.
Кликните здесь, чтобы узнать подробнее
Компьютерная графика в последнее время набирает очень широкую популярность. Даже если вы не собираетесь на этом зарабатывать, просто научиться рисовать на компьютере желают очень многие. Одно дело рисовать на бумаге, и совсем другое - на компьютере. Этот процесс имеет ряд неоспоримых преимуществ, но не стоит забывать и о сложностях.
Большинство художников используют для этой цели специальной графические планшеты, подсоединяющиеся к компьютеру. Рисовать на таком девайсе очень просто, практически так же, как и на листе бумаги. Многих новичков и просто любителей отпугивает высокая стоимость, поэтому они хотят научиться рисовать мышкой.
Как это правильно делать? Что для этого нужно? С какими особенностями можно столкнуться? На эти вопросы вы получите ответ, прочитав подготовленный материал.
Зачем, вообще, рисовать на компьютере ? Можно ведь спокойно обойтись листком бумаги, после чего отсканировать рисунок. Но компьютерная графика имеет ряд неоспоримых преимуществ:
- Доступность рабочих инструментов. Вам понадобится лишь компьютер и специальная программа - графический редактор. Здесь не нужно учитывать особенности красок или карандашей, покупать их, следить за тем, чтобы они не вовремя не заканчивались.
- Возможность быстро исправить какие-то недостатки. Если на бумажном рисунке вы заметили какой-то дефект, зачастую исправить его практически невозможно, поэтому приходится рисовать всё с самого начала. В цифровом рисунке всё исправляется буквально несколькими кликами мыши.
- Неподверженность внешним факторам. Цифровой рисунок не выгорит на солнце, его не испортит ребёнок или домашнее животное.
Как подготовиться к рисованию мышкой
Прежде чем приступить к рисованию мышкой на компьютере, следует немного подготовиться. Для этого вам понадобится приобрести надёжную мышь, качественный коврик и установить графический редактор . Давайте разберём каждый из пунктов подробнее.
- Мышь. Она в идеале должно быть крупной и массивной, с очень точным позиционированием курсора. Она должна реагировать на каждое ваше движение мгновенно. Поскольку рисование - это процесс длительный, мышка должна удобно сидеть в вашей руке и не создавать неудобств. Естественно, не стоит рассчитывать на то, что качественный аксессуар будет стоить дёшево. Хотите достичь высоких результатов - будьте готовы потратить больше.
- Коврик. Многие производители имеют серию профессиональных ковриков для графических дизайнеров. В них тщательно просчитан коэффициент скольжения, а материал используется такой, что со временем он не затирается и долгое время выглядит как новый.
- Графический редактор. Существуют графические редакторы профессиональные и для начального уровня. Кроме того, есть программы для векторной и растровой графики. Некоторые распространяются совершенно бесплатно, а другие стоят значительную сумму. Некоторые являются предустановленными в операционную систему, тогда как большинство нужно скачать и установить. Наиболее известными редакторами являются Microsoft Paint, Adobe Photoshop , Gimp, Paint Tool SAI.
Основы основ
Как уже упоминалось, рисование мышкой имеет ряд особенностей. Давайте отметим некоторые из них.
- Лучше всего выбрать для создания рисунка инструмент «Кисть». Возможно, кто-то скажет, что это не лучший выбор, но именно с его помощью легче всего достигать желаемых результатов. Кстати, большинство редакторов имеют опцию настройки жёсткости и степени нажима, а также прозрачности. Например, этой функцией без проблем можно воспользоваться в Фотошопе и Paint Tool SAI. Благодаря этому мышкой рисовать гораздо удобнее, чем тем же карандашом, который выдаёт гораздо более жёсткие линии.
- Поскольку, в отличие от планшета, нет возможности регулировки силы нажатия инструмента рисования, для смягчения краёв и контуров рисунка лучше использовать ластик с настроенной на невысокий уровень непрозрачностью. Это позволит уменьшить резкость линий. Большинство графических планшетов поддерживаются как Photoshop, так и САИ.
- Не пытайтесь проводить контуры одной длинной линией. Выполняйте множество мелких щелчков, чтобы наносить короткие штришки. Кроме того, учтите, что часто придётся переключаться между инструментами и их настройками, а также элементами меню. Чтобы не тратить время, постарайтесь довести этот навык до автоматизма. А если очень нужно провести длинную прямую линию, пользуйтесь специальным инструментом, он значительно облегчит вашу участь.
- Если вы уже пробовали создавать рисунки на компьютере в САИ или другом редакторе, то наверняка обратили внимание, что проводить линии очень непросто. Они постоянно искривляются, делаются неровными, а при необходимости подрисовать что-то - попасть по нужному месту совсем непросто. В таком случае не стесняйтесь использовать инструмент увеличения масштаба. Чем крупнее вы увеличите, тем точнее можно подогнать края рисунка. Переключайтесь между нормальным видом и увеличением, чтоб довести изображение до совершенства.
- С чего начинать обучение? Ясное дело, что сложные картины в САИ у вас с первого раза получаться не будут, нужно набить руку. Первым делом попробуйте изобразить простые рисунки, для которых достаточным будет использование обычных геометрических фигур. Например, нарисуйте ёлку или снеговик. Справившись с симметричным расположением элементов и контуров, приступите к заливке цветом. Лучше для этого не использовать инструмент заливки, а закрашивать кисточкой вручную. Потом можно внести последние штрихи, в также добавить тени и всякие мелочи. На YouTube существует множество уроков для начинающих.
- Вы испытаете гораздо меньше сложностей, если заранее хотя бы приблизительно набросаете ваш рисунок на обычном листе бумаги. Кроме того, опыт обычного рисования также вам пригодится.
Чтобы не выходить за границы рисунка при закрашивании, выделите зону, в которой вы хотите изменить цвет, а затем приступайте к закрашиванию. - Если вручную вообще ничего неполучается, есть альтернатива, причём довольно-таки удобная. Нарисуйте контуры на бумаге, после чего отсканируйте картинку или сделайте качественное фото и откройте готовый файл в графическом редакторе САИ или Photoshop. Затем понаводите линии, измените их толщину и добавьте цвета. Кстати, во многих редакторах, например в Фотошопе или Paint Tool SAI, таким образом можно выполнять неплохие рисунки, поскольку все изменения наносятся в виде слоёв, которые можно потом легко удалить.
Как рисовать в разных графических редакторах
Photoshop
- Чтоб создать рисунок в Фотошопе , скачайте и установите программу, если её ещё нет на вашем компьютере. Мы побуждаем вас приобрести лицензионную копию, но, если вас отпугивает высокая стоимость, поищите в интернете взломанные версии. Только учтите, что, если репак будет некачественным, программа будет работать со сбоями, а некоторые функции могут отсутствовать.
- Запустив программу, создайте новый файл. Это можно сделать либо через меню Файл - Создать, либо нажав комбинацию клавиш Ctrl + N. Во всплывающем окне вам будет предложено выбрать размер, а также разрешение картинки. Чем оно выше, тем дольше и сложнее будет создавать рисунок в Фотошопе.
- Посмотрите на рабочую зону: с правой стороны вы увидите несколько панелей инструментов, на которой можно выбрать цвет, фон, а также работать со слоями. С левой стороны вы увидите меню выбора рабочих инструментов. В верхней же части, под меню программы, можно использовать некоторые опции выбранного инструмента.
- В правой части экрана нажмите кнопку «Создать слой», в левой части выберите инструмент кисть или карандаш, а в верхней части выберите вид и толщину линии.
- Создайте в Фотошопе рисунок, после чего сохраните его в папке на жёстком диске компьютера.
Paint Tool SAI
- Скачайте и установите программу Paint Tool SAI. Программа платная, поэтому или купите её, или скачайте взломанную версию, если нет возможности заплатить.
- Запустите программу Paint Tool SAI и создайте новый рисунок. Эта функция не отличается от других графических редакторов, поэтому можно либо нажать File - New, либо нажав на клавиатуре Ctrl + N.
- Программа Paint Tool SAI запросит желаемый размер изображения и формат файла. Зависимо от ваших желаний и потребностей, выберите необходимые параметры.
- Создайте новый слой на панели инструментов Paint Tool SAI в левой части экрана, после чего выберите необходимый инструмент для рисования и приступайте к процессу.
- Сохраните изображение в каталоге на жёстком диске.
Paint
Работать с этим редактором проще всего, правда, он имеет минимальный набор функций. Программа имеет неоспоримое преимущество - вам не придётся заботиться о поиске и установке рабочей версии, так как редактор является стандартным и встраивается в систему по умолчанию. Как рисовать в Paint?
- Найдите программу в меню Пуск на компьютере, работающем на Windows.
- Когда откроется рабочее окно, вы увидите небольшой белый прямоугольник, а на боковой грани и в углу специальные маркеры.
- Перетащите эти маркеры, чтобы изменить размер изображения. Актуальный размер будет отображаться в нижней части экрана.
- Выберите нужный инструмент для рисования, например, кисть или карандаш, в верхней строке меню во вкладке «Главная».
- После окончания изменений сохраните файл.
Заключение
Рисовать мышкой на компьютере может быть довольно непростым на первых порах, но, потренировавшись, вы увлечётесь этим процессом и сможете создавать в Фотошопе или САИ настоящие шедевры. В комментариях пишите нам, какую программу вы используете.
В этом уроке мы будем создавать реалистичную компьютерную мышь.
Должен заметить итоговый результат получается очень хорошим и вы не найдёте отличии от настоящей мыши Майкрософт. Также следует отметить, что в этом уроке мы в основном будем использовать инструмент под названием перо (pen tool), затемнитель (burn tool) и осветлитель (dodge tool). Итак давайте приступим.
Первый шаг. Создайте новый документ размером 420 на 300 px, 72 т/на дюйм, фон — белый.
Второй шаг. Давайте сделаем новый слой (ctrl+shift+n). Вообще новый слой можно сделать разными способами, внизу палитры слоёв есть специальная кнопка, используйте тот, который вам больше всего нравится. Давайте назовём наш новый слой «base». Для того, что бы его переименовать вы потребуется щёлкнуть по нему правой клавишей мыши и потом зайти в пункт параметры слоя. Затем берём вышеупомянутое перо (pen tool) и создаём такой же контур как на картинке.
Итак у вас есть готовый контур. Залейте его тёмно-серым цветом. В моём случае был использован цвет # 010101. Что-бы быстро залить контур вы можете задействовать комбинацию клавиш ctrl+enter.
Второй шаг. Здесь нам понадобиться новый слой (опять давим ctrl+shift+n), давайте назовём его «top part». Берите в руки инструмент перо (pen tool) и опять делайте контур.
Третий шаг. Здесь нам потребуется любой инструмент для выделения. Можете использовать lasso tool или polygonal lasso tool. После берём инструмент осветлитель (он же dodge tool), поставьте вот такие настройки: диапазон (range) — света (highlights), размер кисти 145 px, экспонирование 100%. Далее добавляем основные блоки. Затем идём по пути фильтр — шум — добавить шум (filter>noise>add noise). Поставьте такие настройки как на картинке.
В этом уроке я покажу вам, как нарисовать реалистичную компьютерную мышь в программе Photoshop. Использование стилей слоя - является ключевым в данном уроке, в частности это касается градиентов, теней и свечения. Для выполнения данного урока уйдёт немного больше времени, чем я предполагал.
Итоговый результат
Шаг 1
Мы начнём с создания нового документа 800 х 900 px, разрешение примерно 200 dpi. Вы можете выбрать инструмент Перо (Pen Tool (P), но для себя, я выбрал инструмент Свободное перо (Freeform Pen Tool), хотя вам будет лучше выбрать инструмент Перо (Pen Tool) для более точного выделения. В этом уроке, я просто хотел продемонстрировать, что, независимо от того, какую фигуру вы рисуете с зазубринами или неопределенной формы, вы можете использовать любой вариант инструмента Перо (Pen Tool), чтобы с лёгкостью нарисовать любую желаемую форму, имеющую прямые и плавные линии.
Выбрав инструмент Перо (Pen Tool) или Свободное перо (Freeform Pen Tool), в настройках инструмента, выберите опцию Контуры (Paths). Сейчас мы нарисуем верхнюю часть мышки (как я уже говорил ранее, инструмент Перо (Pen Tool) будет проще в использовании для тех, кто не обладает твёрдой рукой).
Шаг 2
В подменю инструмента Перо Добавить опорную точку (Add Anchor Point Tool), чтобы добавить опорные точки в нужных местах. Вы можете использовать мышку или клавиши управления со стрелками для непрерывного перемещения этих точек.
Шаг 3
Для создания кривых, опорные точки имеют дополнительные направляющие точки. Данные направляющие точки можно потянуть вовнутрь или наружу, чтобы создать кривые линии.
Шаг 4
Мышка начинает приобретать форму. Увеличьте масштаб (Ctrl+/-), чтобы посмотреть насколько ровными и круглыми стали углы мышки, а также провести коррекцию опорных точек, путём смещения точек верх или вниз, где это потребуется.
Шаг 5
Шаг 6
Шаг 7
Выберите инструмент Заливка (Paint Bucket Tool (G), залейте фигуру любым цветовым оттенком, т.к. цвет в данный момент не играет значения. Вы можете назвать этот слой “верхняя часть мышки”.
Шаг 8
Дважды щёлкните по слою “верхняя часть мышки”, чтобы появилось окно Стилей слоя (Layer style). Выберите опцию Наложение градиента (Gradient Overlay). Установите цвета Градиента, как показано на скриншоте ниже:
Результат:
Шаг 9
Находясь на том же самом слое, выберите следующую опцию стилей слоя Тиснение (Bevel and Emboss).
В результате мы получили более акцентированное затенение по всему контуру мыши.
Шаг 10
Мышка выглядит слишком гладкой, поэтому мы добавим небольшую зернистость к её поверхности. Идём Фильтр - Шум - Добавить шум (Filter>Noise>Add Noise), установите Количество (Amount) 6.5%. Как только вы применили фильтр Шум (Noise), продублируйте слой “ верхняя часть мышки ”.
Мы получили следующий результат:
Шаг 11
Находясь на слое “верхняя часть мышки”, добавьте следующую опцию стилей слоя Тень (Drop Shadow). Установите Смещение (Distance) 8px, Размер (Size) 5px, Угол (Angle) 100 градусов.
Шаг 12
Далее, к дубликату слоя с верхней частью мышки, добавьте Внутренне Свечение (Inner Glow), а затем уменьшите непрозрачность слоя до 85 % (уменьшите непрозрачность (opacity) слоя в палитре слоёв).
Результат:
Шаг 13
Шаг 14
Выберите инструмент Перо (Pen Tool), нарисуйте нижнюю половину мышки.
Шаг 15
Щёлкните правой кнопкой мыши по созданному контуру и в появившемся окне, выберите опцию Выполнить заливку контура (Fill Path), выберите чёрный цвет: #0d0e10.
Шаг 16
Создайте новый слой, назовите этот слой “Фаска для колёсика”. Выберите инструмент Эллипс (Ellipse Tool (U). Нарисуйте фигуру продолговатой формы. Далее, с помощью инструмента Свободная Трансформация (Free transform Tool (Ctrl+T) поверните нарисованную фигуру.
К слою “Фаска для колёсика”, примените стили слоя Тиснение
Шаг 17
Далее, мы придадим тиснению немного больше глубины, путём редактирования Контура (Contour). Выберите тип контура Cone, щёлкните по нему, чтобы появилось окно Редактор контуров (Contour Editor), добавьте точки к Графику Контура, как показано на скриншоте ниже:
Шаг 18
Шаг 19
Результат:
Шаг 20
Уменьшите непрозрачность слоя “Фаска для колёсика” до 85%.
Шаг 21
С помощью инструмента Эллипс (Ellipse Tool), нарисуйте эллипс поменьше внутри уже созданной фаски. Залейте этот эллипс чёрным цветом, назовите этот слой “Углубление”.
Шаг 22
Создайте новый слой, назовите этот слой “Линия”. Выберите инструмент Линия (Line Tool (U), установите Толщину линии (Weight) 4 px. Нарисуйте диагональную линию через почти большую часть половины корпуса мышки.
Шаг 23
В подменю инструмента Перо (Pen Tool), выберите инструмент Добавить опорные точки (Add Anchor Points Tool). Откорректируйте изгиб линии в определенных точках, как показано на скриншоте ниже:
Шаг 24
Залейте линию чёрным цветом, щёлкнув правой кнопкой мыши по линии и в появившемся окне, выберите опцию Выполнить заливку контура (Fill Path).
Шаг 25
К слою “Линия”, добавьте стили слоя Тиснение (Bevel and Emboss). Примените настройки, которые указаны на скриншоте ниже:
Шаг 26
Шаг 27
Расположите слой “Линия” ниже слоя “Углубление”.
Шаг 28
Создайте новый слой, назовите этот слой “Линия 2″. Нарисуйте горизонтальную линию поперёк корпуса мышки.
Шаг 29
Выберите инструмент Добавить опорные точки (Add Anchor Points Tool). Откорректируйте дополнительные точки для создания небольшого изгиба. Линия на концах должна немного сужаться.
Шаг 30
На верхней части линии, потяните две направляющие опорные точки верх для создания дуги. Проделайте то же самое с нижней частью линии (Примечание переводчика: также потяните нижнюю линию верх).
Шаг 31
Выполните заливку линии, а затем примените стили слоя. Вначале примените Тиснение (Bevel and Emboss).
Примечание переводчика: выполните заливку линии чёрным цветом.
Шаг 32
Шаг 33
Для более светлой части линии, левая сторона должна быть более чёткой, примените следующий стиль слоя Наложение градиента (Gradient Overlay).
Результат применения стилей слоя вы можете увидеть на скриншоте ниже. Стиль слоя Наложения градиента (Gradient Overlay) в частности добавляет блики к линии в соответствии с направлением света.
Шаг 34
Далее, мы нарисуем колёсико для мышки. Создайте новый слой, назовите этот слой ‘Колёсико’. Нарисуйте ещё один эллипс с помощью инструмента Эллипс (Ellipse Tool) в пределах фигуры ‘Углубление’. Нажмите клавиши (Ctrl+T) для активации инструмента Свободная трансформация (Free Transform), а затем щёлкните правой кнопкой мыши по документу и в появившемся окне, выберите опцию Искажение (Distort Tool). Примените искажение к эллипсу, чтобы наш эллипс подходил к правой кромке “углубления”, как показано на скриншоте ниже:
Шаг 35
К слою с колёсиком, примените стили слоя Наложение градиента (Gradient Overlay). Установите цвета градиента, как показано на скриншоте ниже:
Шаг 36
Также увеличьте значение непрозрачности Градиента (Gradients) до 100%, а также установите Угол (Angle) 148 градусов. Результат на скриншоте ниже:
Шаг 37
Далее, мы создадим ‘канавки’ для колёсика. Вы можете использовать Разграничительную сетку в этом шаге, нажав клавиши (Ctrl + ’). Нажмите клавишу (D), чтобы выставить цвета по умолчанию. Выберите инструмент Линия (Line Tool), в настройках данного инструмента, выберите режим Выполнить заливку пикселей (Fill Pixels). Теперь, нарисуйте несколько горизонтальных линий, все линии в одном ряду.
Примечание переводчика: 1. режим Выполнить заливку пикселей (Fill Pixels) расположен рядом с режимом Контуры (Paths) 2. как только вы нарисуете горизонтальные линии, ещё раз нажмите клавиши (Ctrl + ’), чтобы выйти из режима сетки 3. не забудьте создать новый слой для канавок.
Шаг 38
Далее, идём Редактирование - Трансформация - Поворот (Edit>Transform>Rotate) или просто нажмите клавиши (Ctrl+T). Поверните ряд линий; а затем щёлкните правой кнопкой мыши по документу и в появившемся окне, выберите опцию Масштабирование (Scale), чтобы уменьшить ширину линий.
Шаг 39
Для выбора инструмента Деформация (Warp Tool), идём Редактирование - Трансформация - Деформация (Edit>Transform>Warp). В настройках данного инструмента, в выпадающем меню, выберите опцию Выпуклость (Bulge), а также установите значение Изгиба (Bend) 10%. То же самое, разумеется, вы могли бы проделать с помощью мышки в режиме Деформация (Warp) инструмента Трансформация (Transform).
Шаг 40
Находясь всё ещё в режиме Свободной трансформации (Free Transform), щёлкните по окошку в самом дальнем углу панели настроек инструмента Переключение между свободной трансформацией и режимами деформации (switch in between other transform or warp transform modes). Мы переключимся на инструмент Искажение (Distort Tool), чтобы горизонтальные линии или канавки повторяли изгиб самого колёсика, а затем переключимся на инструмент Деформация (Warp Tool) (здесь необходимо поработать мышкой при создании деформации), чтобы канавки повторяла изгибы колёсика.
Примечание переводчика: автор сужает канавки на концах колёсика, затем дополнительно делает отдельные горизонтальные линии или канавки более выпуклыми.
Шаг 41
К слою с канавками, добавьте стиль слоя Тиснение (Bevel and Emboss). Примените настройки, которые указаны на скриншоте ниже:
Результат:
Шаг 42
Дважды щёлкните по слою “основа мышки” и в появившемся окне, выберите опцию Наложение градиента (Gradient Overlay). Отредактируйте цвета градиента, как показано на скриншоте ниже:
Примечание переводчика: ‘ основа мышки’ - это нижняя часть мышки, которую мы создали в Шаге 14-15.
Шаг 43
Как только вы применили Наложение градиента (Gradient Overlay), перейдите на слой с ‘канавками’ и уменьшите непрозрачность данного слоя до 85%.
Шаг 44
Возвращаемся на слой “основа мышки”, чтобы применить стиль слоя Тень (Drop Shadow). Мы создадим тень от падающего света.
Результат:
Шаг 45
Создайте новый слой, назовите этот слой “Задний фон”. Залейте этот слой инструментом Заливка (Paint Bucket Tool). Далее, примените стиль слоя Наложение градиента (Gradient Overlay).
Примечание переводчика: 1 слой с задний фоном поместите ниже всех созданных слоёв 2. выполните заливку любым цветом на своё усмотрение.
Мы придали всему изображению красивый задний фон, приблизив, таким образом, к реализму.
Шаг 46
Ниже слоя “основа мышки”, создайте новый слой, назовите этот слой “Тень”. Выберите инструмент Прямоугольник с округлёнными углами (Rounded Rectangle Tool), в настройках выберите режим Выполнить заливку пикселей (Fill Pixels), а также установите Радиус (Radius) на 35 px. Нарисуйте относительно большой прямоугольник.
Шаг 47
Нажмите клавиши (Ctrl+T), чтобы активировать инструмент Свободная трансформация (Free Transform); поверните прямоугольник, а также примените искажение к прямоугольнику. Расположите прямоугольник ниже мышки. Нажмите (Enter), когда вас устроит результат.
Шаг 48
В результате размытия тень расплывается и постепенно растворяется.
Шаг 49
Находясь на слое “основа мышки”, щёлкните правой кнопкой мыши по слою и в появившемся окне, выберите опцию Создать дубликат слоя (duplicate layer). Находясь на дубликате слоя “основа мышки”, щёлкните по значку “F” с маленьким треугольником (Примечание переводчика: значок показывает слой-эффекты или стили слоя), чтобы показать эффекты для данного слоя. Щёлкните по глазку рядом с текстом Эффекты (Effects), чтобы отключить стили слоя. Далее, идём Фильтр - Шум - Добавить шум (Filter>Noise>Add Noise), установите Количество (Amount) 1.55%. Отключение стилей слоя сделает эффекты фильтра видимыми, когда они применяются
И мы завершили урок! Наша мышка получилась красивой, всё просто и реалистично! Надеюсь, вам понравился этот урок.
Итоговый результат
Переводчик : Садыгалиев Марат
Загрузка...