Как бесплатно создавать визитки с дополненной реальностью без кода | Амир Хелла | AUGMENTOP

Опубликовано в

·

Чтение: 7 мин.

·

24 сентября 2019 г.

Первоначально эта статья появилась в блоге Augmentop

Прототип интерактивной визитной карточки от Augmentop

Визитные карточки мертвы?

Когда вы в последний раз обменивались с кем-нибудь визитками?

И как долго вы хранили карту другого человека? Вы сделали снимок на камеру телефона и выбросили его?

Что, если вы сможете создать визитную карточку, которую люди будут хранить и помнить долгое время? Что, если ваша визитная карточка — это то, чем они хвастаются своим друзьям и коллегам из-за того, насколько она крутая?

Как это повлияет на вашу способность общаться с другими людьми, создавать запоминающийся бренд и производить отличное первое впечатление?

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

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

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

Вот как выглядит обратная сторона нашей визитной карточки, когда ее QR-код сканируется камерой iPhone:

Приведенный выше опыт дополненной реальности полностью работает в Safari на iOS и не требует установки дополнительных приложений. И он был создан с помощью Sketch и Reality Composer за пять дней.

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

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

Если вы не знакомы с Reality Composer, начните с нашего пошагового руководства о том, как создать интерактивную среду дополненной реальности за один час.

Sketch AR Business card templateReality Composer Шаблон AR Business Card

А если вы не знакомы с тем, как создавать приложения AR с помощью Reality Composer, вам следует ознакомиться с нашим подробным практическим руководством здесь.

Вы можете бесплатно загрузить Reality Composer для MacOS, iOS или iPadOS из Apple App Store. Мы создали нашу визитную карточку AR, используя версию для MacOS, которая поставляется с Xcode, но рабочий процесс на другой платформе практически идентичен.

Думайте о своей визитной карточке AR как о мини-сайте: какую информацию вы хотите сообщить своим новым контактам и потенциальным клиентам или покупателям? Как вы организуете эту информацию в разделы? И как люди будут перемещаться между этими разделами?

Для визитных карточек Augmentop мы хотели включить информацию о том, кто мы, что мы делаем, как мы это делаем и где мы находимся.

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

Затем мы создали онлайн QR-код, который указывал на место, где на нашем веб-сайте будет размещен опыт дополненной реальности.

Вот как выглядят лицевая и оборотная стороны нашей визитной карточки дополненной реальности:

Лицевая и обратная стороны нашей визитной карточки дополненной реальности

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

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

Для этого вам нужно экспортировать каждый слой, который будет анимироваться в AR, как отдельное изображение из Sketch, и импортировать его по отдельности в Reality Composer.

Вот как выглядит полный файл Sketch для нашей визитной карточки AR:

Ресурсы визитной карточки AR в Sketch

Создайте новый проект Reality Composer, выберите привязку изображения в качестве цели отслеживания и используйте изображение задней части вашего бизнеса. карта в качестве этого якоря. Для стандартной визитной карточки установите физические размеры привязки изображения 5,08 см на 8,89 см.

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

Это очень трудоемкая задача, потому что вам нужно указать позиции X, Y и Z для каждого изображения, которое вы импортируете отдельно, и убедиться, что все они расположены правильно в 3D.

Вот как выглядит сцена меню в Reality Composer:

Значки меню, наложенные поверх привязки изображения в Reality Composer

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

А если вы хотите добавить 3D-текст поверх своей визитной карточки AR, мы рекомендуем создать полупрозрачный фон для наложения, чтобы ваш текст был более читабельным.

Хорошей практикой является частый экспорт и тестирование вашего проекта, чтобы убедиться, что в реальности все выглядит так же, как в Reality Composer. Если вы используете версию Reality Composer для iPadOS или iOS, вы просто нажимаете кнопку «Воспроизвести» на панели инструментов и тестируете сцену. Экспорт не нужен. Вам нужно будет распечатать обратную сторону своей карты, чтобы проверить работу, но вы также можете загрузить то же самое изображение обратной стороны на свой iPhone и использовать его для целей тестирования.

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

Импортируйте изображения Sketch, соответствующие этой сцене, и разместите их поверх привязки изображения.

Если вы добавляете текст в свой опыт, я рекомендую создавать 3D-текст непосредственно в Reality Composer, а не импортировать изображения с текстом из Sketch, поскольку первый вариант более разборчив и быстрее загружается.

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

Вот все наши сцены визитных карточек дополненной реальности в Reality Composer:

Различные сцены визитных карточек дополненной реальности в Reality Composer соответствующую сцену. Убедитесь, что вы также добавили пункт меню «назад», чтобы вернуться к основной сцене навигации.

Анимируйте эти переходы, чтобы они были более привлекательными и контекстуальными. Вы можете узнать, как создавать переходы сцен и анимацию в Reality Composer здесь.

После завершения и тестирования вашего опыта экспортируйте файл .reality из Reality Composer и разместите его на странице, на которую указывает ваш QR-код, чтобы Safari открывал эту страницу, когда кто-то сканирует этот код с помощью камеры iPhone.

Вам нужно сообщить Safari на iOS, что вы хотите загрузить AR на эту страницу, и для этого вам нужно добавить rel=»ar» при ссылке на ваш файл .reality следующим образом:

< a rel=»ar» href=»card.reality»> png» alt=»»>

Вот и все. Самая трудная часть сделана!

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

Пока этот опыт ограничен устройствами iOS, и мы работаем с различными партнерами, чтобы перенести его и на устройства Android.

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

Теперь, когда вы знакомы с Reality Composer, получите свой настраиваемый шаблон визитной карточки AR здесь и создайте свою собственную визитную карточку за пару часов.

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

Интернет-ресурсы для бесплатных печатных визитных карточек

Благодаря большому количеству бесплатных ресурсов в Интернете теперь стало проще, чем когда-либо, создавать бесплатные печатные визитные карточки прямо дома или в офисе.

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

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

Есть несколько причин, по которым…

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

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

Разве вы не отнеслись бы скептически к «бизнесу», который дал вам карточку, которая выглядела надуманной?

Однако есть определенные случаи, когда необходимо получить бесплатные визитные карточки для печати, например, если:

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

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

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

• Avery Design and Print Online
  Avery — отличный ресурс для создания бесплатных визитных карточек в Интернете. У них есть множество шаблонов на выбор и качественная бумага, чтобы соответствовать. Для получения дополнительной информации о визитных карточках Avery нажмите здесь.
  
  
• Businesscardland
  На этом сайте есть бесплатный конструктор визитных карточек и бесплатные шаблоны. Вы можете выбрать один из шаблонов, которые можно легко сохранить в формате PDF и распечатать на собственном принтере или взять в коммерческом типографии или в копировальной мастерской. Создатель визитных карточек основан на флэш-памяти, поэтому он позволяет вам создавать свои визитные карточки в Интернете на Mac или ПК. Для получения дополнительной информации и обзора Businesscardland нажмите здесь.
• Make Business Cards
  Make Business Cards позволяет легко создавать простые черно-белые визитные карточки. Создавайте их прямо онлайн и мгновенно получайте бесплатные визитные карточки в формате PDF.
• BizCardCreator
  В BizCardCreator вы можете мгновенно создавать и печатать собственные полноцветные визитные карточки онлайн. Есть много стилей, цветов, логотипов и фонов на выбор, или вы можете загрузить свои собственные. Никаких взносов или членских взносов не требуется. Для получения дополнительной информации и обзора BizCardCreator щелкните здесь.
• Веб-сайт The Pc Man
  В типографии Free Business Card Creator создать карточку легко, просто следуйте пронумерованным инструкциям на каждом этапе. Здесь вы можете использовать свое собственное изображение или одно из их изображений, изменить шрифт и цвет текста.