Дизайн и вёрстка на ходу

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

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

Итак, основные проблемы на настоящий момент:

Наличие разных платформ (iOS, Android, Windows) — поддержка нескольких платформ одновременно весьма накладна, поэтому большинство приложений создаются в первую очередь для iOS.

Поддержка устройств разных поколений — не все пользователи после выхода iPad Pro3 побегут его покупать, ведь многих устраивает их iPad 3 и даже iPad 2 (да, до сих пор используют!).

Поддержка приложения в последних версиях ОС — некоторые приложения подолгу не обновляются, и переходе на новую ОС они могут начать сбоить (привет, iOS 10!).

Потребляемые ресурсы — «тяжёлое» приложение может «слопать» изрядное количество памяти устройства.

Разные размеры экрана — диагональ 5,5–6 дюймов (такие устройства называют «фаблетами»), конечно, иногда очень кстати, как оптимальное сочетание компактности и полезной площади, но для многих задач дизайна требуется экран побольше. Тут производителям приложений есть над чем поломать голову.

Организация рабочего процесса — как включить мобильное устройство в рабочий процесс дизайнера? Как отправить результат на компьютер, как получить с компьютера, как вносить изменения и не потерять их… Вот здесь самая большая головная боль.

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

Adobe Photoshop Express

Назначение: обработка фотографий

Цена: бесплатно (есть встроенные покупки)

ОС: iOS 8.1 (iPhone, iPad, iPod Touch), Android 4.3, Windows Store, Windows Phone Store

Пожалуй, самая популярная программа с количеством скачиваний десятки миллионов и на всех существующих платформах!

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

Основные возможности:

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

Из приложения можно быстро перейти в Fix или Mix для выполнения соответствующих коррекций и затем вернуться обратно. Результат можно, как обычно, сохранить в облако Adobe CC для дальнейшего использования в других приложениях Adobe на соответствующих устройствах.

Кошка всем свои видом указывает на нужную кнопку

А напоследок я ещё расширил глаза…

Adobe Photoshop Fix

Назначение: работа с растровыми изображениями

Цена: бесплатно

ОС: iOS 8.1 (iPhone, iPad, iPod Touch)

Мощнейшая программа для коррекции изображений. Программа отлично распознаёт лица и позволяет менять геометрию глаз, щёк, носа… Помимо функций обычной коррекции (высветление, затемнение, резкость, размытие), возможно выполнять и деформацию, и убирать ненужные детали (немного хлопотно пальцем — лучше стилусом), и рисовать кистью. Результат можно экспортировать в Adobe CC (нужна действующая подписка фотографа), делиться им в соцсетях, сохранять в облака, посылать на электронную почту и пр.

Несмотря на весьма серьёзные возможности, программа — проста в освоении и сразу даёт впечатляющие результаты!

Летают тут всякие…

Adobe Photoshop Mix

Назначение: работа с растровыми изображениями

Цена: бесплатно

ОС: iOS 8.1 (iPhone, iPad, iPod Touch), Android 4.3

Это приложение в чём-то похоже на Adobe Fix, но позволяет формировать многослойное изображение, маскировать области слоя, убирать ненужные детали (кстати, результаты вполне достойные), выпрямлять скошенные углы и, конечно, выполнять различные варианты коррекции. Правда, возможности коррекции по областям и деформации отсутствуют — для этого уже нужен Photoshop Fix.

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

Результат также можно сохранять в Adobe CC, облака, делиться им через соцсети и пр.

Обратите внимание, что есть версии для iOS и Android! Также обратите внимание на некоторые функции, помеченные звёздочкой, — под ними подразумеваются платные варианты (какое-то время работают бесплатно).

Adobe Lightroom

Назначение: обработка фотографий

Цена: бесплатно (есть встроенные покупки)

ОС: iOS 8.1 (iPhone, iPad, iPod Touch), Android 4.3

Одна из самых популярных программ с миллионами скачиваний. Позволяет выполнять множество коррекций (очень похожих на другие приложения Adobe), легко обмениваться с другими приложениями Adobe и взаимодействовать через облако Adobe CC с другим компьютером на любой платформе. Поддержка формата DNG тоже не лишняя. Также традиционно для Lightroom можно создать слайд-шоу.

Всё отлично, только надписи на кнопках мелковаты

Adobe Illustrator Draw

Назначение: векторная программа для рисования

Цена: бесплатно

ОС: iOS 8.1 (iPhone, iPad, iPod Touch), Android 4.3

Весьма популярная программа с миллионами скачиваний. Очень сильно напоминает Adobe Sketch, сама работа с рисунком полностью аналогична. Работать с узлами объектов нельзя, возможна лишь трансформация. Слои поддерживаются.

Рабочий процесс выглядит так:

