Как стать автором
Обновить
1.24
Рейтинг

Работа с векторной графикой *

SVG и компания

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Вектор? Растр? А может — и то, и другое?

Блог компании RUVDS.com Работа с векторной графикой *Серверная оптимизация *Обработка изображений *Графический дизайн *
Перевод
На этой неделе я столкнулся с интересным классом задач, для решения которых, как я теперь понимаю, можно было использовать гораздо более удачный подход и раньше. Но существует ли такой подход?


Изображение для верхней части сайта

Речь идёт о подготовке изображения, рассчитанного на использовании в верхней правой части сайта jamstackconf.com. Мы, в маркетинговой команде Netlify, используем Figma. Первая моя попытка экспорта этого изображения для использования его на сайте оказалась далеко не самой удачной.
Читать дальше →
Всего голосов 38: ↑36 и ↓2 +34
Просмотры 4.7K
Комментарии 17

Новости

35 инструментов для веб-разработчика на каждый день

Блог компании HTML Academy Разработка веб-сайтов *Типографика *Работа с векторной графикой *Софт

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

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

Дисклеймер: подборка не претендует на полноту, но в комментариях собираем другие полезные инструменты.

Читать далее
Всего голосов 27: ↑25 и ↓2 +23
Просмотры 20K
Комментарии 15

Компактные Vue компоненты из самописных SVG иконок

Работа с иконками *JavaScript *Работа с векторной графикой *Системы сборки *VueJS *


История вопроса


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


Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом.

Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 3.2K
Комментарии 11

Кроссплатформенная растеризация SVG — сравниваем библиотеки и экспериментируем

Блог компании 2ГИС Работа с векторной графикой *Разработка мобильных приложений *Геоинформационные сервисы *Rust *
Из песочницы

На карте 2ГИС очень много картинок — те же знаки дорожного движения и логотипы компаний. Графические API, которые в наши карты предоставляют Android и iOS, обычно не могут рисовать векторную графику напрямую, поэтому нам приходится её растеризовать. А так как мы заранее не знаем нужный размер картинки и не можем её растеризовать до сборки ресурсов, используем растеризаторы.

И если для 2ГИС на Android и iOS мы можем использовать платформенные решения, то затаскивать их в Mobile SDK было бы, мягко говоря, не очень правильно.

Под катом — небольшая история, как работает растеризация в мобильных 2ГИС и какое решение мы выбрали для Mobile SDK

Читать далее
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 2.2K
Комментарии 6

Комплексные числа и геометрические узоры

Блог компании RUVDS.com Работа с векторной графикой *Алгоритмы *Математика *Графический дизайн *
Когда речь заходит о комплексных числах, в первую очередь вспоминают о преобразовании Фурье и прочих аспектах цифровой обработки сигналов. Однако у них есть и более наглядная интерпретация, геометрическая — как точки на плоскости, координатам которой соответствуют действительная и мнимая часть комплексного числа. Рассматривая некоторую кривую как совокупность таких точек, можно описать её как комплексную функцию действительной переменной.

Дальше больше картинок и анимаций
Всего голосов 106: ↑106 и ↓0 +106
Просмотры 14K
Комментарии 39

Лучшие инструменты для совместной работы творческих команд в 2021 году

Веб-дизайн *Работа с векторной графикой *Графический дизайн *Контент-маркетинг Дизайн

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

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 2K
Комментарии 2

Имитация акварельного рисунка при помощи процедурной генерации

Работа с векторной графикой *Графический дизайн *Дизайн
Перевод

В этой статье я объясню технику, используемую для создания «акварельных» генеративных изображений. Моё решение схоже с техниками, которые я описывал в статье Generating Soft Textures. Алгоритм не особо сложен. Концептуально он прост, но при этом хитро настроен.

Источник вдохновения


Я часто экспериментирую с акварелью в своём скетчбуке. Особенно мне нравятся безумно детализированные и разнообразные эффекты, которые способна создавать краска. Моё внимание привлёк один скетч, ставший источником вдохновения для разработки этой техники.

Моя задача не заключалась в реалистичном воспроизведении всех свойств акварели. Скорее, я хотел передать суть того, что мне в ней нравится.
Читать дальше →
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 2.4K
Комментарии 4

Digital Asset Lifecycle

Веб-дизайн *Работа с векторной графикой *Графический дизайн *Контент-маркетинг Дизайн
Из песочницы

С чего начать в управлении жизненным циклом цифровых активов и что это вообще такое?И ногие знакомы с понятием Управлен.

Сегодня я расскажу вам про методологию Управления жизненным циклом цифровых активов (Digital Asset Lifecycle), которая обычно включает в себя следующие этапы работы с креативами:

Читать далее
Рейтинг 0
Просмотры 383
Комментарии 0

Шаблон удостоверяющей печати, когда нужно правильно и не как у всех

Работа с векторной графикой *Дизайн
Из песочницы

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

Читать далее
Всего голосов 65: ↑64 и ↓1 +63
Просмотры 13K
Комментарии 86

Карта метро Москвы с расчётом пути

JavaScript *Работа с векторной графикой *HTML *Canvas *

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

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

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Просмотры 6.7K
Комментарии 14

Графика для JVM

Блог компании Маклауд Java *Работа с векторной графикой *Интерфейсы *Графический дизайн *
Перевод


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

Почему именно JVM?


Это производительность на достаточно высоком уровне, но не заставляет вас слишком много задумываться о каждом выделение памяти. Это кроссплатформенно. В нем есть отличные языки — Kotlin, Scala и, конечно же, Clojure. C # тоже подойдет, но в нем нет Clojure.

