Алексей Сегодин

Сторонние плагины не нужны. В основе всего лежит эффект "Find Edges". Но тут перед ним (и после него) ещё нужно применить несколько эффектов, потому что сам по себе он работает вот так:



Эффект Find Edges находит края для любой "шероховатости" в кадре. Чтобы таких краёв сделать меньше нужно размыть картинку, чтобы спрятать все мелкие детали. Для этого перед эффектом Find Edges нужно добавить какой-то Blur. Например я взял Smart Blur:



и после размытия Find Edges будет выглядеть так как накартинке ниже. Но "после размытия" значит что сначала я применяю на картинке размытие, а потом — Find Edges.



Но у мужика в видео есть ещё линии на лице, похожие на изолинии на топографической карте. Их можно сымитировать эффектом Posterize (в Фотошопе есть аналогичный), делает вот такое:



Этой градацией цветов можно управлять: можно сделать разбивку на большее или меньшее количесвто "ступеней" в градиенте. Если после Posterize включить Find Edges, то будет так:



Рисунок линий на объекте съёмки будет изменяться в зависимости от освещёния.
Осталось свести весь этот бардак к монотонной гамме. Цветокоррекцию в After Effects можно сделать многими способами. Тут можно, например, использовать эффект Tritone:



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



Вот полный стек эффектов из моего примера:



Анимированная маска, которая ограничивает эффект вокруг лица — это уже совсем другая тема. В двух словах: это кружок с размытыми краями, который служит маской для эффекта и двигается в кадре за лицом.

Если занимаетесь 3Д профессионально, то однозначно советую ПК. Потому что их вперспективе можно улучшать. Захотите GPU рендер — поставите видеокарту(ы) по-новее и по-мощнее.
В целом, по соотношению эффективности/деньги ПК получается выгоднее.
Я сам долго работал на маках в 3Д (и на стационарных, и на ноутах). Мне всё в них нравится. Но вот когда понадобилось быстрее и мощнее, то пришлось пересесть на ПК.

Ещё конечно, это зависит от того, что вы делаете и в какой сфере собираетесь развиваться.

Моё личное мненение:
Если делать работу (3Д), то ПК. А если просто нужна приятная рабочая среда для удовольствия, то Мак.

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

Если всё-таки привязываться к индустрии, то самыми "безопасными" в случае со слабым ПК будут игровая индустрия и WebGL (3Д сайты в браузерах). Потому что в этих индустриях изначально всё делается с расчётом на оптимизацию. Короче, если 3Д сцену можно посмотреть на телефоне при 60 кадрах/сек, то с ней можно работать и в Блендере даже на слабом ПК.

Вот пример качественно сделанного 3Д объекта, который можно и в играх использовать, и в браузере: https://threejs.org/examples/?q=gltf#webgl_loader_gltf
Покрутите сцену и посмотрите счётчик кадров в секунду в левом верхнем углу на вашем ПК.

Есть два варианта:

1. вручную экспортировать выделенные макеты (от одного и больше)
   
2. автоматически экспортировать сразу все
   

.
1. Вручную экспортировать выделенные макеты (от одного и больше)

1. Выделяете макет (он же artboard) нажав на его название.
   
2. Зажмите и держите Shift, чтобы выделить сразу несколько макетов.
   
3. Когда все нужные артборды выделены, нажимаете CTRL+E (или через меню Export...) и выбираете формат экспорта и папку в которую их сохранять.
   

.
2. автоматически экспортировать сразу все

1. Убедитесь что ни один из макетов не выделен. Если выделен, то кликните на пустое поле между макетами.
   
2. Нажимаете CTRL+E (или через меню Export...) и выбираете формат экспорта.
   

P.S. Если ни один макет не выбран, то экспортируются сразу все.

Вот что имеется ввиду:

1. выделяете блок текста
   
2. открываете выпадающее меню со шрифтами
   
3. водите мышкой по шрифтам и смотрите как текст меняется на лету
   