1. Создаём рисунок в Draw.
2. Экспортируем в Illustrator CC.
3. Запускаем на компьютере Illustrator CC (если компьютер включен, запустится автоматически) — сразу же открывается этот файл.
4. Редактируем дальше уже в Illustrator — здесь уже можно редактировать и объекты, и узлы. Обратный экспорт (из Illustrator в Draw) для редактирования уже невозможен.

Такое впечатление, что Adobe в конечном итоге оставит одну их этих программ, так как их функционал практически идентичен.

Adobe Photoshop Sketch

Назначение: программа для рисования

Цена: бесплатно

ОС: iOS 8.1 (iPhone, iPad, iPod Touch)

Великолепное приложение для рисования от руки, интуитивно понятное и очень мощное.

Основные возможности:

• поддержка слоёв;
• 14 инструментов рисования;
• настройка чувствительности к нажатию и скорости для каждой кисти;
• наличие шаблонов фигур (прямоугольники, эллипсы, многоугольники, виньетки и пр.);
• использование сеток с перспективой для облегчения рисования в 3D;
• поддержка нескольких стилусов одновременно (можно рисовать разными без лишних переключений).

Результатом можно распорядиться традиционными для Adobe способами — сохранить в облако, отправить по почте и пр.

Из галереи работ — художники стараются вовсю!

Savage Interactive Procreate

Назначение: программа для рисования

Цена: 459 руб.

ОС: iOS 9.1 (iPhone, iPad, iPod Touch)

Считается самой мощной из «рисовалок» для мобильных устройств. Перечень возможностей просто зашкаливает, но возможность представления ваших действий в виде видео вызывает восхищение (подобная функция есть в Corel Painter)! То есть вы потом можете в виде фильма посмотреть процесс создания шедевра! Пример — https://www.youtube.com/watch?v=BoH9weAqbfc

Но лучше посмотрите видео — https://www.youtube.com/watch?v=b8hvTA47EJg

Autodesk Sketchbook

Назначение: программа для рисования

Цена: бесплатно (есть встроенные покупки),

ОС: iOS 8.0 (iPhone, iPad, iPod Touch), Android 4.0

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

Возможности:

• Полноэкранное рабочее пространство, инструменты не мешают работе.
• Более 10 стандартных кистей, включая настраиваемые карандаши, перья и маркеры, которые «позволяют рисовать с той же лёгкостью, как на листе бумаги или холсте» (так утверждает реклама).
• «Синтетическая» чувствительность к давлению.
• Масштабирование до 2500% для управления мельчайшими деталями рисунка.
• Полный редактор слоёв с 16 режимами смешивания, в котором можно открыть до 3 слоев (в платном варианте — больше!).
• Инструменты симметрии и пропорционального преобразования.

В платной версии (от 319 до 1990 руб.) возможности значительно расширены.

Какой я узористый!

Adobe Capture CC

Назначение: создание элементов дизайна

Цена: бесплатно

ОС: iOS 8.1 (iPhone, iPad, iPod Touch), Android 4.3

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

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

1. В Adobe Capture CC создаём элемент (узор, кисть, цветовую палитру…) на основе изображения с камеры.
2. Выполняем некоторые действия по коррекции параметров элемента.
3. Сохраняем.
4. Открываем Photoshop CC на компьютере и в панели Libraries находим все созданные в Adobe Capture CC элементы — теперь можно использовать их в своих работах.

Надо отметить, что благодаря интенсивной работе с камерой приложение очень шустро расходует аккумулятор, так что будьте начеку!

Adobe Comp CC

Назначение: программа для макетирования

Цена: бесплатно

ОС: iOS 8.1 (iPhone, iPad, iPod Touch)

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

Макет почти готов!

Здесь только экраны, а «вживую» результаты можно посмотреть тут — https://marvelapp.com/f5je8g

Marvel

Назначение: создание интерактивных прототипов

Цена: бесплатно (есть встроенные покупки)

ОС: iOS 9 (iPhone, iPad), web

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

Рабочий процесс выглядит так:

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

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

Evernote Skitch

Назначение: добавление пометок в фотографии

Цена: бесплатно (есть встроенные покупки)

ОС: iOS 8.4, (iPhone/iPad), OS X 10.9 (разработка версий для Android и Windows прекращена с конца 2015 г.)

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

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

• фотографию из галереи на телефоне;
• сделать фото сразу из приложения;
• файл PDF;
• географическую карту;
• веб-страницу (из Safari любую страницу отправляем в Skitch и там на неё наносим нужную информацию);
• пустой лист.

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

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

Пометим всё!

Pantone Studio

Назначение: работа с цветовыми палитрами

Цена: бесплатно (есть встроенные покупки)

ОС: iOS 9.3, (iPhone, iPad, iPod touch), в планах выпуск версий для Android, Windows и Mac OS

