Пиксельные картинки для фотошопа: 3 простых пиксельных эффекта · Мир Фотошопа
Как сделать пиксели в Фотошопе
Пиксельный узор или мозаика – довольно интересный прием, который Вы можете применять при обработке и стилизации изображений. Достигается данный эффект путем применения фильтра «Мозаика» и представляет собой разбитие на квадраты (пиксели) картинки.
Пиксельный узор
Для достижения максимально приемлемого результата желательно выбирать яркие, контрастные изображения, имеющие в своем составе как можно меньше мелких деталей. Возьмем, например, такую картинку с автомобилем:
Можно ограничиться простым применением фильтра, о котором было сказано выше, но мы усложним себе задачу и создадим плавный переход между разными степенями пикселизации.
1. Создаем две копии слоя с фоном клавишами CTRL+J (дважды).
2. Находясь на самой верхней копии в палитре слоев, переходим в меню «Фильтр», раздел «Оформление». В данном разделе и находится необходимый нам фильтр «Мозаика».
3. В настройках фильтра выставляем довольно крупный размер ячейки. В данном случае –
4. Переходим на нижнюю копию и снова применяем фильтр «Мозаика», но на этот раз размер ячейки выставляем примерно в два раза меньше.
5. Создаем маску для каждого слоя.
6. Переходим на маску верхнего слоя.
7. Выбираем инструмент «Кисть»,
круглой формы, мягкую,
черного цвета.
Размер удобнее всего менять квадратными скобками на клавиатуре.
8. Красим кистью маску, удаляя лишние участки слоя с крупными ячейками и оставляя пикселизацию только на задней части авто.
9. Переходим на маску слоя с мелкой пикселизацией и повторяем процедуру, но оставляем более крупный участок. Палитра слоев (маски) должна выглядеть примерно следующим образом:
Итоговое изображение:
Обратите внимание, что только половина изображения покрыта пиксельным узором.
Используя фильтр «Мозаика», можно создавать очень интересные композиции в Фотошопе, главное следовать советам, полученным в этом уроке.
Мы рады, что смогли помочь Вам в решении проблемы.Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ%d0%bf%d0%b8%d0%ba%d1%81%d0%b5%d0%bb%d0%b5%d0%b9 PNG, векторы, PSD и пнг для бесплатной загрузки
естественный цвет bb крем цвета
1200*1200
дизайн плаката премьера фильма кино с белым вектором экрана ба
1200*1200
каба хадж мабрур исламская икона паломничества
2776*2776
Векторная иллюстрация мультфильм различных овощей на деревянном ба
800*800
мусульманская пара хадж ка ба
2600*2600
аэрозольный баллончик увлажняющий лосьон bb cream парфюм для рук
3072*4107
3d модель надувной подушки bb cream
2500*2500
набор векторных иконок реалистичные погоды изолированных на прозрачной ба
800*800
ценю хорошо как плоская цвет значок векторная icon замечания
5556*5556
Красивая розовая и безупречная воздушная подушка bb крем косметика постер розовый красивый розовый Нет времени На воздушной
3240*4320
ма дурга лицо индуистский праздник карта
5000*5000
буква bf фитнес логотип дизайн коллекции
3334*3334
bb крем ню макияж косметика косметика
1200*1500
bb крем тень вектор
1300*1300
элегантный серебряный золотой bb позже логотип значок символа
1200*1200
цвет перо на воздушной подушке bb крем трехмерный элемент
1200*1200
крем крем вв вв на воздушной подушке иллюстрация
2000*2000
в первоначальном письме ба логотипа
1200*1200
в первоначальном письме bf логотип шаблон векторный дизайн
1200*1200
логотип fb или bf
2223*2223
первый логотип bf штанга
4500*4500
витамин b5 пантотеновая кислота вектор витамин золото масло таблетки значок органический витамин золото таблетки значок капсула золотое вещество для красоты косметическая реклама дизайн комплекс с химической формулой иллюстрации
5000*5000
фб письмо логотип
1200*1200
первый логотип bf штанга
4500*4500
в первоначальном письме bf логотип шаблон
1200*1200
bb логотип градиент с абстрактной формой
1200*1200
bb логотип
2223*2223
жидкая подушка крем bb
1200*1200
простая инициализация bb b геометрическая линия сети и логотип цифровых данных
2276*2276
3d золотые числа 81 с галочкой на прозрачном фоне
1200*1200
bb логотип дизайн шаблона
2223*2223
год передового опыта установлены 11 21 31 41 51 61 71 81 91 векторный дизайн шаблона иллюстрация
4083*4083
фб письмо логотип
1200*1200
asmaul husna 81
2020*2020
b8 b 8 письма и номер комбинации логотипа в черном и gr
5000*5000
ba угол звезда голографическая радуга лазерная наклейка
1200*1200
фб письмо логотип
1200*1200
две бутылки косметики жидкая основа белая бутылка крем bb
2000*2000
bb градиентный логотип с абстрактной формой
1200*1200
al ba ith 99 ИМЯ АЛЛАХ
1200*1200
bf письмо дизайн логотипа внутри черного круга вектор
1200*1200
bb письмо дизайн логотипа
1200*1200
Круглая открытая косметическая воздушная подушка bb cream
1200*1200
аэрозольный баллончик увлажняющий лосьон bb cream парфюм для рук
2000*2000
начальная буква bf с логотипом
1200*1200
Реклама продукта по уходу за кожей черного золота bb bb крем bb кремовый
3240*4320
bb крем ню макияжа постер Новый список преимущественный колос День святого
3240*4320
фб письмо логотип
1200*1200
в первоначальном письме вв логотипа
1200*1200
iftar party ramadhan kareem 81
1300*1300
Векторные и пиксельные формы в 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.
Как сделать пиксели (мозайку) в Фотошопе
В этом уроке мы в очередной раз подтянем наши скиллы в Фотошопе – научимся создавать “пиксельный узор” через “мозаику”. О том, что такое “мозаика” вы наверняка знаете. Давайте приступим!
Как всегда, для начала, нам потребуется выбрать изображение, с которым будем работать. Мы, в редакции, очень любим автомобили, поэтому и фотографию выберем соответствующую. К тому же, чем лучше изображение, тем приятнее с ним работать:
Чтобы применить фильтр мозаики, достаточно зайти в меню “Фильтр” – “Оформление” – “Мозаика” и, выбрав подходящие параметры, применить эффект.
Получится быстрый, но слишком простой вариант:
Мы же легких путей не ищем.
Давайте попробуем создать пикселизацию изображения с незаметным переходом от одной мозаики к другой.
Работа с фильтром “Мозаика” в Photoshop
- Сперва необходимо сделать 2 дубликата (копии) фонового слоя (у нас он называется “MyPhotoshop.ru”). Для этого нажмите два раза на комбинацию горячих клавиш CTRL+J.
- Теперь, кликните на самый верхний слой с копией, а затем в меню “Фильтр” – “Оформление” выберите “Мозаика” (Мы уже выбирали его в самом начале).
Откроется окно настроек данного фильтра, в котором необходимо подобрать размер ячейки. Выберем для начала размер чуть покрупнее.
Таким образом наш пиксель получится достаточно крупным: - С верхним слоем пока все. Выбираем средний слой (первую копию) и применяем тот же фильтр “Мозаика”, но на этот раз выставляем размер ячейки примерно вдвое меньше, чем в предыдущий.
Делаем плавный переход между слоями
- Перейдем теперь к созданию слой-маски для каждого слоя, кроме основного. Для этого выберите нужный слой в палитре слоев и кликните на кнопку, к которой ведет стрелка, как показано на скриншоте ниже:
- Далее выбираем маску самого верхнего слоя, кликнув по белому квадрату:
- Как обычно, на панели инструментов выбираем обычную “Кисть”.
Под главным меню появится панель с настройками кисти. По стандарту выбирается кисть мягкой и круглой формы, а остальные параметры настраиваются так, как нужно вам, ведь в каждом случае и с каждым изображением все индивидуально.Важно! Стоит отметить, что мы работаем в Adobe Photoshop CC, но в CS5 или CS6 функционал отличается лишь по дизайну некоторых элементов.
А на палитре цветов основным выбирается черный цвет:
Мы установили размер кисти в 200 пикс., но лучше всего менять его так, как вам удобно во время работы на холсте. Для этого воспользуйтесь квадратными скобками, где [ – уменьшает размер, а ] – увеличивает. - Теперь этой кистью нужно закрасить слой-маску. Как это нужно делать? Закрасьте черным цветом все, что хотите скрыть с этого слоя. Таким образом та часть изображения, где маска будет белым цветом и будет состоять из крупных пикселей.
Красной рамкой на изображении выделен участок слоя, на котором остался эффект “мозаики”. - “Едем дальше” и делаем то же самое со средним слоем, состоящим из мелких пикселей (ячеек).
Результат
В итоге, после всех описанных выше действий, мы получили такой результат:
Если создать не 3 копии слоя, а например 5, то результат будет еще более плавным. Но данный урок служит лишь примером, а дальше дело за вами.
Теперь вы знаете, что даже благодаря такому простому фильтру, как “Мозаика (пикселизация)”, можно создавать достаточно эффектные работы.
Рисуем пиксельный портрет по фото в Фотошоп / Creativo.one
Вы бы хотели придать своему фото или фото друга ретро-эффект?
В этом уроке мы расскажем вам, как пиксель за пикселем превратить фото в креативный ретро-портрет в стиле старых видеоигр.
Если вам нужна уже готовая пиксельная графика, вы всегда можете зайти на Envato Market (https://market.envato.com/) и выбрать себе подходящие картинки.
1. Подготовка фото
Шаг 1
Находим подходящее фото. Человек на снимке должен смотреть строго в камеру. Мы отрежем половину головы и отразим ее по горизонтали на противоположную сторону.
Для работы может подойти и селфи, но при использовании качественного снимка результат будет лучше.
Шаг 2
Рисуем две вспомогательные линии, пересекающиеся в центре документа.
Шаг 3
Вставляем фото и размещаем его под вспомогательными линиями.
Шаг 4
Далее активируем свободную трансформацию (Ctrl+T) и размещаем фото так, чтобы глаза были на уровне горизонтальной линии, а нос – вертикальной.
Шаг 5
Дублируем слой с портретом (Ctrl+J), отражаем его по горизонтали Edit – Transform – Flip Horizontal (Редактирование – Трансформация – Отразить по горизонтали) и уменьшаем Opacity (непрозрачность) до 50%. Таким образом, мы получим что-то вроде среднего варианта, к тому же нет необходимости беспокоиться об освещении.
Шаг 6
Теперь уменьшаем портрет с помощью свободной трансформации (Ctrl+T). Слои объединять не нужно! Трансформацию применяем к каждому слою. Уменьшаем фото примерно до 50-75 пикселей. На новом слое рисуем пару круглых глаз, которые мы будем использовать в качестве отправной точки. Глаза рисуем с тем расчетом, что в центре должен быть черный зрачок размером 1 пиксель и радужка на 2 пикселя по бокам. Если мы сожмем фото еще больше, разрешения картинки может быть недостаточно, чтобы нарисовать мелкие детали.
Скрываем вспомогательные линии, они нам больше не понадобятся.
Прошу прощения, если эти жуткие белые глаза вас напугали.
2. Создаем цветовую палитру
Далее мы будем заполнять картинку пикселями. Наша задача – добиться такого эффекта на рисунке, который нельзя получить при использовании фильтра.
Чтобы результат получился более стилизованным, мы будем использовать ограниченное количество цветов.
Шаг 1
Начнем с подбора цвета кожи, например, со лба или щек. Это будет первый цвет на нашей палитре, которую мы расположим с правой стороны от рисунка.
Шаг 2
Обратите внимание на цветовую панель в программе Photoshop. Если у вас нет панели с цветами HSB, нужно ее открыть. Для этого кликаем по иконке со стрелкой в правом верхнем углу панели и в появившемся списке выбираем HSB Sliders.
Мы будем подбирать новые оттенки, используя три цветовые полосы.
Если хотите, можете округлить цифровые значения цветов (например, 20, 45, 90).
Шаг 3
Подбираем несколько оттенков одного цвета с разницей в насыщенности примерно 10% (следующий оттенок должен быть на 10% темнее или светлее).
Шаг 4
Затем к каждому из этих четырех оттенков подбираем новые оттенки по яркости (10%). Увеличивая яркость на 10%, вы можете добраться до 100%, но не стоит опускаться вплоть до 0%.
Шаг 5
И, наконец, подбираем еще один набор из четырех оттенков, только теперь регулируя температуру цвета (на 10 градусов холоднее и теплее).
Это практически все цвета, которые нам понадобятся.
3. Заполняем фото цветом
Мы закончили подготовку и теперь можем приступить к заполнению цветом.
Шаг 1
Чтобы нам было удобнее рисовать, между оригинальным фото и нашей заливкой, нужно создать полупрозрачную подложку (черного или белого цвета) прямоугольной формы, чтобы слои не сливались, и мы четко видели, что рисуем.
Выключаем видимость подложки, чтобы оценить насколько точно закрашенные участки соответствуют фото.
Начинаем рисовать, используя Pencil Tool (B) (Карандаш).
Чтобы было удобнее работать, вы можете увеличить изображение на 600-800%, а рядом открыть отдельное окно с картинкой в 100%-ном масштабе.
Шаг 2
Мы будем рисовать прямо на фото, подбирая наиболее близкий к оригиналу оттенок с нашей палитры.
Шаг 3
Продолжаем в том же духе и закрашиваем другие области на фото. Преимущество работы с идеально симметричным портретом в том, что нам не нужно закрашивать обе половины.
Для наглядности, на большинстве скриншотов включена полупрозрачная черная подложка.
Шаг 4
Продолжаем заполнять цветом!
Шаг 5
Не уверены, какой цвет использовать в той или иной области фото? С помощью пипетки (I) берем на фото пробу цвета, затем карандашом (В) хаотично закрашиваем палитру. Смотрим, на каком оттенке линии максимально сливаются и выбираем его.
Совет: чтобы быстро менять цвет, во время работы карандашом зажимаем клавишу Alt и кликаем по нужному цвету на палитре.
Шаг 6
Продолжаем закрашивание. Брови и другие мелкие элементы пока не трогаем и уделяем внимание только коже.
Шаг 7
Продолжаем работу…
Шаг 8
Мы добрались до глаз и, если вы чувствуете, что вам не хватает нужных оттенков, подбираем их и добавляем на нашу палитру.
Шаг 9
Для рисования глаз нам понадобится добавить подложку белого цвета, так как мы будем работать с темными оттенками.
Шаг 10
Под глазами добавляем красноватый оттенок.
Шаг 11
Закончив рисовать глаз, отражаем полученный результат на противоположную сторону фото.
Шаг 12
Продолжаем закрашивать лицо и переходим к носу.
Шаг 13
Щеки…
Шаг 14
Дорабатываем эти области.
Закончив с носом, отражаем готовый рисунок по горизонтали и любуемся результатом.
Шаг 15
После создания отраженной копии фото в начале урока, ямочки на щеках пропали, поэтому дорисовываем их.
Продолжаем работу с щеками.
Шаг 16
С кожей лица мы закончили и можем начать рисовать контур для бороды… если она, конечно, у вас есть.
Шаг 17
Заканчиваем подбородок (или бороду).
Бороду я рисовал новым темным оттенком, которого нет на палитре. В случаях, когда вам будет необходимо повторно использовать оттенок, который отсутствует на палитре, его всегда можно взять на самом рисунке.
Шаг 18
Далее рисуем губы (именно для этого мы добавляли в палитру красноватые оттенки). В связи с этим появилась необходимость добавить в палитру еще два новых оттенка.
Шаг 19
Отражаем текущий результат по горизонтали.
Продолжаем рисовать. Переходим к ушам. В работе с ушами у нас будет чуть больше свободы для творчества, так как эта область не должна быть идентичной копией фото, поэтому можете смело экспериментировать и добавить немного креативности.
Шаг 20
Снова отражаем результат. С кожей мы практически закончили и теперь можно приступить к линии волос.
Для этого отключим видимость дубликата фото, который мы зеркально отразили, так как из-за этого меняется прическа, а нам нужны волосы, как на оригинале. На фото с симметричными прическами этого можно не делать.
Я немного расширил лоб и теперь он нарисован внахлест на линию волос. Но это не страшно, так как прическу мы будем рисовать поверх лба.
Шаг 21
Мы нарисовали волосы, и почему бы не придать им более привлекательный вид, чем на фото?
Шаг 22
На отдельном слое дорабатываем линию волос.
А затем объединяем ее с лицом и остальными волосами.
Шаг 23
Кроме того, я слегка доработал волосы, лоб и место, где они соединяются.
Шаг 24
Далее рисуем контур шеи и рубашки и определяем границы портрета, нарисовав рамку толщиной один пиксель.
Особенно мне нравится разбавлять скучную и однотипную симметрию ассиметричными деталями такими, как прическа, одежда и т.д.
Шаг 25
Закончив с шеей, нам больше не понадобится цветовая палитра.
Шаг 26
Заполняем цветом рубашку и детализируем ее.
4. Дополнительные детали
Мы закончили с заполнением цветом, но еще остались некоторые области, которые нужно доработать.
Шаг 1
Оригинальное фото нам больше не нужно, поэтому скрываем его.
При необходимости дорабатываем детали на рубашке и заливаем фон приятным контрастным цветом.
Шаг 2
Мне кажется, некоторые области на рисунке (щеки, лоб) выглядят, как некачественный градиент. Я думаю, что это из-за многочисленных оттенков кожи, так что я уменьшил их количество и теперь портрет стал выглядеть лучше.
Шаг 3
Теперь мы должны нарисовать текстуру на волосах. Это не только добавит деталей и объем рисунку, но и поможет нам добиться того самого ретро-эффекта, к которому мы стремимся.
Шаг 4
Рисунок не должен быть на 100% похожим на реальность, потому что для этого есть фото. Поэтому в качестве финального штриха смело экспериментируем с цветом и увеличиваем яркость портрета и добавляем стилизации под старые видеоигры. Для этого используем корректирующие слои Levels (Уровни), Hue/Saturation (Цветовой тон/Насыщенность), Brightness/Contrast (Яркость/Контрастность) и т.д.
Увеличиваем рисунок примерно на 500% (с выключенным сглаживанием), сохраняем его и работа готова!
Мы закончили!
Вы сделали это! Надеюсь, моих инструкций будет достаточно, чтобы вы могли повторить весь процесс с вашими собственными фото.
Можете попробовать использовать меньше цветов и небольшое разрешение, чтобы получить еще более пиксельный рисунок.
Автор: René Alejandro Hernández
Источник: design.tutsplus.com
Как изменить размер пиксельной графики в фотошопе
Нужно изменить размер пиксельной графики? Узнайте, как увеличить ваши художественные работы и сохранить четкие и четкие формы с помощью Photoshop!
Из этого урока вы узнаете, как получить отличные результаты при изменении размера пиксельной графики в Photoshop! Пиксель-арт отличается от стандартных изображений и создает уникальные проблемы при изменении его размера. Обычно, увеличивая изображение и добавляя больше пикселей, Photoshop старается не давать результату выглядеть блочным и пикселированным, смешивая пиксели вместе и сглаживая все.
Но «блочный и пиксельный» — это весь смысл пиксельной графики! Итак, чтобы изменить размеры пиксельной графики, нам нужен способ для Photoshop просто добавить больше пикселей, и все. Вместо того, чтобы сглаживать вещи, нам нужно, чтобы формы и края рисунка выглядели четкими и четкими. На этом уроке я покажу вам, как это сделать.
Наряду с изменением размера пиксельной графики, я также использую эту же технику для изменения размера скриншотов, используемых в моих уроках. И вы можете использовать его для изменения размера любой графики, где вам нужно сохранить четкие, резкие края или читаемый текст. Чтобы получить наилучшие результаты на этом уроке, вы захотите использовать Photoshop CC , но подойдет любая версия Photoshop.
Я буду использовать этого маленького персонажа пиксельной графики, который я скачал с Adobe Stock :
Наш герой пиксельной графики. Предоставлено: Adobe Stock.
Это урок 7 в моей серии «Изменение размера изображения» . Давайте начнем!
Как увеличить пиксель арт в фотошопе
Вот персонаж, открытый в фотошопе. И, как вы можете видеть, он выглядит довольно маленьким:
Пиксель арт в оригинальном размере.
Шаг 1. Откройте диалоговое окно «Размер изображения»
Лучший способ увеличить пиксельную графику — использовать диалоговое окно «Размер изображения» в Photoshop. Чтобы открыть его, перейдите в меню « Изображение» в строке меню и выберите « Размер изображения» :
Идем в Изображение> Размер изображения.
В Photoshop CC диалоговое окно содержит удобное окно предварительного просмотра слева, а также параметры размера изображения справа:
Диалоговое окно «Размер изображения» в Photoshop CC.
Просмотр текущего размера изображения
Текущий размер изображения находится вверху. Рядом со словом « Размеры» мы видим, что мое изображение довольно маленькое, с шириной и высотой всего 500 пикселей:
Текущие размеры в пикселях обложки.
Шаг 2: Включите опцию Resample
Допустим, мне нужно сделать своего персонажа намного больше. Может быть, я хочу использовать его в качестве плаката или в качестве фона рабочего стола. Для этого мне нужно увеличить изображение, добавив больше пикселей.
Во- первых, убедитесь , что Resample параметр в диалоговом окне в повернулся на . Если Resample выключен, размеры в пикселях заблокированы, и все, что мы можем изменить, это размер печати . Чтобы добавить или удалить пиксели, Resample должен быть включен:
Resample должен быть включен.
Шаг 3: Введите процент в поля Ширина и Высота
Вместо того, чтобы увеличивать пиксель-арт до определенного размера, лучший способ увеличить его — использовать проценты . И чтобы избежать искажений и сохранить каждый квадрат в эскизе идеально квадратным, вам нужно придерживаться процентов, кратных 100 (например, 200%, 300%, 400% и т. Д.). Я увеличить изображение, установив как ширину и высоту до 400 процентов :
Повышение ширины и высоты на 400 процентов.
Это увеличит размеры в пикселях с 500 пикселей на 500 пикселей до 2000 пикселей на 2000 пикселей :
Новые размеры в пикселях после изменения размера иллюстрации.
Изменение размера окна предварительного просмотра
Обратите внимание, что, увеличив ширину и высоту в 4 раза, изображение теперь слишком велико, чтобы поместиться в маленьком окне предварительного просмотра. Чтобы увеличить окно предварительного просмотра, я увеличу само диалоговое окно «Размер изображения», перетаскивая нижний правый угол наружу. Затем я нажму и перетащу в окно предварительного просмотра, чтобы центрировать изображение внутри него:
Изменение размера диалогового окна «Размер изображения» для увеличения предварительного просмотра.
Подробнее: диалоговое окно «Размер изображения» в Photoshop CC — Возможности и советы
Проблема с изменением размера пиксельной графики
Все идет нормально. Либо это? Если мы посмотрим на иллюстрацию в окне предварительного просмотра, мы увидим, что она выглядит неправильно. Вместо того, чтобы края вокруг фигур выглядели четкими и резкими, они выглядят немного мягкими и размытыми:
Края выглядят слишком мягкими после увеличения рисунка.
И если мы посмотрим поближе, то увидим ореолы вокруг фигур, особенно в областях с более высокой контрастностью. Я увеличу изображение, используя кнопки масштабирования в нижней части окна предварительного просмотра. И здесь, на уровне увеличения 400%, мы можем ясно видеть ореолы, особенно вокруг глаз персонажа:
Расширение пиксель-арта размыло фигуры и добавило вокруг них ореолы.
Однако обратите внимание, что если вы щелкнете мышью по обложке в окне предварительного просмотра и удержите ее, ореолы исчезнут, а края будут выглядеть очень острыми, чего мы и хотим:
Пиксельная графика выглядит великолепно, когда вы нажимаете и удерживаете.
Но как только вы отпустите кнопку мыши, вы снова увидите ореолы:
Мягкость и ореолы возвращаются, когда кнопка мыши отпущена.
Метод интерполяции изображения
Причина в том, что когда вы щелкаете и удерживаете в окне предварительного просмотра, вы видите изображение с повышенной дискретизацией до того, как Photoshop применяет любую интерполяцию изображения . Интерполяция — это то, как Photoshop усредняет пиксели вместе и сглаживает результат. Когда вы отпустите кнопку мыши, вы увидите обложку с примененной интерполяцией. И именно метод интерполяции вызывает проблемы и создает эффект ореола.
Опция интерполяции находится справа от опции Resample. И по умолчанию установлено значение « Автоматически» :
Опция интерполяции изображения.
Обычно автоматическая настройка подходит, потому что она позволяет Photoshop выбрать лучший метод для работы. Но проблема в том, что Photoshop предполагает, что мы меняем стандартное изображение с большим количеством мелких деталей. Таким образом, он выбирает метод, который заставил бы стандартное изображение выглядеть хорошо. Но тот же самый метод заставляет пиксельную графику и подобные типы графики выглядеть плохо. Поэтому при повышении дискретизации пиксельной графики нам нужно самим выбрать другой метод интерполяции.
Шаг 4: Установите метод интерполяции на Nearest Neighbor
Для этого нажмите на опцию Интерполяция, чтобы открыть список методов, которые мы можем выбрать. Если вы используете Photoshop CC, то метод интерполяции, который Photoshop выбирает для изображений с повышенной дискретизацией, — это « Сохранить детали» . А в Photoshop CS6 он выбирает Bicubic Smoother . Но ни один из них не работает хорошо с пиксельной графикой:
Методы интерполяции фотошопа.
Чтобы повысить качество иллюстрации без усреднения пикселей, необходим метод интерполяции « Ближайший сосед» :
Выбор ближайшего соседа.
Как только вы выбираете Nearest Neighbor, изображение в окне предварительного просмотра выглядит четким и четким! И если вы щелкните и удержите в окне предварительного просмотра, а затем отпустите кнопку мыши, вы увидите, что на этот раз ничего не происходит. Иллюстрации выглядят одинаково четко до и после применения метода интерполяции.
Это потому, что теперь это один и тот же метод интерполяции оба раза. Photoshop всегда добавляет пиксели, изначально используя Nearest Neighbor. Но теперь, когда мы сами выбрали Nearest Neighbor, он не использует ничего другого, что могло бы ухудшить пиксель-арт:
Nearest Neighbor идеально подходит для пиксельной графики с повышением частоты дискретизации.
Шаг 5: Нажмите ОК
Когда вы будете готовы пробовать иллюстрацию, нажмите кнопку «ОК», чтобы принять ваши настройки и закрыть диалоговое окно «Размер изображения»:
Нажмите кнопку ОК, чтобы увеличить пиксель-арт и закрыть диалоговое окно «Размер изображения».
И теперь мой маленький герой пиксельной графики выглядит намного больше, но все же он сохраняет тот же блочный, пиксельный вид, который мы ожидали:
Пиксель арт с повышенной дискретизацией.
Как увеличить пиксель арт — краткий обзор
Прежде чем идти дальше, давайте кратко суммируем шаги для получения наилучших результатов при расширении пиксельной графики в Photoshop.
- 1. Откройте диалоговое окно «Размер изображения» («Изображение»> «Размер изображения»).
- 2. Установите для параметра Ширина и высота значение Процент, а затем для получения наилучших результатов выберите процент, кратный 100 (200%, 300%, 400% и т. Д.).
- 3. Измените метод интерполяции на «Ближайший сосед».
- 4. Нажмите ОК.
Как изменить размер пиксельной графики до точного размера
До сих пор мы узнали, что лучший способ увеличить пиксельную графику — повысить ее с помощью процента, кратного 100. Но что если вам нужно увеличить его до определенных размеров в пикселях, и вы не сможете получить его, используя один из этих процентов?
Например, увеличив частоту дискретизации на 400%, я увеличил ширину и высоту с 500 до 2000 пикселей:
Размеры увеличенного изображения.
Но что, если мне нужно, чтобы ширина и высота были немного меньше, например, 1600 пикселей? Если бы я увеличил частоту дискретизации моего изображения 500 px x 500 px на 300%, его ширина и высота были бы равны только 1500 пикселям, оставив его все еще слишком маленьким. А повышение частоты дискретизации на 400% сделало его слишком большим. Что мне действительно нужно было что-то среднее. В этом случае вам нужно изменить размер изображения в два этапа .
Шаг 1. Отобразите пиксельную графику в процентах.
Во-первых, увеличьте образец пикселя, используя процентное значение, кратное 100, что сделает его больше, чем вам нужно. В моем случае, я уже сделал это, увеличив частоту дискретизации на 400%, поэтому первый шаг сделан.
Шаг 2. Повторно откройте диалоговое окно «Размер изображения»
Затем измените его размер во второй раз, на этот раз, чтобы уменьшить его до точных размеров в пикселях. Для этого снова откройте диалоговое окно «Размер изображения», зайдя в меню « Изображение» и выбрав « Размер изображения» :
Идем в Изображение> Размер изображения.
Шаг 3: Оставьте опцию Resample включенной
Убедитесь , что Resample вариант еще на так что вы можете изменить количество пикселей:
Оставив опцию Resample отмеченной.
Шаг 4: Установите ширину и высоту в пикселях
Введите нужный вам размер в пикселях в поля Ширина и Высота . Я установлю их на 1600 пикселей:
Ввод новых размеров в пикселях.
Шаг 5: Установите метод интерполяции на Автоматический
И наконец, хотя метод интерполяции Nearest Neighbor отлично работает для пиксельной графики с повышенной дискретизацией , вы не хотите использовать его при понижающей дискретизации. Вместо этого для получения самых резких результатов измените метод интерполяции обратно на автоматический . Это вернет управление обратно в Photoshop, а при уменьшении количества изображений автоматически выберет Bicubic Sharper :
Установите метод интерполяции обратно на Автоматический.
Когда вы будете готовы изменить размеры иллюстрации до точного размера, нажмите кнопку ОК, чтобы закрыть диалоговое окно, и все готово:
Нажмите кнопку ОК, чтобы уменьшить изображение.
И там у нас это есть! Вот как можно добиться наилучших результатов при изменении размера пиксельной графики, снимков экрана или аналогичной графики в Photoshop! В следующем и последнем уроке этой серии мы рассмотрим лучший способ увеличения изображений в Photoshop CC с помощью новой функции, известной как Preserve Details 2.0 !
Или посмотрите предыдущие уроки этой серии:
- 01 — пиксели, размер изображения и разрешение
- 02 — Команда Photoshop’s Image Size — Особенности и советы
- 03 — Как изменить размер изображения для печати с помощью Photoshop
- 04 — Как изменить размер изображения для электронной почты и обмена фотографиями
- 05 — Как рассчитать размер изображения
- 06 — правда о разрешении изображения, размере файла и сети
- 07 — Как изменить размер пиксельной графики
- 08 — Лучший способ увеличить изображения в Photoshop CC
И не забывайте, что все наши учебники теперь доступны для скачивания в формате PDF !
Будьте первым, кто узнает, когда будут добавлены новые учебники!
Как сохранить photoshop пиксель-арт — CodeRoad
У меня сейчас возникли некоторые проблемы с изометрической пиксельной графикой. Поэтому я рисую эту картинку, которая будет загружена позже в игре, но когда я сохраняю ее и увеличиваю масштаб, она выглядит так:
Картинка стала размытой, а цвета не такими яркими. Могу ли я что-нибудь с этим поделать? Как я могу сохранить его так, чтобы он был таким же, как в зуме photoshop (300%)?
Буду очень благодарен за любую помощь.
format pixel photoshopПоделиться Источник Дмитрий Макашев 26 декабря 2017 в 08:50
2 ответа
- Как сделать пиксель — арт для игры?
Я программирую приложение с помощью Corona SDK, и мне было интересно, как вы делаете пиксель — арт для этого приложения. Я не могу позволить себе ничего подобного Photoshop. Что меня действительно смущает, так это то, как люди делают большой фон, а затем заставляют его отображать пиксели, вот так…
- Как Лучше Всего Отображать Пиксель-Арт В Комплекте Sprite?
Мне любопытно, как я буду отображать пиксель-арт для своей игры. На данный момент я просто изменяю размер SKScene на sceneWithSize:CGSizeMake(256, 192) -это правильный путь или есть лучший способ выполнить такую задачу?
1
Как сказал Phlume, вы можете использовать программное обеспечение для векторной базы, такое как illustrator, CorelDraw, Inkscape (бесплатная программа) и т. Д., И экспортировать его в виде изображения SVG.
OR
для быстрого исправления в Photoshop вы можете создать изображение размером 300% (размер холста в 3 раза больше, чем требуется ) и экспортировать изображение в 96dpi. И далее, чтобы уменьшить размер изображения для более быстрой загрузки, вы можете попробовать https://tinypng.com/
И с помощью кодирования вы можете изменить его размер до необходимого размера.
Поделиться Guruling Kumbhar 27 декабря 2017 в 07:28
0
Photoshop — это программа на основе растра. Чтобы сохранить четкость пиксельного рисунка, вам следует переключиться на программу векторной графики, такую как illustrator. При увеличении масштаба с помощью illustrator математика пересчитывается, чтобы сформировать чистые линии от точки к точке. Размытость, которую вы видите в photoshop, является результатом сжатия данных пикселей при сохранении и нахождении «happy medium» для представления цвета в этой области.
Поделиться Phlume 27 декабря 2017 в 03:15
Похожие вопросы:
Как сделать пиксель более заметным в LIbgdx?
Я сделал пиксельную текстуру на photoshop, которая составляет 30×30 пикселей, чего я хотел добиться, так это того, что пиксели действительно видны, как при увеличении photoshop, что-то вроде flappy…
Photoshop javascript сохранить ошибку 8800
В моем javascript, в Windows 7, Photoshop CS2 & Photoshop CS5 он выдает ошибку: Ошибка 8800: произошла общая ошибка Photoshop. Эта функция может быть недоступна в данной версии Photoshop. — Не…
Есть ли какой-нибудь способ конвертировать игровые активы в пиксель-арт?
Сейчас я изучаю разработку игр с Unity Engine .. но проблема в том .. я программист .. у меня нулевой опыт в искусстве и как создавать игровые активы .. у меня есть эти огромные идеи, и я…
Как сделать пиксель — арт для игры?
Я программирую приложение с помощью Corona SDK, и мне было интересно, как вы делаете пиксель — арт для этого приложения. Я не могу позволить себе ничего подобного Photoshop. Что меня действительно…
Как Лучше Всего Отображать Пиксель-Арт В Комплекте Sprite?
Мне любопытно, как я буду отображать пиксель-арт для своей игры. На данный момент я просто изменяю размер SKScene на sceneWithSize:CGSizeMake(256, 192) -это правильный путь или есть лучший способ…
Как использовать пиксель-арт в приложении?
У меня есть приложение iOS, которое использует набор sprite, и я готов добавить свои работы. Произведение искусства-это пиксель-арт, и по своей сути оно очень маленькое. Я пытаюсь найти лучший…
В EaselJS, как я могу масштабировать пиксель-арт, не размывая его?
Я делаю игру в EaselJS, используя пиксель-арт,который я масштабирую. Проблема в том, что когда я масштабирую его, он размывает изображение. Есть ли способ заставить его нарисовать его с помощью…
Можете ли вы установить закругленные углы пикселей в Photoshop?
Я делаю пиксель-арт, поэтому мой холст имеет размер всего 30х60 пикселей, и я не думаю, что использование прямоугольной формы будет работать, потому что холст слишком мал, и мне нужен только один…
direct3d9 как фильтровать текстуры для пиксельной графики
Здравствуйте я хочу сделать пиксель арт изображение выглядит менее размытым я попробовал установить состояние сэмплера но не вижу никакой разницы device->SetSamplerState(0, D3DSAMP_MIPFILTER,…
Почему мой пиксель-арт масштабируется неправильно в других разрешениях?
Все мои пиксельные арт-активы имеют ppu 32, и я применил его ко всем ним. На 1920х1080 разрешение хорошее, но в большинстве других разрешений пиксели спрайтов сжимаются и растягиваются. Я также…
пикселей, размер изображения и разрешение изображения в Photoshop
Хотите добиться наилучших результатов при изменении размера изображений в Photoshop? Начните с изучения пикселей, размера изображения и разрешения!
Автор Стив Паттерсон.
В этом уроке я познакомлю вас с тремя важными темами, которые важны для работы с цифровыми изображениями в Photoshop, а именно: пикселей , размер изображения и разрешение изображения . Четкое понимание того, как пиксели, размер изображения и разрешение связаны друг с другом, необходимо для получения наилучших результатов при изменении размера изображений как для печати, так и для Интернета.
Мы начнем с изучения пикселей, основных строительных блоков всех цифровых изображений. Затем мы узнаем, как пиксели связаны с размером изображения. И мы закончим, узнав, как размер изображения и разрешение изображения работают вместе, чтобы управлять размером печати вашего изображения! Мы даже опровергнем распространенное мнение о том, что разрешение имеет какое-либо отношение к размеру файла вашего изображения.
Мы узнаем все об изменении размера изображения в последующих уроках этой главы. А пока давайте начнем с самого начала, узнав о пикселях, размере изображения и разрешении!
Загрузите это руководство в виде готового к печати PDF-файла!
Что такое пиксели?
Термин пиксель — это сокращение от «элемент изображения», а пиксели — это крошечные строительные блоки, из которых состоят все цифровые изображения.Подобно тому, как рисунок создается из отдельных мазков кисти, цифровое изображение создается из отдельных пикселей.
В Photoshop при просмотре изображения с нормальным уровнем масштабирования (100% или меньше) пиксели обычно слишком малы, чтобы их можно было заметить. Вместо этого мы видим то, что выглядит как непрерывное изображение, в котором свет, тени, цвета и текстуры смешиваются вместе, чтобы создать сцену, которая выглядит так же, как в реальном мире (изображение из Adobe Stock):
Цифровое изображение, открытое в Photoshop.Изображение предоставлено Adobe Stock.
Более пристальный взгляд на пиксели
Но, как и любой хороший фокус, то, что мы видим, на самом деле иллюзия. И чтобы разрушить иллюзию, нам просто нужно присмотреться. Чтобы просмотреть отдельные пиксели изображения, все, что нам нужно сделать, это увеличить масштаб. Я выберу инструмент «Масштаб» на панели инструментов:
Выбор инструмента масштабирования.
Затем я несколько раз щелкну один из глаз женщины, чтобы увеличить его. Каждый раз, когда я щелкаю, я увеличиваю масштаб. И если я увеличу достаточно близко, мы начнем видеть, что то, что выглядело как непрерывное изображение, на самом деле представляет собой группу крошечных квадратов.Эти квадраты и есть пиксели:
При более близком увеличении видны отдельные пиксели.
И если я увеличу еще ближе, мы увидим, что каждый пиксель отображает один цвет. Все изображение на самом деле представляет собой сетку из сплошных квадратов. Если смотреть с достаточно большого расстояния, наши глаза смешивают цвета вместе, чтобы создать изображение с большим количеством деталей. Но вблизи наш цифровой мир создают пиксели:
Увеличенный вид пикселей изображения, каждый из которых имеет один цвет.
Пиксельная сетка
Обратите внимание, что как только вы увеличиваете достаточно близко (обычно более 500%), вы начинаете видеть светло-серый контур вокруг каждого пикселя.Это Photoshop Pixel Grid , и он нужен только для того, чтобы упростить просмотр отдельных пикселей. Если вы обнаружите, что Pixel Grid отвлекает, вы можете отключить его, перейдя в меню View в строке меню, выбрав Show , а затем выбрав Pixel Grid . Чтобы снова включить его, просто выберите его снова:
Перехожу в «Просмотр»> «Показать»> «Пиксельная сетка».
Уменьшение масштаба для просмотра изображения
Чтобы уменьшить пиксели и просмотреть все изображение, перейдите в меню Просмотр и выберите По размеру экрана :
Перехожу в «Просмотр»> «По размеру экрана».
И теперь, когда мы уменьшили масштаб, отдельные пиксели снова стали слишком малы, чтобы их можно было заметить, и мы снова видим иллюзию детализированной фотографии:
При нормальном расстоянии просмотра пиксели сливаются вместе, образуя изображение.
См. Наше полное руководство по навигации по изображениям в Photoshop
.Какой размер изображения?
Итак, теперь, когда мы знаем, что пиксели — это крошечные цветные квадраты, составляющие цифровое изображение, давайте рассмотрим связанную тему, размер изображения . Размер изображения означает ширину и высоту изображения в пикселях. Это также относится к общему количеству пикселей в изображении, но на самом деле нам нужно заботиться о ширине и высоте.
Диалоговое окно размера изображения
Лучшее место для поиска информации о размере изображения — это диалоговое окно «Размер изображения» Photoshop. Чтобы открыть его, перейдите в меню Image и выберите Image Size :
Переход к изображению> Размер изображения.
В Photoshop CC в диалоговом окне «Размер изображения» слева отображается область предварительного просмотра, а справа — сведения о размере изображения.Я расскажу о диалоговом окне «Размер изображения» более подробно в следующем уроке. А пока мы просто посмотрим на ту информацию, которая нам нужна:
Диалоговое окно «Размер изображения» в Photoshop CC.
Размер пикселей
Ширина и высота изображения в пикселях известны как его размеры пикселя , и в Photoshop CC мы можем просмотреть их рядом со словом Размеры в верхней части диалогового окна. Здесь мы видим, что мое изображение имеет ширину 4509 пикселей (пикселей) и высоту 3000 пикселей:
Photoshop CC включает новую опцию «Размеры» вверху.
Если размеры показаны в виде измерения, отличном от пикселей, например в дюймах или процентах, щелкните маленькую стрелку рядом со словом «Размеры» и выберите пикселей из списка:
Размеры могут отображаться в различных типах измерений.
Это говорит нам, что мое изображение содержит 4509 пикселей слева направо и 3000 пикселей сверху вниз:
Размер изображения в пикселях.
Нахождение общего количества пикселей
Чтобы вычислить общее количество пикселей в изображении, нам просто нужно умножить значения ширины и высоты вместе.Итак, в этом случае 4509 x 3000 = 13 527 000, или примерно 13,5 миллиона пикселей. Вам действительно не нужно знать общее количество пикселей. Но по мере того, как вы приобретете больше опыта в изменении размера изображений, вы обнаружите, что заранее известное общее количество пикселей даст вам хорошее представление о том, насколько большим вы можете напечатать изображение, как мы увидим дальше, когда посмотрим на разрешение изображения.
Загрузите это руководство в виде готового к печати PDF-файла!
Какое разрешение изображения?
Итак, если пикселей — это крошечные цветные квадраты, составляющие все цифровые изображения, а размер изображения — это количество пикселей в изображении слева направо (ширина) и сверху вниз (высота), что такое разрешение изображения ? Разрешение изображения управляет размером фотографии. печатает в зависимости от текущего размера изображения.
Важно заранее понимать, что разрешение изображения влияет только на размер распечатанной версии изображения . Это не имеет никакого эффекта при просмотре изображения на экране. Я освещаю эту тему более подробно в моем руководстве по мифу о веб-разрешении 72 ppi, и мы еще раз рассмотрим его в конце этого урока.
Соединение по ширине, высоте и разрешению
В диалоговом окне «Размер изображения», если вы посмотрите под словом «Размеры», вы найдете поля Ширина , Высота и Разрешение .Здесь мы можем не только просматривать текущие настройки, но и изменять их:
Параметры ширины, высоты и разрешения.
Опция передискретизации
Прежде чем мы продолжим, если вы посмотрите ниже значения разрешения, вы найдете еще одну важную опцию под названием Resample . И по умолчанию Resample включен. Мы узнаем все о параметре Resample, когда рассмотрим, как изменять размер изображений. Короче говоря, Resample позволяет нам изменять количество пикселей в изображении:
Опция Resample.
Почему вы хотите изменить количество пикселей? Если текущий размер изображения слишком мал для печати фотографии нужного вам размера, вы можете использовать Resample, чтобы добавить больше пикселей, известное как upsampling . Или, если вы хотите отправить свою фотографию друзьям по электронной почте или загрузить ее в Интернет, а текущий размер слишком велик, Resample позволит вам уменьшить количество пикселей, известное как , понижающая дискретизация .
Опять же, мы узнаем все о повышении и понижении дискретизации, когда посмотрим, как изменять размер изображений.На данный момент, чтобы увидеть, как разрешение влияет на размер печати изображения, снимите флажок Resample, чтобы отключить его:
Снятие отметки с опции Resample.
Изменение размера печати, а не размера изображения
Как только вы выключите Resample, вы заметите, что тип измерения для значений ширины и высоты изменится. Вместо того, чтобы просматривать ширину и высоту в пикселях, как это было минуту назад, теперь я вижу их в дюймов . И вместо того, чтобы сказать мне, что мое изображение имеет ширину 4509 пикселей и высоту 3000 пикселей, мне теперь говорят, что это 15.03 дюйма в ширину и 10 дюймов в высоту:
Ширина и высота теперь отображаются в дюймах, а не в пикселях.
Фактически, если вы щелкните поле типа измерения для ширины или высоты, вы заметите, что пиксели теперь неактивны и недоступны. Это потому, что при выключенном Resample мы не можем изменить физическое количество пикселей в изображении. Все, что мы можем сделать, это изменить размер изображения на печать , а размер печати обычно измеряется в дюймах (или сантиметрах в зависимости от того, где вы находитесь в мире):
Отключение Resample не позволяет нам добавлять или удалять пиксели.
Как работает разрешение изображения?
Resolution управляет размером печати изображения, задавая количество пикселей, которые будут помещены на каждый дюйм бумаги, как по вертикали, так и по горизонтали. Вот почему значение разрешения измеряется в пикселей на дюйм , или « ppi ». Поскольку изображение имеет ограниченное количество пикселей, чем больше мы склеиваем эти пиксели на бумаге, тем меньше изображение будет напечатано.
Например, мое значение разрешения в настоящее время установлено на 300 пикселей / дюйм.Это означает, что когда я иду напечатать изображение, 300 пикселей по ширине и 300 пикселей по высоте будут втиснуты на каждый квадратный дюйм бумаги. Теперь 300 пикселей могут показаться не такими уж большими. Но помните, это 300 от ширины и от высоты. Другими словами, это 300 умножить на 300, что в сумме составляет
пикселей на квадратный дюйм:
Текущее разрешение в пикселях на дюйм.
Как определить размер отпечатка
Чтобы определить размер печати изображения, все, что нам нужно сделать, это разделить его текущую ширину и высоту в пикселях на значение разрешения.Если мы снова посмотрим на раздел «Размеры» вверху, то увидим, что ширина моего изображения по-прежнему составляет 4509 пикселей:
Текущая ширина в пикселях.
Если мы разделим 4509 на текущее значение разрешения 300, мы получим 15,03. Другими словами, ширина моего изображения при печати будет 15,03 дюйма, точное значение, показанное в поле Ширина:
.4509 пикселей ÷ 300 пикселей / дюйм = 15,03 дюйма.
И вернувшись в раздел «Размеры», мы видим, что высота моего изображения по-прежнему составляет 3000 пикселей:
Текущая высота в пикселях.
Если мы разделим 3000 на текущее разрешение 300, мы получим 10. Это означает, что высота изображения при печати будет 10 дюймов, как это показано в поле Высота:
3000 пикселей ÷ 300 пикселей / дюйм = 10 дюймов.
Изменение разрешения изменяет размер печати
Если мы изменим значение разрешения, количество пикселей в изображении не изменится, но изменится размер печати. Обратите внимание, что если я уменьшу разрешение с 300 пикселей / дюйм до 150 пикселей / дюйм, размеры в пикселях останутся прежними — 4509 x 3000 пикселей.Но ширина и высота увеличиваются. Поскольку я буду выдавливать на бумагу только половину количества пикселей на дюйм, как по горизонтали, так и по вертикали, ширина и высота увеличились вдвое:
При уменьшении разрешения увеличивается размер печати.
Изменение размера печати изменяет разрешение
И поскольку все, что мы меняем, это размер печати, то изменение ширины или высоты изменит разрешение. Фактически, когда опция Resample, которую мы рассматривали ранее, отключена, все три значения (Ширина, Высота и Разрешение) связаны вместе.Изменение одного автоматически меняет другие.
Если я уменьшу значение ширины до 10 дюймов, а затем, чтобы соотношение сторон изображения не изменилось, Photoshop автоматически изменит значение высоты на 6,653 дюйма. А чтобы уместить все изображение в новый, меньший размер печати, пиксели нужно будет упаковать плотнее, поэтому значение разрешения увеличилось до 450,9 пикселей / дюйм:
При изменении ширины и высоты изменяется разрешение.
Влияет ли разрешение изображения на размер файла?
Распространенное заблуждение относительно разрешения изображения состоит в том, что оно каким-то образом влияет на размер файла изображения.Многие считают, что перед тем, как отправить фотографию по электронной почте или загрузить ее в Интернет, необходимо уменьшить ее разрешение, чтобы уменьшить размер файла. Это просто неправда. Поскольку изменение разрешения не влияет на количество пикселей в изображении, оно вообще не влияет на размер файла.
Если вы посмотрите рядом со словами «Размер изображения» в верхней части диалогового окна, вы увидите число, обычно показываемое в мегабайтах (M). В моем случае это 38,7 млн. Это число представляет размер изображения в памяти вашего компьютера.Когда вы открываете изображение в Photoshop, оно копируется с вашего жесткого диска, распаковывается из любого формата файла, в котором оно было сохранено, а затем помещается в память (ОЗУ), чтобы вы могли работать с ним быстрее. Число, отображаемое в диалоговом окне «Размер изображения», является фактическим размером изображения без сжатия:
.Размер изображения в мегабайтах указан вверху.
Меньшее разрешение по сравнению с размером файла
Доказать, что разрешение изображения не влияет на размер файла, несложно. Просто следите за размером при изменении разрешения.Пока параметр «Resample» отключен и вы не меняете количество пикселей в изображении, независимо от того, какое значение вы выберете для разрешения, размер файла вверху всегда останется прежним.
Здесь я снизил разрешение с 300 пикселей / дюйм до 30 пикселей / дюйм. С таким небольшим количеством пикселей, втиснутых в дюйм бумаги, размер печати увеличился до колоссальных 150,3 дюйма на 100 дюймов. Но даже при этом очень низком значении разрешения размер изображения в памяти остается неизменным и составляет 38.7М:
Понижение разрешения печати не влияет на размер файла.
Выше разрешение по сравнению с размером файла
А здесь я увеличил разрешение до 3000 пикселей / дюйм. Это уменьшает размер печати до 1,503 дюйма на 1 дюйм, но опять же не влияет на размер файла, который по-прежнему составляет 38,7 МБ. Единственный способ уменьшить размер файла изображения — либо уменьшить количество пикселей в изображении (с помощью параметра Resample), либо сохранить файл в формате, поддерживающем сжатие (например, JPEG), либо и то, и другое.Простое изменение разрешения печати не изменит размер файла:
Увеличение разрешения печати также не влияет на размер файла.
Так как же сделать уменьшить количество пикселей в изображении? А какое разрешение нужно для получения качественных отпечатков? Я отвечу на эти и другие вопросы в отдельных уроках этой главы.
И вот оно! Это краткий обзор пикселей, размера и разрешения изображения — трех важных тем, о которых вам нужно знать, чтобы получить наилучшие результаты при изменении размера изображений в Photoshop! В следующем уроке мы подробнее рассмотрим мощную команду Image Size в Photoshop CC!
Вы можете перейти к любому другому уроку в этой главе «Изменение размера изображений в Photoshop».Или посетите наш раздел Основы Photoshop, чтобы узнать больше!
Эффект цифровых пикселей— Урок Photoshop
Автор Стив Паттерсон.
В этом уроке Photoshop Effects мы узнаем, как создать эффект «цифрового пикселя», который часто используется в рекламе, которая продает все, что связано с цифровым форматом. Сначала мы собираемся пикселизировать все наше изображение с помощью очень простого фильтра, а затем поэкспериментируем с маской слоя, настройкой непрозрачности и некоторыми режимами наложения слоев, чтобы создать различные вариации нашего эффекта.В конце урока мы даже увидим, как такая простая вещь, как изменение режима наложения слоя, может создать совершенно новый эффект!
Вот исходное изображение, с которого я начну:
Исходное изображение.
Как я уже сказал, мы рассмотрим несколько различных вариантов эффекта. Вот первый, над чем мы будем работать:
Один из эффектов, которые мы создадим в этом уроке.
Вот второй:
Вариант того же эффекта.
И просто в качестве примера того, как легко мы можем создать то, что кажется совершенно другим эффектом, просто изменив режим наложения слоя, мы закончим этим:
Последняя вариация эффекта.
Этот урок из нашей серии «Фотоэффекты». Давайте начнем!
Загрузите это руководство в виде готового к печати PDF-файла!
Шаг 1. Дублируйте фоновый слой
Первое, что мне нужно сделать для этого эффекта, — это продублировать мой фоновый слой.Когда мое изображение открыто в Photoshop, я вижу в палитре слоев, что в настоящее время у меня есть только один слой, фоновый слой, который содержит мое изображение:
Палитра слоев Photoshop, показывающая фоновый слой.
Я собираюсь продублировать этот слой с помощью сочетания клавиш Ctrl + J (Win) / Command + J (Mac), и теперь я вижу в палитре слоев, что у меня есть два слоя с копией фоновый слой над оригиналом. Photoshop назвал его «Слой 1»:
Нажмите «Ctrl + J» (Win) / «Command + J» (Mac), чтобы продублировать фоновый слой.
Шаг 2: пикселизируйте дублирующийся слой
Затем нам нужно пикселизировать новый слой, и мы можем сделать это, перейдя в меню Filter в верхней части экрана, выбрав Pixelate , а затем выбрав Mosaic . Это вызывает диалоговое окно фильтра «Мозаика». Перетащите ползунок внизу, чтобы изменить параметр Размер ячейки , который увеличивает или уменьшает количество и размер пикселей, создаваемых из изображения. Перетаскивание вправо создает меньше пикселей, но большего размера, а перетаскивание влево дает больше пикселей, но меньшего размера.Я собираюсь установить размер ячейки примерно 18:
.Фильтр «Мозаика» в фотошопе. Перетащите ползунок внизу, чтобы увеличить или уменьшить количество и размер пикселей.
Щелкните OK, чтобы выйти из диалогового окна. Вот мое изображение после применения фильтра мозаики:
Изображение после пикселизации с помощью мозаичного фильтра.
Теперь, когда мы пикселировали изображение, есть несколько разных вещей, которые мы можем сделать с ним, и мы рассмотрим их дальше.
Шаг 3: Добавьте маску слоя
На этом этапе я собираюсь добавить маску слоя к пиксельному слою.Для этого, выбрав «Слой 1», я собираюсь щелкнуть значок Layer Mask в нижней части палитры слоев:
Щелкните значок «Маска слоя».
Это добавляет маску слоя к «Layer 1», и если мы посмотрим на палитру Layers, мы увидим, что она также добавляет миниатюру маски слоя справа от миниатюры содержимого слоя:
Маска слоя и миниатюра маски слоя были добавлены в «Слой 1».
Мы также можем сказать, что маска слоя, а не содержимое слоя, в настоящее время выбирается по белой рамке выделения, появляющейся вокруг миниатюры маски слоя.
Шаг 4. Выберите инструмент «Градиент»
Мы собираемся использовать нашу маску слоя, чтобы смешать исходное изображение на фоновом слое и пиксельное изображение на «Слое 1» вместе, и для этого нам понадобится инструмент Gradient Tool , поэтому либо выберите его из палитры инструментов, либо нажмите G на клавиатуре:
Выберите инструмент «Градиент».
Шаг 5. Сбросьте цвет переднего плана и фона, если необходимо
Нам нужен черный цвет в качестве цвета переднего плана и белый в качестве цвета фона.Обычно это цвета переднего плана и фона Photoshop по умолчанию, за исключением случаев, когда у нас выбрана маска слоя, что мы и делаем в настоящее время. Каждый раз, когда у нас выбирается маска слоя, цвета по умолчанию меняются местами: белый становится цветом переднего плана по умолчанию, а черный — цветом фона по умолчанию. Чтобы быстро установить цвета переднего плана и фона на черный и белый соответственно (помня, что у нас выбрана маска слоя), нажмите D на клавиатуре, чтобы сбросить их до значений по умолчанию, а затем нажмите X , чтобы поменять их местами.В палитре инструментов вы увидите, что образец цвета переднего плана теперь отображается черным, а образец цвета фона — белым:
Нажмите «D», а затем «X» на клавиатуре, чтобы установить черный цвет в качестве цвета переднего плана и белый в качестве цвета фона.
Шаг 6. Выберите градиент «От переднего плана к фону»
Выбрав инструмент «Градиент», а цвета переднего плана и фона установлены на черный и белый, посмотрите на панель параметров в верхней части экрана, чтобы увидеть, какой градиент вы выбрали в данный момент.Если в области предварительного просмотра градиента отображается градиент от черного к белому, все готово:
Область предварительного просмотра градиента, показывающая градиент от черного к белому.
Если отображается другой градиент, щелкните маленькую стрелку, направленную вниз, справа от области предварительного просмотра градиента. Под ним появится Gradient Picker . Выберите градиент «от переднего плана к фону» в верхнем левом углу, затем щелкните в любом месте за пределами средства выбора градиента, чтобы закрыть его:
Щелкните стрелку, направленную вниз, справа от области предварительного просмотра градиента и выберите градиент в верхнем левом углу средства выбора градиента.
Шаг 7: растяните градиент от черного к белому на маске слоя
Теперь, когда у нас есть градиент от черного к белому, мы можем использовать его для смешивания фонового слоя и пиксельного слоя вместе, создавая нашу первую вариацию эффекта. Я хочу, чтобы переходная область моего перехода отображалась на лице парня, поэтому половина его лица (и половина изображения также) пикселированы, а другая половина — нет. Для этого я собираюсь щелкнуть под его правым глазом, а затем, удерживая нажатой клавишу Shift , чтобы убедиться, что я перетаскиваю горизонтальную линию, я собираюсь перетащить мышь полностью к левому краю. его лица:
Перетащите градиент через область, где вы хотите, чтобы переход между двумя слоями отображался.
Область между тем, где я начал и где закончил свой градиент, станет областью перехода между пиксельным изображением на «Слое 1» и исходным изображением на фоновом слое. Когда я отпускаю кнопку мыши, я получаю эффект перехода:
Эффект первый.
Шаг 8: Залейте маску слоя белым цветом
Давайте посмотрим на другой вариант нашего эффекта «цифрового пикселя». Во-первых, нам нужно удалить градиент, который мы добавили к маске слоя несколько минут назад.Мы могли бы просто нажать Ctrl + Z (Win) / Command + Z (Mac), чтобы отменить это, но давайте вместо этого повторно заполним маску слоя белым цветом. Для этого с миниатюрой маски слоя, выбранной в палитре слоев и белым в качестве текущего цвета фона, используйте сочетание клавиш Ctrl + Backspace (Win) / Command + Delete (Mac), чтобы заполнить маску слоя цветом Цвет фона (белый). Миниатюра маски слоя снова станет сплошной белой, а изображение снова станет полностью пиксельным:
Нажмите «Alt + Backspace» (Win) / «Option + Delete» (Mac), чтобы залить маску слоя белым цветом и снова показать весь пиксельный слой в окне документа.
Шаг 9: Выберите инструмент Brush Tool
Выберите Brush Tool на палитре инструментов или нажмите B для сочетания клавиш:
Выберите инструмент Brush Tool
Шаг 10: закрасьте черным цветом, чтобы выделить части изображения
Используя кисть с мягкими краями и черный цвет в качестве цвета переднего плана, я собираюсь показать основную часть его лица, просто закрасив ее с помощью инструмента «Кисть». Поскольку я рисую на маске слоя, а не на самом изображении, везде, где я рисую черным, скроет пиксельный слой и откроется фоновый слой под ним.Я могу изменять размер кисти на лету с помощью клавиш левой и правой скобок на клавиатуре, и я могу настроить кисть на мягкий край, удерживая клавишу Shift и нажимая клавишу левой скобки несколько раз :
Используйте кисть с мягкими краями, чтобы закрасить части пиксельного слоя, открывая исходное изображение под ним.
Вот мое изображение после того, как я обнаружил основные области его лица, закрасив их черным цветом, создавая впечатление, что он каким-то образом смотрит сквозь пиксели:
Основные части его лица теперь выглядят так же, как на исходной фотографии, в то время как остальная часть фотографии остается пиксельной.
Шаг 11: Уменьшите непрозрачность пиксельного слоя
Я собираюсь позволить исходному изображению частично отображаться через пиксельное изображение, и я могу сделать это, просто перейдя к параметру Opacity в верхнем правом углу палитры слоев и уменьшив значение непрозрачности. Я собираюсь снизить его примерно до 75%:
Уменьшите непрозрачность пиксельного слоя, чтобы исходное изображение частично просвечивало.
Вот мое изображение после уменьшения непрозрачности пиксельного слоя, создавшего наш второй вариант эффекта:
Вторая вариация эффекта «цифровой пиксель».
Шаг 12. Поэкспериментируйте с разными режимами наложения пиксельного слоя для получения разных результатов
Чтобы создать еще больше вариантов эффекта, поэкспериментируйте с различными режимами наложения для пиксельного слоя, перейдя к параметрам режима наложения в верхнем левом углу палитры слоев и выбрав другие из списка. Во-первых, я собираюсь установить Непрозрачность моего пиксельного слоя обратно на 100%. Затем я изменю режим наложения слоя с «Нормальный» на Темный :
Установите непрозрачность пиксельного слоя обратно на 100%, затем измените режим наложения пиксельного слоя на «Темнее».
Вот эффект, который я получаю с пиксельным слоем, установленным на «Темнее»:
Изображение после изменения режима наложения на «Затемнение».
Давайте попробуем режим наложения Lighten , снова изменив его в верхнем левом углу палитры слоев:
Измените режим наложения на «Светлее».
Вот эффект, который я получаю с режимом наложения «Lighten»:
Изображение после изменения режима наложения на «Светлее».
Чтобы показать вам, насколько по-разному может выглядеть эффект, просто меняя режимы наложения слоев, мы попробуем еще один.На этот раз я собираюсь изменить свой режим наложения на Hard Mix :
Измените режим наложения на «Hard Mix».
Думаю, вы согласитесь, что эффект теперь выглядит совершенно по-другому, хотя все, что мы сделали, это изменили режим наложения:
После изменения режима наложения на «Hard Mix» мы получаем совершенно другой эффект.
И вот оно! Это наш взгляд на создание простого эффекта «цифрового пикселя» и пример того, как мы можем создавать различные вариации одного и того же эффекта и даже создавать совершенно новые эффекты, экспериментируя со слоями-масками и режимами наложения в Photoshop.
Посетите наш раздел «Фотоэффекты», чтобы получить больше уроков по эффектам Photoshop!
Как преобразовать любую фотографию или изображение в пиксель-арт с помощью Photoshop
Благодаря новой популярности ретро-игр, таких как Minecraft и Super Mario Bros., пиксельная графика как форма цифрового искусства стала более популярной, чем когда-либо. Большая часть пиксельного искусства создается вручную, при этом художник работает попиксельно, что может быть трудоемким процессом, но аналогичного эффекта можно достичь, выполнив несколько быстрых шагов в Photoshop.Вот как вы можете превратить любую фотографию или изображение в пиксельную графику.
Шаг 1
Выберите базовое изображение. В этом примере я использую изображение 144352681 от Shutterstock. Для достижения наилучших результатов выберите изображение с яркими цветами, четкими формами и плоским фоном. Поскольку этот эффект намеренно пикселирует изображение, ничего с мелкими деталями или узорами не получится.
Шаг 2
Первое, что мы хотим сделать, это увеличить насыщенность нашего изображения, чтобы передать все его яркие цвета.Откройте меню «Оттенок / насыщенность» (Изображение> Коррекция> Цветовой тон / Насыщенность) и увеличьте насыщенность как минимум до 25 или до тех пор, пока цвета не начнут проявляться.
Шаг 3
Далее мы хотим увеличить контраст нашего изображения. Перейдите в Изображение> Коррекция> Уровни. Потяните внутрь черно-белые вкладки уровня ввода до тех пор, пока на фотографии не появится больше четкости. Вы можете использовать значения, указанные выше, или поиграть с разными уровнями в зависимости от используемого изображения.
Шаг 4
Чтобы получить истинно пиксельный вид, нам нужно уменьшить количество цветов, которые фактически используются в нашем изображении. Для этого перейдите в меню «Изображение»> «Режим»> «Индексированный цвет» и скопируйте настройки, показанные выше.
Шаг 5
Установив цвета, мы можем начать играть с размером нашего изображения, чтобы создать эффект слишком больших пикселей. Сначала откройте «Изображение»> «Размер изображения», уменьшите размер в пикселях до 75 пикселей в ширину и нажмите «ОК».
Шаг 6
Поскольку Photoshop пытается сохранить разрешение изображения, вы увидите, что ваше изображение резко сократилось. Чтобы исправить это, снова откройте окно «Размер изображения». На этот раз измените параметр «Размеры в пикселях» с пикселей на процент. Мы собираемся растянуть изображение до размера, увеличив его на 1000 процентов. В зависимости от размера исходного изображения вам может потребоваться увеличить или уменьшить это количество. Всегда округляйте процентное значение до ближайшего 100, и ваша фотография будет иметь тот же эффект.
Когда ваше изображение будет увеличено до полного размера, вы увидите, что тонкие линии вашей фотографии были заменены крупными цветными пикселями.
Вы также можете поэкспериментировать с несколькими различными элементами, чтобы изменить конечный продукт:
— На шаге 4 попробуйте изменить количество используемых цветов: большее количество цветов создает более мягкий конечный результат, а меньшее количество цветов создает более драматичный и абстрактный вид.
— Увеличьте или уменьшите количество пикселей на шаге 5, чтобы изменить размер пикселей в конечном продукте.Увеличение этого числа будет означать меньшие блоки в конечном результате; уменьшение этого числа приводит к увеличению размера блоков в конце.
Чтобы пробудить ваш собственный творческий гений, вот еще несколько изображений до и после использования этой техники:
Посмотрите все изображения, использованные в этом сообщении »
Еще один отличный урок по Photoshop: узнайте, как создать эффект огня.
Как уменьшить пикселизацию в Photoshop | Малый бизнес
Зак Лаццари Обновлено 19 марта 2019 г.
Photoshop — золотой стандарт для редактирования фотографий и изображений, особенно для пиксельных изображений.Программное обеспечение чрезвычайно мощное и способно манипулировать фотографиями множеством творческих способов. Он также работает как средство восстановления или улучшения качества изображения после съемки. Уменьшение пикселизации — это обычная необходимость для улучшения качества фотографий с более низким разрешением.
Общие сведения о пикселизации
Пикселизация существенно снижает качество изображения при попытке увеличить фотографию. Пиксели не могут компенсировать расширение, и изображение становится размытым и искаженным.Пиксели — это маленькие точки, составляющие оцифрованное изображение. Попытка увеличить размер фотографии эффективно снижает разрешение.
Проблема чаще всего связана с подготовкой фотографий к печати. Фотография увеличивается в соответствии со стандартами печати, а качество резко падает, что снижает четкость, а в некоторых случаях делает фотографию слишком искаженной для получения приличной печати. Старые фотографии, сделанные с помощью камер и телефонов с низким разрешением, видят эту проблему. К счастью, оцифрованная фотография может быть значительно улучшена с помощью процессов восстановления Photoshop.
Следует также отметить, что многие другие программы для редактирования фотографий способны уменьшить пикселизацию. Если у вас еще нет Photoshop, сначала подумайте об использовании бесплатной программы для редактирования фотографий. В остальном Photoshop — фантастический инструмент для уменьшения пикселизации изображения с низким разрешением.
Удалить пикселизацию в Photoshop
Photoshop может уменьшить пикселизацию и подправить изображение лучше, чем любая другая программа. Доступны бесплатные инструменты, и они эффективны, но Photoshop — лучший вариант, когда вам нужен результат высочайшего качества.
Откройте Photoshop и откройте изображение в программе. Щелкните на опции Filter and Sharpen . Выберите Unsharp Mask , чтобы открыть ползунок. Отрегулируйте ползунок, чтобы повысить резкость изображения, пока оно не попадет в красивую визуальную точку. Это уменьшит пикселизацию. Сохраните изменения, чтобы распечатать изображение.
Вы также можете скрыть пикселизацию, замаскировав искажения слоем мягкого света поверх фотографии. Фактически вы создаете отдельный слой для достижения результата смягчения.Щелкните изображение правой кнопкой мыши и создайте новый слой. Выберите Blending Options из меню заголовка и щелкните Soft Light . Щелкните Filters and Noise , затем Despeckle , чтобы открыть слайдер. Отрегулируйте ползунок, пока не исчезнет пикселизация. Затем щелкните инструмент Яркость и контрастность . Вы можете отрегулировать автоматически или вручную, чтобы найти правильный баланс. Сохраните изменения, чтобы завершить процесс.
Бесплатные инструменты редактирования
Выполните быстрый поиск в Интернете бесплатных инструментов пикселизации, и вы найдете ряд опций для браузера. Многие предлагают возможность просто загрузить изображение, нажать кнопку обработки и загрузить новое изображение. У других есть ползунок специально для работы с пикселизацией.
Бесплатные инструменты очень просты и могут существенно улучшить изображение. Однако вы не можете настроить освещение и использовать расширенные функции для подкраски фотографии с помощью многих из этих инструментов.
Плюсом является простота и экономия времени. Цена также подходящая, когда вы получаете качественный сервис и нулевую стоимость. Установка не требуется, и вы можете быстро уменьшить пикселизацию прямо из стандартного веб-браузера.
Fotor — это обычный инструмент для корректировки пикселей. Photo Gimp и Microsoft Paint также могут уменьшить пикселизацию, предоставляя дополнительные инструменты редактирования, аналогичные тем, которые есть в Photoshop.
Увеличить пиксель-арт без размытия в Photoshop
В этом простом руководстве мы покажем вам, как можно увеличить пиксельное искусство без размытия в Photoshop за четыре простых шага.
Пиксельная графика часто бывает очень маленькой по размеру, и вы можете обнаружить, что, когда вы пытаетесь масштабировать ее в Photoshop, края вокруг изображения и между пикселями выглядят размытыми. Из этого туториала Вы узнаете, как правильно увеличить пиксельную графику без размытия в Photoshop.
Шаг 1. Откройте изображение
Запустите Photoshop и откройте изображение, размер которого нужно изменить. Неважно, насколько маленькое ваше изображение, эта техника будет работать даже с самыми маленькими иконками в стиле пиксель-арт.В нашем примере мы использовали графический значок меча размером 48 x 48 пикселей и увеличим его до 750 x 750 пикселей.
Шаг 2: Откройте диалоговое окно «Размер изображения»
Теперь перейдите к Изображение> Размер изображения , чтобы открыть диалоговое окно «Размер изображения». Этот параметр также доступен при нажатии Alt + Ctrl + I .
Шаг 3. Выберите параметр повторной выборки «Ближайший сосед (резкие края)»
Когда откроется диалоговое окно Размер изображения , вы можете изменить ширину и высоту файла.Убедитесь, что установлен флажок Ограничить соотношение сторон , чтобы сохранить правильные соотношения ширины и высоты ваших изображений. Это необязательно. Однако это действие рекомендуется для правильного масштабирования изображения.
Щелкните раскрывающееся меню в нижней части диалогового окна «Размер изображения » и измените значение параметра на Ближайший сосед (жесткие края) .
Шаг 4: Увеличьте изображение
После того, как вы выбрали Ближайший сосед (жесткие края) , вы можете нажать OK в диалоговом окне размера изображения , и ваше изображение будет масштабировано до указанного Габаритные размеры.У недавно созданного пиксельного изображения должны быть четкие края вокруг каждого пикселя, без какого-либо размытия.
Учебное пособие — Настройка Photoshop для 2D-пиксельной графики
Я большой поклонник ретро-видеоигр и пиксельной графики. Во время рождественских каникул я попытался (после долгого перерыва) создать пиксельную графику для мобильной 2D-игры в стиле ретро, которую я создавал в Unity для развлечения. Мне пришлось немного потрудиться при настройке Photoshop для создания 2D-спрайтов и фона, поэтому вот краткое пошаговое руководство о том, как настроить Photoshop для создания пиксельной графики.
Шаг 1. Создание крошечного изображения
Пиксель-арт выполняется в очень низком разрешении. Это означает, что вы начнете с создания очень маленького изображения , которое вы вряд ли сможете увидеть без увеличения . Я не могу дать вам практического правила, но обычно я использую 20×20 пикселей для спрайтов (иногда 40×40 пикселей, если я хочу добавить больше деталей) и около 150×80 пикселей для фона.
Итак, создайте новое изображение в Photoshop.
После того, как вы создадите изображение, вы почти не увидите его.Итак, увеличьте , чтобы вы могли его увидеть.
Шаг 2: Настройка интерполяции изображения до ближайших соседей
При изменении размера или масштабирования пиксельной графики необходимо, чтобы края или углы выглядели резкими и неровными, а не плавными и размытыми . По умолчанию Photoshop использует Бикубическую интерполяцию (или билинейную), которая создает эффект размытия при увеличении изображений. В то время как бикубическая интерполяция отлично работает для обычных изображений, пиксельная графика, масштабированная с помощью бикубической интерполяции, выглядит ужасно и размыто до чертиков.В качестве примера (источник):
Вот старик из The Legend of Zelda, который дает вам меч. ( Вы можете прищуриться, чтобы увидеть это )
Здесь он увеличен 4x с бикубической интерполяцией :
Масштабируйте здесь в 4 раза, используя Ближайшее соседство :
Видите разницу? Вот как настроить Photoshop для использования алгоритма интерполяции изображения «ближайшего соседа».
Примечание. Если вы экспортируете изображение (параметр «Сохранить для Интернета») и изменяете его размер, убедитесь, что в разделе «Качество» или «Изменить размер» выбран параметр «Ближайший сосед».
Вам нужно настроить инструменты для рисования и получить желаемые эффекты пиксельной графики. Для карандашей и ластика я использовал следующие настройки:
- Размер
- до 1 пикселя (px).
- твердость до 100%. Непрозрачность
- до 100%.
- для ластика был установлен режим «Карандаш».
Единственным другим инструментом, который я использовал, было ведро с краской, которое не требовало настройки.
Шаг 4: Показать сетку (необязательно)
Grid помогает точно позиционировать и выравнивать объекты.Я считаю сетку очень полезной при создании спрайтов. Сетку можно включить в меню «Просмотр».
Далее нам нужно настроить сетку так, чтобы она отображала каждый пиксель по отдельности . Откройте настройки «Направляющие, сетки и фрагменты» в меню «Настройки» и обновите настройки сетки.
Вот и все. Я надеюсь, что вы нашли этот урок полезным и продолжите создавать великолепную пиксельную графику 🙂 Процитирую Боба Росса:
« Люди могут смотреть на вас немного смешно, но это нормально.Художникам разрешено быть немного разными. ”
Как изменить разрешение в Photoshop (шаг за шагом!)
Есть много причин, по которым вы можете захотеть изменить разрешение изображения. Вы можете сделать крупный отпечаток изображения. Или вы можете уменьшить размер изображения для публикации в социальных сетях.
В любом случае, Adobe Photoshop позволяет легко изменить разрешение изображения.
В этой статье я покажу вам, как изменить разрешение изображения за пять простых шагов.
Что такое разрешение изображения?
Разрешение — это количество пикселей по высоте и ширине.
Ваша камера будет создавать изображения определенного размера в зависимости от размера сенсора и плотности пикселей.
Например, в инструкции к моей камере написано, что разрешение изображения составляет 8256 x 6192 (Ш x В) пикселей. Это означает, что общие размеры в пикселях составляют 8256 x 6192 = 51,121,152. Разделите это число на миллион. Результат — количество мегапикселей в камере.В моем случае это 51MP.
Если вы кадрируете изображение, вы убираете пиксели, поэтому изображение будет иметь более низкое разрешение, чем может дать ваша камера.
Он также описывает разрешение. Больше пикселей в изображении означает высокое разрешение. Это потому, что информация о пикселях более плотная.
Высокое разрешение дает больше деталей и лучшее качество изображения. Это означает, что вы можете печатать больше. В результате будут плавные, непрерывные тона и цветовые переходы. Но обычно это приводит к большему размеру файла.
Разрешение изображения измеряется в DPI (точек на дюйм) или PPI (пикселей на дюйм). Чем больше точек (или пикселей) на дюйм, тем выше разрешение вашего изображения.
Как выбрать подходящий размер
Прежде чем я покажу вам, как изменять размер изображений, давайте кратко поговорим о том, насколько большими или маленькими вы хотите сделать свои изображения.
Вы можете сделать снимок с низким разрешением, один с несколькими пикселями, и увеличить разрешение.Но будет предел.
Если вы попытаетесь слишком сильно увеличить изображение, оно станет пиксельным. Это означает, что вы можете начать видеть отдельные точки, составляющие изображение. Все зависит от количества деталей на изображении и его предназначения. Чтобы понять, как далеко вы можете зайти, требуется определенная практика, метод проб и ошибок.
Например, если я сильно обрезал изображение, это уменьшит количество пикселей в моем изображении. Но я могу сделать большой отпечаток этого изображения.
Мы сделали статью об этом, чтобы помочь вам выяснить, насколько велико можно распечатать изображение.
С другой стороны, вы можете уменьшить разрешение ваших изображений, прежде чем размещать их в Интернете. Это помогает вашим изображениям загружаться быстрее. Вы также не раздаете свое изображение в полном разрешении, которое другие могут захотеть использовать без разрешения.
Хорошее практическое правило — размещать изображения размером не более 2000 пикселей на самом длинном конце размером не более 1 МБ. Но у каждой социальной сети есть свои рекомендации.
Как изменить разрешение изображения в Photoshop
В Adobe Photoshop легко увеличить или уменьшить разрешение изображения.Позвольте мне провести вас по шагам.
Шаг 1. Определение размера изображения
Сначала определите размер изображения, открыв диалоговое окно размера изображения.
Перейдите к Изображение> Размер изображения… или воспользуйтесь сочетанием клавиш Opt + Cmd + I (Alt + I для Windows).
В этом диалоговом окне вы найдете размер вашего изображения. Вы увидите шириной и высотой пикселей.
Adobe Photoshop по умолчанию предоставляет размер в пикселях, но вы можете изменить его на дюймы, сантиметры или даже в процентах.Ваше исходное изображение будет 100%. Вверху вы увидите размер файла вашего изображения.
Мы собираемся использовать инструменты в этом окне, чтобы изменить разрешение вашего изображения.
Шаг 2. Изменение размера изображения
Есть несколько вариантов изменения разрешения вашего изображения.
Если вы печатаете, вы можете выбрать одну из предустановок на основе стандартной бумаги и размеров печати.
Щелкните раскрывающееся меню « По размеру », чтобы выбрать размер документа.
Если вы публикуете изображение в Интернете, вам не нужно придерживаться стандартных размеров печати. Обычно размер лучше устанавливать самостоятельно. Просто введите желаемый размер поверх текущего.
По умолчанию Photoshop ограничивает соотношение сторон. Если вы введете число, чтобы изменить ширину, Photoshop автоматически изменит высоту, чтобы ваше изображение выглядело так же.
Если вы хотите независимо изменить ширину и высоту в пикселях, щелкните значок, который выглядит как цепочка, связывающая два измерения.Это говорит Photoshop не ограничивать соотношение сторон.
Введите необходимое количество пикселей в поле «Высота» или «Ширина».
При изменении размера изображения обратите внимание, что число в верхней части диалогового окна, показывающее размер файла, изменится. Это размер документа вашего изображения в МБ.
Шаг 3: Разрешение
Поле разрешения изображения устанавливает количество пикселей на дюйм. Все говорят, что для печати изображения это число должно составлять 300 пикселей на дюйм, но это не совсем так.300 точек на дюйм — это стандарт, используемый для печати изображений. Но онлайн-изображения могут отображаться только с разрешением экрана компьютера. Большинство экранов имеют разрешение 72 DPI.
Вы можете оставить этот номер как есть. Для онлайн-изображений не имеет значения, 300 или 72 точек на дюйм.
Изменение DPI приведет к изменению размера изображения. Если ваше изображение 300, и вы измените только поле DPI на 150, ваше изображение будет вдвое меньше. Это также изменит размер вашего документа.
Шаг 4: Выбор режима передискретизации
Режим передискретизации определяет, какой алгоритм Photoshop будет использовать для добавления новых пикселей.Есть два хороших варианта увеличения разрешения: «Сохранить детали» и «Бикубическое сглаживание» .
Я считаю, что «Bicubic Smoother» дает наилучшие результаты. Вы можете попробовать оба, увидеть разницу.
Вот сравнение всех режимов передискретизации.
Отметьте поле «Resample» и выберите режим передискретизации, который вам подходит.
Шаг 5: Повышение резкости изображения
Всегда рекомендуется повышать резкость после увеличения разрешения изображения или для просмотра в Интернете.
Перейдите в меню Filter> Sharpen и выберите ‘ Unsharp Mask’ .
Перетащите ползунок «Сумма» на 100%, а радиус на 1,0. Это хорошая настройка для начала при увеличении изображения.
Вы можете добавить больше или меньше резкости, если результат не получается.
Заключение
Adobe Photoshop позволяет легко увеличивать или уменьшать разрешение изображения. Хотя есть определенные ограничения.
Качество и размер вашего начального изображения решают, добьетесь ли вы хороших результатов. Например, изображение с размерами пикселей 100 x 100 при 72 пикселях на дюйм не может быть изменено до 3000 x 3000 при 300 пикселях на дюйм и выглядит хорошо. Это слишком много, чтобы просить.
Это также зависит от цели изображения. Вам нужна фотогалерея высокого качества или баннер, который можно повесить на стену? Изображение для баннера не требует сверхвысокого разрешения, чтобы хорошо выглядеть. Всегда спрашивайте типографию, какое минимальное разрешение им нужно.
Всегда лучше начинать с хорошего изображения, которое не требует особого редактирования. Почему бы не попробовать наш курс «Фотография для начинающих», чтобы научиться делать высококачественные изображения каждый раз?
Хотите больше? Попробуйте наш курс творческой обработки в Photoshop
Это 30-дневный творческий фотографический проект, которым вы можете заниматься дома, используя базовое оборудование.