P.S. Переводчиков Adobe конечно уволить нужно. Я пошел на англоязычную версию страницы, чтобы понять что там написано.

Такие?

Там везде, в основном, 3Д графика. Один раз сделали добротную 3Д модель и крутят-вертят её как хотят — показывают с разных ракурсов.

Лирическое отступление про фотографию:
Да, фотки они делают, но далеко не всё получится так четко сфотографировать. И вам никаких сверх-мегапиксельных камер и супер-чётких объективов не хватит для того, чтобы сделать изображение пригодным для печати в большом формате.
Вот тут ребята пытались повторить то о чем вы спрашиваете: https://www.youtube.com/watch?v=YOKwEVrna6s
Их результат похож на олигинал, но входе видео ведущий сказал, что это была очень долгая и тяжелая фотосессия. А результат всё равно был далёк от цели и они отдали фотку ретушеру на обработку.
В общем, слишком много геморроя с фотографированием. Слишком много времени и пост-обработки. И это только одни часики. А если их нужно будет сделать с другого ракурса? То это, как минимум, ретушь — по новой.

3Д:
Сделав 3Д модель один раз вы можете её "фотографировать" до бесконечности и без всякой пост-обработки. Или с минимальной. А если нужен видео ролик? — Используется та же самая 3Д модель!

Если хотите уметь так как они, то ищите в направлении 3Д графика. Ключевая фраза: предметная 3Д визуализация. На английском качественнее и больше информации: product 3d visualization.

Пост-обработка этой иллюстрации в Фотошопе (как и той, что выше) = 0%
Просто голый 3Д рендер:



Но если не хотите связываться с 3Д графикой, то ваше направление для изучения: технический дизайн, он же техдизайн. Пример: https://www.artlebedev.ru/kovodstvo/business-lynch...

Это делается через панели Properties и Layer Styles:
1. Сначала создайте прямоугольник


2. Потом откройте панель Properties (не знаю как называется в русской версии) и в ней выбирайте цвет или градиент. И там же работайте с обводкой и скруглением углов:


3. Тени делаются через стили слоя. Двойной клик по слою и откроется панель со стилями:


4. Чтобы проверить как будет генерироваться CSS можно нажать правую кнопку мыши на слое и выбрать Copy CSS. Тогда в буфер обмена скопируется CSS код со всеми примененными к нему стилями.


5. Если в Avocode (и прочих) не будет видно CSS стилей на элементе (например, градиента), то попробуйте наложить его через панель стилей:

Вам нужна панель CSS Designer (Shift+F11).
В ней нужно привязать стили к странице. Это может быть внешний CSS файл или вставленный прямо на страницу — вам выбирать. Это делается здесь:



Дальше есть 2 способа:

1. Нажмите + в поле Selectors и впишите нужный вам селектор. На этом всё :) Параметры CSS будут показы справа если кликнуть по селектору.



2. Второй способ более наглядный: кликаете на странице сайта любой элемент, чтобы его выделить и нажимаете + в поле Selectors. И Дримвивер сам предложит вам название селектора для данного элемента, такое чтобы не конфликтовало с другими элементами на странице. Его можно отредактировать если не нравится.



Чаще пользуюсь вторым способом. Очень-очень ускоряет работу с версткой (что бы там ни говорили фанаты "блокнотиков").

Короткий ответ:
не рисуйте в Фотошопе — рисуйте в Adobe XD. И все вопросы про dpi отпадут сами по себе.

Более развёрнутый ответ:
как правильно заметил GreatRash, dpi не имеет значения. Главное — кол-во пикселей. Да и то, с такими динамичными интерфейсами и адаптивными сайтами которые востребованы сегодня даже пиксели "сдают позиции" и делят место с %.