Это первая версия приложения от самой известной фирмы, специализирующейся на вопросах цвета. Конечной задачей является создание своей цветовой палитры, содержащей до пяти цветов. Эту палитру можно использовать для своих задач, а можно и поделиться с другими.

Приложение позволяет:

• Создавать палитры на основе изображений из своей галереи.
• Искать аналогичные цвета в других палитрах Pantone.
• Давать название своей палитре и добавлять геотеги для дальнейшего поиска по местоположению.
• Ставить теги, по которым можно найти палитру в поиске.
• Добавлять поясняющее изображение для палитры.
• Хранить и управлять неограниченным количеством палитр.
• Отправлять палитры в Adobe Creative Cloud или в Photoshop прямо из приложения (потребуется ввод Adobe ID).

В планах разработчиков — расширение функционала и социализация. Но для реализации всех возможностей потребуется платная подписка (60 долл. в год, есть другие варианты).

Интересно, почему Pantone Studio выбросил синий?

А Real Colors синий не выбросил!

AB4 SystemReal Colors

Назначение: работа с цветовыми палитрами

Цена: бесплатно (есть встроенные покупки)

ОС: iOS 9 (iPhone/iPad), Android

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

Для работы с приложением необходима регистрация (бесплатно). Это одно из немногих приложений, доступных на разных платформах.

Кстати, сравните палитру с Pantone — такое впечатление, что здесь она точнее подобрана!

Pantone ColorTrue

Назначение: калибровка цвета на мобильном устройстве

Цена: бесплатно

ОС: iOS7 (iPhone, iPad), Android 4.0.3

Позволяет откалибровать ваше мобильное устройство для отображения более точных цветов. Требует наличия калибратора, подключённого к компьютеру. Поддерживаемые устройства: ColorMunki Smile, ColorMunki Display, i1Display Pro и i1Pro 2.

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

Рабочий процесс:

1. После запуска приложение выполняет поиск компьютера с подключенным калибратором (они должны быть в одной сети wifi с мобильным).
2. Выполняется подключение.
3. На мобильном устройстве выбирается изображение из галереи для калибровки.
4. На компьютере выполняется калибровка и создаётся профиль.
5. Теперь на мобильном устройстве можно смотреть фото из своей галереи с применением профиля и различными вариантами компенсации.

Заключение

В этом обзоре я попытался затронуть наиболее известные на данный момент программы. Заранее приношу извинения, поскольку наверняка что-то очень интересное сталось за кадром. Специальной категории «Приложения для дизайна» в магазинах приложений App Store или Google Play, увы, нет. Отрасль же мобильных приложений развивается настолько бурно, что сейчас уже многих приложений и след простыл (помните Adobe Eazel и Color Lava?). А сколько нареканий можно услышать при обновлении приложений! Получается, что пока — это очень неустойчивый фундамент, который тебя в любой момент может подвести. Но ты на него тратишь свое время, силы, ресурсы оборудования и деньги. В такой ситуации неплохо себя чувствуют «рисовалки» — их сейчас много на разный вкус, а также программы «на каждый день», которые упрощают различные процессы (фотография, измерения, расчёты и пр.). Возможно, через какое-то время нас ждут новые достижения в области виртуальной и дополненной реальности (VR и AR)… Кто знает? Например, создать своего покемона…

И, как видим, Adobe очень интенсивно осваивает этот рынок и пытается связать свои основные программы с мобильными через облачные сервисы. И прогресс налицо! Хорошо, что у Adobe в данный момент все основные мобильные приложения бесплатные (а ведь было время, когда некоторые из них были платные).

«Мобильный» Photoshop теперь разделён на отдельные части — PS Express + PS Fix + PS Mix + PS Sketch. Конечно, полностью они обычный Photoshop не заменят, более того, множество функций у них пересекаются. Интересно, встретим ли мы Adobe Photoshop 3D и Adobe Photoshop Animate для трёхмерности и анимации соответственно?

Ну и, конечно, следует отметить, что основные приложения — по-прежнему существуют только на платформе iOS. На Android их заметно меньше, более того — первоначально разработанные для этой платформы программы чаще уходят. Свежий пример — недавнее решение Evernote прекратить дальнейшую разработку Skitch для Android. На платформе Windows Mobile 10/Windows Phone 8.x тоже можно кое-что обнаружить, но после того как Microsoft прекратила развитие этой линейки ОС, представить дальнейшую судьбу этих приложений, к сожалению, довольно легко.

Но учтите, что уже через год всё может сильно измениться!

Об авторе: Юрий Павлов (yuri.pavl@gmail.com) — преподаватель Центра «Специалист», консультант, практикующий дизайнер и веб-разработчик, Corel Certified Instructor, Adobe Certified Instructor.