Программа марвел что это

Прототипирование в Marvel и Sketch: часть 2 из 2

Во второй части этого урока я покажу, как дизайны, созданные ранее в Sketch, превратить в функциональные прототипы с помощью Marvel. Marvel – это отличное приложение для быстрого создания функциональных прототипов, которые отлично синхронизируется со Sketch через свой собственный плагин, который мы вскоре скачаем. Есть множество аналогичных приложений (и я несколько из них опробовал) с более продвинутым функционалом. Но Marvell – это своего рода мощный малыш, который постоянно обрастает новыми возможностями, и я очень его рекомендую.

Регистрация в Marvel

Перейдите на сайт marvelapp.com и зарегистрируйтесь (для начала вам предложат бесплатный план). Отлично. Теперь у вас есть бесплатный аккаунт для Marvel. В этом уроке я освещу довольно мало функций Marvel, но вы получите достаточно знаний для использования этой программы под свои цели. Начнем с создания нашего первого проекта… Назовите новый проект как-нибудь.

Интересные факты История успеха MARVEL | Документальный фильм

Что-то вроде ‘Shutter iOS Photo App’ идеально подойдет. И в качестве устройства для прототипирования выберите iPhone. Кликните ‘Create project’ (Создать проект). Все!

Давайте установим плагин для Sketch

Вам нужно скачать плагин для Sketch, чтобы мы могли слать артборды прямо в Marvel непосредственно из Sketch. Кликните на ссылку ‘Sketch’ и скачайте плагин со следующей странички. Распакуйте архив, кликните дважды на файле .sketchplugin для запуска установки. Отлично. Теперь можно с легкостью синхронизировать артборды из Sketch с проектом в Marvel, который мы только что создали. Чисто, просто, без суеты!

Вернитесь в приложение Marvel, кликните на Settings, чтобы убедиться, что для прототипа установлен размер iPhone 6. Поиграйтесь с разными настройками прототипа, доступными в программе. Как я упоминал ранее, я не сильно углублюсь в возможности Marvel, так что не стесняйтесь экспериментировать самостоятельно. Здесь невозможно ничего сломать!

Экспорт артбордов из Sketch

• Welcome (скрин приветствия)
• Viewfinder (скрин видоискателя)
• Image/Photo Gallery (фотогалерея)
• Full Image Preview (полноэкранный просмотр фото)

И сейчас я объясню, почему…

В Marvel есть замечательная функция под названием Layers, которая позволяет вам добавлять поверх ваших скринов элементы, включая сайдбары, модальные окна и т.д…

Если вы помните (последние 2 скрина, которые мы рисовали в Sketch), мы добавляли модальные окна для опций Share (поделиться) и Delete image (удалить изображение).

