Как рисовать в браузере
Работа с трёхмерной графикой на сегодняшний день востребована во многих сферах деятельности. Она используется для проектирования новых механизмов, при разработке дизайна интерьера, соответствующие модели разрабатываются перед печатью на 3D принтере, а также в видеоиграх и во многих других случаях. Существуют дорогие профессиональные приложения, например, «3D MAX», «Autodesk 123D» и тому подобные. Но существуют и бесплатные онлайн-сервисы, в которых можно рисовать онлайн 3Д на компьютере прямо в окне браузера.
Онлайн-сервисы для 3D-моделирования и дизайна
Онлайн сервисы для работы с 3D проще профессиональных программ, но для работы со многими из них всё равно требуются некоторые знания о создании трёхмерных проектов. Но встречаются и сервисы, для работы с которыми специальной подготовки не требуется, чаще всего это касается сайтов для работы с дизайном интерьера.
Tinkercad
Некоторые называют Tinkercad онлайн версией популярного специализированного приложения 3DMax. Оба этих программных продукта разработала одна компания – Autodesk.
Tinkercad бесплатен и дружелюбен к начинающим пользователям. Он использует комплексные объекты, которые состоят из простых форм. Можно использовать готовые формы или загружать свои собственные. Имеющиеся формы можно перемещать или вращать. Также есть возможность устанавливать необходимые размеры. Кроме этого можно создавать новые формы, объединяя уже имеющиеся. Используя встроенный модуль « Цепи » можно проектировать электронные устройства. С помощью этого сервиса можно не только проектировать, но и создавать программы, с помощью которых создаются динамические, адаптивные 3D формы.
На официальном сайте Tinkercad можно найти инструкции, обучающее видео и другой полезный для новичков контент, который поможет освоить моделирование максимально быстро. В разделе сайта « Галерея » можно ознакомиться с работами других пользователей.
Данный сервис поддерживает наиболее распространённые форматы файлов, используемые для трёхмерной печати. После создания 3D-модели её можно скачать и распечатать. Интерфейс Tinkercad русифицирован.
3D Slash
3D Slash подойдёт тем, кто хочет получить больше возможностей, чем предоставляет сервис Tinkercad. Он предоставляет больше инструментов для обработки 3D-моделей, например, средства для «гравировки», сверления отверстий, изменения цвета и многие другие.
Простой пользовательский интерфейс помогает новичкам быстро начать работу, также на официальном сайте можно найти обучающие материалы.
В бесплатной версии доступно всего 8 цветов, отсутствует возможность совместной работы над проектом, нельзя создавать папки для организации моделей, загрузить файлы можно только в низком разрешении. Также запрещается коммерческое использование созданных 3D-моделей. Русский интерфейс отсутствует.
Planner 5D
Используя Planner 5D не сложно спроектировать любой интерьер с помощью готовых проектов, к которым можно добавить мебель, полы, картины, часы и другие элементы. Также можно создать проект дома у моря и спроектировать ландшафт возле него. Кроме этого можно создать дизайн кафе или тренажёрного зала.
Также можно загрузить план комнаты, оцифровать его и построить модель, с которой можно будет работать. Не сложно сделать перепланировку квартиры или дома, изменить расположение стен, окон, дверей и менять площадь комнат.
Среди достоинств этого сервиса можно назвать простой, интуитивно понятный пользовательский интерфейс, наличие различных каталогов и подкаталогов с множеством предметов интерьера, а также реалистичность созданных изображений.
SketchUp
Сервис SketchUp отличается от описанных выше инструментов. Если в предыдущих случаях нужно было создавать свои объекты из 3D форм, таких как шары, кубы, то в этом случае придётся чертить, то есть создавать модели из линий. Поэтому SketchUp считается достаточно сложным инструментом. Но он имеет понятный пользовательский интерфейс, который значительно облегчает использование. SketchUp используется, в первую очередь, для проектирования архитектурных объектов и мебели.
В бесплатной версии поддерживаются не все форматы файлов, а также нельзя создавать новые материалы и стили оформления. У данного сервиса есть русский интерфейс, но на него нужно переключиться, так как по умолчанию загружается англоязычная версия.
Sweet Home 3D
Sweet Home 3D – это онлайн сервис для создания дизайна интерьера, который позволяет дизайнерам и архитекторам рисовать планы домов и расставлять мебель. Он предоставляет следующие возможности:
- рисовать стены и комнаты на одном или нескольких уровнях;
- перетащить двери, окна и мебель из каталога на план этажа;
- обновлять цвета, фактуру, размер, а также ориентацию мебели и комнат;
- просматривать все изменения одновременно в формате 3D;
- создавать фотореалистичные изображения и видеоролики с различными источниками света;
- импортировать дополнительные 3D-модели и экспортировать план этажа в различных форматах.
Есть русский интерфейс. Также существует приложение для компьютера, которое можно скачать с сайта разработчика .
Clara.io
Clara.io – это сложное приложение, которое больше подойдёт пользователям, ранее уже работавшим с профессиональными десктопными 3D-приложениями. Но и возможностей она предоставляет больше других. Работать с ней можно даже на слабом компьютере, так как обработка моделей выполняется в облаке и не требует ресурсов компьютера. В бесплатной версии присутствуют следующие ограничения: не слишком много места для хранения наработок и урезано время на обработку моделей в облаке. Русского интерфейса, к сожалению, нет.
Plastisketch
Plastisketch отличается от других сервисов 3D-моделирования. Он разработан для тех, кто хочет создавать скульптурные 3D-объекты. По общему признанию, нужно время, чтобы осмыслить этот новый подход к 3D-моделированию. Чтобы избавить пользователей от возни с сотнями точек, PlastiSketch позволяет регулировать плавность и качество 3D-дизайна. В этом приложении вы рисуете слои и объединяете их в один объект. Это выглядит так, как будто вы разделили предмет на несколько небольших частей с помощью нескольких горизонтальных плоскостей. После этого расположили части на небольшом расстоянии друг от друга, а свободное пространство между плоскостями заполнилось само. После выполнения работы, вы можете сохранить результат как файл OBJ для 3D-печати или дополнительной обработки в других программах.
Пользоваться данным сервисом можно абсолютно бесплатно, единственное ограничение заключается в том, что в созданных файлах будет присутствовать ссылка на официальный сайт Plastisketch. Интерфейс только английский.
Homestyler
С помощью Homestyler можно создать проект дизайна дома с нуля, спроектировать собственный интерьер и украсить его более чем 200 изделиями мебельных брендов, а также прогуляться по проекту в режиме реального времени благодаря 3D-представлению. Вы сможете увидеть, как под любым углом будет выглядеть ваш дом включить или выключить лампы, которые вы установите, и понять, как будет выглядеть дом после его завершения строительства.
Если вам понравиться какой-то элемент дизайна вы сможете кликнуть по нему и перейти на сайт продавца, чтобы сразу же приобрести понравившуюся вещь. На официальном сайте также есть блог, из которого можно узнать о последних новинках и тенденциях в дизайне интерьера.
В бесплатной версии нет ограничения по количеству проектов и доступны все элементы каталога. Но вы не сможете выполнить 4К рендеринг и удалить водяные знаки.
Planoplan
Planoplan – это онлайн-приложение для 3D-дизайна, которое предоставляет полный набор инструментов для создания дизайна комнаты. Для начала работы с этим инструментом не требуется обучение. Профессиональному дизайнеру потребуется 2 часа на изучение программы. А новичок будет чувствовать себя уверенно и комфортно после одного дня работы с программой.
В бесплатной версии Planoplan можно найти более 5 тысяч различных предметов интерьера, их можно масштабировать, перекрашивать, устанавливать матовое или глянцевое покрытие. Также можно загружать модели. Бесплатно можно хранить только один проект одноэтажного дома, площадью не более 350 квадратных метров.
Roomtodo
Roomtodo – это функциональный и простой сервис, предназначенный для создания плана дома или офиса. Программа бесплатна для личного использования. Сайт поддерживает три языка: украинский, русский и английский. Систем измерения тоже 2: сантиметры и дюймы. Библиотека пока не очень разнообразна. Но можно добавлять модели из других редакторов. В Roomtodo нельзя создавать многоэтажные проекты, поэтому придётся делать каждый этаж отдельно. Сохранять результат работы можно, как на сайте, так и на персональном компьютере, в виде картинки.
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, лайки, дизлайки, отклики!
Писать красивый код - это удовольствие, но очень трудно поделиться этим удовольствием с другими программистами, не говоря уже о непрограммистах. В свободное время, которое остается после работы и семейных обязанностей, я экспериментирую с идеей программной поэмы, используя графические элементы для рисования в браузере.
Существует множество терминов, с помощью которых описываются визуальные эксперименты на компьютере, такие как dev art , code sketch , demo и интерактивное искусство, но в конечном итоге я выбрал термин программная поэма. Идея поэмы заключается в том, что это должна быть отшлифованная проза, легко передаваемая, краткая и эстетичная.
Это не должна быть незавершенная идея, но законченный фрагмент, который доставляет удовольствие от просмотра. Поэма не является инструментом, ее задача - вызывать эмоции.
Для собственного удовольствия я читал книги по математике, вычислительным алгоритмам, физике и биологии. Очень быстро я понял, что, если просто носиться с идеей, это скоро надоест людям.
Но я могу взять некоторые из тех идей, которые я нахожу увлекательными, и представить их визуально, и тогда люди проникаются ощущением чуда, даже если они не понимают теорию, которая лежит в основе визуального представления, и концепции, которые приводят его в действие.
Вам не нужна какая-то сложная философия или математика, чтобы написать программную поэму, только желание увидеть что-то живое и яркое на экране.
Код и примеры, которые я собрал ниже, помогут вам понять, как осуществляется этот не слишком продолжительный, но очень насыщенный процесс. Если вы хотите разбираться параллельно с кодом, вы можете скачать исходные файлы здесь .
Основная сложность при создании поэмы - все должно быть просто и легко. Не тратьте три месяца на создание одного действительно классного демо. Вместо этого создайте 10 поэм, которые развивают идею. Напишите экспериментальный код, который будет впечатляющим, захватывающим, и не бойтесь потерпеть неудачу.
Введение по холстам
Если вкратце, холст по существу представляет собой двухмерный растровый элемент изображения, существующий в DOM , с помощью которого его можно нарисовать.
Рисунок может быть создан либо с помощью 2d -контекста, либо с помощью WebGL -контекста. Контекст является объектом JavaScript , который вы используете, чтобы получить доступ к инструментам рисования. События JavaScript , которые доступны для холста, очень кратки, в отличие от SVG .
Любое возникающее событие относится ко всему элементу в целом, а не какому-нибудь отдельному элементу, нарисованному на холсте, как в обычных элементах изображений. Вот простой пример холста:
С ним довольно просто начать работу. Единственное, что может быть немного сложным, это контекст, для которого перед запуском непосредственно рисования должны быть заданы такие настройки, как стили заполнения, ширина линии, шрифт и стили штрихов.
Очень легко забыть, что эти настройки должны быть обновлены или восстановлены, и тогда вы получите неожиданные результаты.
Приведение элементов в движение
В первом примере прямоугольник просто пробегается один раз через весь экран и остается в виде статического изображения на холсте. Это неплохо, но анимация действительно приносит удовольствие, когда картинка обновляется с частотой 60 кадров в секунду.
Современные браузеры имеют встроенную функцию requestAnimationFrame , которая синхронизирует пользовательский код рисования с циклом рисования браузера. Это помогает в плане эффективности и качества. Целью визуализации должен быть код, который работает с частотой 60 кадров в секунду.
( Замечание относительно поддержки браузерами: Есть несколько простых polyfills, если вам нужно обеспечить поддержку в старых браузерах ):
Рисование с помощью математики
Теперь будьте внимательны, мы говорили о программировании и рисовании на экране, поэтому я перехожу к математике. Математика - это то, что создает магию, которая потом отображается на экране. Если честно, я всегда любил математику ( а вот многие художники нет ).
Несмотря на эту любовь, я был несколько разочарован тем, как ее преподавали в школе. Все это было очень формально, что, конечно, отлично подходит математикам, но в этом не хватало волнения, глубокого исследования и прагматизма, что могло бы помочь в изучении некоторых очень простых концепций. Однако программисты игнорируют абстрактные доказательства и сосредотачиваются на интересных приложениях.
Позвольте мне отнять несколько секунд вашего времени, чтобы пояснить, как работает функция синуса. Это будет полезно, в плане того, чтобы задуматься, как с помощью математических функций можно создавать движение. Приведенные ниже миниатюры являются ссылками на интерактивный график функции синуса.
Обратите внимание, что у нас есть больше переменных, чем просто х в функции sin( x ) . Функция, которую я создал - это sin( a * x + b ) * c + d . Поиграйте с ползунками на интерактивном графике, и вы сможете увидеть, как изменение любого из этих значений влияет на график функции.
Теперь я перепишу формулу из предыдущего примера кода и создам другую версию, которую будет легче читать:
Если вы хотите поэкспериментировать с тем кодом, что я уже показал, я бы советовал вам попробовать добавить перемещение вдоль оси у. Попробуйте изменить значения в функции синуса или возьмите другую тригонометрическую функцию, чтобы поэкспериментировать с ней и посмотреть, что происходит.
Ввод данных пользователем
По ходу рассмотрения движения с помощью математики, хочу воспользоваться моментом и прикинуть, что вы можете сделать с помощью различных устройств ввода для перемещения прямоугольника по странице. Браузеры поддерживают все возможные варианты ввода, в том числе микрофон, веб-камеру, мышь, клавиатуру и геймпад.
Возможно также подключить дополнительные варианты ввода с помощью плагинов наподобие Leap Motion или Kinect . Используя WebSockets и сервер, вы можете подключить к визуализации свое оборудование.
Подключите микрофон к Web Audio API , и вы сможете управлять пикселями с помощью звука. Вы даже можете создать на базе веб-камеры датчик движения и распугивать виртуальных рыбок ( что-то подобное я сделал на Flash пять или около того лет назад ).
Теперь, когда мы разобрались с этим, давайте вернемся обратно и рассмотрим еще несколько примеров. Один квадрат это скучно, давайте поднимем ставки. Во-первых, давайте создадим функцию квадрата, который сможет делать многие вещи. Мы назовем ее Dot .
Еще одна вещь, которая здорово помогает при работе с движущимися объектами, это векторы, вместо использования отдельных переменных х и у .
В этих примерах кода, которые я подтянул из Three.js, есть класс Vector2 . Намного проще использовать сразу vector.x и vector.y , но этот класс также содержит несколько удобных методов. Для получения более подробной информации вы можете ознакомиться с документацией .
Всемогущая Dot
В этом примере все уже немного сложнее, потому что это взаимодействия с объектами, но оно того стоит. Посмотрите пример кода, в котором вы увидите новый объект Scene, который управляет рисованием на холсте.
Наш новый класс Dot будет работать с этим объектом, чтобы получить доступ к переменным, которые ему будут нужны, например, к контексту холста:
Чтобы приступить к разработке конструктора для Dot , настраиваем конфигурацию его поведения и устанавливаем некоторые переменные, которые мы будем использовать. Опять же, с помощью класса векторов Three.js .
При выводе содержимого с частотой 60 кадров в секунду, важно предварительно инициализировать объекты, а не создавать новые во время анимации. Потому что это съедает ресурсы памяти и может привести к прерывистой работе анимации. Кроме того, обратите внимание, как в Dot через ссылку передается копия scene . Это помогает поддерживать чистоту кода:
Все остальные части кода будут установлены в прототипе объекта Dot таким образом, чтобы каждый новый создаваемый Dot имел доступ к этим методам. Ниже я разберу все функции одну за другой:
Я обновляю код рисования из обновленного кода. Таким образом, значительно проще поддерживать код и увеличивать производительность объекта. Точно также в шаблоне проектирования MVC выделяется управление и логика представления. Переменная dt начинает изменяться каждую миллисекунду с момента последнего вызова обновлений.
Название хорошее, короткое и происходит от ( не пугайтесь ) производных исчислений. Это отделяет перемещение от скорости смены кадров. Таким образом, вы избежите замедления стиля NES , когда все станет слишком сложным. Если нагрузка будет слишком большой, из анимации выпадут некоторые кадры, но скорость останется той же самой:
Эта функция имеет немного запутанную структуру, но она удобна для визуализации. Она действительно потребляет много памяти. Переменная moveDistance устанавливается один раз и может повторно использоваться в любое время при вызове функции.
Этот вектор используется только, чтобы помочь вычислить новое положение, но не используется за пределами функции. Это первый элемент векторной математики, который мы использовали.
Сейчас вектор направления умножается на каждое изменение во времени, а затем добавляется к позиции. В конце концов, мы производим модульные действия, чтобы сохранить dot в пределах screen:
Дальше все просто. Получаем копию контекста из объекта scene , а затем рисуем прямоугольник ( или что вы хотите ). Прямоугольник - это фигура, которую, вероятно, быстрее всего можно нарисовать на экране.
Теперь я добавляю новый Dot через вызов this.dot = new Dot(x, y, this) в конструкторе scene, а затем в методе обновления основного пространства действия добавляю this.dot.update( dt ) и получаю масштабирование точки по всему экрану. ( Чтобы увидеть весь код в контексте, посмотрите исходный код к статье ).
Это хорошо, что у нас есть небольшая внутренняя конструкция с кодом, но она на самом деле не делает ничего особенно интересного. А вот цикл - это намного интереснее. В объекте рабочего пространства мы создадим новый объект DotManager .
Удобнее, если мы соберем этот функционал в отдельный объект, чтобы код был проще и чище, так как сам процесс у нас все больше усложняется:
Теперь вместо того, чтобы создавать и обновлять Dot , мы используем scene, чтобы создавать и обновлять DotManager . Для начала мы создадим 5000 точек:
Хорошо, это уже лучше, чем просто одна точка. Сейчас самое время приступить к добавлению кода к методу обновления для одиночной Dot . Все меняется, когда код объекта влияет на каждую точку на экране. Вот когда на вещи начинает действовать магия. Помните функцию синуса? Как насчет того, чтобы добавить сейчас небольшой волновой эффект?
Мы создадим переменную wavePosition для объекта Dot . В финальном процессе рисования мы добавим эту переменную к позиции относительно оси Y :
Помните, как в школе на скучных уроках рисовали в блокнотах разные рожицы? А затем, быстро перелистывая страницы, заставляли эти рожицы анимировать. Так и со скучными сайтами, под завязку набитыми нудной, но очень нужной информацией. Вот если бы туда тоже добавить пару кривляющихся рожиц! Это вполне осуществимо, если использовать gif анимацию:
Анимация на основе GIF
Формат GIF ( Graphics Interchange Format ) разрабатывался специально для внутрисетевого обмена растровыми изображениями. В недалеком прошлом он был основным форматом для изображений, размещаемых в веб-пространстве. Основные характеристики формата GIF :
- Способность сохранять изображения в 256 цветовой гамме;
- Малый вес изображения – это идеально подходило для первоначальной стадии развития всемирной паутины, когда скорость соединения с интернетом была намного ниже сегодняшних стандартов;
- Графические форматы в GIF хранятся построчно, поддерживая лишь определенную цветовую палитру ( 256 цветов );
- При этом один из 256 оттенков может быть помечен как прозрачный;
- Поддержка анимированных объектов.
Последний пункт списка и послужил новым толчком для роста популярности этого графического формата.
Создание gif анимации по сравнению с более современной технологией flash имеет несколько преимуществ. Главным из них является меньший вес графического объекта. Поэтому новой областью применения gif анимации стало создание рекламных объектов для интернета.
Сейчас на основе GIF построена большая часть контекстной и тизерной рекламы в интернете (тизеры, баннеры).
Гиф анимация позволяет создавать один графический объект, состоящий из нескольких обычных изображений ( кадров ), расположенных в определенном порядке. Анимация происходит за счет их смены с заданной очередностью и периодичностью. При этом чаще всего применяют цикличное повторение кадров анимации.
Благодаря нескольким изображениям полностью снимаются ограничения на использование лишь 256 оттенков цвета. Это связано с тем, что каждый из рисунков может содержать свою палитру. Уменьшение общего веса анимированного объекта достигается также за счет использования прозрачности, когда происходит лишь частичное изменение следующего кадра относительно предыдущего.
В следующем кадре прорисовываются лишь изменяющиеся части изображения. Остальные можно установить прозрачными, и для их отображения использовать первоначальный статический кадр.
Немного практики
Но все это теория, а хотелось бы на практике рассмотреть, как происходит создание анимации в формате GIF . Мы предвидели это, и подготовили маленький мастер-класс по созданию анимированного баннера.
Для демонстрации воспользуемся специализированным графическим редактором Easy GIF Animator . Как показывает опыт, большинство подобных программ имеют схожий пользовательский интерфейс и функционал. Поэтому показанный ниже порядок действий не будет сильно отличаться от того как сделать gif анимацию в других подобных графических редакторах.
- На стартовой странице программы нам предлагается выбрать тип задачи, который нужно решить. Мы воспользуемся « услугами » встроенного мастера по созданию баннера. Для этого нажимаем на пункт « Создание анимированного баннера »:
- На следующем шаге задаем размеры будущего баннера. Можно воспользоваться стандартными значениями, но мы введем свои параметры длины и ширины объекта:
- Затем мы настроили фон баннера. В качестве стиля заполнения выбрали градиент, установили его тип и основные цвета:
- В следующем окне мастера мы вводим текст для отображения, устанавливаем его размеры, шрифт и цвет. Из выпадающего списка выбираем эффект анимации в момент появления текста и его исчезновения. А также устанавливаем время всего периода. Обратите внимание, что таким образом можно настроить эффекты для нескольких фраз ( до трех ). Они располагаются на отдельных вкладках (« Текст 1 », « Текст 2 »):
- До того как создать gif анимацию, осталось лишь сохранить файл баннера в нужном нам месте. Что и предлагается сделать в следующем окне:
- После закрытия мастера и сохранения баннера перед нами открывается рабочий интерфейс приложения. Обратите внимание, что слева наша анимация представлена покадрово. И каждый из кадров можно отредактировать отдельно:
Ссылка для скачивания архива с « полновесным » оригиналом будет приведена в конце статьи. А вот статическое превью того, что у нас получилось:
Как сделать анимацию из видео
С основами процесса мы немного разобрались. Теперь постараемся научиться тому, как сделать gif анимацию из видео.
Суть данной процедуры заключается в том, что для начала нужно « вытащить » из видео отдельные картинки. То есть разложить его на кадры. Конечно, можно делать это вручную с помощью сохранения нужного кадра в медиа плеере ( благо, многие из них это умеют ).
Но лучше воспользоваться специальной программой для извлечения видеокадров Free Video to JPG Converter . Как можно судить из ее названия, она сохраняет кадры видео в изображения в формате JPG .
Интерфейс приложения прост для понимания. Поэтому мы не будем останавливаться на его подробном описании:
После обработки видео утилита сохранит кадры в указанном вами месте. Подгонку всех изображений для будущей анимации нужно будет осуществить вручную с помощью любого графического редактора. Лучше всего, если это будет Photoshop .
На следующем этапе мы снова переходим в Easy GIF Animator . С помощью инструмента « Вставить изображение » добавляем в качестве кадра снимок из видео. После этого нужно настроить задержку для каждого анимированного кадра. А затем сохранить полученную GIF анимацию в виде файла:
Облегчить весь этот процесс можно, если воспользоваться встроенным « Мастером анимации ». Он доступен в программе через меню « Файл »:
Теперь продемонстрируем, что в итоге получилось у нас. Надеемся, ваше творение окажется не хуже, а даже лучше представленного ниже:
Отличительной особенностью программы Easy GIF Animator является ее направленность именно на сферу веб-разработки. Приложение позволяет не только создавать анимированные баннеры, но и генерировать для них простой hml код для вставки. Эта функция доступна через пункт основного меню « Инструменты »:
Надеемся, что после такого обширного экскурса вы познали всю мощь создания gif анимации.
Если нет, то попробуйте собственноручно сделать какой-нибудь прикольный баннер или маленькую анимированную кнопку и разместить у себя на сайте. Восторженные отзывы посетителей вам будут обеспечены!
Он рассказывал историю о том, как я создал законченный сайт без использования Фотошопа. В те дни Фотошоп был главным инструментом в вебдизайне. Но сейчас это не так. С тяжеловесного фото-редактора мы пересели на Скетч, который был сделан для создания интерфейсов.
Скетч был большим скачком вперед по сравнению с тем, к чему мы привыкли. Он улучшил процесс дизайна и сделал его более эффективным. Артборды были прекрасны и еще в нем не было лишней шелухи, не касающейся дизайна интерфейсов. Я был настолько восхищен им, что написал пост «10 трюков в Скетч для дизайнеров».
Хотя я очень люблю Скетч, я не считаю его идеальным инструментом, потому что он не решает реальную проблему.
Проблема в том, что мы, дизайнеры, все еще рисуем статичный дизайн для интерактивной среды.
В программах для статичного дизайна, таких как Фотошоп или Скетч, вы проводите большую часть времени создавая максимально вылизанные картинки, которые далеки как от реальности, так и от реализации. Статичные картинки не учитывают ограничений и особенностей браузеров, также, они не способны показать какие-либо движущиеся части.
К тому же, они не могут передать весь функционал. Взгляните на картинку ниже, она может показать лишь одно идеальное состояние того как выглядит и работает приложение. Конечно, вы можете нарисовать несколько артбордов в Скетче, чтобы показать еще одно состояние, когда что-то нажато, но вы никогда не сможете показать какое-либо взаимодействие.
Просто представьте как все это работает
И это при том, что носитель для которого мы все рисуем — интерактивный.
Новые инструменты для создания прототипов такие как: Invision, Principle или Framer (на самом деле их больше), конечно, помогли нам приблизится к интерактивности.
Но проблема этих инструментов состоит в том, что мы всего лишь раздуваем стэк дизайна, добавляя проблем, в то время как проделанная работа не приближает нас к реализации.
Также, я нахожу странным, что мы просим технологов (программистов) воссоздать то, что мы и так уже сделали в этих инструментах. Разве мы (команда) не проделываем работу дважды, заставляя технологов воссоздать наш дизайн в HTML и CSS?
Чтобы приблизить дизайн к реализации, дизайнерам следует как можно скорее переводить свою работу в браузер.
Я считаю, что для того что бы знать где все поломается, а где будет работать, вы должны видеть материал и взаимодействовать с ним в его естественной среде обитания.
Лично я обнаружил, что есть много преимуществ при переходе на браузер:
Не всем легко научиться кодить HTML/CSS/JS. Если есть желание учиться, я советую начать здесь.
Я знаю, что заголовок поста может немного ввести в заблуждение.
На самом деле я не думаю, что нужно совсем перестать дизайнить в Скетче. Скетч — прекрасный инструмент, позволяющий быстро набросать концепт того, что вы хотите создать. Но все же нужно переводить работу в браузер как можно раньше. Вышеупомянутые преимущества должны ответить на вопрос, почему.
В браузере Edge от Microsoft, установленном по умолчанию на устройствах с Windows 10, есть несколько новых функций, на которые хотелось бы обратить особое внимание, в том числе очень шустрый и безопасный движок рендеринга (который был доступен в качестве экспериментальной функции в сборке 9926) .
Но самая крутая новая функция — это рисование, то есть способность рисовать, писать и вообще размечать веб-страницы непосредственно в браузере. Вы можете поделиться своими заметками по электронной почте или через социальные сети. Также присутствует возможность сохранить ваши художества в OneNote.
Как начать рисование
Когда в браузере вы перешли на веб-страницу и захотели сделать отметку, щелкните маленький значок, который выглядит как ручка и бумага в верхнем правом углу окна. Там их немного, найти необходимый очень просто.
Веб-страница обновится, и панель инструментов будет выглядеть поверх обычной панели инструментов. С левой стороны панели инструментов можно увидеть пять значков: перо, маркер, ластик, текст и булавка. Инструмент «Перо» выбран по умолчанию, поэтому вы можете просто начать писать, если хотите (средней толщины, светло-голубые чернила). Если вы хотите изменить цвет пера, щелкните значок пера, чтобы выбрать один из 12 цветов и трех размеров.
Нарисуйте что-нибудь
Если вы предпочитаете ввод текста, можно использовать текстовый инструмент, чтобы комментировать веб-страницу. Для этого нажмите кнопку текстового инструмента, а затем щелкните в любом месте страницы. В этом месте появится пронумерованный штифт, а рядом с ним вы увидите текстовое поле, в котором вы можете ввести все, что хотите.
Если вы хотите убрать страницу, рекомендуем закрыть текстовое поле, нажав на пронумерованный вывод. Инструмент останется там, где он есть, но текстовое поле будет сведено к минимуму. Чтобы снова открыть текстовое поле, просто нажмите на него еще раз. Вы также можете переместить текстовое поле, нажав и перетащив пронумерованный штифт.
Чтобы удалить и вывод комментария, и текстовое поле, щелкните значок корзины в правом нижнем углу текстового поля. Одно замечание: при использовании текстового инструмента все маркеры «чернила» (перо и маркер) будут отображаться во всех текстовых полях.
Инструмент отсечения также превратит ваш курсор в перекрестие, чтобы вы могли вырезать часть страницы. Он работает аналогично инструменту Snipping Tool — щелкните значок инструмента, и страница исчезнет. Как только у вас есть выделенный раздел, вы увидите маленький значок в правом нижнем углу — щелкните его, чтобы скопировать участок (вы можете вставить его в другую программу (к примеру, Microsoft Paint) для того, чтобы сохранить.
Поэтапное удаление
Чтобы стереть всю страницу, нажмите кнопку инструмента «Ластик» во второй раз. Появится меню с вариантом: сбросить все чернила.
С правой стороны панели инструментов можно увидеть значок сохранения и значок общего доступа. Чтобы сохранить веб-страницу с вашими аннотациями, щелкните значок «Сохранить».
Чтобы поделиться своими художествами, щелкните значок общей папки, чтобы открыть боковую панель совместного доступа Windows 10. В верхней части боковой панели вы увидите имя вашего файла. Нажмите на него, чтобы выбрать, предоставлять ли общий доступ к вашему файлу в виде ссылки или скриншота. Под ним вы увидите список приложений и программ, которые вы можете использовать для совместного использования вашего файла.
Разработчики постоянно вносят корректировки в работу системы, поэтому заглядывайте чаще в наш путеводитель по Windows 10!
Читайте также: