Youtubezilla.ru

Мастер бытовой техники
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как в Photoshop просто и быстро нарисовать красивый круг

Как в Photoshop просто и быстро нарисовать красивый круг

Нарисовать круг в Photoshop

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

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как нарисовать простые, ровные и красивые круги

Первым делом вам нужно открыть программу Photoshop. Не забывайте, что у вас есть возможность воспользоваться онлайн версией pixlr.com .

Не устаю говорить, что не стоит обращать внимание на простые (или другие) варианты типа Paint или еще какой-то глупости. Учитесь работать в профессиональных программах.

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

Создайте новый документ.

Как в Photoshop просто и быстро нарисовать красивый круг

Допустим он будет в размере 500 х 500 пикселей. Это не важно.

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

Теперь рисуем окружность.

Как в Photoshop просто и быстро нарисовать красивый круг

Чтобы круг получился ровный зажмите кнопку shift на клавиатуре. Она помогает сохранить пропорции.

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

Если хотите изменить саму линию, посмотрите на следующую графу.

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

Еще один интересный эффект

Можно рисовать круг прямо на картинке или переместить его в фотку при помощи кнопок ctrl+c (копировать) и ctrl+v (вставить).

Читайте так же:
Adobe After Effects CC 2018 15.1.2.69 скачать бесплатно

Как в Photoshop просто и быстро нарисовать красивый круг

Теперь поработайте с непрозрачностью (в панели слева). Смотрите, чтобы в панели подсвечивался именно тот слой, с которым вы работаете. В данном случае – эллипс.

Как в Photoshop просто и быстро нарисовать красивый круг

В круге можно написать какой-то текст.

Как в Photoshop просто и быстро нарисовать красивый круг

Если возникают трудности, то можете скачать psd макет этой картинки, которую вы видите на скриншоте выше, и поковыряться в нем. Так учиться интереснее. Разберитесь в моем примере самостоятельно. Это совсем не сложно. ( СКАЧАТЬ >> )

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

Или вот еще одна картинка, которую вы можете скачать ( СКАЧАТЬ >> ).

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

Скачайте этот макет и посмотрите сами, возможно вы сможете значительно улучшить результат! Не стесняйтесь и оставляйте свои варианты в комментариях.

Для тех, кто хочет постигать

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

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

Если вам хочется выучиться фотошопу для того, чтобы создавать сайты, могу порекомендовать еще два варианта. Первый – уроки вот отсюда — «[urlspan]ВЕБ-ДИЗАЙН для начинающих[/urlspan]». О них я уже подробно писал. В принципе, если захотите, то сможете многому научиться бесплатно, за три дня, которые предоставляются в качестве тестового периода. Очень полезно и здорово.

Как в Photoshop просто и быстро нарисовать красивый круг

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

Как в Photoshop просто и быстро нарисовать красивый круг

Да, цена, конечно, кусается.

Как в Photoshop просто и быстро нарисовать красивый круг

Зато какая программа и какие преподаватели вас ждут.

Как в Photoshop просто и быстро нарисовать красивый круг

Тут вам и директор Red Keds, и создатель интерфейсов из Лаборатории Касперского, и еще куча именитых и успешных ребят из компаний с мировым именем. По окончании вы получаете диплом. Этой действительно дорогого стоит.

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

Инструмент Pen Tool

Первым у нас идет инструмент Pen Tool и его разновидности. Тот же самый набор можно найти в Illustrator-е. Это удобно при переходе из одной программы в другую, не надо переучиваться. Тем более что все векторные инструменты перекочевали в Photoshop прямо из Illustrator-а.

Читайте так же:
Прошивка Fly IQ4403

Pen Tool — перо Безье, модулировать им векторный контур проще простого, но для новичков может оказаться весьма сложным занятием. Подробные описания всех приемов управления с направляющими заняли бы отдельную статью или главу. Фактически это самый основной и головной инструмент модулирования фигур и контуров в векторе. И, что удобно, одинаковый во всех векторных программах.

pic4

Попробуем изобразить пару контуров. Выберите инструмент Pen Tool, и следите чтобы в настройках инструмента у вас стояла опция Path. Не то чтобы это было особенно важно, но если вместо Path там будет Shape Layer, то вы будете рисовать заливками с векторной маской, а не просто контурами. Подробнее об этих режимах я написал в статье Shape Layers, Path и Fill Pixel в Фотошопе.

