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

Вы когда-нибудь мечтали о таком — бесплатный настоящий Фотошоп, причём работающий прямо в браузере, не требующий установки и кряков с троянами, пляской с бубном вокруг реестра и файла 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 файлы, и даже поправить фотографии — это самое оно. Да и большинстве случаев он закроет большой спектр потребностей: здесь и восстанавливающие кисти, три вида лассо и даже волшебная палочка есть — и всё это работает.

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

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

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