Портфолио дизайнера Андрея Нелюбина / Поп-арт за пару кликов
урокиPhotoshopэксперименты
У меня достаточно редко возникают задачи стилизации изображений. Обычно, если используется фотография, она настраивается по цветам, кадрируется, подкручивается насыщенность и резкость. Но иногда бывает, что именно стилизация изображения под поп-арт или гравюру поможет добиться необходимого эффекта от всего макета.
Давайте на конкретном примере посмотрим, как стилизовать портрет под поп-арт, пиксель-арт и гравюру. Я буду использовать Photoshop. Все, что нам нужно сделать, это открыть в программе фотографию и сразу сохранить её с определёнными настройками. Мы не будем работать со слоями, применять эффекты или выполнять выделение отдельных областей. Просто открыли и пересохранили картинку. Вот и всё. Понятно, что длительная и детальная проработка, разложение изображения на слои позволила бы получить более качественные эффекты, но иногда этого просто не нужно. На первых этапах поиска идеи можно уже посмотреть, как будет примерно выглядеть стилизованное изображение.
Итак, если уж у нас зашла речь про поп-арт, я возьму для примера вот такую фотографию Мерлин Монро. Повторить точно знаменитые оттиски Энди Уорхола у нас, конечно, не получится, но поиграть с эффектом и найти новое цветовое сочетание — запросто!
Теперь откроем меню Файл / Экспортировать / Сохранить для устройства. Я работаю в Photoshop CC v. 20.0.1 и пункт «Сохранить для устройства» в этой версии переместили в раздел «Экспортировать». В предыдущих версиях пункт «Сохранить для устройства» располагался непосредственно в меню «Файл». Но есть способ проще. Просто нажмите сочетание клавиш Ctrl+Shift+Alt+S.
У вас откроется окно с настройками экспорта изображения в распространенные форматы растровой графики. Вот именно здесь есть все, что нам необходимо. Слева вверху есть 4 вкладки. Кликаем последнюю, где написано «4 варианта».
Это позволит нам просматривать 4 образца, три из которых можно настраивать для экспорта, а первое окно показывает исходный вариант изображения. Вот такого удобства по умолчанию больше нет нигде в Photoshop. Все встроенные фильтры и эффекты не предоставляют такой возможности — работать с несколькими образцами, сравнивать и выбирать один для сохранения.
Чтобы приблизить или удалить изображение в любом из 4-х окон используйте Alt+Колесо мыши. Перемещать изображение можно, зажав правую кнопку мыши на любом из 4-х изображений.
Стилизация под поп-арт
Приступим. Кликаем по любому изображению кроме первого окна (это исходник и его изменить нельзя). Выбранное окно подсвечивается белой рамкой. Справа в настройках выбираем формат файла PNG-8. Можно выбрать и GIF — это более старый формат файла. Вот что пишет Adobe в свой документации:
«Формат PNG-8 использует 8-битные цвета. Как и формат GIF, PNG-8 эффективно сжимает однотонные области с сохранением резких ясных контрастов, имеющихся в шрифтовых фрагментах, логотипах и прочих изображениях без полутонов.
Поскольку PNG-8 поддерживают далеко не все веб-браузеры, лучше воздержитесь от сохранения изображения, предназначенного для широкой аудитории, в данном формате. Функция компрессии у формата PNG-8 имеет улучшенные характеристики, чем у формата GIF, при этом изображение в формате PNG-8 меньше по размерам того же изображения в формате GIF (от 10% до 30%, в зависимости от цветового узора).»
Если кому интересно, подробнее здесь.
После того, как мы выбрали формат с ограниченным количеством оттенков в изображении (не более 256), можно задавать любое их число, но не менее 2-х (это и понятно, потому что ограничение в 1 цвет просто зальет изображение сплошным цветом).
Задаем в настройке Цвета значение 2. Под настройкой выбора формата экспорта (PNG-8) есть два выпадающих списка. В первом выбирается алгоритм коррекции цветов. Можно повыбирать разные варианты и посмотреть, какие изменения это вызывает в активном окне с изображением.
Во втором выпадающем списке выбирается алгоритм формирования цветового шума (дизеринг) — вот эта настройка как раз и создает нужные нам эффекты.
Чтобы задать цветовые области, в виде сплошных заливок, как в поп-арт портретах, выберите значение «Случайное». Теперь наше изображение разложено на два цвета с четкими границами. В настройке «Таблица цветов» как раз и отображены маркеры наших двух оттенков. Двойной клик на квадратике с цветом позволяет задать его значение через палитру. Таким образом можно в реальном времени раскрасить изображение любыми оттенками. Если в настройке «Цвета» задать не 2, а 3 (забить с помощью клавиатуры), то у нас появится еще один оттенок в таблице цветов, который так же можно изменить. И так далее.
Для отмены внесенных в цвета изменений, откройте настройки Таблицы цветов с помощью выпадающего меню по кнопке справа выше таблицы и выберите пункт «Отменить замену всех цветов».
Изменения будут отменены в активном окне с изображением.
В этом режиме доступна настройка изменения количества цифрового шума «Дизеринг». В выпадающем списке мы выбирали алгоритм дизеринга, а здесь указывается его степень. Перемещая ползунок в настройке «Дизеринг», можно сделать границы цветов более или менее шумными.
Стилизация под гравюру
Здесь все просто. В настройке дизеринга выбираем «Шум». Теперь наше изображение выглядит действительно шумным, состоящим из скопления отдельных точек, зато более объемным. В этом режиме также можно поэкспериментировать с количеством цветов и их оттенками, чтобы добиться интересного эффекта.
Стилизация под пиксель-арт
Вот этo прям ностальгическая настройка! Примерно так выглядели фотографические изображения, которые ухитрялись запихать в 8-ми битные игры для приставок. Такой эффект дает настройка «Узор».
Отличная тема для постеров в ретро-стиле.
Показываю все окна разом для наглядности, чтобы сравнить различные варианты одного и того же изображения. Также можно не ограничиваться двумя цветами, а добавить еще один или два. Большое количество цветов делает эффекты менее заметными и приближает изображение к фотографическому качеству.
Сохраняем изображение
Кликните на одно из трех изображений, которые вы хотите сохранить. Окно выделится белой рамкой. Проверьте размеры изображения. Разрешение изображения будет по умолчанию 72 точки на дюйм. Его нельзя поменять, ведь это модуль экспорта изображения для просмотра на экране. Но это не значит, что его нельзя будет напечатать в будущем. Всегда можно экспортировать такое упрощенное изображение в векторный формат. Нажимаем «Сохранить» — кнопка в самом низу окна справа. Показано на следующей анимации.
В заключение
Надо сказать, что все эти эстетические эффекты не задумывались разработчиками в те далёкие года, когда была необходимость в форматах GIF и PNG-8.
Интернет был медленный, и сайтам нужно было осторожно заполнять свои страницы изображениями. Иначе страница загружалась слишком долго, и посетитель просто уходил. Сейчас мы смотрим фильмы онлайн, ведем стримы в реальном времени, и необходимости настолько сжимать обычные изображения уже нет (по крайней мере для нас — обычных пользователей). Но почему бы не использовать 8-ми битные форматы изображений для получения визуальных эффектов?
Сохраните фотографию в режиме «Случайное» с двумя или тремя цветами, переведите в векторный формат с помощью старой доброй Vector Magic, и полученное изображение уже можно вырезать из плёнки и делать наклейки или трафареты. Вот пример всё той же Мерлин, которую я превратил в вектор и открыл в Illustrator.
А в Illustrator уже можно сделать изображение размером с дом без потери качества. Картины в интерьер? Да легко! Принт на одежду? Пожалуйста! Все это без установки и изучения специальных фильтров.
Вот ещё несколько экспериментов с настройками и цветами для наглядности.
Как включить сетку в Фотошопе – сделать убрать или настроить, наложение и функции пиксельной сетки в Photoshop, изменение цвета
Photoshop КомментироватьЗадать вопросНаписать пост
Во время работы внутри графического редактора очень важно соблюдать симметричность объектов, располагающихся на холсте. Если в любительской работе определять ровность компоновки объектов можно на глаз, то в серьезном проекте такое просто недопустимо. Поэтому возникает необходимость в дополнительных опциях, например, сетке. О том, для чего нужна, как включить и сделать сетку, будет рассказано далее.
Принцип работы
Сетка – это инструмент, позволяющий эффективно и ровно располагать компоненты на рабочей поверхности Photoshop. При включении сетки в Фотошопе создается большое количество горизонтальных и вертикальных линий. Они расчерчивают холст, как клетчатый тетрадный лист.
Каждая линия притягивает к себе объекты, если поднести их достаточно близко (для этого должна стоять галочка в меню Просмотр – Привязка). Привязка к линиям помогает ровно располагать предметы относительно друг друга.
Здесь изображен проект. Слева – без вспомогательных элементов, справа – с ними:
Полосы не сохраняются при выводе изображения или печати. Они сохранятся только внутри документа самой программы (название документа.psd).
Как включить
Для создания сетки необходимо выбрать пункт Просмотр – Показать – Сетку. Либо зажать сочетание клавиш Ctrl + ‘. Если эти действия не привели к нужному результату и разметка не появилась, следует проверить, включена ли функция Просмотр – Вспомогательные элементы (комбинация клавиш Ctrl + h).
Как настроить
При первом включении инструмент имеет стандартные настройки. Они могут не подойти под конкретный проект, поэтому стоит уделить время кастомизации.
Настройка производится в меню Редактирование – Установки – Направляющие, сетка и фрагменты. Здесь можно задать цвет направляющих, стиль линий, интервал между ними.
Ниже будет показана разница между разными настройками параметра «Внутреннее деление на»:
Слева установлено внутреннее деление на 1, по центру – 2, справа – 3.
Как отключить
Выключение сетки происходит по тому же алгоритму, что включение. Повторное нажатие Просмотр – Показать – Сетку, выключит направляющие.
Пиксельная сетка
Кроме обычной, в Photoshop реализована и пиксельная сетка, работающая только при большом увеличении холста. Включается она выбором пункта Просмотр – Показать – Пиксельная сетка. Этот инструмент будет крайне полезен художникам, работающим в стилях пиксель-арт или подобных ему, потому что он четко разделяет между собой пиксели, облегчая работу художнику.
Слева – проект без пиксельных направляющих, справа – с ними.
На главную
Reader Interactions
Как создавать фоны в стиле пиксель-арт с помощью Photoshop — GameDev Academy
Полный курс доступен здесь: Введение в пиксель-арт в Photoshop подумайте о настройке фона для игры в стиле пиксель-арт.
Настройка фона
Начнем с настройки фона неба , заполнив слой по умолчанию синим цветом и переименовав его в «Небо».
Теперь нам нужно настроить поддержку. Давайте создадим новый слой, нажав Ctrl + Shift + N (или Cmd + Shift + N), и назовите его «Горы».
Сначала мы нарисуем горы с помощью инструмента Pencil на слое Mountains и заполним его инструментом Paint Bucket .
Добавление деталей
Далее мы добавим бликов и теней к горам. Но сначала выберем горы с Волшебная палочка инструмент для рисования внутри горы.
Всегда помните о направлении солнечного света. Тени должны постоянно появляться на противоположной стороне бликов.
После того, как вы добавили блики и тени к горам, отмените выбор гор, нажав Ctrl + D (или Cmd + D ), чтобы больше не привязываться к выбранной области.
Добавление цвета градиента
Теперь небо выглядит слишком пресным, поэтому мы хотим добавить градиент к небу. Градиент – это постепенное изменение цвета, оттенка или уровня яркости.
Для этого мы создадим новый слой под названием «Небесная дымка» и поместим его между слоями Горы и слоями Небо .
Чтобы добавить градиент к слою, нажмите и удерживайте левую кнопку мыши на Paint Bucket и выберите параметр Gradient Tool .
Вы можете изменить цвет градиента, нажав Настройка градиента в верхнем углу экрана.
Откроется окно Gradient Editor , в котором можно изменить градиент, дважды щелкнув на одной из точек цвета.
Вы также можете установить непрозрачность краев цветов, чтобы они переходили в прозрачный цвет. Например, мы установим оба цвета белыми, а начальную непрозрачность — 9.0013 100%, и окончательная непрозрачность до 0% .
Рядом с кнопкой цвета градиента мы можем установить форму градиента. Давайте изменим это на linear .
Теперь мы можем щелкнуть в нижней части экрана и перетащить вверх , чтобы добавить градиент к небу.
Чтобы сделать градиент более пиксельным, мы можем применить фильтр Mosaic , выбрав Filter > Pixelate > Mosaic .
Наконец, мы хотим сделать небо более волнистым и естественным, деформируя слой. Нажмите Ctrl + T (или Cmd + T ), щелкните правой кнопкой мыши > выберите Деформация .
Теперь мы можем изменить форму, перетаскивая контрольные точки.
Обратите внимание, что щелчок по точке привязки позволяет редактировать контрольные точки, окружающие эту привязку. Это похоже на изменение изогнутого сегмента векторной графики.
Стенограмма
Всем привет. В этом уроке мы рассмотрим настройку фона для игры, которую мы, возможно, захотим создать. Хорошо, внизу будут горы, а в воздухе красивое небо.
Итак, давайте файл, новый, он будет иметь ширину 300 пикселей и высоту 168, хорошо? Мы нажмем «Создать», и вот мы в нашем новом документе.
Теперь, чтобы начать, давайте начнем с настройки фонового неба, хорошо, поэтому я переименую этот слой в небо и выберу здесь голубоватый цвет, который мы будем использовать. Мы выберем инструмент ведро с краской и просто щелкнем, чтобы раскрасить все.
Теперь нам нужно установить горы. Итак, я собираюсь управлять, сдвигать, N, называть это горами, и теперь мы находимся на новом слое. Теперь для наших гор мы хотим выбрать зеленоватый цвет, что-то вроде этого, и внутри здесь мы можем начать с рисования наших гор и того, как мы можем их видеть. Итак, для этого я просто начну рисовать их вот так. Хорошо, что-то в этом роде.
Следующее, что нам нужно сделать, это заполнить его так, чтобы здесь не было синего. Итак, мы перейдем к инструменту ведро с краской, раскрасим их вот так. Но проблема здесь в том, что горы выглядят как-то безвкусно, да, на самом деле они выглядят не очень хорошо. Итак, как мы это исправим? Итак, что мы хотим сделать, так это добавить бликов и теней к этим горам.
Теперь, чтобы сделать это, нам нужно выяснить, хорошо, в каком направлении будет смотреть солнце? Допустим, солнце смотрит в правый верхний угол экрана, вниз. Это означает, что эти стороны гор будут ярче, чем другая сторона гор, на которой будут тени.
Итак, что я собираюсь сделать, так это сделать так, чтобы мы могли рисовать только на этой горе, потому что прямо сейчас, если я выберу инструмент «Кисть» и нарисую блики светло-зеленым цветом, вы заметите, что я могу сходить с ума здесь, чего мы не хотим, ясно? Мы хотим иметь возможность рисовать только внутри этого горного хребта. Итак, чтобы сделать это, я выберу инструмент «Палочка» и нажму на наши горы.
Итак, теперь у нас выбраны горы. Если я перейду к инструменту «Кисть» и начну рисовать, вы заметите, что я могу рисовать только на выделенных пикселях, и это здорово. Итак, давайте пройдемся по каждой из наших гор и просто начнем рисовать блики. И вот мы идем. Теперь, что нам нужно сделать, это нарисовать тени.
Итак, для теней я выберу более темно-зеленый здесь, и я начну раскладывать их.
Теперь я буду следить за топографией гор, так что я выберу это и спущусь вот так, хорошо? И, как вы можете видеть, если я нажимаю клавишу H, чтобы избавиться от сетки и контура, это выглядит так. Итак, я могу добавить сюда тень. И вот мы идем. Что-то вроде этого, где у нас есть блики и тени горы. Вы, конечно, можете сделать это намного лучше, но это всего лишь грубая, быстро сделанная версия этого, хорошо?
Итак, у нас есть небо, но оно не выглядит реалистично, хорошо, так как же сделать так, чтобы наше небо выглядело реалистично? Что ж, если вы посмотрите в реальный мир, вы заметите, что на горизонте тем ярче, чем выше вы поднимаетесь, хорошо? Когда вы смотрите вниз по горизонту, вы видите больше атмосферы, тогда как, если вы смотрите вверх, вы видите в основном меньше атмосферы, хорошо, и вы видите больше космоса.
Итак, что нам нужно сделать, так это создать здесь новый слой и назвать его дымкой неба.
Я положу это ниже гор, но выше неба, и для этого мы будем использовать градиент. Теперь градиент — это, по сути, вещь, которую мы можем нарисовать, которая в основном переходит от одного цвета к другому.
Итак, если мы перейдем к нашему инструменту заливки и удерживаем левую кнопку мыши, вы увидите, что мы можем выбрать инструмент градиента, и прежде чем мы это сделаем, нам действительно нужно перейти к нашему инструменту перемещения, щелкните правой кнопкой мыши на горы, снимите выделение с них, чтобы мы больше не рисовали внутри гор, вернитесь к нашему инструменту градиента, щелкните и перетащите, и, как вы видите, градиент уже сформирован, хорошо?
Итак, в верхнем углу экрана у нас есть все настройки градиента, здесь мы можем выбрать в основном цвет градиента, дважды щелкнув по нему, чтобы открыть редактор градиента.
Теперь мы собираемся перейти от белого к прозрачному, поэтому я собираюсь дважды щелкнуть этот значок здесь, чтобы изменить первый цвет на белый, щелкнуть здесь конечный узел, чтобы изменить этот цвет на белый также, и я нажму на эти черные прямоугольники, которые позволят нам изменить непрозрачность.
Он снизится со 100% до 0%, хорошо? И, как вы можете видеть, он исчезает по ходу дела. Нажмите «ОК», и теперь, если я щелкну и перетащу, вы увидите, что это белое исчезновение, вот так.
Мы изменим его с радиального на линейный градиент, чтобы он был более прямым, вот так, и в нижней части экрана я собираюсь щелкнуть и перетащить вверх, вот так, и вот так, это наш градиент в значительной степени готов, но одна вещь, которую вы можете заметить, это то, что он не пиксельный, хорошо? Это плавный переход цвета от одного к другому, тогда как здесь у нас жесткие цвета.
Итак, как нам преобразовать этот градиент в более пиксельную картинку? Что ж, мы можем сделать это, перейдя к фильтру, затем мы хотим перейти к пикселизации, а затем мы хотим щелкнуть мозаику.
Мозаика делает изображение пиксельным. Хорошо, он получает ваше изображение и в основном разбивает его на ячейки, и каждая ячейка может иметь только один единственный цвет, и прямо сейчас каждая ячейка имеет размер пять пикселей, и если мы увеличим это число, вы увидите, что ячейки становятся все больше и больше.
и если мы снизим его, он будет становиться все меньше и меньше.
Итак, давайте сократим наши ячейки до пяти, нажмите «ОК», и вы заметите, что теперь они выглядят намного более пиксельными. Но он выглядит слишком однородным, и это небольшая проблема. Таким образом, мы можем сделать его более волнистым и естественным, щелкнув T, щелкнув правой кнопкой мыши и нажав на деформацию, и то, что позволяет нам делать деформация, — это щелкать и перетаскивать, чтобы перемещать это изображение различными способами, хорошо?
Итак, мы можем просто деформировать это изображение, чтобы оно выглядело немного по-другому, вот так, хорошо? Затем мы можем нажать Enter, и вот, наша атмосфера готова, и на самом деле, мы можем захотеть, чтобы этот варп немного изгибался вниз по краям здесь. Хит хорошо, и мы идем.
Итак, вот наш пиксельный горизонт выглядит красиво. Можно, конечно, и дальше, можно изменить цвет неба, можно изменить цвет дымки. Это полностью зависит от вас, но это всего лишь наш горный массив, настроенный и готовый к добавлению в игру.
Хотите продолжить? Ознакомьтесь с нашим планом полного доступа, который включает в себя более 250 курсов, учебные программы с пошаговыми инструкциями, ежемесячные новые курсы, доступ к опытным наставникам курсов и многое другое!
Похожие сообщения
Настройка Photoshop для пиксельной графики — Брэндон Требитовски — создатель значимого программного обеспечения
Прежде всего. Моя жена и я приветствовали нового мальчика в мире в понедельник, так что вам, ребята, придется увидеть обязательные фотографии «папы».
Вот они
Хорошо, теперь это прошлое, давайте поговорим о пиксельной графике. Я всегда был ОГРОМНЫМ поклонником пиксель-арта как в играх, так и в виде искусства. Как начинающий разработчик игр (игры скоро появятся 😉), я нашел, что пиксель-арт отлично подходит для меня. Это не только эстетично, но и позволяет разработчикам создавать «лучшее» искусство, чем искусство разработчиков. Все, что нужно, это немного терпения.
Сегодня я собираюсь поделиться с вами тем, как я настроил Photoshop для создания пиксельной графики, и в последующем посте покажу вам, как создавать своих собственных Bitizen из Tiny Tower.
Некоторые из вас могут возразить, что Photoshop — не лучший вариант и что есть лучшие инструменты для пиксельной графики. Я пробовал довольно много и продолжаю возвращаться к PS из-за некоторых его замечательных функций (формы, слои, маски, градиенты, шумовые фильтры и т. д.). Мы можем использовать многие из этих инструментов в своих интересах при создании пиксельной графики, просто нужно правильно настроить PS.
Прежде чем начать, хочу предупредить: я использую Adobe Photoshop CS3 для Mac.
Изменить способ масштабирования изображений в Photoshop
Во-первых, нам нужно изменить способ масштабирования изображений в PS. Это полезно, когда вы готовы экспортировать свои спрайты для производства. По умолчанию PS использует бикубический алгоритм, когда вы хотите увеличить изображение.
Обычно это приводит к очень размытому эффекту. Это весьма полезно во многих случаях, но ужасно для пиксель-арта. Здесь нам нужно указать PS использовать алгоритм масштабирования «Ближайший сосед». Это сохранит все наши края без искажения PS при смешивании.
Чтобы изменить этот параметр, перейдите к Photoshop->Настройки->Общие
Единственный параметр, который вам нужно изменить, это «Интерполяция изображения». Обязательно измените его на «Ближайший сосед».
Включение сетки
При создании пиксельной графики очень полезно иметь сетку, чтобы определить, где разместить следующий пиксель. Без этого вы просто слепо размещаете их. Чтобы включить и настроить сетку в PS, перейдите в Photoshop->Настройки->Направляющие, сетка, фрагменты и подсчет…
Убедитесь, что для параметра Gridline каждые установлено значение 1, а для параметра Subdivisions значение 1. Это создаст сетку шириной 1 пиксель, которую вы можете использовать в качестве ориентира.
После настройки сетки щелкните View->Show->Grid , чтобы отобразить ее. Возможно, вам придется сделать это для каждого документа.
Настройка инструмента «Карандаш»
При создании пиксельной графики в PS инструмент «Карандаш» — ваш лучший друг. Вы будете использовать его примерно в 95% случаев при рисовании. Нам нужно убедиться, что карандаш рисует однопиксельные точки без какой-либо интерполяции. Выбрав инструмент «Карандаш», щелкните раскрывающийся список рядом с 9.0013 кисть , коснитесь стрелки , а затем выберите основные кисти . При появлении запроса на замену текущих кистей нажмите OK .
Затем выберите кисть размером 1 пиксель (она должна быть в левом верхнем углу). Большую часть времени вы захотите рисовать отдельными пикселями.
Создание нового документа
Выбор размера документа может быть сложным. Как правило, вы хотите создать свой документ как можно меньше, чтобы не делать больше работы, чем вам нужно.
Размер зависит от того, насколько «пиксельным» вы хотите, чтобы ваше искусство выглядело после масштабирования. По сути, используя масштабирование, которое мы выбрали выше (ближайший сосед), «пиксели» просто увеличатся в размере.
Вот увеличенное изображение нашего изображения 15×25, которое мы будем использовать в следующем уроке для создания Bitizen из Tiny Tower.
Поскольку уровень масштабирования не слишком высок, мы видим срезы сетки через каждые 2 пикселя, а не через 1. По мере увеличения масштаба размер сетки увеличивается.
Несколько уровней масштабирования в представлении
Один интересный трюк с PS заключается в том, что он позволяет открывать несколько окон одного и того же документа. Причина, по которой это удобно, заключается в том, что вы можете одновременно видеть различные уровни масштабирования для своих работ. При рисовании каждый пиксель увеличивается, вы можете увидеть результат в нужном разрешении. Это очень помогает, когда вы пытаетесь настроить свою работу.
