Обработка рисунков: Улучшаем карандашные рисунки в Фотошоп / Фотошоп-мастер

Улучшаем карандашные рисунки в Фотошоп / Фотошоп-мастер

Часто, когда рисунок еще не закончен, мы замечаем ошибку, которая была сделана еще в начале. Очень, очень неприятно смотреть на то, как она рушит всю работу. Если бы только был способ исправить ее на этом этапе…

Многим этот урок может показаться спорным — это урок об обмане. В конце концов, искусство основывается на усилиях, человек должен ревностно относиться к определенным умениям. Именно поэтому цифровое искусство часто презирают, ведь за вас все делает компьютер!

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

Примечание автора: это урок об улучшении традиционных рисунков. Если вы хотите, чтобы отсканированный рисунок выглядел так же хорошо, как и оригинал, урок по очистке традиционных рисунков в Photoshop станет для вас лучшим выбором.

Скачать архив с материалами к уроку

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

Содержание

1. Перемещаем части

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

Шаг 1

Выберите зону, которую вы хотите переместить при помощи инструмента Лассо (Lasso Tool).

Шаг 2

Используйте инструмент Перемещение (Move Tool), чтобы перетянуть выделенный участок в правильное место. Снимите выделение, нажав Ctrl + D.

2. Скрываем ошибку

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

Шаг 1

Выберите зону, которую нужно улучшить при помощи инструмента Заплатка (Patch Tool) (Заплатка находится в том же меню, что и Точечная восстанавливающая кисть

(Spot Healing Brush)).

Шаг 2

Перетяните выделение в зону, участок которой вы хотите «одолжить».

Шаг 3

Используйте Заплатку (Patch Tool) везде, где это потребуется, тем самым сделав «шрамы» менее заметными.

3. Стираем ошибку

Этот пункт кажется простым, но, используя неправильный ластик, мы можем получить поддельный эффект как на рисунке ниже:

Шаг 1

Чтобы избежать этого, перейдите в меню Окно > Наборы параметров для инструментов (Window > Tool Presets). Выберите инструмент Ластик

(Eraser Tool), а затем пункт Карандаш с ластиком (Pencil Eraser).

Шаг 2

Используйте его как обычно. Если вы хотите сделать ластик мягче, не прибегая к помощи графического планшета, измените его Непрозрачность (Opacity).

Разница не слишком заметна, но она играет большую роль для общего эффекта:

4. Изменяем размер участков

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

Шаг 1

Дублируйте (Duplicate) слой, нажав Ctrl + J, затем скройте его (для этого кликните по иконке глаза слева от миниатюры). Выберите участок при помощи инструмента Лассо

(Lasso Tool).

Шаг 2

Перейдите в меню Редактирование > Свободное трансформание (Edit > Free Transform) или нажмите Ctrl + T. Переключитесь в Режим деформации (Warp Mode).

Шаг 3

Перетяните маркеры ближе к середине, чтобы уменьшить участок или оттяните их к краям, чтобы увеличить. Если что-то пошло не так, нажмите Esc и попробуйте снова.

Шаг 4

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

( Layer Mask). Заполните (Fill) ее черным цветом, а затем закрасьте белым только ту часть, которая находится правее от шва.

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

Разница поражает!

5. Изменяем форму участка

Тот же инструмент можно использовать для изменения формы участка:

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

Шаг 1

Перейдите в меню Фильтр > Пластика (Filter > Liquify) или используйте клавиатурное сокращение

Ctrl + Shift + X.

Шаг 2

Используйте инструмент Деформация (Forward Warp Tool), изменив форму некоторых участков. Чем крупнее кисть, тем натуральнее эффект. Будьте осторожны: в этом режиме можно отменить только одно действие!

Примечание переводчика — на самом деле, в фильтре Пластика работают те же быстрые клавиши, что и в основном окне Adobe Photoshop. Используйте Ctrl + Alt + Z для отмены действия, а Ctrl + Shift + Z для возвращения изменений.

Этот инструмент позволяет добиваться потрясающего эффекта!

6. Добавляем тени

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

Шаг 1

Дублируйте слой (Ctrl + J) и работайте с копией, оставив оригинал под ней. Перейдите в Режим быстрой маски (Quick Mask Mode) (Q). Выберите мягкую кисть и пометьте зоны, которые хотите затемнить.

Шаг 2

Выйдите из Режима быстрой маски (Quick Mask Mode). Инвертируйте (Invert) выделение, нажав Ctrl + Shift + I. Перейдите в меню Изображение > Коррекция > Цветовой тон/насыщенность (Image > Adjustment > Hue/Saturation). Сократите значение параметра Яркость (Lightness).

Шаг 3

Используйте тот же ластик, чтобы стереть тень вокруг тела.

Шаг 4

Теперь используйте этот ластик для «смешивания» тени. Она не должна быть такой равномерной; сделайте ее немного «рваной».

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

7. Добавляем блики

Это эффект будет работать, только если объект был нарисован в темных тонах. В моем случае, мне нужно затемнить весь рисунок. Создайте Новый слой (New Layer), нажав Ctr + Alt + Shift + N

и заполните его черным цветом при помощи инструмента Заливка (Paint Bucket Tool). Сократите Непрозрачность (Opacity) этого слоя.

Шаг 2

Перейдите в Режим быстрой маски (Quick Mask Mode) (Q) и при помощи мягкой кисти пометьте зоны, которые должны блестеть.

Шаг 3

Выйдите из Режима быстрой маски (Quick Mask Mode). Инвертируйте (Invert) выделение, нажав Ctrl + Shift + I. Кликните на основной слой и Дублируйте (Duplicate) выделенную зону при помощи клавиатурного сокращения Ctrl + J. Перетяните слой-копию, разместив его над слоем с затемнением.

Шаг 4

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

Шаг 5

Сократите Непрозрачность (Opacity) для получения более мягкого эффекта.

8. Добавляем размытие

Внимание: этот эффект выглядит очень «по-цифровому». После его применения сразу будет видно компьютерное вмешательство в работу!

Шаг 1

Перейдите в Режим быстрой маски (Quick Mask Mode) (Q) и при помощи мягкой кисти нарисуйте обводку вокруг объекта.

Шаг 2

Выйдите из режима (Q), инвертируйте выделение (Ctrl + Shift + I). Перейдите в меню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur).

Будьте осторожны — на этом этапе легко перестараться!

9. Делаем рисунок резче

Чтобы сделать линии чище, даже если они были очень размыты в оригинальном изображении, мы перейдем в меню Фильтр > Усиление резкости > «Умная» резкость (Filter > Sharpen > Smart Sharpen).

10. Добавляем «бумажный» эффект

Шаг 1

Это самый популярный и самый «невинный» трюк для улучшения рисунков. Разместите текстуру бумаги над изображением. Измените Режим наложения (Blend Mode) слоя с бумагой на Умножение (Multiply).

Шаг 2

Кликните правой кнопкой мыши по слоям и выберите Объединить слои (Flatten Image). Затем перейдите в меню Фильтр > Галерея фильтров (Filter > Filter Gallery). Выберите фильтр Текстуризатор (Texturizer), находящийся в папке Текстуры (Textures). Настройте параметры по своему усмотрению.

Шаг 3

Последний, но важный пункт — вы можете воспользоваться Уровнями (Levels) (Ctrl + L), отрегулировав яркость всего изображения.

На этом все!

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

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

Автор: Monika Zagrobelna

Пять бесплатных графических редакторов фотографий

