Веб-Острова Анатолия Куликова

Бесплатный фотошоп в вашем браузере

Бесплатный фотошоп в вашем браузере

Вы когда-нибудь мечтали о таком — бесплатный настоящий Фотошоп, причём работающий прямо в браузере, не требующий установки и кряков с троянами, пляской с бубном вокруг реестра и файла hosts? Честно, я о таком варианте реализации даже не задумывался, и в моей модели существовали только два варианта: либо покупки/подписки на оригинал (что считаю справедливым), либо переход на open-sourse редакторы, например Gimp. Однако реальность оказалась более невероятной, чем я мог себе вообще представить.

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

Переходим на сайт Photopea.com. Для тех, кто с работал с Photoshop’ом, всё покажется весьма знакомым — интерфейс разработчики взяли напрямую из него, и такой подход понятен, потому что пользовательский опыт решает многое.

Этот инструмент умеет работать не только с родными оригинальному Фотошопу файлами psd, поддерживая слои, но понимает и файлы Sketch’a (что для Mac OS) и Gimp’овские файлы, что по мне является огромным плюсом. Плюс решает большую проблему, когда кто-нибудь присылает проекта в .sketch-файле, а у тебя лапки только Windows и всё. И конечно же, такие простые расширения, как png, jpg, bmp, gif, tif и webp редактор тоже понимает и работает с ними.

Давайте попробуем что-нибудь сделать на Photopea. При запуске редактор предлагает нам 2+1 варианта: создать новый проект, загрузить файл с компьютера + посмотреть на два демо-файла. Мы выберем новый проект, а ещё я сделал интерфейс светлым: на стартовом экране справа почти внизу есть цветные квадратики — вот это оно.

Да, это прямо родной Adobe. Только грузится быстрее раза так в два. Я машинально полез в меню, собравшись сделать уже одну штуку, но потом подумал — а что тут с локализацией? Оказывается отлично — в меню More есть Language, и выбор доступных языков удовлетворит самого взыскательного пользователя — 15 языков. И кроме того, на подходе ещё несколько локализаций и можно запросто поучавствовать в развитии продукта.

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

Вот это да — оно работает! Честно, я знаю, что сегодня веб-разработка вышла на новые технологические уровни, но чтобы вот так… Неожиданно, но приятно.

Теперь поработаем с текстом — добавим его на полотно и посмотрим, что с ним можно сделать.

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

Но вернёмся к тексту — тут прямо таки красота и такой инструментарий, которого оригинальному Photoshop’у из коробки очень не хватает, а именно возможность фильтрации шрифтов.

А вот работа с настройками шрифта, типа интерлиньяжа, не столь удобная — работает только тогда, когда выделяешь текст, а не просто устанавливаешь слой активным/выделенным. Но в целом привыкнуть можно.

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

Редактор цвета Photopea работает только с двумя схемами — RGB и HEX. Не критично, если вы не работаете в полиграфии и вам нужны цвета в модели CMYK, хотя тот же Pantone не всегда указывает цвета в этой схеме: не так давно изучал Pantone Fashion Color Report на весну 18, так на официальном их сайте параметров для CMYK не указано, иначе бы я их проставил.

Я решил добавить ещё один текстовый слой и понял, что мне нужно его выровнять относительно первого. Такой штуки, как ассистента-магнита по границам объектов или других слоёв здесь нет, но ведь выровнять это всё как-то нужно! Тут я вспомнил про направляющие — в Photopea они также есть, и для них магнит работает и край слоя легко прилепляется. Их можно установить следующим образом: в главном меню выбираем «Вид» и там активируем «линейки», после чего правой кнопкой мыши нажимаешь на верхнюю или боковую линейку и «стягиваешь» с неё направляющую — классика.

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

Но мы идём дальше. Теперь попробуем экспортировать какую-нибудь картинку и поработать уже с ней. Первое, что я решил попробовать — это drag-and-drop и просто перетащил из системного окна png-файл и Photopea его поместил на полотно и предложил инструменты к масштабированию и исзменению объекта. Замечу сразу, что такой полезной функции, как замка для пропорционального уменьшения высоты и ширины нет, а их самих нужно вводить с клавиатуры.

У оригинального Photoshop один из самых крутых и полезных элементов — это кривые. Интересно, есть ли они здесь?

Невероятно, но есть! Оно работает опять же только в RGB-модели, но и этого вполне достаточно — подправить цвета можно. И кстати, прежде чем работать с кривыми, Photopea мне предложил растрировать объект — смарт-объекты редактор тоже поддерживает. Сильно, правда?

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

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

Посмотрим, как тут обстоят дела с кистями.

Кистей здесь немного и судя по всему пользовательские кисти установить не получится. Настройки неплохие и кое-что получится может, но ждать каких-то серьёзных результатов ждать не стоит.

В целом, мне уже нравится результат, который получился. Давайте сохраним наш проект и попробуем экспортировать его в формат png. Всё очень просто — через меню Файл и Сохранить как PSD, после чего откроется системное диалоговое окно с предложением сохранить файл на компьютер. Честно, в некоторые моменты начинаешь забывать, что работаешь в браузере.

А теперь попробуем сохранить PNG.

Настроек тут немного — гораздо меньше оригинала — но в целом всё самое нужное присутствует. Я ничего изменять не стал и сохранил так, как есть. И вот он результат:

Итоги

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

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

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

Надеюсь, обзор на этот онлайн-инструмент был для вас полезен. До встречи на Веб-Островах!

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик
Комментарии от HyperComments

Новые статьи

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн
Домены бывают разные

Домены бывают разные

Про домены сайтов доступно и популярно
Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Перевод статьи Зака Лезермана об инструменте работы со шрифтом
Таймер обратного отсчета

Таймер обратного отсчета

Простая реализация безлишних прибамбасов

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Ахроматический контраст в веб-дизайне

Ахроматический контраст в веб-дизайне

Краткая теоретическая статья о применении ч/б при разработке дизайна
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн
Классные фотографии для ваших проектов

Классные фотографии для ваших проектов

Где легально и бесплатно взять хороших фотографий
Простая защита фотографий от посторонних посягательств

Простая защита фотографий от посторонних посягательств

Полезная и надёжная программа Image Tuner