Эффект перетекания создает серию объектов между двумя управляющими объектами. Управляющими объектами могут быть замкнутые и незамкнутые кривые или группа объектов. Если управляющие объекты совпадают по форме и цвету, то эффект создает серию из одинаковых копий, в противном случае происходит постепенное преобразование одного объекта в другой. Используя это интересное свойство инструмента, можно создавать объемные эффекты или объекты сложной формы. В настоящей статье мы рассмотрим технологию построения эффекта перетекания и приведем несколько примеров его применения.
1.98
Рейтинг
Работа с векторной графикой *
SVG и компания
Сначала показывать
Порог рейтинга
Уровень сложности
Сделайте слово красивым!
10 мин
37KТуториал
Шрифты как языковая графика в CorelDraw.
Вначале было слово! Язык, разговорная речь плюс абстрактное мышление превратили человека умелого в человека разумного. Письменность связала отдельные группы людей в Общество. А в человеческом обществе принято не просто общаться, а делать это красиво. Отправлять душевные СМС-ки, вывешивать привлекательные ярлыки, передавать красиво оформленные документы. При этом использовать в своих посланиях и работах шрифт, соответствующий месту и времени.
+6
Отрисовка персонажа в векторе
3 мин
65KТуториал
Вы нарисовали на бумаге персонаж и теперь его необходимо отрисовать в векторе? Тогда этот урок именно для вас.
+25
С днём 3D и прочей графики!
1 мин
13KВ теперь уже довольно далёком 1998 году третьего декабря впервые был отпразднован «день 3D». Это единственный день в году, который начинается с аббревиатуры 3D — 3 December.
+43
Истории
Схема пригородного движения ж/д сообщения Москвы и МО на Canvas
2 мин
22KЕщё одна схема движения железнодорожного транспорта с использованием возможностей Canvas и dbCartajs.
В оригинале она называется Moscow Underground and Commuter Rail Map, её можно видеть в тамбурах подмосковных электричек. Изначально я хотел реализовать именно эту карту в качестве очередного демо к проекту dbcartajs, но в Сети нашёл лишь копию карты, снятую на мобильный телефон с неважным качеством. Зато с легкостью нашел с десяток схем Московского метро. Самая красивая, на мой взгляд, в Википедии, самая неказистая оказалась почему-то у Яндекса с его-то возможностями. Собственно SVG-вариант из Википедии я и переделал под Canvas, о чем писал в предыдущей статье.
В оригинале она называется Moscow Underground and Commuter Rail Map, её можно видеть в тамбурах подмосковных электричек. Изначально я хотел реализовать именно эту карту в качестве очередного демо к проекту dbcartajs, но в Сети нашёл лишь копию карты, снятую на мобильный телефон с неважным качеством. Зато с легкостью нашел с десяток схем Московского метро. Самая красивая, на мой взгляд, в Википедии, самая неказистая оказалась почему-то у Яндекса с его-то возможностями. Собственно SVG-вариант из Википедии я и переделал под Canvas, о чем писал в предыдущей статье.
+18
«Корел», Эшер, «Фотошоп»…
6 мин
21KТуториал
Графическое движение: тесселяции своими руками.
Иногда, когда я рисую, мне кажется, будто я медиум, находящийся во власти существ, порождённых моим же воображением. Рыбы становятся птицами. День ночью. Из хаоса рождается жизнь, она замирает в мёртвых городах, трансформируется в шахматную партию и рассыпается в пыль. Мозаика оживает и превращается в ящериц, они движутся, живут и вновь уходят в орнамент.
Мауриц Корнелис Эшер
Автор эпиграфа — нидерландский художник-график, известный концептуальными литографиями, гравюрами на дереве и металле, в которых мастерски исследует пластические аспекты понятий бесконечности и симметрии.
Как ни абсурдно, несколько проведённых от руки линий могут выглядеть, как объёмная фигура. Такова особенность психологического восприятия человеком сложных трёхмерных объектов. Эшер добивался простыми средствами поразительного эффекта. А если бы в его распоряжении были все средства современной компьютерной графики? Как говорил он сам: «Если бы вы только знали, какие видения посещают меня в ночной тьме… Иногда моя неспособность сделать их зримыми буквально сводит меня с ума».
Имея последние версии «Корела», «Пэйнта» или «Фотошопа», можно пойти другим путём. И предстанут перед нами иные метаморфозы…
+30
Retinafy everything
2 мин
3.9KПочему стоит задуматься о векторной графике уже сейчас?
Retina-дисплеи (спасибо Apple за удобный маркетинговый термин) уже стали частью нашей жизни. Если вы web-разработчик/дизайнер, и вы не учитываете, как ваша работа отображается на экранах с высоким разрешением, то вы серьезно выпадаете из современных трендов.
Retina-дисплеи (спасибо Apple за удобный маркетинговый термин) уже стали частью нашей жизни. Если вы web-разработчик/дизайнер, и вы не учитываете, как ваша работа отображается на экранах с высоким разрешением, то вы серьезно выпадаете из современных трендов.
+6
Behance – сообщество креативных профессионалов со всего мира
2 мин
142KRecovery Mode
Среди российских дизайнеров, иллюстраторов и фотографов очень много действительно талантливых ребят. Возможно, многие из них знают о существовании Behance. Я написал этот пост с целью привлечь на ресурс больше наших соотечественников, чтобы на мировой арене дизайна и креатива Россия была представлена в ярком свете.
Запуск Behance состоялся в 2006 году, проект является крупнейшим сообществом и источником вдохновения для людей творческих профессий. В 2012 году компания Adobe купила Behance и произвела тесную интеграцию платформы со своим сервисом Creative Cloud.
Запуск Behance состоялся в 2006 году, проект является крупнейшим сообществом и источником вдохновения для людей творческих профессий. В 2012 году компания Adobe купила Behance и произвела тесную интеграцию платформы со своим сервисом Creative Cloud.
+7
Карта метро Москвы на Canvas
1 мин
36KИдея попробовать нарисовать карту появилась после просмотра карты метро в Википедии в формате SVG. В Firefox она открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго. Стало интересно, а в Canvas она тоже будет тормозить? Решил нарисовать свою версию карты метро Москвы в качестве очередного демо для проекта dbcartajs.
+27
Звездное небо на Canvas
2 мин
10KВ этой статье я хочу более подробно рассказать о примере Starry Sky (Звездное Небо), реализованном с помощью скриптов dbcartajs (о них написано в предыдущей статье). Он включает в себя идеи других «звездных» проектов, которые были портированы на JavaScript. Рассмотрим их подробнее. Алгоритм формирования звездного неба был позаимствован из проекта Marble KDE (плагин stars), расчет положения планет построен на основе замечательной статьи шведского астронома Поля Шлетера, модель движения космических аппаратов SGP4/SDP4 предоставлена модулем satellite-js, формулы солнечного терминатора (ночной зоны) взяты с астрономического форума. Вид орбит как эллипсов (мгновенная орбита) подсмотрен у Сelestia.
+5
Карта с проекциями из Proj4js на Canvas
2 мин
7.7KРешил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbcartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер.
+9
Интерактивный глобус — SVG versus Canvas
6 мин
51KТуториал
Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:
А как создать свой собственный Мир с материками и океанами можно узнать под катом.
А как создать свой собственный Мир с материками и океанами можно узнать под катом.
+54
Интерактивная SVG картограмма с помощью d3.js
7 мин
91KТуториал
Приветствую вас, хаброжители! Сегодня я расскажу вам как сделать интерактивную SVG картограмму при помощи d3js.org, о возможностях этой JavaScript библиотеки в общем, а также придётся немного разобраться в том как и где лучше хранить геоинформацию для веба. В финале мы получим следующее:
Начать сие увлекательное путешествие можно под катом.
Начать сие увлекательное путешествие можно под катом.
+71
Ближайшие события
Больше событий в календаре
Маркетинг
Другое
Больше событий в календаре
Разработка
Другое
Больше событий в календаре
Разработка
Больше событий в календаре
Менеджмент
Другое
Больше событий в календаре
Разработка
Администрирование
Менеджмент
Больше событий в календаре
Разработка
Больше событий в календаре
Менеджмент
Маркетинг
Больше событий в календаре
Разработка
Менеджмент
Больше событий в календаре
Разработка
Восстановление битого файла Coreldraw
1 мин
28KПройдя двухчасовой путь от «что делать» до «фуух», решил поделиться с хабражителями способом восстановления совсем убитого файла Coreldraw после краша этой программы.
Мы рассмотрим самую неприятную ситуацию.
Итак: вы работаете в Coreldraw, автосохранение и резервные копии включены, идет 2 или 5 час работы, и тут внезапно корел падает. В нашей ситуации корел, агонизируя, перетер все темпы и резервные копии. У вас только ваш файл, при открытии которого вы видите пустой лист.
Мы рассмотрим самую неприятную ситуацию.
Итак: вы работаете в Coreldraw, автосохранение и резервные копии включены, идет 2 или 5 час работы, и тут внезапно корел падает. В нашей ситуации корел, агонизируя, перетер все темпы и резервные копии. У вас только ваш файл, при открытии которого вы видите пустой лист.
+55
Анализ применения SVG в качестве background-image
2 мин
47KВ последнее время все чаще появляются статьи, в которых авторы рекомендуют использовать SVG для backgroud-image. Действительно, применение SVG приносит большую пользу. Во всех прочитанных статьях очень вскользь упоминалось про производительность отрисовки SVG, что это более затратная операция, так как браузеру необходимо каждый раз заново отрисовывать растр.
И вот в один прекрасный день, открыв одно веб-приложение, я заметил, что мой браузер безумно «пожирает» память — одна вкладка «ела» около 600 МиБ. На МacBook с ретиной дела обстояли еще хуже. С этого момента началось расследование, куда же течет память. Кому интересно, добро пожаловать под кат.
+43
Головоломка Mercator для знатоков географии
1 мин
72KВ этот пятничный день компания Google выпустила географический паззл Mercator в качестве примера использования Google Maps API. Нужно положить кусочки суши в соответствующие места на карте, учитывая развёртку сферы на плоскость — проекцию Меркатора. Как известно, в такой проекции масштаб на карте не является постоянным, а увеличивается от экватора к полюсам как обратный косинус широты. Соответствующим образом пересчитываются SVG для каждого элемента паззла.
+77
Настройка Inkscape для работы с черно-белой графикой
3 мин
25KТуториал
Я с детства неровно дышал к туши и перу. С момента появления планшета подыскивал графический редактор, который бы умел:
- работать с планшетом, реагировать на силу нажатия пера;
- работать с вектором, чтобы не приходилось думать о масштабировании;
- быстро переключаться между чёрным и белым (или чёрным и ластиком);
- удобно масштабировать изображение для проработки мелких деталей;
- поддерживать работу со слоями и группами.
Восторгу нет предела! Недавно я обнаружил, что всё вышеперечисленное можно найти в бесплатном лёгком редакторе Inkscape.
Вкратце расскажу свой рецепт настройки редактора для рисования схем, эскизов, и другой чёрно-белой графики.
+33
Cила CSS поможет тебе принять форму, SVG!
8 мин
106KТуториал
Нам нужно:
- Установить на сайте собственные иконки с помощью SVG.
- Они должны управляться с помощью CSS (форма, размер, заливка, эффекты в том числе и их поведение).
- Они должны иметь маленький вес и находиться в одном месте для экономии http запросов.
- Работать во всех основных современных браузерах.
демо
+48
Немного о создании демок, часть 1
8 мин
17KТуториал
Здравствуйте!
Эта статья, прежде всего для новичков, тех, кто только решил заняться демосценой, если статья будет положительно принята сообществом, то я сделаю цикл из нескольких статей о создании демок. Каждая статья будет короткой, но в конце каждой статьи будет вполне рабочий пример.
Сразу предупрежу, эта статья не о том как делать Demo с помощью OpenGL, DirectX, и миллионов шейдеров, об этом есть много хороших статей, я буду писать о рисовании в памяти.
Эта статья, прежде всего для новичков, тех, кто только решил заняться демосценой, если статья будет положительно принята сообществом, то я сделаю цикл из нескольких статей о создании демок. Каждая статья будет короткой, но в конце каждой статьи будет вполне рабочий пример.
Сразу предупрежу, эта статья не о том как делать Demo с помощью OpenGL, DirectX, и миллионов шейдеров, об этом есть много хороших статей, я буду писать о рисовании в памяти.
+35
Шпаргалка по фильтрам Inkscape
1 мин
17KТуториал
Представляю сообществу шпаргалку по фильтрам Inkscape на русском языке. В шпаргалке приведены примеры использования всех векторных фильтров. Использовался Inkscape 0.48.4 с русской локализацией.
+33
Вклад авторов
bodyawm 366.0alizar 332.0Apostol 225.0roman_logo 199.4tangro 184.0arestov 164.0despoth 145.0KoGor 145.0grokru 133.0Refridgerator 132.0