Все потоки

Векторная графика *

SVG и компания

СтатьиПостыНовостиАвторыКомпании

TashaFridrih 30 мая 2018 в 04:13

Делать или нет редизайн логотипов? Вот в чем вопрос

6 мин

6.3K

Блог компании ua-hosting.companyГрафический дизайн * Векторная графика *

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

Читать дальше →

+13

fokus-lop 24 мая 2018 в 17:29

Чем Figma лучше Photoshop для разработки веб-интерфейсов

5 мин

65K

Блог компании SkillboxГрафический дизайн * Векторная графика * Веб-разработка *

Огромное количество дизайнеров во всем мире в качестве инструмента для разработки веб-интерфейсов использует Adobe Photoshop. В этом нет ничего удивительного — Photoshop способен справиться практически с любой задачей, которая имеет отношение к графике.

Но как и все комбайны, инструмент от Adobe в некоторых случаях уж слишком неповоротлив и сложен. При решении специфических задач, включая разработку веб-интерфейсов, можно попробовать и другие инструменты. Среди прочих можно назвать Sketch, Adobe XD и Figma. Сейчас предлагаем поговорить как раз о последнем, остальные обсудим в следующих публикациях.

Читать дальше →

+30

psixodelkin 28 апр 2018 в 13:24

3 распространенные ошибки в дизайне, которые легко исправить

2 мин

14K

Блог компании ЛогомашинаГрафический дизайн * Векторная графика * Читальный зал

Recovery Mode

О рубрике #logomachine_help

Всем привет! В сообществе Логомашины ВКонтакте есть рубрика, в рамках которой мы даем подписчикам советы по дизайну. Мы показываем, что можно изменить в графике, чтобы дизайн выглядел аккуратнее и понятнее. Сегодня на примере участников нашей рубрики, рассмотрим, какие приемы могут освежить ваш дизайн.

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

1. Jam Music: убираем лишние элементы

Описание проекта и исходный логотип

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

До / после

Читать дальше →

+10

psixodelkin 20 апр 2018 в 08:45

Концепт: логотип для Екатеринбурга от «Логомашины»

3 мин

4.8K

Блог компании ЛогомашинаЧитальный залВекторная графика * Графический дизайн *

Recovery Mode

Введение

Логомашина вызвалась сделать логотип одному из российских городов из случайного списка.

Чтобы определить, какому городу достанется логотип, мы провели народное голосование. Из 18 городов в финал вышли Екатеринбург и Калининград, где с минимальным отрывом победила столица Урала.

Читать дальше →

0

m1rko 9 апр 2018 в 07:46

Отчаянный поиск квадрокруга

19 мин

31K

Графический дизайн * Математика * Векторная графика * iOS *

Перевод

Поиск таинственной математики, на которой основана фигура в iOS

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

В знаменитом интервью 1972 года Чарльз Имз кратко ответил на несколько фундаментальных вопросов о природе дизайна. Отвечая на первый вопрос, он определил дизайн как «план компоновки элементов для достижения определённой цели».

Остальные ответы тоже очень лаконичны, вплоть до метафор. Но когда Имза спросили о роли ограничений дизайна, он остановился и выдал самый длинный и самый продуманный ответ за всё интервью: «Один из немногих эффективных ключей к проблеме дизайна — это способность дизайнера распознавать как можно больше ограничений; его готовность и энтузиазм к работе в этих ограничениях».

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

Читать дальше →

+26

origama 4 апр 2018 в 07:30

Меловой леттеринг для «чайников» на примере работы над арт-объектом

11 мин

20K

Блог компании FUNCORPТипографика * Векторная графика * Графический дизайн * Брендинг

Это история личного опыта одного UX-дизайнера, который полюбил леттеринг ещё нечётко зная, что это такое.

Я расскажу о том, что такое леттеринг в современном дизайне на примере своей работы над арт-объектом; о трудностях, с которыми я столкнулась и как их решила; о грифельной краске и меловых маркерах. А ещё почему это «хорошо для бизнеса». И будет немного мотивации для дизайнеров, которые хотели бы встать со стула, но не знают как.

Читать дальше →

+24

psixodelkin 2 апр 2018 в 14:47

Логотип выборов за 37 миллионов VS. за 75 тысяч

2 мин

35K

Блог компании ЛогомашинаЧитальный залВекторная графика * Графический дизайн *

«Логомашина» представила свой концепт стиля «Выборов», сделав это в 500 раз дешевле

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

Читать дальше →

+26

inomdzhon92 2 апр 2018 в 12:58