Для них не нужно экспортировать полные скрины (мы можем использовать скрин полноэкранного просмотра фото, и нам понадобится экспортировать только сами модальные окна, а затем поместить их слоем поверх основного скрина.

Я объясню детальнее по мере продвижения по уроку. Уверяю, тут нет ничего сложного!

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

Графика в фильмах Marvel. Как CGI обманывает зрителей.

Выделите все 4 артборда в списке слоев…

И затем перейдите на Plugins — Marvel — Login or Logout to Marvel…

В появившемся окне введите данные для доступа в Marvel, которые вы вводили недавно при регистрации.

Как только вы залогинились, а артборды все еще выделены, перейдите в меню Plugins — Marvel — Send or Update Selected Artboards to Project… или воспользуйтесь горячими клавишами Alt + Cmd + G.

Во всплывающем окне Export Settings вы увидите, что название вашего проекта уже выделено. Выберите 2x, так как мы создаем дизайны для экрана iPhone 6 Retina. Затем кликните Send or Update.

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

Чтобы расположить скрины по порядку, кликните и перетащите каждый скрин на нужное место.

Настройка модальных элементов в Sketch

Вернемся в Sketch, и настроим модальные элементы. Сейчас они сидят поверх артбордов, которые мы создали (это было нужно для правильного позициониорвания их в дизайне), но нам нужно импортировать в Marvel только модальные окна без подложенных скринов.

Так что выделите сам модальный элемент Share, скопируйте и вставьте его на область холста.

Конечно, нужно, чтобы элемент находился внутри артборда, так что вставьте новый артборд (А), и из панели инспектора выберите опцию Around Selection.

Следуйте тому же процессу и для модального окна Delete Image.

Готово! У нас есть два новых артборда для модальных окон.

Как и в предыдущий раз, выделите оба артборда в списке слоев, затем перейдите в Plugins — Marvel — Send or Update Selected Artboards to Project или нажмите Alt + Cmd + G.

Во всплывающем окне Export Settings используйте уже выбранные в нем настройке, и нажмите на опцию Send or update.

Наши скрины готовы к прототипированию!

Перейдите в приложение Marvel, где все скрины уже ждут своего часа.

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

Наведите мышкой поверх первого скрина (Welcome) и нажмите кнопку Edit, которая активирует режим редактирования. Используя клавиши стрелок влево и вправо на клавиатуре вы можете быстро переключаться между скринами в проекте.

…и масштабировать каждый скрин, используя + и —

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

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

Скрин приветствия

Все еще находясь в окне Edit, при видимом скрине Welcome, наведите курсором на изображение, и вы увидите появившийся инструмент для хотспотов. Кликните и потяните, чтобы нарисовать хотспот поверх кнопки Skip.

Вы увидите появившуюся панель опций внизу окна. Здесь вы можете творить свою прототипическую магию!

Есть различные опции на выбор, так что давайте остановимся на нескольких из них.

Мы хотим, чтобы наш приветственный скрин перенаправлял нас прямо на видоискатель. Кликните на скрине видоискателя на панели, чтобы выделить его.

Добавим красивый переход между скринами. Кликните на вкладку Screen Transition и сделайте выбор эффекта. Появится симпатичная анимация при ховере на каждую опцию. Давайте выберем вариант Slide Up.

Совет: Если вы хотите просматривать результат своих действий в процессе прототипирования, просто кликайте на ссылку Preview в правом верхнем углу окна Edit.

Откроется новое окно с вашими скринами внутри фрейма прототипа, в нашем случае это фрейм iPhone 6. Здесь вы можете протестировать текущие действия и анимацию…

Скрин видоискателя

Вернитесь в окно Edit, используйте кнопки стрелок на клавиатуре, чтобы переключитьс на следующий скрин (видоискатель), и нарисуйте хотспот поверх кнопки Shutter (затвор).

Затем кликните на значок Image Gallery (фотогалереи) в панели Options снизу, чтобы прилинковать хотспот к этому скрину.

Добавьте переход между этими скринами. Нажмите на вкладку Screen Transition, и в этот раз давайте остановимся на Fade.

Как я раньше упоминал, мы активируем всего несколько хотспотов на дизайнах скринов. Когда вы освоитесь в Sketch и Marvel (или вы уже?), вы можете вернуться и дорисовать недостающие дизайны, добавить больше взаимодействий и элементов.

Скрин фотогалереи

Перейдите на скрин фотогалереи, на нем мы добавим целых два хотспота.

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

В качестве перехода между скринами давайте выберем Slide Right.

Нарисуйте еще один хотспот, покрывающий среднюю миниатюру изображения, и выделите затем скрин полноэкранного просмотра фото. Так пользователь кликнет и перейдет на полноэкранный просмотр изображения.

Выберите переход Full Image Preview, и на этом с галереей мы закончили.

Скрин полноэкранного просмотра фото

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

Добавьте хотспот поверх кнопки «назад» вверху скрина, и затем (так как сейчас есть всего один способ попасть на этот скрин, через фотогалерею), выберите опцию Link to last visited в Hotspot Destination.

Здесь не нужно добавлять переход между скринами. Marvel просто возьмет анимацию, противоположную той, которую вы использовали для попадания на этот скрин. Например, Slide Up будет заменен на Slide Down при обратной навигации.

Приступим к обработке модального окна для удаления фото.

Нарисуйте на нем хотспот поверх кнопки Delete внизу скрина, и выделите изображение Delete Modal в качестве Hotspot Destination.

Затем выберите опцию Layer an image в левой части панели опций.

На новом появившемся скрине Edit у вас есть пара опций на выбор — Layer position (позиция слоя) и Layer background (фон слоя).

Для позиции слоя выберем Centered (по центру), а для Layer background давайте снова перейдем в Sketch.

На артборд Delete Image выделите слой Overlay и из раздела Fills в инспекторе вы увидите, что заливкой выбран цвет #303030 с непрозрачностью 60%.

Снова вернитесь в Marvel, введите это 16-ричное значение и перетащите слайдер непрозрачности на 60%. Затем кликните Save Layer.

Добавим быстрый переход Slide Up.

Модальное окно удаления фото

Перейдите на модальный скрин Delete Image внутри редактора, и нарисуйте хотспот поверх кнопки Cancel. Выделите скрин полноэкранного просмотра в качестве направления, и используйте анимацию Slide Down.

Модальное окно «Поделиться»

Знаете, что? С этим я, пожалуй, оставлю вас наедине. Используйте шаги, которые я показал для модального окна Delete Image. Анимации, хотспоты, цвет для оверлея.

Результат выглядит примерно так…

Когда вы со всем закончите, нажмите на кнопку Done в верхнем правом углу окна редактора, и вы вернетесь в раздел Project.

Отсюда кликните кнопку Play (в верхнем правом углу экрана) для запуска вашего прототипа.

Вот, что я сделал ранее (попробуйте)…

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

Источник: ux.pub

Marvel

Сервис для создания эскизов, макетов и прототипов дизайна для веб-приложений, iPhone, iOS, Android и Apple Watch.

Похожие на Marvel

Описание Marvel

Marvel — это сервис для формирования макетов и прототипов. Он включает стандартную поддержку файлов Sketch и Photoshop. Публика ция сeрвиса Startpack. С помощью Marvel можно обсуждать прототип и выделить области для комментариев.

Корпоративные версии Marvel поставляются с мощной функцией «Handoff», которая позволяет автоматически превращать проекты приложений в спецификации, чтобы ускорить разработку приложения для программистов.

• Автоматическая синхронизация с Dropbox.
• Общие экраны.
• Клики / тапы и основные мобильные жесты (жесты пальцем по экрану и двойной тап).
• Горячие точки по экранам.
• Широкий спектр мобильных экранов.
• Поддержка нескольких пользователей.

Источник: startpack.ru

Marvel

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

Контакты

Marvel Prototyping
United Kingdom

Стоимость

Стоимость Marvel начинается от 12$ за пользователя, в месяц. Есть бесплатная версия.

Характеристики

Стартовая стоимость

12$ в месяц
Бесплатная версия
Пробный период

Операционные системы

Cloud, SaaS, Web

Обучение

Документация
Персонально

Поддержка

Рабочее время

Возможности

Дизайн мобильных приложений

библиотека функций
Визуальный интерфейс
Перетаскивание
Разработка прототипов
Сотрудничество
Управление изменениями

Управление тестированием
Шаблоны дизайна

Создание прототипов

UI прототипирование
UX прототипирование
Перетаскивание
Проверка удобства использования
Создание предварительной версии ПО
Сотрудничество

Управление версиями
Выберите самые важные функции
Бесплатная консультация по подбору ПО от наших специалистов
Бесплатная консультация
Заполните небольшой опрос и наши специалисты подберут для вас ПО

Подобрать ПО

Аналоги Marvel

Web Master

от WebMaster
Облачный конструктор прототипов сайтов с функцией краулинга и визуализации чужих сайтов.

Figma

Облачная или он-премис (on-premise) платформа для разработки дизайнов и совместной работы над прототипами.

Balsamiq Wireframes

от Balsamiq Studios

Быстрое решение для создания и совместной работы над вайрфреймами, прототипами и мокапами с готовой системой контроля ве.

Draftium

от JETIMPEX

Draftium — это инструмент для создания каркаса, позволяющий визуализировать идею сайта за 15-30 минут и собрать отзывы в.

Adobe XD

On-premise решение для тестирования гипотез, создания прототипы и мокапы и совместной работы над ними.

Release

от TED Technology
Решение позволяет быстро развертывать staging-окружение для тестирования прототипов.

InVision

от InVision

InVision- это платформа, которая предоставляет все необходимые инструменты для создания цифровых технологий, дизайна про.

Moqups

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

Sketch

от Bohemian
Набор инструментов для работы с векторной графиков и прототипирования мобильных приложений.

Популярные сравнения с Marvel

от Marvel Prototyping
Популярные сравнения с Marvel

от Marvel Prototyping

от InVision

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

от Bohemian
Набор инструментов для работы с векторной графиков и прототипирования мобильных приложений.

от Hartmann Industries

Позволяет владельцам бизнеса создать наглядное решение для планирования ресурсов предприятия без необходимости написания кода.

от Open as App

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

от Sellios.ru
Sellios — конструктор интернет-магазинов с хорошим дизайном.

от Bubble Group
Онлайн конструктор для разработки мобильных и веб-приложений без навыков программирования.

от Платформа LP
Платформа LP — сервис для создания и ведения одностраничных сайтов.

Marvel с InVision

Marvel с Sketch

Marvel с EUROPA

Marvel с Open as App

Marvel с Sellios

Marvel с Bubble

Marvel с Платформа LP

Отзывы Marvel

Отзывов ещё нет — ваш может стать первым.

Смежные категории к Дизайн мобильных приложений

Сравнить 0 продуктов категории Дизайн мобильных приложений
О компании

• Наша история
• Юридические документы

Пользователям
115419, г.Москва, ул.Шаболовка, д.34, стр.5

Все сведения, содержащиеся на страницах сайта (информационные материалы, каталоги, статьи и пр.), носят ознакомительный характер. Информация не является исчерпывающей. Информация на сайте не является публичной офертой, определяемой положениями Статьи 437 Гражданского кодекса РФ. Все права интеллектуальной собственности принадлежат компаниям — производителям программного обеспечения, как и товарные знаки и логотипы. Все ссылки на дистрибутивы, а так же выложенные статьи, товарные знаки и логотипы носят в себе только ознакомительный характер и не претендуют на интеллектуальную собственность, а так же ее нарушение

Источник: picktech.ru

Marvel – вспомогательный инструмент для разработчиков, предпринимателей и программистов. Приложение дня!

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

Принцип работы Marvel

Допустим вы самый начинающий разработчик, который окрылен идеей создать iOS-приложение. Знаний у вас не так много, но, скорее всего, первый шаг, к которому вы приступите – это создание макета из страниц на бумаге, чтобы иметь какое-то визуальное представление. После того, как готовы ваши первые эскизы разделов и страниц, за дело берется Marvel.

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

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

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

Категория: Производительность
Разработчик/Издатель: Mokaza LTD
Версия приложения: 2.0

Источник: tech-touch.ru

С помощью каких программ создаются самые красивые сцены в современных блокбастерах

С самого появления кинематографа режиссеры искали технологии, чтобы делать зрелищные сцены. Даже черно-белый «Кинг-Конг» 1933 года уже был со спецэффектами. В то время возможности индустрии были скромными. Огромная горилла представляла собой 30-метровую механическую куклу, и никаких графических «примочек», конечно, не было. А вот передовые технологии, сделавшие «Кинг-Конга» 2005 года таким захватывающим, можно перечислять долго.

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

То же и с 3D-графикой, с помощью которой сегодня делаются приблизительно все впечатляющие сцены в дорогостоящих фильмах. Да, есть несколько масштабных пакетов для работы с трехмерными объектами, которыми пользуются многие — Maya, Houdini. Но дальше начинаются детали. В каких именно программах и как создают фантастических монстров или альтернативные миры? Рассказываем с примерами фильмов последних лет.

Гигантские битвы: «Властелин колец», «Мстители: Финал»

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

Так, для грандиозных батальных сцен из «Властелина колец», где требовалось одновременно обрабатывать тысячи объектов (в конкретном случае — солдат на поле боя) разработали программу Massive. Компания Weta Digital, которая занималась графикой, создавала ее прямо в Новой Зеландии, где шли съемки.

Massive стала прорывом для индустрии. Когда-то специалисты заставляли объекты (людей, деревья и пр. ) в искусственном мире двигаться с помощью покадровой анимации. То есть приходилось рисовать каждый кадр, но для очень масштабных проектов этот способ не годился.

Позже в этой программе генерировали движения растений и деревьев в «Аватаре». Софт используют по сей день, нынешние вычислительные мощности позволяют обрабатывать там уже миллионы «агентов». Эти «агенты» представляют из себя «большую толпу» (речь и о живых объектах, как солдаты, и о неживых — как деревья), где каждый ее участник ведет себя по-своему, реагирует на собственное окружение.

Еще Massive применяли в том числе для моделирования эпической заключительной битвы с Таносом в фильме-тимапе Marvel «Мстители: Финал». Кстати, эту программу можно даже лицензировать для собственных нужд за $ 2000 в год.

Также
по теме

Фантастические твари и как они создаются

Часто в кино показывают существ, которых в реальности не бывает: это разумные животные, помогающие героям, или ужасающие монстры.

К фотореалистичным животным в кино шли долго. Считается, что первого по-настоящему правдоподобного компьютерного животного — тигра — создали для фильма «Жизнь Пи» 2012 года. Интересный факт: студия Rhythm

Ziva — тоже плагин для Maya, с его помощью делают анатомически достоверную анимацию тела, в данном случае кошачьего.

Есть интересно узнать о процессе создания фильма «Капитан Марвел» побольше, то вот ролик о том, как для него делались спецэффекты.

Как вырастить деревья в программе?

Часто нас легче впечатляют не эффектные сцены как таковые, а целые вселенные, которые придумывают и рисуют почти для каждого фильма. Фактически нам часто показывают не совсем художественное кино, а 3D-мультфильмы.

Например, почти все экшн-сцены «Дэдпула», как можно заметить по VFX-breakdown, ненастоящие. И даже актеры могут играть не себя, а неких нарисованных персонажей при помощи технологии motion capture — она известна еще со времен Голлума из «Властелина колец» и использовалась при создании «Аватара» Джеймса Кэмерона.

Проще говоря, стало важным сделать не просто отдельные эффекты, а целые планеты с физическими законами. Для Джеймса Кэмерона целое десятилетие придумывали, как нарисовать его Пандору с синекожими На’Ви, летающими животными и волшебными деревьями. В итоге более половины всего, что мы видим в этом фильме, — это графика.

Для «Аватара» писали отдельные программы, придумывали новые решения в работе с камерами на площадке, это был наукоемкий проект. Но вот, что может вас удивить: одна из программ, которая применялась для построения мира Пандоры, — популярный Adobe Photoshop. Многие привыкли считать его графическим редактором для обработки изображений, но вообще у него есть расширенные версии где можно работать с 3D-файлами, создавать кадры мультипликации, видеоизображения.

Кстати, здесь можно почитать наш текст о том, на что еще способен Photoshop.

Другие примеры фильмов, где VFX-художники пользовались специальным софтом, чтобы моделировать природу:

• Программу Flowline по генерации компьютерной воды разработали для фильма-катастрофы «2012», где заливало всю планету. А недавно ее применили в «Черной пантере», где множество сцен происходит на фоне грандиозного водопада;
• Знаменитые снега в «Игре престолов» часто были не настоящими, а нарисованными. В ход шла магия кино: в уже упоминавшемся ZBrush «вылепляли» скалы и добавляли лед и снег;
• Иногда проблемой становится нарисовать достоверные деревья. В мультфильме «ЛЕГО Ниндзяго» зритель мог впечатлиться бонсаем. Оказывается, есть удивительная программа Spruce для моделирования CG-деревьев, где несуществующее растение выклевывается из семечки по всем законам ботаники. Затем оно в случайном порядке растет. И даже, повинуясь внутренним биологическим токам, просчитанным на компьютере, покачивает веточками и листочками.

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

Источник: www.syssoft.ru