Всем привет… Сегодня речь пойдёт о графических редакторах. Точнее я представлю Вам пять бесплатных графических редакторов фотографий. Творческие люди, дизайнеры, художники, иллюстраторы и конечно же веб-мастера не обходятся без этих замечательных программ в своей повседневной практике (работе).

Что такое графический редактор — это программа для редактирования и усовершенствования каких либо цифровых изображений. Многие пользователи для редактирования изображений используют всем известный Adobe Photoshop. Ознакомиться с ним можно здесь. Также, он требует определённых ресурсов «железа».

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

Пять бесплатных графических редакторов фотографий

GIMP

GIMP (GNU Image Manipulation Program) — программа манипуляции изображения. Бесплатная программа создана для рисования, редактирования картинок, фото. Также других растровых изображений и другой векторной графики. Имеет мощное средство фото ретуширования. Есть возможность конвертировать формат фотографий.

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

Возможности GIMP

  • конвертирование изображений в такие форматы как: GIF, JPEG, PNG, BMP, TGA, SVG, TIFF и другие
  • индивидуальная настройка программы для пользователя, есть возможность открывать элемент в отдельной вкладке или в отдельном окне
  • настройка контрастности, яркости, прозрачности, настройка цвета стиля кистей, карандашей и многое другое
  • работать отдельно со слоями одного изображения
  • изменять и настраивать RGB — каналы
  • анимация графики в формате MNG

Пять бесплатных графических редакторов фотографий

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

PAINT. NET

Бесплатная программа Paint.NET подойдёт скорее всего для квалифицированных фотографов. Которая делает данную программу универсальным помощником и способствует удобной работы с камерой и сканером. Предназначена для корректировки растровых и векторных изображений.

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

Возможности Paint.NET

  • поддержка и редактирование таких форматов как: PNG, GIF, JPEG, BMP, TIFF, TGA, DDS, PDN
  • настройка расположения элементов интерфейса: инструменты, журнал, слои палитра
  • изменения размера изображения, поворот по горизонтали и вертикали, обрезка
  • при большом масштабировании изображения есть возможность активации «сетки» и «линейки»
  • встроены эффекты: размытие, устранение эффекта красных глаз, имитирование изображений, узоры… 

Пять бесплатных графических редакторов фотографий

Программа создавалась под руководством Microsoft. Скачать.

PHOTOSCAPE

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

А если хотите отредактировать или налаживать какие-то эффекты, размытие, фильтры, обрезать фото, склеить изображение это можно сделать в редакторе программы. А также в Photoscape есть инструмент для создания GIF-анимации.

Возможности Photoscape

  • «склеивать» изображения в одно целое, то-есть в виде плитки
  • создание GIF-анимации из нескольких изображений
  • просматривать фото можно отдельно, с помощью «вьювера»
  • возможность разделить изображения на одну, или несколько частей
  • захват экрана
  • возможность печатать готовые работы, а также другие фото
  • конвертация RAW-файлов
  • одновременная работа с несколькими изображениями

Пять бесплатных графических редакторов фотографий

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

Пять бесплатных графических редакторов фотографий

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

PHOTOINSTRUMENT

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

Возможности Photoinstrument

  • восстановление определённых участков изображения, можно удалять ненужные надписи на фото
  • удалять эффект красный глаз
  • рисование с помощью карандаша, кисти, спрея и так далее…
  • ретушировать фотографии, «очиститель кожи», «гламурная кожа», «пластика»
  • изменять яркость, контрастность, осветление, затемнение;
  • вырезать объекты из изображений, копировать, перемещать
  • налаживать текст на фото
  • установка дополнительных плагинов
  • воспроизведение таких файлов как PNG, JPG, GIF, BMP, TGA и других, атакже их конвертирование и редактирование
  • создавать GIF-анимацию

Пять бесплатных графических редакторов фотографий

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

PIXBUILDER STUDIO

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

Возможности PixBuilder Studio

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

Пять бесплатных графических редакторов фотографий

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

Делаем обработку фото в Фотошоп

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

Двигайте ползунок, чтобы увидеть разницу

Скачать архив с материалом к уроку

Шаг 1. Открываем фотографию

Для стилизации желательно выбирать портретные студийные фотографии с хорошим освещением и однородным фоном.

Шаг 2. Стилизация с Масляной краской

Заходим в Фильтр Масляная краска. Настройки: 

  • стилизация — 4
  • чистота —2,3
  • блеск — 0, 2

Объединяем слои, делаем дубликат.

Шаг 3. Используем Галерею фильтров

Заходим в фильтр Очерченные края. Настройки: 

  • Толщина краев —1
  • Интенсивность — 1
  • Постеризация —6 

Применяем режим наложения слоя Мягкий свет. Если ваше фото темное, то попробуйте режим наложения  Экран, если слишком светлое — Умножение. В моем случае хорошо сработал Мягкий свет. Объединяем все слои, делаем дубликат.

Теперь используем Галерея фильтров — Масляная живопись. Настройки:

  • Размер кисти —  2
  • Резкость — 0
  • Кисть — широкая, резкая 

Объединяем слои, дублируем слой.

И наконец, Галерея фильтров — Аппликация. Настройки:

  • Количество уровней — 8
  • Простота краев — 2
  • Четкость краев — 3

Режим наложения Мягкий свет, непрозрачность слоя 50%.

Шаг 4. Помещаем в работу текстуру бумаги 

Помещаем текстуру бумаги и трансформируем под размеры нашего фото. Желательно подобрать цветовую гамму бумаги, под цвет фона фотографии. Дублируем 3 раза и отключаем 3 слоя.

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

Включаем второй дубликат слоя, ставим режим наложения Цветность и непрозрачность 50%.

Включаем следующий дубликат с текстурой бумаги, режим наложения – Умножение.

Включаем последний слой с текстурой бумаги, режим наложения – Мягкий свет.

Теперь объединяем все слои, дублируем слой.

Шаг 5. Финальная коррекция 

Применяем Фильтр —  Другое — Цветовой контраст (Краевой контраст). Радиус — 3 пикселя, режим наложения Перекрытие.

Далее Корректирующий слой Кривые.

И в завершение Галерея фильтров — Очерченные края. Настройки:

  • Толщина краев — 1
  • Интенсивность — 1
  • Постеризация — 6

Режим наложения Экран, непрозрачность слоя – 70% 

При необходимости кадрируем .

Мы закончили! 

Примеры обработки таким способом 

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

Создаем эффект рисованного изображения в Photoshop

В этом уроке мы создадим в Photoshop эффект винтажной живописи с использованием смарт фильтров, масок слоев, винтажных текстур и динамических кистей.

Скачать архив с материалами к уроку

Примечание: Автор использовал платные материалы. В архиве вы найдёте альтернативный вариант изображений для выполнения урока.

1. Подготовка документа

Шаг 1

Нажимаем Ctrl+O и выбираем изображение для работы.

Шаг 2

Нажимаем Alt+Ctrl+I и меняем размер изображения на 2000 х 2000 пикселей.

Шаг 3

Создаем новый слой (Shift+Ctrl+N) и называем его Mask (Маска).

Шаг 4

Создаем копию своего фонового слоя. Клик правой кнопкой мыши – Duplicate Layer (Создать дубликат слоя).

Шаг 5

Переименовываем новый слой в Image (Изображение), затем кликаем правой кнопкой мыши и выбираем Convert to Smart Object (Преобразовать в смарт-объект).

Шаг 6

Теперь нам нужно установить кисти в Photoshop. Нажимаем B, чтобы активировать инструмент Brush (Кисть), а затем переходим к Preset Manager (Управление наборами).