Если отвечать на вопрос, то верстать нужно в том разрешении (в пикселях), которое показывает браузер. Например, если с обычными компьютерами все ясно: ширина экрана 1280px, значит и рисовать нужно в 1280. То с телефонами уже все не так очевидно. Например, физический размер экрана iPhone 6: 750x1334px. Но браузер на телефоне показывает сайт так как будто бы там вдвое меньше пикселей: 375x667px. То есть, если вы в макете нарисуете блок шириной 187px, то он займёт половину экрана на iPhone 6.
Есть отличный сайт, который показывает размеры экранов самых популярных мобильных устройств:

• их фактические размеры (первые две колонки)
  
• и размеры, которые "понимает" браузер (3 и 4 колонки — это то, что вам надо).
  

Почему Adobe XD? Потому что, зуб даю, через пару лет Adobe скажет:
— Ребята, мы убираем из Фотошопа все фишки, которые раньше помогали вам делать дизайн сайтов. Верстайте их теперь в XD. А мы оставим фотошоп для фотографов и иллюстраторов.

Дело в том, что Adobe XD — это их новая разработка для прототипирования (дизайна) сайтов. И разработка этой программы идёт полным ходом. Пока-что доступна только под Мак (к концу года будет Windows версия). В программе есть очень "вкусные" фишки, которые ускоряют работу в десятки раз. Посмотрите хотя бы эту GIF-ку ниже. А ещё сама программа очень быстро работает.



Есть еще Sketch. Он тоже создан специально для дизайна сайтов и только под Мак.
Сначала может быть трудновато привыкнуть к дизайну без Фотошопа, но оно того стоит, поверьте.

Философия:
Что такое дизайн сайта? И зачем думать про разрешение? И зачем вообще мы их рисуем?
После того как сайт сделан и проект закрыт, все PSD макеты дизайнера отправляются в архив и лежат там мертвым грузом десятки лет пока вы их не удалите. Рисунки никому не нужны — нужен сам сайт. А рисуем мы их для того, чтобы легче представить себе и показать верстальщику как сайт должен смотреться. То есть, если бы мы могли телепатически обьяснить верстальщику что и как должно выглядеть, то никто бы не занимался этой "ерундой" в Фотошопе. И это основная задача дизайнера: придумать как сайт должен выглядеть, анимироваться и взаимодействовать с юзером и передать это дальше в производство.

И тут ваша идеальная работа, как дизайнера, должна выглядеть так:

1. Вы рисуете страницу так как она должна выглядеть и выносите в отдельный документ (или слой) все размеры всех блоков, отступов, хедеров, футеров и пр. У вас должно получиться что-то вроде "чертежа" сайта с вашими комментариями;
   
2. Затем, в отдельное место выносите дизайны всех кнопок, полей для ввода текста, стили заголовков, аккордеонов, вкладок и всего остального что есть на вашем сайте;
   
3. Отдельно подготавливаете контент: текст и картинки. При этом желательно, чтобы картинки были сразу продублированы в нескольких размерах (в случае с адаптивными сайтами).
   
4. Все иконки — тоже отдельно. Векторные, в формате SVG, плюс PNG — для подстраховки при вёрстке.
   

Затем собираете это все в один портфель и несёте верстальщику. Он скажет вам большое спасибо и назовёт лучшим дизайнером в мире.

Для примера, касательно пункта 1, посмотрите как я обычно оформляю ТЗ для верстальщика. Это только две страницы из 20-ти.



А эта работа, которую вы проделали — это не "дополнительный" труд. Это то как обычно выглядит хороший дизайн-процесс. Особенно, в больших студиях. Таким образом вы избавитесь от кучи мелких ошибок со стороны разработчиков и от необходимости разжёвывать все мелочи отвечая на их "глупые" вопросы.

Потому что по умолчанию оно сделано для того, чтобы быстро оценить настройки сцены по цвету, свету или текстурам. А для этого дизайнеру нужен быстрый рендер. Поэтому качество плохое изначально плохое.
Но если хотите качество по-лучше, то для этого есть едва заметный ползунок справа. Да, вы его наверное не заметили :)
Потяните вверх до упора и качество будет 100%.