Рубрика «векторная графика» - 11

в 23:20, , рубрики: svg, веб-дизайн, Веб-разработка, векторная графика, метки:

Этот пост — первый из серии статей о SVG-графике (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.

Знакомство с SVG графикой

Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Демонстрация всех примеров / Скачать исходники / Официальная документацияЧитать полностью »

в 16:28, , рубрики: svg, векторная графика, обработка изображений, метки: ,

Векторная графика на рассеянных кривых
Векторное изображение на рассеянных кривых

Долгое время возможности векторной графики были ограничены только линейными и круговыми градиентами, в результате чего можно было создавать лишь «плоские» изображения с определённым набором фигур. Настоящим прорывом стали смешанные градиенты (gradient mesh), которые впервые сделали векторную графику фотореалистичной. Группа французских исследователей под руководством Александрины Орзан (Alexandrina Orzan) из Технологического института в Гренобле в 2008 году сделала следующий шаг на пути развития векторной графики. Они разработали инструменты для генерации векторной графики на рассеянных кривых (diffusion curves), в том числе программу для автоматической конвертации растровых изображений в векторные.
Читать полностью »

в 22:14, , рубрики: векторная графика, векторные иконки, иконки, Иконосказ, социальные сети, метки: , ,

Набор значков социальных сервисов в формате шрифта и россыпи SVG-файлов.
Сначала думал просто добавить в Графический фреймворк. Набор иконок социальных сервисов значок англоязычного VK.com и упаковать в шрифт для следующего проекта, но тут понеслось.

Grands icon fontЧитать полностью »

в 19:09, , рубрики: html, html5, html5 file api, javascript, svg, векторная графика, метки: , , ,

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

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Summer html image map creator
Читать полностью »

в 2:50, , рубрики: icecast, perl, векторная графика, графика, КодоБред, обработка изображений, процедурная генерация, метки: , , , ,

Если кому-то надо будет нарисовать юзербар, то он откроет GIMP (или любой другой графический редактор) и нарисует в нем несколько слоев со штрихами/градиентами и отблесками. А что если надо создать сразу много юзербаров? К примеру, генерировать новую картинку при смене трека на интернет-радио? В этой статье я поделюсь небольшой методикой как это можно сделать. Сразу скажу, что вся графика у нас будет процедурной и руками не нужно ничего рисовать.Читать полностью »

в 18:00, , рубрики: векторная графика, пицца, метки:

pizza

Перевод с английского: How to cook Pizza with SVG?

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

Читать полностью »

в 9:30, , рубрики: векторная графика, векторные иконки, иконки, Иконосказ, социальные сети, метки: , ,

image

Привет уважаемое читатели, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.
Читать полностью »

в 20:20, , рубрики: inkscape, векторная графика, переводы, метки:

Перевод с английского: Inkscape: optimization tips for web developers.

В этой короткой статье я поделюсь с вами несколькими полезными приемами работы с редактором векторной графики Inkscape, которые помогают ускорить процесс подготовки SVG-кода.

Читать полностью »

в 10:43, , рубрики: css, svg, Веб-разработка, векторная графика, спрайты

Картинки со спрайтами безудержно используются для скачивания массы значков и элементов интерфейса всех сразу, единственным HTTP-запросом. Однако они несколько обременительны в употреблении, так как приходится рассчитывать сдвиги и задавать их в background-position. Не получится добавить, убрать или переставить спрайты без такого пересчитывания. Или изменить размер спрайта без того, чтобы наткнуться на его соседа сбоку.

Как можно устранить эту проблему? Ну, положить всех их друг на друга, отключить их видимость, затем показать тот только спрайт, который нужен. Хотел бы я, чтобы это было возможно… и давно хотел… а затем случилось вот что (читайте снизу вверх):

[цитаты из микроблогов]

Ах, хорошо! И ужé работает в Файерфоксе. Такая же возможность запланирована к добавлению в Оперу: баг «CORE-37596» (я не мог найти общедоступной гиперссылки, к нему ведущей). Есть и альтернативы SVG-штабелям, лучше поддерживаемые браузерами: элементы embed, iframe, object или img — но я всё же предпочитаю фоновые картинки из-за того, что проще изменять их размеры и положение. Так что давайте надеяться, что поддержку SVG-штабелей добавят и другие браузеры.

Итак, как же работает SVG-штабель? На самом деле, весьма несложно. Поглядите в исходный код SVG-файла Эрика.

[вид SVG-файла]

Читать полностью »

в 10:46, , рубрики: css, ipad, браузеры, Веб-разработка, векторная графика, верстка, метки: , ,

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

Вопрос этот у меня возник не случайно. Есть интересный проект, заказчиками которого являются фанаты Айпадов и Айфонов. Им очень важно, чтобы сайт одинаково хорошо отображался и там и там. То есть ширина экрана плавает от 800 до 2000 пикселей в ширину.

Что нам делать с картинками в оформлении?

Да, сейчас все браузеры научились хорошо масштабировать сайты. Нажал Ctrl, покрутил скроллом, и твой сайт в том размере, как тебе удобно. Но если растровую картинку 30 на 80 пикселей увеличить в трое, красоты это не прибавит.

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

Я вижу 2 принципиальных решения:

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

2. Переход на векторную графику в оформлении сайта.

Читать полностью »

1...101112
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js