Теперь кликните в любом месте. Когда вы кликнули, у вас появилась ключевая точка (якорь, ключик, штучка, название не имеет значения). Протяните мышь в любую сторону, продолжая зажимать кнопку. Если все правильно, вы увидите направляющие.

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

Понять в какой зависимости от чего строятся линии в зависимости от направляющих пожалуй самое базовое понимание векторной графики. На панельке настроек векторных инструментов у Pen Tool есть одна интересная настройка — Auto Add/Delete. Это фактически автоматизированные Add и Delete Anchor Point Tools о которых речь пойдет дальше. Кликните по этой галочке и ваша кисть сможет прямо во время рисования добавлять точки на уже отрисованные контуры и удалять ненужные точки. Вы сможете делать это прямо во время рисования контура, а не после. И для этого не придется переключаться на бесполезные Add и Delete Anchor Point Tools

После того, зальете цветом все рисунки, можно добавить детали. Например, повторяющиеся узоры (паттерны) для галстука и платья.

Создайте один элемент узора, и Photoshop повторит его на всей выделенной области

Нарисуйте узор, а затем сохраните его, чтобы можно было его использовать в качестве паттерна (Редактирование — Определить узор)

Чтобы выделить область и залить ее узором, лучше использовать «перо». К «перу» нужно привыкнуть, но оно хорошо подсвечивает нужные узоры и сложные места.

Есть более простой, но не такой изящный способ:

  • Выберите «волшебную палочку» (W)
  • Выделите требуемый участок.
  • Нажмите SHIFT + DEL и выберите узор

Вот пример того, как работают узоры:

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

Читайте так же:
Как включить Bluetooth на ноутбуке с Windows 8.1

9. Используем фото-референсы

iyzqCMuPdOQ

Текстура кожи слона поможет создать классную кожу для нашего персонажа! Выбираем небольшую секцию с помощью инструмента Лассо, перетаскиваем на нашу иллюстрацию и понижаем уровень Непрозрачности до 30%. Затем нажимаем Изображение – Коррекция – Экспозиция (Image> Adjustments>Exposure), увеличиваем значение Гамма и корректируем значение Экспозиция для увеличения контраста. Таким образом, настраиваем эти настройки наряду с уровнем Непрозрачности до тех пор, пока текстура не впишется идеально в наш рисунок.

Четвёртый приём

Классический способ усилить контрастность фотографии – придать тоновой кривой S-образную форму. Поставьте одну узловую точку справа и двигайте её вверх, осветляя, тем самым, светлые области снимка. Вторую точку поместите слева и опустите вниз, затемняя тёмные области.

Иногда целесообразно установить третью узловую точку посередине.

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

Если Вы хотите, чтобы с ростом контрастности, насыщенность цветов сохранялась, выберите «Светимость» («Luminosity») в качестве режима наложения корректирующего слоя.

Как сделать волнистые линии в фигме (изогнутые, кривые)

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

Создание волнистой линии в фигме

Выделите линию и нажмите сверху на иконку «Edit object» или на клавишу Enter.

Точки на линии, для волнистой линии

Поставьте новую точку по центру. Между отрезками в этой точке, поставьте ещё несколько. Например на скриншоте выше я создал 7 точек.

Выбор точек на линии

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

Ломанная линия в фигме

Зажмите клавишу Shift, затем нажимайте на стрелку вверх или вниз на клавиатуре. Точки будут подниматься на 10 px, если будет зажата клавиша Shift и на 1 px без её зажатия. В итоге получается ломанная линия.

Линия волной в фигме

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

Создание ломанной линии с помощью пера

Аналогичную волнистую линию вы можете нарисовать, с помощью пера. Прежде всего активируйте инструмент «Pen Tool», зажмите клавишу Shift и поведите в сторону. Будет создаваться линии под углом 45 градусов. Поставьте нужное количество точек для вашей волнистой линии и при необходимости сделайте скругление.

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

Поговорим о путях и трансформациях

Штатным способом на Фотошопе можно создать любой полигональный контур

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

настройка звездчатых форм таится на верхней панели под едва-приметной шестеренкой
(неповторимый интерфейс фотошопа не устает озадачивать пользователя квестами "отыщи инструмент", однако, если знать в какую дверцу постучаться, то все просто)

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