Шаг 7

После этого нажимаем Load (Загрузить) и выбираем кисти из приложения к уроку.

2. Создаем обтравочную маску для слоя

Шаг 1

Теперь давайте начнем создавать маску для нашего изображения. Выбираем слой Mask (Маска) и нажимаем B, а затем рисуем штрихи второй кистью из набора, как показано на рисунке ниже.

Шаг 2

Рисуем штрихи по краям фигуры с помощью первой кисти из набора.

Шаг 3

Перемещаем слой Mask (Маска) ниже смарт-объекта.

Шаг 4

Выбираем смарт-объект, а затем кликаем правой кнопкой мыши и выбираем Create Clipping Mask (Создать обтравочную маску).

Шаг 5

Скрываем фоновый слой.

3. Создаем рисованный эффект

Шаг 1

Выбираем слой смарт-объекта и идем в меню Filter – Filter Gallery – Artistic – Dry Brush (Фильтр – Галерея фильтров – Имитация – Сухая кисть). Устанавливаем следующие настройки:

  • Brush Size (Размер кисти): 5
  • Brush Detail (Детализация): 6
  • Texture (Текстура): 1

Шаг 2

После этого идем в меню Filter – Filter Gallery – Brush Strokes – Crosshatch (Фильтр – Галерея фильтров – Штрихи – Перекрестные штрихи). Устанавливаем следующие настройки:

  • Stroke Length (Длина штриха): 9
  • Sharpness (Резкость): 6
  • Strength (Интенсивность): 1

Шаг 3

Идем в меню Filter – Filter Gallery – Artistic – Paint Daubs (Фильтр – Галерея фильтров – Имитация – Масляная живопись). Устанавливаем следующие настройки:

  • Brush Size (Размер кисти): 2
  • Sharpness (Резкость): 1

Шаг 4

И последним фильтром нам нужно добавить эффект разбрызгивания. Идем в меню Filter – Filter Gallery – Brush Strokes – Splatter (Фильтр – Галерея фильтров – Штрихи – Разбрызгивание). Устанавливаем следующие настройки:

  • Spray Radius (Радиус разбрызгивания): 5
  • Smoothness (Смягчение): 5

4. Создаем винтажный эффект с помощью наложения текстур

Шаг 1

Идем в меню File – Place (Файл – Поместить) и выбираем файл Background Texture. Изменяем его размер до границ документа, удерживая Shift.

Шаг 2

После этого перемещаем слой с текстурой вниз панели Layers (Слои).

Шаг 3

Теперь нам нужно разместить и изменить размер второй текстуры, как мы это делали ранее.

Шаг 4

Теперь меняем режим наложения текстуры на Multiply (Умножение).

5. Выполняем цветокоррекцию изображение

Шаг 1

В последних шагах нам нужно выполнить цветокоррекцию изображения. Идем в меню Layer – New Adjustment Layer – Brightness/Contrast (Слои – Новый корректирующий слой – Яркость/Контрастность)

  • Brightness (Яркость): 30
  • Contrast (Контрастность): 45

Шаг 2

Идем в меню Layer – New Adjustment Layer – Hue/Saturation (Слои – Новый корректирующий слой – Цветовой тон/Насыщенность) и установите Hue (Насыщенность) на +25.

Мы закончили. Отличная работа!

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

Я надеюсь, вам понравился этот урок. Вы можете посмотреть мой экшн Vintage Painting Effect Action в портфолио на GraphicRiver.

Автор: Ivan Gromov

Стилизуем фото в рисунок карандашом в Adobe Photoshop / Фотошоп-мастер

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

Итоговый результат:

Скачать архив с материалами к уроку

Примечание: Автор использует платное изображение. В архиве вы найдёте альтернативный вариант материалов для выполнения урока.

1. Настраиваем Изображение

Шаг 1

Откройте исходное изображение в программе Photoshop. Для создания эффекта карандашного рисунка, я использую красивое изображение тигра. Дважды щёлкните по слою Задний фон (background layer), чтобы разблокировать его, назовите этот слой Слой 1 (Layer 1). Установите цвет переднего плана на белый оттенок, а затем с помощью инструмента Заливка (Paint Bucket Tool (G)), выполните заливку белым цветом. Убедитесь, чтобы слой с белой заливкой был расположен ниже слоя с исходным изображением.

Если ваше исходное изображение цветное, то преобразуйте его в чёрно-белое. Для этого, перейдите на слой с фотографией, а затем идём Изображение – Коррекция — Цветовой тон / Насыщенность (Image > Adjustments > Hue & Saturation) и в появившемся окне настроек данной коррекции уменьшите значение Насыщенности (Saturation) до -100.

2. Создаём Эффект Рисунка

Шаг 1

Теперь пришло время создать эффект рисунка! К слою с фотографией добавьте слой-маску. Щёлкните по миниатюре слой-маски, а затем залейте слой-маску чёрным цветом с помощью инструмента Заливка (Paint Bucket Tool (G)).

Далее, установите цвет переднего плана на белый оттенок, а цвет заднего плана на чёрный оттенок. Используя свой графический планшет, выберите инструмент Кисть (Brush Tool (B)). Начните наносить штрихи белой кистью поверх чёрной слой-маски. Для традиционного рисунка, используйте кисть, имитирующую карандаш или штрихи кисти. В данном случае, мы используем кисть Плоская тупая с короткой жёсткой щетиной (Flat Blunt Short Stiff Brush) из набора кистей Photoshop.

Шаг 2

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

Шаг 3

Почистите отдельные участки с помощью инструмента Ластик (Eraser (E)). Вы можете нанести штрихи по всему холсту или оставить белые участки на изображении для получения нужного эффекта. Расположите изображение тигра по центру с помощью инструмента Перемещение (Move Tool (V)). Продолжайте добавлять штрихи, пока вас не устроит результат. Когда вы завершите работу, нажмите клавиши (Ctrl+J), чтобы продублировать слой.

Шаг 4

Давайте усилим рисунок. Идём Изображение – Коррекция – Уровни (Image > Adjustments > Levels), установите настройки для RGB канала (RGB Channel), которые указаны ниже для усиления контраста и выделения штрихов. Теперь объедините все слои вместе.

Примечание переводчика: чтобы объединить все слои, нажмите клавиши (Ctrl+Alt+Shift+E).

Входные значения (Input Level) для:

  • Теней (Shadow): 0
  • Средних тонов (Mid tone): 0.79
  • Световых бликов (Highlight): 255

Шаг 5

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

Щёлкните правой кнопкой по объединённому слою с рисунком и в появившемся меню выберите опцию Параметры наложения (Blending Options). Далее, выберите стиль слоя Наложение градиента (Gradient Overlay), установите Линейный градиент (Linear Gradient), цвет градиента от тёмно-синего до светло-синего, режим наложения Исключение (Exclusion), Непрозрачность (Opacity) 40%, Масштаб (Scale) 150%.

Результат должен быть, как на скриншоте ниже.

Шаг 6

В заключение, добавьте ещё одну коррекцию Уровни (Levels). На этот раз для RGB канала (RGB Channel), установите следующие настройки 18, 0.73, и 248. Поставьте подпись и ваш рисунок завершён!

Если вы никогда не думали, что вы могли бы сделать это раньше, то подумайте еще раз! Надеюсь, что вам понравился этот урок, и вы получите массу удовольствия, превращая свои фотографии в рисунки! До новых встреч!

Итоговый результат:

