Главное Свежее Вакансии Образование
Выбор редакции:
😼
Выбор
редакции
5 007 3 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Photoshop, или Как превратить электронный товар в «реальный»

Основатель «Школы траблшутеров» Олег Брагинский о том, как с помощью Photoshop создавать в интернете иллюзию покупки реального товара.

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

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

b_5d4d6117a187f.jpg

Программа позволяет создавать иллюзию реальности виртуальных товаров. Не нужно печатать и подшивать книги, вешать плакаты, оформлять автобусные остановки, чтобы оценить результат на вещественном объекте – достаточно загрузить Photoshop и вспомнить слово «мокап».

Mock Up давно перестал быть просто фразовым глаголом английского языка. Используется как существительное и обозначает «модель, прототип». Считается спасательным кругом дизайнеров: позволяет проверить работу и визуализировать итог бессонных ночей перед показом заказчику.

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

В недоумении заглянули в интернет-библиотеки. Задались вопросом: «Здесь же покупают, что делаем не так?» Метод пристального взгляда дал ответ: продукты щеголяют обложками. Решили прибегнуть к виновнику статьи и учебным материалам создали лицо:

b_5d4d612da639b.jpg

Рис. 1. Обложки Хрестоматий траблшутинга

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

В программе можно работать и с более сложными вещами. Например, создавать профили из облаков тегов и обтравливать фотографии:

b_5d4d613b166b7.jpg

Рис. 2. Обложка Подкастопедии

b_5d4d614867814.jpg

Рис. 3. Обложки Сборника рецензий Олега Брагинского. Часть 2

Решили пойти дальше и одеть выпускаемую продукцию целиком. Книги не печатаем – бережём леса: «отгружаем» исключительно электронные экземпляры.

Разработали корешки, задники и начали создавать почти «реальные» объекты. Первое время поражались: «Как натурально выглядит!» Пообвыкли, мокапы стали частью выпускаемых товаров:

b_5d4d615ceb237.jpg

Рис. 4. Создание мокапа "Взламывая код Брагинского". Часть 1

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

Объединение элементов создаёт оптовые стопки, внушающие солидность проделанной работы:

b_5d4d616fda732.jpg

Рис. 5. Мокап 16 сборников статей серии "Лучшее". Июль 2019

В январе 2019 спроектировали марафон книг, использовали мокап как прогресс-бар, «зажигая» свёрстанные произведения. Сегодня «горят» все, в марте ситуация была иной:

b_5d4d653106323.jpg

Рис. 6. Мокап "17 сборников статей серии Лучшее". Март 2019

Книги нарядили, пришёл черёд видео- и аудиоматериалов. Для вебинаров и подкастов «придумали» айпады, наложив на проигрываемый ролик кнопку Play, выполненную в цветах Школы:

b_5d4d6543ecae0.jpg

Рис. 7. Мокап "71 вебинара"

Аудиосборники приобрели раритетный товарный вид. Помня опыт с книгами, опасались нападений со стороны клиентов. Но виниловые диски после покупки электронных треков не запрашивали:

b_5d4d6559b29d3.jpg

Рис. 8. Мокап "Аудиосборника статей по навыку Эффективность"

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

b_5d4d65650e1f3.jpg

Рис. 9. Мокапы в музыкальных плеерах "Аудиосборника статей по навыку Эффективность"

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

b_5d4d6574da358.jpg

Рис. 10. Подготовительный макет обложки "Каталога учебных материалов"

Обратите внимание на агрегацию слоёв. Многие дизайнеры пренебрегают порядком: внутренняя структура файлов становится похожей на китайскую грамоту, что усложняет работу последователям, перехватившим ответственность за документ. Помните фразу «Аккуратность – черта характера»?

Photoshop отлично работает в связке с другими программами мира Adobe. О них поговорим в следующих статьях:

b_5d4d65806ad9b.jpg

Рис. 11. Разработка обложки "Каталога учебных материалов" в связке Photoshop-Illustrator

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

b_5d4d658dee679.jpg

Рис. 12. Афиша №33. Рецензия на книгу «Инновационный менеджмент»

b_5d4d6598bb4ad.jpg

Рис. 13. Афиша №533. Рецензия на книгу «Почему им можно, а нам нельзя?»

Выводим файлы в двух форматах:

  • JPEG – если используем серый фон
  • PNG – если картинка будет где-то ещё: в Каталоге, продажных постах или Сторис в Instagram.

В зависимости от применения варьируем размеры изображений:

  • 4’000×2’800
  • 2’400×1’700
  • 1’430×1’000
  • 286×200
  • 43×30.

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

В поле «Разновидность формата» выбираем Прогрессивный. Количество шагов берём «три»: чуть экономичнее, чем четыре и пять. Даёт возможность увидеть картинку размытой даже при слабом интернете, что отличает от Базовых коллег, декодируемых построчно:

b_5d4d65a914551.jpg

Рис. 14. Параметры вывода JPEG

С помощью утилиты «EXIF Cleaner» выведенные файлы чистим от лишней информации: пользы не несёт, навредить может, место занимает:

b_5d4d65b42fa90.jpg

Рис. 15. Экспериментальный файл до и после чистки

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

Основатель «Школы траблшутеров» Олег Брагинский.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Pepperbox Media
Цифровой декаданс и поиск N-го измерения
Иероним Б.
Джипеги и пнг лучше делать не так.Вы сохраняете "печатным" алгоритмом, а не экспортом для веба и устройств. Это другой модуль фотошопа. Раньше он назывался save for web, а в новых фотошопах что типа export или типа того. Там качество в процентах. И намного меньший вес. Но еще лучше сохранять не занижая качество, оставляя 100 процентов,а затем сжимать изображение через Оптимизилу https://imagecompressor.com/ png также нужно через нее прогнать.
Ответить
Олег Брагинский
Евгений, большое спасибо! Получилось ;)
Ответить
Pepperbox Media
Цифровой декаданс и поиск N-го измерения
Иероним Б.
На здоровье, был рад помочь
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.