Разве вы уже не можете создавать десктопные приложения на JVM?


Вы можете. Но традиционно AWT, Swing и JavaFX сопровождались множеством недостатков в качестве и производительности. Они были настолько существенными, что только одной компании удалось создать прилично выглядящее приложение на Swing. Это возможно, но требует огромных усилий.

Разве не все пользовательские интерфейсы Java прокляты?


Нет, не совсем. У AWT, Swing и JavaFX есть свои проблемы, но это исключительно их проблемы. Нет фундаментальной причины, по которой невозможно создать высококачественный пользовательский интерфейс на JVM. Просто это еще не было сделано.

Почему это еще не было сделано?


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

Почему не Electron?


Первая причина — производительность. JS — отличный язык для создания пользовательского интерфейса, но он намного медленнее, чем JVM. Wasm может быть быстрым, но подразумевает C ++ или Rust.
Читать дальше →
Всего голосов 45: ↑35 и ↓10 +25
Просмотры 11K
Комментарии 30

Рисуем молекулы с помощью PostScript

Работа с векторной графикой *Химия

Векторная графика очень удобна для иллюстраций. Молекулы состоят из атомов соединённых связями. Хочется, чтобы операции редактирования рисунка химической структуры осуществлялись согласно физическому устройству молекул: выделил атом, перенес его, повернул фрагмент молекулы, подписал… Практически все визуализаторы атомных структур экспортируют вид в растр, что усложняет подготовку иллюстраций. В этой заметке я расскажу о способе отрисовки 3D структур в векторном формате, а также о том, как в этом поможет язык PostScript.

Читать далее
Всего голосов 23: ↑23 и ↓0 +23
Просмотры 2.5K
Комментарии 3

Паттерны Архитектурного проектирования (v.1.0)(Archicad)

Работа с векторной графикой *Работа с 3D-графикой *Проектирование и рефакторинг *Дизайн
Из песочницы

Всем добрый день.

Архитектура как отрасль очень сильно отстает от IT в плане инстурментов и методов разработки проектов. В IT давно есть среды разработки, а мы по прежнему создаем отдельные файлы и затем долго и нудно собираем их в один проект; ретроспективу после проекта некоторые основатели платных курсов называют своей уникальной методологией которую они придумали; и самое главное нету паттернов. Каждый раз в каждом проекте приходится подолгу объяснять одни и те же решения одних и тех же задач. И вот постепенно такая ситуация привела к решению что пора сформировать/сформулировать эти самые паттерны для архитектурного проектирования. Прежде всего описанные ниже паттерны применимы к разработке в программе Archicad.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 2.9K
Комментарии 4

Раскрашиваем треугольник программным способом

Работа с векторной графикой *Работа с 3D-графикой *Разработка игр *
Перевод

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

Я напишу обобщённый 2D-массив элементов типа uint32_t под названием colorBuffer, который может быть резервным хранилищем чего-то простого, например, выводимого в файл изображения, или буфером цвета окна SDL.

Задаём треугольник


Треугольник можно задать тремя точками, или вершинами. Каждая вершина имеет различные атрибуты; пока мы добавим каждой вершине только положение на экране.
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 2.5K
Комментарии 0

Как реализовать динамическую диаграмму для Vue на основе SVG

Блог компании SimbirSoft CSS *JavaScript *Работа с векторной графикой *VueJS *
Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при загрузке сайта. Делимся примером, как можно построить диаграмму из элементов SVG с помощью JS и CSS.

Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 3.7K
Комментарии 0

Опубликован Scheme Request For Implementation — 203: A Simple Drawing Language in the Style of SICP

Программирование *Работа с векторной графикой *Lisp *Функциональное программирование *

Structure and Interpretation of Computer Programs -- это один из самых известных учебников программирования в мире, на основе которого несколько десятков лет преподавался начальный курс программирования в MIT, а во многих унивеситетах, в том числе в Беркли, преподаётся до сих пор.

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

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

Читать далее
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 1K
Комментарии 0

Разбор: зачем нужны анимации на сайтах + 7 полезных инструментов и библиотек для их создания

Разработка веб-сайтов *Работа с векторной графикой *Компьютерная анимация *Интернет-маркетинг Дизайн


Источник: Dribbble

Анимации в вебе полезны в большом количестве ситуаций. В этом материале мы разберем, зачем конкретно они нужны, и какие инструменты создания анимированных сайтов стоит использовать в 2020 году.
Всего голосов 11: ↑6 и ↓5 +1
Просмотры 5.4K
Комментарии 20

Циркулярные кривые 2-го порядка

Работа с векторной графикой *Алгоритмы *Математика *
Как известно, кривыми Безье нельзя построить дугу окружности или эллипса. В этой статье рассматриваются кривые, лишённые такого недостатка.


Дальше будут картинки и анимации
Всего голосов 26: ↑26 и ↓0 +26
Просмотры 5.9K
Комментарии 7

Что случилось с фотостоками? Старожилы вытеснили новичков? Точка входа

Блог компании VDSina.ru Хостинг Работа с векторной графикой *Фототехника Удалённая работа


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

Личный опыт присутствует, ибо по сей день что-то лениво гружу на продающие площадки. Об этом и многих интересных тонкостях мы и поговорим далее.
Читать дальше →
Всего голосов 68: ↑62 и ↓6 +56
Просмотры 18K
Комментарии 26

Вклад авторов