Работа переводчика:

Автор: blog.123rf.com

Превращаем фото в рисунок карандашом в Photoshop / Фотошоп-мастер

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

Скачать архив с материалами к уроку

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

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

Начинаем

Открываем фото, с которым будем работать. Переходим FileOpen (Файл – Открыть), выбираем нужную картинку и жмем кнопку Открыть. Перед тем, как продолжить, я дам вам несколько советом по подготовке документа:

  1. Ваше фото должно быть в цветовом режиме RGB, 8 bits/channel (бит/канал). Чтобы проверить так ли это, переходим ImageMode (Изображение – Режим).
  2. Чтобы получить наилучший результат, размер фото должен быть между 1500-4000 пикселями в ширину/высоту. Чтобы проверить, переходим ImageImage Size (Изображение – Размер изображения).
  3. Фото должно быть фоновым слоем. Если это не так, переходим LayerNewBackground from Layer (Слой – Новый – Преобразовать в Задний план).
  4. Чтобы выполнить автоматическую цветокоррекцию, переходим ImageAuto Tone (Изображение – Автотон), ImageAuto Contrast (Изображение – Автоконтраст) и ImageAuto Color (Изображение – Автоматическая цветовая коррекция).

2. Создаем фон

Фон мы будем заливать сплошным цветом. Переходим LayerNew Fill LayerSolid Color (Слой – Новый слой-заливка – Цвет), чтобы создать новый слой-заливку, и называем его «Фоновый цвет».

3. Создаем базовый набросок

Шаг 1

Теперь мы создадим базовый набросок. Выбираем фоновый слой с машинами (слой «Background» на скриншоте) и переходим LayerNewLayer Via Copy (Слой – Новый – Скопировать на новый слой), чтобы скопировать фоновый слой, затем перемещаем дубликат в самый верх панели слоев. После этого жмем D, чтобы сбросить цвет на стандартные. Переходим FilterSketchPhotocopy (Фильтр – Эскиз – Ксерокопия) и настраиваем фильтр:

Шаг 2

Называем этот слой «Базовый эскиз» и меняем его режим смешивания на Multiply (Умножение).

4. Создаем черновой набросок

Шаг 1

Теперь мы создадим черновой набросок. Переходим LayerNewLayer Via Copy (Слой – Новый – Скопировать на новый слой), чтобы скопировать слой «Базовый эскиз». Берем Lasso Tool (L) (Лассо), кликаем правой кнопкой по рабочему полотну, выбираем Free Transform (Свободную трансформацию) и увеличиваем ширину и высоту на 105%, как показано ниже:

Шаг 2

Называем этот слой «Большой черновой эскиз» и уменьшаем непрозрачность до 14%.

Шаг 3

Выбираем слой «Базовый эскиз» и переходим LayerNewLayer Via Copy (Слой – Новый – Скопировать на новый слой), чтобы скопировать его. Берем Lasso Tool (L) (Лассо), кликаем правой кнопкой по рабочему полотну, выбираем Free Transform (Свободную трансформацию) и уменьшаем ширину и высоту на 95%, как показано ниже:

Шаг 4

Называем этот слой «Меньший черновой эскиз» и уменьшаем его непрозрачность до 14%.

5. Создаем грубый набросок

Шаг 1

Теперь мы создадим грубый набросок. Выбираем фоновый слой с машинами и переходим LayerNewLayer Via Copy (Слой – Новый – Скопировать на новый слой), чтобы скопировать его, затем перемещаем дубликат в самый верх панели слоев. Переходим FilterArtisticCutout (Фильтр – Имитация – Аппликация) и настраиваем фильтр:

Шаг 2

Переходим Filter – Stylize – Find Edges (Фильтр – Стилизация – Выделение краев), а затем Image – Adjustments – Desaturate (Изображение – Коррекция – Обесцветить).

Шаг 3

Называем этот слой «Грубый эскиз_1», меняем его режим смешивания на Color Burn (Затемнение основы) и уменьшаем непрозрачность до 30%.

Шаг 4

Теперь, используя описанный выше метод, мы создадим больше слоев с грубым наброском. Повторяем шаги 1-2, но в первом шаге используем другие настройки фильтра:

Шаг 5

Называем этот слой «Грубый эскиз_2», меняем его режим смешивания на Color Burn (Затемнение основы), уменьшаем непрозрачность до 25% и перемещаем его под слой «Грубый эскиз_1».

Шаг 6

Снова повторяем шаги 1-2, но в первом шаге используем новые настройки фильтра:

Шаг 7

Называем этот слой «Грубый эскиз_3», меняем его режим смешивания на Color Burn (Затемнение основы), уменьшаем непрозрачность до 20% и опускаем под слой «Грубый эскиз_2».

Шаг 8

Еще раз повторяем шаги 1-2, но в первом шаге используем новые настройки фильтра:

Шаг 9

Называем этот слой «Грубый эскиз_4», меняем его режим смешивания на Color Burn (Затемнение основы), уменьшаем непрозрачность до 20% и опускаем под слой «Грубый эскиз_3».

Шаг 10

Еще раз повторяем шаги 1-2, но в первом шаге используем новые настройки фильтра:

Шаг 11

Называем этот слой «Грубый эскиз_5», меняем его режим смешивания на Color Burn (Затемнение основы), уменьшаем непрозрачность до 18% и опускаем под слой «Грубый эскиз_4».

Шаг 12

Последний раз повторяем шаги 1-2, но в первом шаге используем новые настройки фильтра:

Шаг 13

Называем этот слой «Грубый эскиз_6», меняем его режим смешивания на Color Burn (Затемнение основы), уменьшаем непрозрачность до 7% и опускаем под слой «Грубый эскиз_5».

Шаг 14

Теперь мы должны сгруппировать все слои с грубым эскизом. Выделяем слой «Грубый жскиз_6», зажимаем клавишу Shift и кликаем по слою «Грубый эскиз_1», чтобы автоматически выделить все шесть слоев. Далее переходим LayerNewGroup from Layers (Слой – Новый – Группа из слоев), чтобы создать из выбранных слоев группу, которую называем «Грубый эскиз».

6. Создаем тени

Шаг 1

Теперь мы добавим легкое затенение на рисунке. Выделяем фоновый слой и переходим LayerNewLayer Via Copy (Слой – Новый – Скопировать на новый слой), чтобы скопировать его, и перемещаем слой в самый верх панели слоев. Переходим FilterStylizeFind Edges (Фильтр – Стилизация – Выделение краев), затем применяем ImageAdjustmentsDesaturate (Изображение – Коррекция – Обесцветить).

Шаг 2

Переходим FilterBrush StrokesAngled Strokes (Фильтр – Штрихи – Наклонные штрихи) и применяем следующие настройки:

Шаг 3

Называем этот слой «Тень_1», меняем режим смешивания на Multiply (Умножение) и уменьшаем непрозрачность до 12%.

Шаг 4

Повторяем шаг 1, затем применяем FilterBrush StrokesCrosshatch (Фильтр – Штрихи – Перекрестные штрихи) со следующими настройками:

Шаг 5

Называем этот слой «Тень_2», меняем режим смешивания на Multiply (Умножение), уменьшаем непрозрачность до 5% и перемещаем его под слой «Тень_1», чтобы иметь правильный порядок на панели слоев.

7. Добавляем шум

Шаг 1

В этом разделе мы добавим немного шума. Выбираем слой «Тень_1» и переходим LayerNewLayer (Слой – Новый – Слой), чтобы создать новый слой, и называем его «Шум».

