Как в фотошопе сделать пиксельную картинку: Создаем 8-битную пиксельную графику с помощью Photoshop — часть 1 – Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

Пиксельный эффект в фотошоп

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

Откроем исходное фото, с которым будем работать File => Open, или Ctrl+O:

Теперь продублируем слой background, нажав комбинацию клавиш Ctrl+J.

Применим к новому слою фильтр «Мозаика». Для этого идём в меню Filter => Pixelate => Mosaic. В открывшемся окошке устанавливаем размер ячейки-пиксела на своё усмотрение, я выбрала 13.

К слою с мозаикой добавляем маску слоя. Для этого в нижней строке панели слоёв нажимаем кнопку Add vector mask:

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

Нам осталось уменьшить прозрачность слоя с пикселями:

И вот, что получается:

Можно также поэкспериментировать с режимами наложения:

С уважением, MsGadfly.

Рисуем в Фотошоп иконки в стиле Pixel art / Фотошоп-мастер

В этом уроке вы узнаете, как создать иконки в стиле 8-битных игр.

1. Контур

Шаг 1

Мы будем работать в Adobe Photoshop CC 2014 (но этот урок можно повторить и в более ранних версиях и даже в MS Paint). Создаем новый документ. Мой финальный результат получился размером 113 х 13 пикселей.

Берем Pencil Tool (В) (Карандаш) размером 1 px, приближаем документ на 1600% и рисуем 3 пикселя по горизонтали и по одному пикселю на нижних углах.

1. На следующей линии рисуем 7 пикселей.
2. Для горлышка бутылки рисуем фигуру из 3 пикселей в виде буквы V.
3. Далее рисуем 5 пикселей по вертикали по обеим сторонам бутылки и две линии по горизонтали между ними. Это будут стенки бутылки и этикетка.
4. Рисуем последнюю линию из 7 пикселей, которая будет донышком.

Шаг 2

Рисование меча мы разделим на два шага.

1. Начнем с кончика лезвия. Рисуем 3 пикселя по вертикали и 2 пикселя по горизонтали в форме буквы V. После этого рисуем две параллельные диагонали от углов кончика, каждая по 14 пикселей.
2. На конце верхней диагонали рисуем 3 пикселя по вертикали и на второй диагонали 3 пикселя по горизонтали.
3. В центре, там, где рукоятка, рисуем фигуру в форме буквы V, состоящую из 3 пикселей. Также на углах крайних пикселей рисуем 2 пикселя вверх и 2 пикселя вниз.
4. Продолжаем рисовать рукоятку. В левой части добавляем 3 пикселя влево и 1 пиксель вниз. В правой части добавляем 3 пикселя вниз и и 1 пиксель влево.

Шаг 3

Заканчиваем рукоятку:

1. Соединяем диагональной линией длинной 9 пикселей левую и правую части рукоятки.
2. Ручка состоит из четырех V-образных фигур, расположенных по диагонали.
3. На кончике рукоятки рисуем 1 пиксель вправо и 3 пикселя вниз. Затем рисуем 2 пикселя по диагонали, начиная с середины предыдущих трех.
4. Заканчиваем меч тремя рядами диагональных линий по 3 пикселя и одним рядом на 2 пикселя.

Шаг 4

1. Рисуем линию длиной 10 пикселей. На обеих сторонах линии рисуем по 2 пикселя по диагонали.
2. Далее рисуем по 8 пикселей по бокам сундучка и 12 пикселей внизу.
3. Посредине рисуем горизонтальную линию из 12 пикселей. Также в нижних углах рисуем по одному пикселю.
4. По центру рисуем прямоугольник размером 4 х 3 пикселя. 2 центральных пикселя удаляем с помощью Eraser Tool (E) (Ластик) (в режиме Pencil (Карандаш)). Затем от верха к центральному прямоугольнику рисуем два вертикальных ряда по 3 пикселя. И по бокам этих рядом по одной вертикальной линии высотой 4 пикселя.

2. Монохромная палитра цветов

Шаг 1