Ограничение длины текста через градиент

7 мин

17K

Блог компании Space307CSS * Векторная графика * Веб-разработка *

Рассмотрим создание эффекта ухода текста в прозрачность как альтернативу обрезания текста многоточием.

Читать дальше →

+25

psixodelkin 30 мар 2018 в 15:45

3 распространенные ошибки в дизайне, которые легко исправить

2 мин

9.9K

Блог компании ЛогомашинаЧитальный залВекторная графика * Графический дизайн *

О рубрике #logomachine_help

Всем привет! В сообществе Логомашины ВКонтакте есть рубрика, в рамках которой мы даем подписчикам советы по дизайну. Мы показываем, что можно изменить в графике, чтобы дизайн выглядел аккуратнее и понятнее. Сегодня на примере участников нашей рубрики, рассмотрим, какие приемы могут освежить ваш дизайн.

Читать дальше →

+15

small-pro 30 мар 2018 в 03:10

Плавное масштабирование текста

25 мин

9.6K

Векторная графика * Delphi * Проектирование API * Windows *

Масштабирование текста – задача не столь тривиальная, как может показаться с первого взгляда. При простом изменении размера шрифта мы не можем получить плавного и пропорционального изменения ширины текста. Изменения происходят «скачкообразно», что сильно мешает в разработке разного рода редакторов, графиков, диаграмм, везде, где используется масштабирование.

Читать дальше →

+5

OsipovRoman 14 мар 2018 в 16:20

Программа для оцифровки графиков, чертежей, рисунков: алгоритмы проекта «Репетитор: математика»

7 мин

16K

Блог компании Trinity Digital & Баласс GroupЗанимательные задачкиМатематика * Программирование * Векторная графика *

Туториал

Содержание

Вступительное слово
Принцип работы
Описание программы
Финальный код программы
Преимущества работы с оцифрованными функциями на примерах
Эпилог

Вступительное слово

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

Для того, чтобы получить данные, нужно “оцифровать” такой график (или графический объект), другими словами, нужно получить набор абсцисс и ординат точек графика — далее над ними можно будет производить различные манипуляции: построить новый (качественный) график, производить вычисления, переведя его в новый формат (например, построив сплайн) и пр.

В проекте «Репетитор: математика» (почитайте статью на Хабрахабре — «Репетитор: математика» для подготовки к ЕГЭ и ВПР — от идеи до релиза. Рассказ об уникальном образовательном проекте) мы встретились с этой проблемой в двух основных видах:

“оцифровка” графика для того, чтобы сделать его соответствующим нашему стилю или просто сделать так, чтобы он выглядел прилично;
получение набора базовых точек для построения геометрических чертежей, гистограмм и пр. на основе авторского рисунка от руки (или с использованием простейших графических систем).

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

+6

m1rko 6 мар 2018 в 11:45

Этот SVG всегда показывает сегодняшнюю дату

2 мин

31K

JavaScript * Веб-дизайн * Векторная графика * Иконки *

Перевод

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

И вот он, SVG-календарь, который всегда показывает сегодняшнюю дату:

Фоновое изображение сделано на основе иконки Twitter TweMoji Calendar — CC-BY

Поддержка текста в SVG слегка неудобная, так что позвольте объяснить, как я это сделал.

Читать дальше →

+75

HARDSLIME 5 мар 2018 в 09:54

Dragon Bones: создание 2D персонажа и скелетная, mesh-анимация

5 мин

77K

Дизайн игр * Компьютерная анимация * Векторная графика *

Туториал

Добрый день, читатель! В этой статье рассмотрим процесс разработки типичного персонажа нашей дебютной игры Kidarian Adventures. Я продемонстрирую свою привычную структуру работы, однако, заострю внимание на создании анимации в Dragon Bones, приложу пояснения и самописные видео-туториалы.

+19

KoGor 19 фев 2018 в 11:35

Кольцевые столбчатые диаграммы в ассортименте

6 мин

7.2K

JavaScript * Визуализация данных * Векторная графика *

Туториал

Radial diagramms
Эволюционный подход в решении задач как нельзя кстати подходит для визуализации данных. Дивжение от простого к сложному, от одномерных данных к многомерным итерация за итерацией. В этой статье рассмотрим различные варианты круговых диаграмм, от самой простой одномерной до нестандартной самодельной многомерной. В качестве инструмента будем использовать D3.js. Всех заинтересованных прошу под кат.

Округлить диаграммы

+20

TanyaS 2 фев 2018 в 20:03

Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных

8 мин

58K