Шаг 2

Жмем клавишу D, чтобы сбросить цвета на стандартные, затем переходим EditFill (Редактирование – Заливка) и вводим следующие настройки:

Шаг 3

Переходим FilterNoiseAdd Noise (Фильтр – Шум – Добавить шум) и применяем следующие настройки:

Шаг 4

Теперь меняем режим смешивания слоя на Screen (Осветление) и уменьшаем непрозрачность до 64%.

8. Тонировка

Шаг 1

Теперь мы добавим легкую тонировку. Переходим LayerNew Adjustment LayerCurves (Слой – Новый корректирующий слой – Кривые), чтобы добавить новый корректирующий слой, который мы называем «Тонировка».

Шаг 2

Дважды кликаем по миниатюре корректирующего слоя на панели слоев и настраиваем его:

9. Финальные штрихи

Шаг 1

В этом разделе мы добавим финальные штрихи. Переходим LayerNew Adjustment LayerPhoto Filter (Слой – Новый корректирующий слой – Фото-фильтр), чтобы создать новый корректирующий слой Фото-фильтр, который мы называем «Оттенок».

Шаг 2

Дважды кликаем по миниатюре корректирующего слоя, чтобы настроить его:

Шаг 3

Теперь добавим контрастность. Жмем клавишу D, чтобы сбросить цвета на стандартные, и переходим LayerNew Adjustment LayerGradient Map (Слой – Новый корректирующий слой – Карта градиента), чтобы добавить корректирующий слой Карта градиента, который мы называем «Контрастность».

Шаг 4

Меняем режим смешивания корректирующего слоя на Soft Light (Мягкий свет) и уменьшаем непрозрачность до 18%.

Шаг 5

Теперь мы настроим насыщенность. Переходим LayerNew Adjustment LayerVibrance (Слой – Новый корректирующий слой – Вибрация), чтобы создать новый корректирующий слой, который мы называем «Насыщенность».

Шаг 6

Дважды кликаем по миниатюре корректирующего слоя и настраиваем его:

Шаг 7

Теперь мы подкорректируем яркость. Переходим LayerNew Adjustment LayerLevels (Слой – Новый корректирующий слой – Уровни), чтобы создать новый корректирующий слой, который мы называем «Яркость».

Шаг 8

Дважды кликаем по миниатюре корректирующего слоя и настраиваем его:

Шаг 9

Далее добавим резкость. Жмем сочетание клавиш Ctrl+Alt+Shift+E, чтобы объединить все видимые слои на отдельном новом слое. Затем переходим FilterOtherHigh Pass (Фильтр – Другое – Цветовой контраст) и настраиваем фильтр:

Шаг 10

Называем этот слой «Резкость», меняем его режим смешивания на Hard Light (Жесткий свет) и уменьшаем непрозрачность до 76%.

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

Я дам вам несколько советом, как можно дополнительно изменить готовый рисунок:

  • Выбираем слой «Фоновый цвет», дважды кликаем по его миниатюре и подбираем другой цвет. Закончив, кликаем ОК.
  • Поиграйте с непрозрачностью любого слоя с эскизом, чтобы получить другой результат.
  • Выбираем слой «Тонировка», дважды кликаем по его миниатюре и на панели Properties (Свойства) применяем другие настройки.
  • Выбираем слой «Оттенок», дважды кликаем по его миниатюре и на панели Properties (Свойства) применяем другие настройки.
  • Выбираем слой «Контрастность» и экспериментируем с его непрозрачностью, чтобы настроить контрастность рисунка.
  • Выбираем слой «Насыщенность», дважды кликаем по его миниатюре и на панели Properties (Свойства) применяем другие настройки для Vibrance (Вибрация) и Saturation (Насыщенность), чтобы получить другой результат.
  • Выбираем слой «Яркость», дважды кликаем по его миниатюре и применяем другие настройки.
  • Выбираем слой «Резкость» и экспериментируем с его непрозрачностью, чтобы настроить степень резкости.

Получаем вот такой результат:

Отличная работа!

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

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

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

Автор: Marko Kožokar

Эффект карандашного рисунка в Фотошоп / Фотошоп-мастер

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

Урок выполнен в Photoshop CS6, но подойдут и более ранние версии.

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

Вот так будет выглядеть чёрно – белый рисунок.

И тот же эффект после прибавления цвета с оригинальной фотографии.

Давайте начнём!

Шаг 1. Добавляем слой Цветовой тон/Насыщенность

Откройте ваше фото в фотошоп. На панели слоёв мы видим, что это единственный слой.

Для создания нашего эффекта первое, что мы должны сделать – это удалить все цвета с нашего изображения, не нарушив само изображение. Для этого на панели  Adjustments (Коррекция) нажмите на иконку Hue / Saturation (Цветовой тон/Насыщенность).

Над фоновым слоем появится новый корректирующий слой Hue / Saturation (Цветовой тон/Насыщенность).

Шаг 2. Обесцвечиваем изображение

Чтобы удалить цвет с изображения, просто перетащите ползунок Saturation (Насыщенность) до значения -100.

В итоге изображение станет чёрно – белым.

В панели слоёв нажмите на фоновый слой, чтобы его выбрать.

Шаг 4. Дублируем  Фоновый слой

Нам нужно создать копию фонового слоя. Для этого пройдите в меню Layer > New > Layer via Copy (Слои – Новый – Скопировать на новый слой). Второй более быстрый способ – это сочетание клавиш Ctrl+J.

В панели слоёв появилась копия фонового слоя.

Шаг 5. Инвертируем изображение

Для того, чтобы инвертировать созданную копию фонового слоя, пройдите в меню Image > Adjustments > Invert (Изображение – Коррекция – Инверсия). Или нажмите сочетание клавиш Ctrl+I.

Изображение примет вид негатива.

Измените режим наложения этого слоя на Color Dodge (Осветление основы).

В итоге изображение станет белым. В моём случае вы видите несколько небольших чёрных участков – так и должно быть.

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

Стоя на дубликате фонового слоя, в правом верхнем углу панели слоёв нажмите на иконку меню.

В списке выберите Convert to Smart Object (Преобразовать в Смарт – Объект).

На миниатюре слоя в правом нижнем углу появится значок смарт – объекта.

Для того, чтобы применить фильтр к слою со смарт – объектом, пройдите в меню Filter > Blur > Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу).

В открывшемся диалоговом окне фильтра измените значение Radius (Радиус), чтобы немного размыть изображение. В моём случае – примерно 12 рх. Настройки для вашего фото могут отличаться от моих.

Нажмите ОК, чтобы применить настройки.
Вот мой результат.

Одно из главных преимуществ  применения фильтра в качестве Смарт – фильтра заключается в том, что если вам не нравится результат, то вы  можете в любой момент откорректировать настройки фильтра. Для этого нужно дважды щёлкнуть на название фильтра, чтобы открыть диалоговое окно и отрегулировать настройки.

Мы создали основной эскиз, но он слишком светлый и его нужно немного затемнить. Для этого на панели Adjustments (Коррекция) нажмите на иконку коррекции  Levels (Уровни).

Над слоем со Смарт – Объектом появится новый корректирующий слой.

Шаг 10. Изменяем режима наложения

Параметры корректирующего слоя нам не нужны – оставим их по умолчанию. Чтобы затемнить наш эскиз всё, что нам нужно – это изменить режим наложения этого слоя на Multiply (Умножение).

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

Если ваше изображение покажется вам слишком тёмным, то вы можете изменить Opacity (Непрозрачность) корректирующего слоя Уровни. В моём случае я установлю примерно на 60%.

Вот что у меня получилось.

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

Затем, так же, как вы делали в шаге 4, дублируйте слой через меню Layer > New > Layer via Copy (Слои – Новый – Скопировать на новый слой), либо нажмите комбинацию клавиш Ctrl+J.

Вторая копия появится непосредственно над оригиналом.

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

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

Шаг 15. Изменяем режим наложения

Измените режим наложения этого слоя на Color (Цветность).

Шаг 16. Изменяем непрозрачность

Наконец, если цвет выглядит слишком насыщенным, то вы можете приглушить Портретное фото в карандашный рисунок в Photoshop его за счёт снижения Opacity (Непрозрачность) слоя. Я установлю до 65%.

Окончательный результат.

Автор урока: Steve Patterson

Рисование с обработкой и Ruby

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

К счастью, все это совершенство больше не накапливается внутри Обработки; Вы можете использовать его из Ruby! В этой статье мы расскажем о гемах ruby-processing и примерах Ruby / Processing в действии.

Настройка

Вам понадобятся копии jRuby и Processing, чтобы ruby-processing работал правильно.

Инструкции по настройке рабочих параметров различаются в зависимости от того, какой менеджер среды Ruby вы используете (например, rbenv, rvm), вашей операционной системы и версии Java.

Прежде всего, вы хотите получить копию jRuby. Если вы используете RVM:

  рвм установить jruby
RVM использовать Jruby  

Если вы на rbenv,

  rbenv install jruby- * номер версии *  

Далее вам нужна копия Processing, которая довольно проста, так как у них есть хорошая страница загрузки.

Мы можем получить драгоценный камень ruby-processing:

  драгоценных камней установить ruby-processing  

Прежде чем мы сможем начать работу, нам нужно сообщить ruby-processing, где находится наша копия Processing. В файле конфигурации ~ / .rp5rc YAML установите переменную PROCESSING_ROOT . К счастью, есть файл Processing, который устанавливает эту переменную для вас. Если вы работаете в Mac OS X, это должно выглядеть примерно так:

  PROCESSING_ROOT: "/ Приложения / Обработка.Приложение / Содержание / Java " 

Достаточно конфигурации. Давайте проникнем в код.

Baby Steps

Вот вершина для некоторого кода Ruby / Processing:

  def setup
  размер 200, 200
  фон 0
  гладкий; плавный
конец

Def Draw
  заполните 255, 102, 18
  эллипс 56, 46, 55, 55
конец  

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

  rp5 run first.rb  

Запустите его, немного подождите, пока JVM не запустится, и вы увидите цветной круг, уставившийся на вас. Код невероятно прост. Все программы Ruby / Processing имеют метод настройки , который вызывается только один раз во время настройки «сцены». Затем у нас есть метод draw , который вызывается повторно и должен обновлять экран. В нашей настройке мы устанавливаем размер экрана, цвет фона ( 0 означает черный).Затем в нарисуйте , установите цвет заливки, используя значения RGB, и нарисуйте круг в координатах (56, 46).

Обработка

имеет фантастическую ссылку, почти все из которой можно сразу передать (то есть дословно) в Ruby / Processing. Тем не менее, важно отметить, что Processing использует camelCase для имен методов, тогда как в эквиваленте в Ruby используются подчеркивания.

Теперь давайте перейдем к чему-то более сложному.

Частицы

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

  класс частиц
  attr_accessor: to_x,: to_y,: x,: y,: скорость

  def initialize (x, y, width, height)
    @x = x
    @y = y
    @velocity = 2

    @to_x = rand (ширина)
    @to_y = rand (высота)
    @alpha = rand (255)
  конец

  Def Draw
    ход 255, 255, 255
    заполнить 150, 150, 150, 200
    эллипс @x, @y, 8, 8
  конец

  Def Move
    mag = математикаsqrt (@x ** 2 + @y ** 2)
    @x = @x + @velocity * (@to_x - @x) / mag
    @y = @y + @velocity * (@to_y - @y) / mag
  конец
конец


настройка по умолчанию
  @bgcolor = "# 2f2f2f"

  размер displayWidth, displayHeight
  цвет фона (@bgcolor)
  гладкий; плавный

  @particles = []
  1000 раз
    @particles << Particle.new (rand (ширина), rand (высота), ширина, высота)
  конец
конец

def mouse_pressed
  @ частица. каждая | частица |
    частиц.скорость = 6
    частицы.to_x = mouse_x
    icle.to_y = mouse_y
  конец
конец

def mouse_released
  @ частица. каждая | частица |
    частицы.to_x = rand (ширина)
    частицы.to_y = rand (высота)
    частицы.скорость = 10
  конец
конец

Def Draw
  цвет фона (@bgcolor)

  @ частица. каждая | частица |
    particle.draw
    particle.move
  конец

конец  

Ого, это похоже на тонну кода! Однако, когда он разбит на куски размером с укус, он оказывается довольно простым.Давайте взглянем на Particle class:

  класс частиц
  attr_accessor: to_x,: to_y,: x,: y,: скорость

  def initialize (x, y, width, height)
    @x = x
    @y = y
    @velocity = 2

    @to_x = rand (ширина)
    @to_y = rand (высота)
    @alpha = rand (255)
  конец

  Def Draw
    ход 255, 255, 255
    заполнить 150, 150, 150, 200
    эллипс @x, @y, 8, 8
  конец

  Def Move
    mag = математикаsqrt (@x ** 2 + @y ** 2)
    @x = @x + @velocity * (@to_x - @x) / mag
    @y = @y + @velocity * (@to_y - @y) / mag
  конец
конец  

Метод инициализации является более или менее стандартным. Волшебство происходит в тираже , где мы используем методы Ruby / Processing штрихов , заливки , эллипса , чтобы нарисовать частицу в виде круга в данной точке. Каждая частица имеет атрибуты to_x и to_y , которые сообщают ей, куда она должна идти.В методе move мы просто используем формулу расстояния, чтобы переместить частицу в правильном направлении.

  def setup
  размер displayWidth, displayHeight
  цвет фона (@bgcolor)
  гладкий; плавный

  @particles = []
  1000 раз
    @particles << Particle.new (rand (ширина), rand (высота), ширина, высота)
  конец
конец  

Установите размер экрана displayWidth и displayHeight , что позволяет нам создавать полу-полноэкранные функции на большинстве платформ.Затем установите цвет фона и в сочетании с цветом (мне нравятся эти интуитивно понятные имена). Завершите настройку, создав список из 1000 частиц для рисования.

  Def Draw
  цвет фона (@bgcolor)

  @ частица. каждая | частица |
    particle.draw
    particle.move
  конец
конец  

Мы используем довольно распространенную идею обработки: в начале большинства кадров вы все расчищаете с помощью вызова на фоне .Затем нарисуйте каждую частицу на экране, а затем вызовите
и переместите , сдвинув ее ближе к значениям to_x и to_y . Но где эти значения на самом деле установлены?

  def mouse_pressed
  @ частица. каждая | частица |
    частицы.скорость = 6
    частицы.to_x = mouse_x
    icle.to_y = mouse_y
  конец
конец

def mouse_released
  @ частица. каждая | частица |
    частицы.to_x = rand (ширина)
    частиц.to_y = rand (высота)
    частицы.скорость = 10
  конец
конец  

Обработка делает обработку событий действительно простой . Здесь мы используем mouse_pressed и mouse_released , которые вызываются при нажатии и отпускании кнопки мыши, соответственно. Когда мышь нажата, установите значения «to» для каждой частицы, чтобы они указывали на местоположение мыши (вызывая их перемещение в направлении мыши). Затем, отпустив мышь, рандомизируйте значения «до» частицы, заставляя их распространяться.

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

Редактор графиков

Когда мы думаем о графиках, мы обычно думаем о двух осях и некоторых данных, нанесенных на их плоскости. Оказывается, что графы - это математические объекты, которые состоят из узлов и ребер . По сути, это точки, соединенные линиями. Как правило, углы между линиями и длинами линий не имеют значения.Вместо этого понятие «связность» является более важным. Эти графики имеют все виды интересных свойств. Давайте посмотрим, сможем ли мы создать инструмент с Ruby / Processing для создания графиков (строго говоря, неориентированных графиков), как этот:

Нам понадобится:

  • Способ создания узлов
  • Способ создания ребер
  • Способ перемещаться по узлам, следя за тем, чтобы края оставались соединенными.

Давайте получим класс Point (который представляет собой узел):

  класс Точка
  attr_accessor: x,: y, :gment_color,: to_points,: fill_color
  def initialize (x, y)
    @x = x
    @y = y
    @segment_color = color (100, 100, 100, 100)
    @radius = 30
    @fill_color = color (0)

    # точки для рисования сегментов
    @to_points = []
  конец

  Def Draw
    заполнить @fill_color
    эллипс @x, @y, @radius, @radius
  конец

  defgment_to (other_point)
    инсульт @segment_color
    линия @x, @y, other_point.x, other_point.y
  конец

  def in_thresh (x, y)
    thresh = @radius
    return (abs (@x - x) <порог и abs (@y - y) <порог)
  конец
конец  

Мы добавили два важных метода по сравнению с классом Particle , который мы создали ранее. сегмент_т создает концепцию линий между краями. line Метод обработки рисует линии, предоставляя координаты начальной и конечной точек в качестве аргументов. Наконец, метод in_thresh позволяет нам определить, находится ли пара координат «достаточно близко» к нашей точке; он будет использоваться для проверки совпадения кликов с узлом.

Настройка сцены довольно проста:

  def setup
  размер displayWidth, displayHeight
  ход 3
  фон (255)
  гладкий; плавный

  @points = []
  7. раз
    @points << Point.new (rand (ширина), rand (высота))
  конец
конец  

Сначала настройте стандартный размер и фон вместе с вызовом stroke_weight , который сообщает Processing, какова толщина линий.Кроме того, инициализируйте @points и добавьте семь рандомизированных узлов, только для ударов.

  Def Draw
  фон (255)

  @ points.each do | point |
    point.draw
    point.to_points.each do | tp |
      point.segment_to tp
    конец
  конец
конец  

Метод ничьей так же прост. Просто нарисуйте заданные точки вместе с соответствующими ребрами. Но как эти края попадают туда в первую очередь?

  def mouse_clicked
  clicked_points = @points.выберите сделать | p |
    p.in_thresh mouse_x, mouse_y
  конец

  if clicked_points.length == 0
    @points << Point.new (mouse_x, mouse_y)
  elsif @from_node
    @ from_node.to_points << clicked_points [0]
    @ from_node.fill_color = color (0)
    @from_node = ноль
  еще
    @from_node = clicked_points [0]
    @ from_node.fill_color = color (255, 0, 0)
  конец
конец  

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

Из-за того, как мы используем клики, в событии mouse_clicked есть некоторые запутанные вещи. Сначала настройте clicked_points как массив точек, которые находятся в пределах диапазона клика. Затем, если щелчок не имеет ничего общего с существующими точками, создайте новый узел. Впоследствии используйте переменную @from_node , чтобы определить, является ли это первым или вторым щелчком при создании ребра.Если это первый, «выделите» узел цветом, чтобы показать пользователю, что он собирается создать ребро. Если это второй узел, добавьте ребро.

Обратите внимание, что внутри mouse_clicked нет кода для рисования. Все эти вещи обрабатываются внутри класса Point и метода draw . Как правило, ваш код рисования должен оставаться отделенным от реальной логики (немного похоже на идею разделения побочных эффектов в функциональных языках).

Что если мы хотим переместить узлы?

  def mouse_pressed
  @точки.каждый делает | p |
    if p.in_thresh (mouse_x, mouse_y)
      @node = p
    конец
  конец
конец

def mouse_dragged
  если @node
    @ node.x = mouse_x
    @ node.y = mouse_y
  конец
конец  

Используйте события mouse_pressed и mouse_dragged . Первый вызывается, как только кнопка мыши нажата, а последний вызывается только , когда мышь перетаскивают. В первом случае установите @node так, чтобы пользователь «нажимал» на мышь.Затем в mouse_dragged , если пользователь нажал на точку, переместите точку туда, где находится мышь. Обратите внимание, что mouse_dragged вызывается многократно, пока пользователь перетаскивает, поэтому узел будет двигаться вместе с мышью на время перетаскивания.

Давайте посмотрим код во всей красе:

  класс Точка
  attr_accessor: x,: y, :gment_color,: to_points,: fill_color
  def initialize (x, y)
    @x = x
    @y = y
    @segment_color = color (100, 100, 100, 100)
    @radius = 30
    @fill_color = color (0)
    # точки для рисования сегментов
    @to_points = []
  конец

  Def Draw
    заполнить @fill_color
    эллипс @x, @y, @radius, @radius
  конец

  defgment_to (other_point)
    инсульт @segment_color
    линия @x, @y, other_point.x, other_point.y
  конец

  def in_thresh (x, y)
    thresh = @radius
    return (abs (@x - x) <порог и abs (@y - y) <порог)
  конец
конец

настройка по умолчанию
  Размер дисплеяWidth, displayHeight-160
  ход 3
  фон (255)
  гладкий; плавный

  @points = []
  7. раз
    @points << Point.new (rand (ширина), rand (высота))
  конец
конец

def mouse_pressed
  @ points.each do | p |
    if p.in_thresh (mouse_x, mouse_y)
      @node = p
    конец
  конец
конец

def mouse_dragged
  если @node
    @узел.x = mouse_x
    @ node.y = mouse_y
  конец
конец

def mouse_clicked
  clicked_points = @ points.select do | p |
    p.in_thresh mouse_x, mouse_y
  конец

  if clicked_points.length == 0
    @points << Point.new (mouse_x, mouse_y)
  elsif @from_node
    @ from_node.to_points << clicked_points [0]
    @ from_node.fill_color = color (0)
    @from_node = ноль
  еще
    @from_node = clicked_points [0]
    @from_node.fill_color = color (255, 0, 0)
  конец
конец

def key_pressed
  если ключ == ''
    @points = []
  конец
конец

Def Draw
  фон (255)

  @ points.each do | point |
    point.draw
    point.to_points.each do | tp |
      point.segment_to tp
    конец
  конец
конец  

Немного поиграв с ним, он кажется удивительно плавным и дружелюбным. Хотя мы могли бы добавить множество функций (например, сохранение в файл, счетчик количества ребер и т. Д.).), это хорошая основа. Обратите внимание, что мы использовали набор довольно простых вызовов, таких как , линия , , эллипс , , фон и т. Д. Обработка предоставляет нам эту простоту благодаря использованию конечного автомата внутри. Вызовы, которые вы делаете, могут повлиять на результаты последующих вызовов из-за того, что Обработка удерживает состояние. Это позволяет очень простой код, но отладка может стать трудной, потому что вы должны мысленно отслеживать это состояние, пока вы работаете со своим кодом.

Завершение

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

,

Понимание void draw () при обработке

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

Учебники \ Processing.org


Начало работы
Кейси Реас и Бен Фрай

Добро пожаловать в обработку! Это введение охватывает основы написания кода обработки.

Уровень: Начинающий


Обзор обработки
Беном Фраем и Кейси Реасом

Немного более подробное введение в различные функции обработки, чем учебное пособие по началу работы.

Уровень: Начинающий


Цвет
Даниэль Шиффман

Введение в цифровой цвет.

Уровень: Начинающий


Объекты
Даниэль Шиффман

Основы объектно-ориентированного программирования.

Уровень: Начинающий


Интерактивность
Кейси Реас и Бен Фрай

Введение в интерактивность с помощью мыши и клавиатуры.

Уровень: Начинающий


Типография
Кейси Реас и Бен Фрай

Работа с шрифтами и текстом.

Уровень: Начинающий


Строки и текст для рисования
by Daniel Shiffman

Узнайте, как использовать класс String и отображать текст на экране.

Уровень: Средний


Массивы
Кейси Реас и Бен Фрай

Как хранить и получать доступ к данным в структурах массива.

Уровень: Средний


изображений и пикселей
Даниэль Шиффман

Как загружать и отображать изображения, а также получать доступ к их пикселям.

Уровень: Средний


Кривые
от J David Eisenberg

Узнайте, как рисовать дуги, кривые сплайнов и кривые Безье.

Уровень: Средний


2D трансформации
J David Eisenberg

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

Уровень: Средний


Данные
Даниэль Шиффман

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

Уровень: Средний


Рендеринг Техники
Кейси Реас и Бен Фрай

Инструменты для рендеринга геометрии в обработке.

Уровень: Средний


Двумерные массивы
by Daniel Shiffman

Сохраняйте и обрабатывайте данные в матрице, используя двумерный массив.

Уровень: Средний


Звук
Р. Люка Дюбуа и Вильма Тобена

Узнайте, как воспроизводить, анализировать и синтезировать звук с помощью библиотеки звуков.

Уровень: Средний


Электроника
Эрнандо Берраган и Кейси Реас

Управление физическим носителем с помощью обработки, Arduino и проводки.

Уровень: Средний


Сеть
by Alexander R. Galloway

Введение в отправку и получение данных с клиентами и серверами.

Уровень: Средний


Print
by Casey Reas

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

Уровень: Средний


Шейдеры
от Andres Colubri

Руководство по внедрению шейдеров GLSL в процессинге.

Уровень: Продвинутый


PVector
Даниэль Шиффман

Введение в использование класса PVector в обработке.

Уровень: Продвинутый


P3D
Даниэль Шиффман

Разработка современных графических приложений в обработке с использованием режима P3D (OpenGL).

Уровень: Продвинутый


Видео
от Дэниела Шиффмана

Как отображать живое и записанное видео

Уровень: Продвинутый


Анатомия программы
J David Eisenberg

Как проанализировать проблему и разбить ее на шаги, которые может выполнить компьютер?

Уровень: Продвинутый

Обзор \ Processing.org

В течение последних шестнадцати лет, обработка способствовала грамотности программного обеспечения, особенно в области изобразительного искусства, и визуальной грамотности в технологии. Первоначально созданная для того, чтобы служить наброском программного обеспечения и обучать основам программирования в визуальном контексте, обработка также превратилась в инструмент разработки для профессионалов. Программное обеспечение для обработки является бесплатным и открытым исходным кодом и работает на платформах Mac, Windows и GNU / Linux.

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

Образование

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

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

Инновации в обучении с помощью обработки были адаптированы для учебных пособий по компьютерной науке в Ханской академии, которые предлагаются бесплатно в Интернете.Учебники начинаются с рисования, используя большинство функций обработки для рисования. Подход к обработке также был применен к электронике в проектах Arduino и Wiring. Arduino использует синтаксис, вдохновленный тем, что используется с Processing, и продолжает использовать модифицированную версию среды программирования Processing, чтобы облегчить учащимся обучение программированию роботов и бесчисленных других проектов в области электроники.

Культура

Программное обеспечение для обработки используется тысячами визуальных дизайнеров, художников и архитекторов для создания своих работ.Проекты, созданные с помощью Processing, были представлены в Музее современного искусства в Нью-Йорке, Музее Виктории и Альберта в Лондоне, Центре Жоржа Помпиду в Париже и на многих других знаменитых площадках. Обработка используется для создания проектируемых сценических дизайнов для танцевальных и музыкальных представлений; создавать изображения для музыкальных клипов и фильмов; экспортировать изображения для плакатов, журналов и книг; и создавать интерактивные инсталляции в галереях, в музеях и на улице. Некоторые выдающиеся проекты включают видео для Radiohead в Карточном домике, генеративный логотип MIT Media Lab и проектируемую на Chronograph фреску для созданного Фрэнком Гери Центра Нового мира в Майами.Но самое главное в обработке и культуре - это не громкие результаты - это то, как программное обеспечение привлекло новое поколение визуальных художников, чтобы рассматривать программирование как неотъемлемую часть их творческой практики.

Исследования

Прототипирование программного обеспечения и визуализация данных являются двумя наиболее важными областями для разработчиков обработки. Исследовательские лаборатории в технологических компаниях, таких как Google и Intel, использовали Processing для создания прототипов новых интерфейсов и сервисов.Компании, включая General Electric, Nokia и Yahoo! Использовали обработку для визуализации своих внутренних данных. Например, научно-исследовательская лаборатория компании New York Times использовала Processing, чтобы визуализировать, как их новостные ленты проходят через социальные сети. NSF и NOAA поддержали исследование по изучению разнообразия фитопланктона и зоопланктона, которое было реализовано в Вашингтонском университете как динамическое моделирование экологии. Исследователи из Техасского передового компьютерного центра в штате Юта, Остин, использовали «Обработка» для отображения больших визуализаций данных на сетке экранов в службе гуманитарных исследований.

Фонд

Основной задачей Фонда является разработка и распространение программного обеспечения для обработки. Это включает в себя оригинальную обработку (Java), p5.js (Javascript) и Processing.py (Python). Более подробную информацию о Фонде можно найти по адресу https://processingfoundation.org/.

История

Обработка была начата Беном Фраем и Кейси Реасом весной 2001 года, когда они оба были аспирантами в MIT Media Lab в исследовательской группе Эстетики и вычислений Джона Маеды.Развитие продолжалось в их свободное время, в то время как Кейси продолжил свою художественную и преподавательскую карьеру, а Бен получил докторскую степень. и основал Fathom Information Design. Многие идеи из Processing восходят к семинару Мюриэля Купера по визуальным языкам, и он возник непосредственно из проекта Maeda Design By Numbers, разработанного в Media Lab и выпущенного в 1999 году. Проекты Wiring и Arduino, в свою очередь, выросли из Processing в то время как Кейси преподавал в Институте дизайна взаимодействия Ивреа в Италии.

Для получения дополнительной информации, пожалуйста, напишите в Foundation @ processing.организация

Спасибо.

YourKit поддерживает обработку, предоставляя свой полнофункциональный Java Profiler. YourKit, LLC является создателем инструментов для профилирования приложений Java и .NET: YourKit Java Profiler, YourKit .NET Profiler.

Обработка рисунков: Улучшаем карандашные рисунки в Фотошоп / Фотошоп-мастер

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Пролистать наверх