Цвета слева направо: мятный (#e0f8d0), зеленый (#88c070), зеленый лесной (#306850) и темно-зеленый (#081820).

1. Создаем новый слой над обводкой.
2. Внешний контур закрашиваем зеленым лесным.
3. Внутреннюю часть закрашиваем зеленым.
4. Мятным рисуем вертикальные блики (блок 3 х 2 пикселя снизу и по центру, также несколько пикселей слева).
5. Темно-зеленым хаотично ставим несколько пикселей по краям.

Шаг 2

Используем те же цвета.

1. Создаем новый слой.
2. Контур лезвия меча закрашиваем зеленым лесным, а нижнюю диагональ темно-зеленым.
3. Левую часть лезвия заполняем мятным, а нижнюю зеленым. Также добавляем темно-зеленые и зеленые лесные пиксели у основания лезвия.
4. Мятным закрашиваем нижнюю внутреннюю диагональ рукоятки, а зеленым по краям.
5. Остальную внутреннюю часть меча заполняем зеленым, а контур зеленым лесным.
6. Темно-зеленым закрашиваем правую часть рукоятки, а зеленым — левую. Рукоятка состоит из трех линий и цвет на ней должны идти от светлого к темному.
7. Правую часть цепи закрашиваем зеленым, мятным заполняем отверстия, зеленым лесным — верхнюю левую часть, а темно-зеленым — между каждым звеном цепи.

Шаг 3

Используем те же цвета.

1. Создаем новый слой над слоем с контуром сундука.
2. Закрашиваем внешний контур зеленым лесным.
3. Темно-зеленым закрашиваем центральную горизонтальную линию и нижнюю часть замка.
4. Темно-зеленым закрашиваем нижние уголки. В нижней части сундука зеленым рисуем вертикальные полосы на расстоянии 2 пикселя друг от друга.
5. Заполняем просвет в нижней части мятным и по одному пикселю зеленого лесного по углам.
6. Мятным рисуем блики на крышке сундука.
7. Остальное заполняем зеленым.

3. Четырехцветная палитра

Шаг 1

Теперь возьмем другие цвета: кремовый (#f8dd92), цвет лайма (#9bbb0e), цвет шалфея (#73a067) и темно-зеленый лесной (#0f380e).

1. Создаем новый слой над обводкой.
2. Заполняем внешний контур бутылочки темно-зеленым лесным.
3. Внутреннюю часть заполняем кремовым цветом, используя Pencil Tool (B) (Карандаш) или Paint Bucket Tool (G) (Заливка).
4. На горлышке рисуем один ряд пикселей цветом шалфея. Этим же цветом заполняем этикетку посредине.
5. Верхнюю часть заполняем цветом лайма.
6. Также цветом лайма рисуем блики на этикетке и в нижних углах.

Шаг 2

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

Magic Wand Tool (W) (Волшебная палочка) и залейте выделение инструментом Fill Bucket Tool (G) (Заливка).
Цветом лайма заполняем центральную диагональ лезвия, рукоятку и отверстия в звеньях цепи.
Цветом шалфея закрашиваем нижнюю часть лезвия и остальную часть рукоятки.
Кремовым заполняем верхнюю часть лезвия.

Шаг 3

1. Создаем новый слой над обводкой.
2. Закрашиваем внешний контур и центральную линию темно-зеленым лесным.
3. Остальную внутреннюю часть заполняем цветом лайма, а центральные 2 пикселя — кремовым.
4. Далее с левой стороны и вверху кремовым цветом добавляем блики.
5. Цветом шалфея рисуем несколько вертикальных линий по всей высоте сундука.

Автор: Mary Winkler

Переводчик: Daewon

Создаем 8-битную пиксельную графику с помощью Photoshop — часть 2

В первой части мы рассмотрели настройки Photoshop CS6 / CC для создания пиксельной графики, а затем создали спрайт крошечного 8-битного персонажа. В этой части руководства я займусь созданием врага, оружия и зелья здоровья. Все это в 8-битном пиксельном ретро стиле:

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

1. Мы начинаем с холста размером 50 на 50 пикселей. При включенной сетке я добавлю нейтральный цвет заливки:

Рисунок 1: Чистый холст 50 на 50 пикселей

2. Я начну с базового коричневого цвета и создам тело крысы-врага из игры с пиксельной графикой. Не забывайте использовать инструмент «Карандаш» вместо инструмента «Кисть»:

Рисунок 2: Используйте базовый цвет, чтобы создать форму тела

3. Как я создала тело крысы:

• Нажмите один раз карандашом в 10 пикселей, чтобы создать голову;
• Тело крысы в форме арахисового ореха расположено под углом от головы;
• Далее я добавляю детали: длинную морду, уши, руки, пальцы рук, ноги, пальцы ног и хвост. Чтобы подчеркнуть, что эта крыса — монстр, я также добавила красные глаза и черные ногти:

Рисунок 3: Создание 8-битной крысы, начиная с головы

4. Я решила, что просто серая крыса будет недостаточно похожа на монстра, поэтому после того, как я создала сведенную копию всех слоев, я добавила корректирующий слой (Слой> Новый корректирующий слой> Цветовой тон / Насыщенность), чтобы изменить общую цветовую гамму на зеленую:

Рисунок 4: Добавление корректирующего слоя «Цветовой тон /Насыщенность», чтобы изменить общую цветовую гамму

5. Далее я хочу добавить свет и тени, как я делала для главного героя игры с пиксельной графикой. Я создала несколько новых слоев, и, используя режимы наложения «Мягкий свет» и «Перекрытие», добавила глубину. Я также вернула назад красные глаза:

Рисунок 5: Добавление дополнительных слоев для глубины (и красные глаза)

6. Теперь все готово, обрежьте изображение и сохраните файл в формате PNG:

Если вы хотите сохранить изображение большее, чем 50 на 50 пикселей, просто измените значение параметра «Ресамплинг (Размера изображения)» на «По соседним пикселям»:

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

1. Создайте новый холст, как мы делали раньше. Или просто удалите все слои из предыдущего проекта (кроме цвета заливки) и сохраните его под новым именем.

2. Я использую желтый цвет (#fff200) для базовой формы золотого меча. Чтобы создать лезвия меча, я, удерживая нажатой клавишу Shift, с помощью инструмента «Карандаш» нарисовала прямую линию с шириной в 7 пикселей. Для рукоятки я использовала серый цвет: прямая горизонтальная линия в основании лезвия.

Подсказка: Я советую создавать новый слой для каждого дополнительного элемента, на тот случай, если вы захотите изменить что-нибудь позже:

Рисунок 6: Базовая форма меча

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

Рисунок 7: Ярлык для инструмента «Пипетка»

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

4. В качестве последнего штриха добавим украшения в рукоятку меча для героя игры с пиксельной графикой (рубины). Я выбираю глубокий красный для основного цвета и более легкую версию этого цвета для бликов:

Рисунок 9: Я изменила яркость базового рубинового цвета, чтобы получить правильный оттенок для бликов

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

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

Рисунок 10: Так как режим смешивания «Мягкий свет» не работает для желтого, я подобрала цвет вручную

6. Чтобы закончить, обрежьте изображение и сохраните его в формате PNG:

Рисунок 11: 8-битный золотой меч

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

1. Мы начнем с базового красного (#9e0b0f) цвета. Элемент будет иметь форму круглой бутылки с зельем с тонким горлышком и пробкой, поэтому мы начнем с точки в 10 пикселей.

2. Горлышко бутылки будет иметь 4 пикселя в ширину.

3. Пробка будет коричневого цвета. Это 2 пикселя выше верхней части горлышка.

4. Чтобы казалось, что внутри сосуда есть жидкость, я добавила до половины основания бутылки немного более темный оттенок красного (#5c0b0f). При этом пиксели этого цвета не должны выходить за пределы бутылки. Я оставила часть исходного базового цвета, чтобы очертить темную область в центре.

5. Чтобы придать бутылке стеклянный вид, мы добавим пятно блика с помощью светло-красной диагональной линии. С помощью палитры цветов я выбрала ярко-красный цвет (#ff0b0f):

Рисунок 12: Выбор альтернативных цветов для пиксельной графики на основе оригинального красного

Рисунок 13: Создание 8-битного зелья

6. Добавьте немного теней и все готово:

Хотите создать разные зелья? Добавьте новый слой «Цветовой тон / Насыщенность» и измените цветовую гамму, как мы делали с зеленой крысой. Чтобы пробка оставалась того же цвета, я добавила этот слой снова поверх слоя «Цветовой тон / Насыщенность».

Рисунок 14: Порядок слоев следующий: слой теней, слой пробки, слой «Цветовой тон / Насыщенность» — все замаскированы сведенным слоем зелья здоровья

Вот мои разные расцветки. Теперь у меня есть:

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

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

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

Данная публикация представляет собой перевод статьи «Create 8-Bit Pixel Art with Photoshop (Part 2 of 3)» , подготовленной дружной командой проекта Интернет-технологии.ру

Векторные и пиксельные формы в Photoshop

Если мы посмотрим на панель слоёв, то увидим каждую фигуру, расположенную на своем слое. Форма на основе пикселей находится на верхнем слое (для наглядности я переименовал этот слой в «пиксель»), под ним расположен слой с векторной фигурой (я переименовал слой в «вектор»)

Слои с векторной и пиксельной формами на панели слоёв

Вид миниатюр фигур на панели слоёв

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

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

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

Масштабирование векторной фигуры

Как я уже упоминал, оба круга на данный момент выглядят одинаково, но давайте посмотрим, что произойдёт, если мы будем их масштабировать. Я начну с векторной фигуры. Во-первых, мне нужно выбрать этот слой, поэтому я кликну по нему в панели слоёв.
Затем нажимаю комбинацию клавиш Ctrl+T, что запускает команду «Свободное трансформирование» (Free Transform), после чего вокруг объекта появляется рамка транс формирования.

Рамка свободного трансформирования вокруг векторной формы

Чтобы точно сравнить результаты масштабирования, необходимо увеличивать/уменьшать фигуры со строго одинаковым масштабом, поэтому для трансформации я не буду использовать маркеры на рамке, а введу заданное значение в поля ввода ширины и высоты в панели параметров. Я введу 10%:

Установка ширины и высоты векторной фигуры до 10%.

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

Векторная форма теперь имеет размер 10% от первоначального.

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

Так как вначале я уменьшил круг я до 10%, чтобы увеличить его обратно к исходному размеру, следует установить значение Ширины и Высоты в панели параметров на 1000%:

Установка ширины и высоты векторной формы на 1000%.

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

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

Масштабирование пиксельной фигуры

Давайте попробуем сделать то же самое с кругом — пиксельной фигурой справа. Во-первых, я выберу его, нажав на слой «пиксель» в панели слоёв. Нажимаю комбинацию клавиш Ctrl+T для активации «Свободного трансформирования».
Так же, как я сделал ранее с векторной фигурой, я уменьшу круг до размера 10% от исходного:

Пиксельная фигура после масштабирования её до 10%.

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

Но теперь проведём более серьёзный тест. Что произойдет, если я масштабирую пиксельный круг обратно до исходного размера? Давайте попробуем. Я снова нажимаю Ctrl+T на клавиатуре для запуска команды «Свободное трансформирование» (Free Transform) и ввожу в поля ввода Ширины и Высоты на панели параметров значение 1000%, затем нажимаю Enter, чтобы принять изменения.

А теперь, разница между формами на векторной и пиксельных основе становится очевидной, посмотрите на рисунок ниже. Я масштабировал обе формы с абсолютно одинаковыми условиями, но векторная фигура сохранила свои свойства, а пиксельная — нет. Края круга из пикселей, ранее чёткие, теперь стали размытыми, в то время, как векторная фигура не претерпела каких-либо видимых изменений:

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

Давайте увеличим полученную картинку для более тщательного рассмотрения.

Причина низкого качества края пиксельного круга кроется в том, что, когда я масштабирую его до 10% от кго первоначального размера, Photoshop отбросил 90% пикселей, которые образовывали первоначальное изображение.
Это было бы прекрасно, если бы мне не нужно былои масштабировать изображение обратно до первоначального размера. Photoshop не может волшебным образом воссоздать утраченные пиксели, поэтому, когда я масштабируется изображение в сторону увеличения, всё, что Photoshop может сделать, это взять имеющиеся пиксели и создать на их основе недостающие. Вот почему вдоль края пиксельной формы получается эффект размытой лесенки. Чем больше мы будем увеличивать изображение, тем больший эффект получится.
Векторные формы лишены этого недостатка. Они состоят из математических кривых, образующих области, заполненные цветом. И как бы мы не увеличивали/уменьшали изображение, кривая всегда остаётся кривой с чёткими краями.

Крупный план краёв векторной и пиксельной форм.

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

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

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

Эффект пикселей в фотошопе

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

Шаг 1

Открываем нашу фотографию

Шаг 2

Выбираем инструмент Быстрое выделение

Шаг 3

Выделяем нашего сноубордиста, аккуратно очерчивая его контур

Шаг 4

Нажимаем правую клавишу мыши и выбираем пункт Скопировать на новый слой

Шаг 5

В панели инструментов выделим наш основной слой — фон

Шаг 6

Выбираем инструмент Прямоугольная область

Шаг 7

И выделим прямоугольную область со сноубордистом

Шаг 8

Нажимаем правую клавишу мыши и выбираем пункт Выполнить заливку…

Шаг 9

В открывшемся окне выбираем пункт С учетом содержимого и нажимаем Ок

Шаг 10

Далее выбираем Слой 1 и создаем его копию путем его перемещения на иконку Создать новый слой.

 

Шаг 11

Выделим Слой 1

Шаг 12

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

Шаг 13

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

Шаг 14

Создаем Слой маску. Для этого кликаем по соответствующей иконке в панели слоев

Шаг 15

В палитре цветов выбираем чтобы черный цвет был главным. Выбираем инструмент заливка и заливаем черным «продолжение» сноубордиста

Шаг 16

Выделяем Слой 1 копия и снова создаем слой маску

Шаг 17

Выбираем инструмент Кисть

Шаг 18

В настройках выбираем Квадратные кисти

Шаг 19

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

Шаг 20

Теперь кистью аккуратно проводим по краю сноубордиста

 

Шаг 21

Затем выбираем другой слой и в палитре цветов делаем белый цвет главным

Шаг 22

И снова кистью аккуратно проводим по продолжению сноубордиста

Шаг 23

Выбираем Слой 1 и снова создаем его копию путем его перемещения на иконку Создать новый слой.

Шаг 24

Выбираем Фильтр-Стилизация-Ветер

Шаг 25

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

Шаг 26

Уменьшим непрозрачность слоя до 66%

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