Веб-разработка * Векторная графика * CSS *

Перевод

Icons

Давно прошли те дни, когда для иконок в вебе использовались картинки и CSS-спрайты. С развитием веб-шрифтов номером 1 для отображения иконок на сайтах стали иконочные шрифты.

Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана. Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их. Например, повернуть (rotate), подчеркнуть (underline) или добавить тень (text-shadow).

Иконочные шрифты не идеальны, поэтому все большее число людей предпочитает использовать встроенные SVG-изображения. На CSS Tricks есть статья, где описаны моменты, в которых иконочные шрифты уступают SVG-элементам: резкость, позиционирование, сбои кросс-доменной загрузки, особенности браузеров и блокировщики рекламы. Сейчас вы можете обойти большинство этих проблем, что, в целом, делает использование иконочных шрифтов безопасным.

Да, еще одна вещь, которая абсолютно невозможна при использовании иконочных шрифтов: поддержка многоцветности. Только SVG может это сделать.

TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.

Читать дальше →

+26

AlfredStolyarov 21 янв 2018 в 20:51

Конвертирование из Sketch в PSD

4 мин

21K

Веб-дизайн * Дизайн мобильных приложений * Векторная графика *

Из песочницы

Конвертирование дизайн-макетов из формата .Sketch в .PSD

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

К сожалению, пользоваться этой артиллерией могут лишь обладатели компьютеров на платформе MAC OS. Продукты Adobe являются доминирующим инструментом для веб-дизайнеров, работающих под ОС Windows, но сильно уступают перед «Sketch». Исходя из этого, вопрос конвертации макета для просмотра на обоих операционных системах актуален как никогда.

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

Читать дальше →

+8

roman_logo 21 дек 2017 в 10:43

Помогаем доставке еды: редизайн логотипа и разработка фирменного стиля

3 мин

5.8K

Блог компании ЛогомашинаГрафический дизайн * Векторная графика *

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

В этот раз победителем стала доставка вкусной и полезной еды — Eat4health.

Eat4health использует логотип, а еще зеленый и оранжевый цвета — это неплохо, ребята стараются внести «брендовость» на точках касания с клиентом. Но все попытки Eat4health не доведены до конца: оттенки оранжевого и зеленого везде разные, как и шрифты.

Читать дальше →

+3

roman_logo 8 дек 2017 в 11:44

«Это хороший дизайн или нет?» — как я отвечаю на этот вопрос с помощью 3 категорий

3 мин

6.9K

Блог компании ЛогомашинаЧитальный залВекторная графика * Графический дизайн *

Когда ты — основатель студии, которая сделала больше всех логотипов в России, тебе достаются отнюдь не слава и женщины. Тебе достаётся толпа людей, которые показывают свои сайты и логотипы с вопросом: «Это хороший дизайн или нет?»

Вопрос довольно сложный, потому что в дизайне мало объективного и много вкусовщины. За годы работы я видел, наверное, миллион знаков, визиток и сайтов. Чтобы не сойти с ума, каждый раз погружаясь в детали дизайна, мне была необходима нативная и универсальная система оценки. И я её придумал.

Дизайн всегда про взаимодействие. Не бывает сферических логотипов в вакууме, бывают визитки, вывески, сайты. Всегда есть объект, с которым мы взаимодействуем: кладём визитку в карман, ищем ресторан по вывеске, заполняем форму на сайте.

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

Дизайн, который мешает взаимодействию

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

Хороший пример — эта афиша:

Афиша с сайта kapustadizain.ru

Читать дальше →

-1

roman_logo 7 дек 2017 в 09:06

4 распространенные ошибки в дизайне, которые легко исправить

5 мин

20K

Блог компании ЛогомашинаГрафический дизайн * Векторная графика * Типографика *

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

Залипание по цвету

Первая частая ошибка — так называемое «залипание по цвету». Самый простой способ проверить есть ли проблема с цветом или контрастом — перевести логотип в монохром. При использовании этого метода, сразу будут видны проблемные места, где форма сливается с фоном.

1. SledHelp

Нам в паблик прислали вот такой лого:

Читать дальше →

+13

anton_gcor 10 ноя 2017 в 11:03

Просто о D3.js

6 мин

91K

JavaScript * Визуализация данных * Векторная графика *

Туториал

70 тысяч звездочек на гитхабе и сотни интересных проектов. Кажется, что D3 это что-то большое и очень сложное, но это не так. Я расскажу об основах D3 и поделюсь опытом разработки инфографики Бюростат.

Читать дальше →

+34

1 2 ...

9

10 11 ...