Читайте так же:
Google Search Console: добавляем сайт в Гугл

Контуры можно размещать один поверх другого.

Но. есть засада: контур это еще не рисунок.
Это лишь эскиз, который можно обвести и раскрасить — и только потом удастся сохранить.

Что бы понять, что мы делаем, придется вернуться назад:

К азам Фотошопа

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

В средней части панели инструментов вы найдёте кисть и резинку — основные инструменты рисования (дополнительные предназначены для коррекции изображения).

В верхнем меню "Окна" — миллион опций, нам понадобятся "слои", "кисть" и "контуры".
Ничего страшного, если вы не знаете, что делать с остальными; ФШ — программа универсальная, предоставляет функционал для самых различных задач, множество пользователей, виртуозно управляющихся со своими инструментами, понятия не имеют о каких-то еще настройках, скрывающихся в недрах вложенных подменю.

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

А вкладка "кисти" позволяет выбирать размер и форму отпечатка:

Палитра цветов находится внизу панели инструментов.

Мы получаем обычное пиксельное изображение.
Фото, открытое в ФШ — такое же пиксельное изображение.

А теперь — "внимание ответ!"

Контуры: для чего это нужно

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

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

Контуры — это пути, по которым будет двигаться кисть.
Кисть любой формы, фактуры и размера — вы видели на предыдущем скрине, сколько настроек на панели кистей (а можно подгрузить из сети еще сотни конфигураций или задать свои)

Наконечник стрелы настраивается аналогично звездочкам

Среди стандартных фигур — линии, эллипсы, полигоны — стрелки и звезды (среди нестандартных много чего еще, но это отельная тема)

Вот тут нам и пригодится вкладка "контуры"

Контур можно обвести кисточкой или залить цветом. (Кст. — резинкой тоже можно: настроить форму и выпилить в красочном слое фигуру по контуру)

На активном слое будет создан заданный цветной узор, а контур останется, как был — путь не привязан холсту, он сам по себе.
Сдвинем слой с рисунком — контур при этом останется на месте. Можно его залить или обвести еще раз и еще-много-много-раз:

Для перемещения слоев предназначен инструмент, расположенный в верху боковой панели инструментов (значок "перекрестье")

Читайте так же:
Как настроить прокси для использования в Mozilla Firefox

В чем фишка-то? Нет бы настроил фактуру и рисуй сразу фигуры, как в простых и понятных редакторах, без заморочек с векторной графикой — "эскизами" и "путями"!

Читайте далее:
Преимущества векторной графики

Трансформации контуров

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

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

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

Потяни за усик и посмотри, что будет! =)

Щелкнем в произвольном месте контура и правой кнопкой мыши вызовем меню,
среди опций увидим — добавить узловую точку:

Опираясь на которую, можно изгибать линии контура, растягивая их или закручивая петлями:

Обводка и заливка теперь пойдет по новому, трансформированному пути:

Хозяйке-на-заметку:
обвести контур можно несколько раз, кистями разного оттенка и размера — получим несколько разноцветных обрамлений одно поверх другого

По векторному пути можно запустить и резинку, получив по краю изделия фигуры перфорацию с заданным интервалом:

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

Чтобы отключить контур (не удаляя его), достаточно щелкнуть на вкладке в любом месте в стороне от "Рабочего контура".

Об анимации трансформаций

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

из цветной в расписную

с помощью анимации стилей

Все как в предыдущем выпуске, создали кадр с фоном:

К слою с трансформированной, вытянутой, звездой применен стиль "Радиальный градиент".

В исходной позиции движок "Масштаб" находится на минимуме.
Создаем копию кадра (внизу шкалы времени — лист с загнутым уголком возле корзины)

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

А теперь — самое интересное:
опция "создать промежуточные кадры" — нам не придется вырисовывать кадры анимации вручную, они будут созданы программно!

Чем их больше, тем более плавными получатся переливы. Но — вес картинки и трафик! Соблюдаем меру =)

Небольшое дополнительное ухищрение — плавно зациклим анимацию, добавив обратный переход к минимуму масштаба,
для этого скопируем все кадры (меню в уголке шкалы), вставим их в конец ленты, выделим и — применим операцию "в обратном порядке"

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector