Искусство ретро-комиксов: использование точек Бена Дэя в веб-дизайне

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

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

Ben Day Dots и полутоновые точки

Термины «точки Бена Дея» и «искусство комиксов в стиле ретро», как правило, используются как синонимы. На самом деле, точки Бена Дея были первыми. Бенджамин Генри Дэй-младший создал их в 1879 году, чтобы сократить расходы на цветную печать. Это техника, при которой на сетке размещаются точки на одинаковом расстоянии. Красные точки, напечатанные поверх белого, превращаются в розовые, синие и желтые точки превращаются в зеленые.

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

Бен Дэй Точки, Комиксы и Рой Лихтенштейн

В 1930-х годах на сцену вышли комиксы, и точки Бена Дея стали популярной техникой печати. Точки Бена Дея не были предметом искусства, пока Рой Лихтенштейн не был вдохновлен их универсальной уникальностью в 1960-х годах. Именно работа Роя Лихтенштейна с искусством комиксов привлекла внимание к Бену Дею. Лихтенштейн скопировал небольшие отрывки с целых страниц комиксов и превратил их в крупномасштабные шедевры.

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

Изображение предоставлено Раду Берканом / shutterstock.com

Расцвет искусства ретро-комиксов

Искусство Роя Лихтенштейна стало синонимом искусства ретро-комиксов. Многие художники скопировали технику Лихтенштейна. Многие дизайнеры использовали точки из комиксов в своих творениях для схем брендинга и маркетинговых материалов. Теперь вы можете добавлять на свои веб-сайты точки Бена Дэя или точки Лихтенштейна.

Прокрутите, чтобы узнать, как сделать свои собственные творения из точек Бена Дея. Конечный дизайн, который вы получите, будет охватывать множество техник; полутоновые точки, точки Бена Дэя и точки Лихтенштейна. В общем, все они выполнены в стиле ретро-комиксов.

Давайте перейдем к этому.

Как создать арт в стиле ретро комиксов с помощью Photoshop

Полутоновые точки настолько распространены, что в Photoshop есть фильтр для них, и он работает с любым изображением. Этот фильтр превращает цвета изображения в точки. Угловое распределение точек контролируется цветовыми каналами. Когда вы применяете фильтр, ваше изображение теперь состоит из голубых, пурпурных, желтых и черных точек. Если вы примените полутоновый фильтр к чистому цвету, например, к красному (# ff0000), зеленому (# 00ff00) или синему (# 0000ff), фильтр не будет работать, потому что у него не будет цветов, от которых можно было бы отделиться.

Чтобы создать правильные точки Бена Дея и точки Лихтенштейна, вам понадобится Adobe Illustrator. Щелкните здесь, чтобы перейти вперед.

Как сделать фотографию похожей на ретро-комикс в полутоновых точках с помощью Photoshop

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

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

2. Дублируйте слой дважды и скройте первый.

Для дублирования, пока выбран первый слой, щелкните правой кнопкой мыши и выберите «Дублировать слой» или нажмите Command + J на ​​Mac и Ctrl + J на ​​ПК. Переименуйте их, чтобы не терять каждый из них. Измените параметр смешивания верхнего слоя на «жесткий свет» и уменьшите непрозрачность примерно до 40%. Цвета резко изменятся, это поможет получить зернистый вид полутоновых точек.

3. Сгруппируйте два верхних слоя и превратите их в смарт-объект.

4. Примените к смарт-объекту фильтр с полутоновыми точками.

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

5. Дублируйте нижний слой и переместите его наверх.

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

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

Установите непрозрачность корректирующего слоя на 30%. Наконец, установите параметры наложения слоя «Найти края» на «Перекрытие».

Готовый дизайн!

Как создать художественный фон в стиле ретро из комиксов в Photoshop

1. Найдите цветной фон с красивым рисунком или градиентом.

Откройте изображение на панели инструментов Photoshop и отцентрируйте его на экране.

2. Разблокируйте фоновый слой, продублируйте его и скройте нижний.

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

3. Готовый дизайн!

Как создать художественный фон в стиле ретро из комиксов с помощью Illustrator

Как я упоминал ранее, полутоновые точки имеют разный размер, чтобы воссоздать контраст изображения. Фильтр Photoshop, который мы использовали выше, идеально подходит для этого эффекта. Но если вы хотите создавать точки одинакового размера, такие как точки Бен-Дея или точки Лихтенштейна, вам нужно будет использовать Adobe Illustrator и встроенный конструктор узоров. Как я упоминал выше, точки Бена Дэя расположены на квадратной сетке, а точки Лихтенштейна - на диагональной сетке со смещением. И то, и другое можно сделать с помощью создателя узоров в Illustrator.

Как создать точечный узор Бен-Дея с помощью Illustrator

1. Создайте новый проект в Illustrator.

Размер особого значения не имеет. Мы использовали 600 х 350 пикселей.

2. Выберите инструмент «Прямоугольник со скругленными углами».

Щелкните один раз на монтажной области и установите размер вашей формы. Сделайте это 15 на 15 пикселей с радиусом угла 7,5 волов. Измените цвет круга на синюю заливку и без обводки.

3. Щелкните «объект» в верхней строке меню и выберите «узор», затем «создать».

4. Настройте параметры так, чтобы точки располагались на квадратной сетке.

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

• Выберите тип плитки для сетки
• Проверьте размер плитки на искусство
• Установите интервалы H и V на 15 пикселей на 15 пикселей.
• Выберите копии до 9 x 9

Когда вы увидите узор, подобный изображению ниже, нажмите Готово. Это автоматически сохранит узор на панели «Образцы».

Как создать точечный узор Лихтенштейна с помощью Illustrator

Этот шаблон следует тем же шагам, что и предыдущий, и изменяется только тогда, когда пришло время настроить параметры в создателе выкройки. Откройте настройки рисунка Бена-Дея и нажмите «Сохранить копию». Назовите новый узор «Точки Лихтенштейна». Когда вы нажмете ОК, он будет сохранен как копия на панели образцов. Закройте узор точек Бен-Дея. Вернувшись на панель Swatches, откройте узор точек Лихтенштейна. Вы увидите всплывающее окно с названием шаблона при наведении на него курсора. В настройках измените только Тип макета на «Блок за строкой» и нажмите Готово.

Как добавить художественные узоры в стиле ретро из комиксов к фигурам

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

1. На панели «Образцы» выберите оба новых рисунка, которые мы создали.

Щелкните значок библиотеки образцов и выберите «Сохранить образцы». Назовите новые образцы «Шаблон ретро комиксов» и нажмите «ОК».

2. Когда вы создаете новый проект и хотите использовать эти шаблоны, перейдите на панель Swatches.

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

3. Создайте новую форму и залейте ее одним из узоров.

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

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

• Униформа: 10%
• В параметрах: проверьте шаблоны преобразования

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

4. Чтобы создать звезду в стиле ретро комиксов, создайте новый проект размером 1000 пикселей на 1000 пикселей.

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

Идеи использования ретро-комиксов в веб-дизайне

Тенденция к искусству комиксов, кажется, набирает обороты. Конечно, не все бренды выиграют от такого творчества. Для веселых, цветолюбивых брендов точки Ben Day и графика в стиле Лихтенштейна идеально подходят для глотка свежего воздуха. Лучше всего использовать точечный узор из комиксов в качестве фона, поверх другого цвета или без него. Точно так же попробуйте использовать большие речевые пузыри в качестве разделителей или восклицательных знаков в стиле комиксов с вашим контентом. Вы можете создать свой собственный с помощью приведенных выше руководств или получить несколько уже разработанных изображений из Freepik.

Приведенные ниже дизайны были созданы с использованием дизайнов комиксов, предоставленных Freepik. Как видите, дизайнеры проявили некоторую вольность в выборе размеров точек. Тем не менее, они по-своему прекрасно воплощают стиль Retro Comic Book.

Заключение

Как видите, возможности дизайна ретро-комиксов весьма разнообразны. От классических стилей до более современных версий - вы можете делать практически все, что угодно. Независимо от того, создаете ли вы узоры самостоятельно или загружаете графику в Интернете, вы можете создавать довольно удивительные вещи с помощью Art Retro Comic Book и Divi!