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

Продолжаю тему разработки векторной (по координатам в градусах) карты для браузера dbcartajs. В новой версии библиотеки (v2) я перевел отрисовку объектов с канваса на svg. И переделал несколько примеров, в частности карту метро Москвы.

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

Предлагаю вашему вниманию перевод статьи «How To Become An Awesome Designer In 365 Days» автора Marko Stupić.

Одно из древних высказываний, которое меня мотивирует — “Практика ведет к совершенству”. Пословицы бывают банальны, но в определенных ситуациях попадают в точку. Я трудоголик по натуре, в чем, разумеется, есть и положительные, и отрицательные стороны. Одна из положительных сторон — я не могу дать себе передышку и ничего не делать целый день. С другой стороны, работа без отдыха и четких целей снижает мотивацию, и, несомненно, утомляет. Вот почему я решил довериться старой доброй пословице и попытаться стать лучше.



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

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

Чем я хочу поделиться, это моя история о том, как я начал свой путь, о личностном и профессиональном росте.

Часть 2

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

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

Геометрические инструменты

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



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

Немного геометрии

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

Для меня ни один детский опыт не принёс такой уверенности в собственных исследовательских возможностях, как геометрия.
— Ричард Бакминстер Фуллер

Наши чувства обрабатывают огромный объём информации. И лишь малая часть её замечается сознанием, поскольку мозг не может обработать бесконечный поток, генерируемый внешним миром. Из-за количества информации большая её часть усваивается подсознательно.

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

Часть 1

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

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

Человек изобретает вещи, навязывая форму природе. Человек открывает вещи, обнаруживая шаблоны природы.

— Алан Флетчер

Основное свойство шаблонов – повторяемость. Их можно читать, как истории. Человечество изучало язык природы для выживания. Периодическая миграция сдат, проход созвездий по небосводу и свойства различных почв – это всё примеры шаблонов, создающих ожидания, от которых мы зависим. Дизайнеры используют природные шаблоны, поскольку на них можно положиться. Биомимикрия важна не только для дизайнеров продукта. Графика, вдохновлённая биологией, может сделать логотип сильнее, ссылаясь на шаблон, известный на подсознательном уровне всем людям.

Взаимоотношения природных шаблонов и дизайна

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

От переводчика

Привет, %юзернейм%!

Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

Материал расчитан на новичков, и немного рассказывает о двух вещах:

1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

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

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание

• Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
• Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;

Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator

От переводчика

Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

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

Краткое содержание

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

Настройки Abobe Illustrator

1. Edit > Preferences > Units > General → Pixels
   Edit > Preferences > Units > Stroke → Pixels
2. Edit > Preferences > Guides & Grid > Gridline every → 1px
   Edit > Preferences > Guides & Grid > Subdivisions → 1px
3. Edit > Preferences > General > Keyboard Increment → 1px
4. View > Snap to Grid
   View > Snap to Point
5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator

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

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

В MIT компьютерная графика – это 3D алгоритмы, в некоторых учебниках – это сборник описаний популярных графических редакторов, в кино – спецэффекты, на телевидении – оформление экрана. Всё это – увлекательно и любопытно, но что же такое компьютерная графика?

В разное время мне доводилось работать и с анимацией, и с трёхмерной графикой, и с полиграфией, и с веб, и с видео, причём в весьма различных формах. Двадцать лет я так или иначе чем-то таким занимался и не жалею об этом. И все эти двадцать лет у меня из головы не выходила одна фраза научного руководителя лицея, где в середине 90-х я учился этой самой компьютерной графике:

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

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

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

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

Есть для дизайна специальные программы как Sketch, но они есть только на маках (а у меня их нет) и занимаются только дизайном, хотя судя по обзорам делают это хорошо (unix-way как-никак). А есть фотошопы, гимпы и прочие корелы, которые используют не по назначению, об одном из таких случаев и есть этот топик. Картинка для привлечения внимания (на дизайн не претендую, да и не считаю его лучше того что есть сейчас, просто картинка):

Борьба за внимание читателя/аудитории набирает обороты. Автор длительное время наблюдает за поведением людей на презентациях (сидя рядом) и слегка шокирован скоростью вхождения большинства индивидуумов в полусонное состояние.

Лекции о визуальном мышлении и разнообразные рецепты улучшения «перевариваемости» информации уже успели набить оскомину. Собственно, почему комиксы?

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

Группировка с использованием элемента <g>

Элемент <g> используется для логической группировки набора связанных графических элементов. Это можно сравнить с группировкой объектов в графических редакторах.

Элемент <g> объединяет в группу все свое содержимое. Как правило, ему задается идентификатор, по которому будет производиться обращение в дальнейшем. Любые стили, применяемые к элементу <g>, будут также применены ко всем его потомкам. Это позволяет задавать стили и преобразования, а также добавлять интерактивность и анимацию сразу целой группе объектов.

В качестве примера будем использовать нарисованную в SVG птичку. Она состоит из нескольких отдельных фигур, описываемых кругами и путями. [По невыясненным причинам автором описаны круги путями вместо использования circle, хоть и было обещано использовать круги. Не спрашивайте почему. Я это исправил. Не спрашивайте зачем. — Пер.]

Оригинальная версия старинной французской поговорки гласит: Le bon Dieu est dans le détail («Бог в деталях»). Собственно, неприметные на первый взгляд детали и отличают Sketch от многочисленных конкурентов. Давайте поближе взглянем на этот кладезь удивительных мелочей.

Давайте немного отвлечемся, и рассмотрим программу Sketch 3 с точки зрения удобства использования.

Итак, продолжим исследовать программу Sketch 3 с целью последующего свитчинга в нее из Фотошопа. Первую часть можно почитать здесь.

О программе Sketch я узнал еще год назад. Скачал демо тогда еще 2-й версии. Признаться, она меня совершенно не впечатлила. Какой-то слишком простой показалась. Я привык к навороченным интерфейсам софта от Adobe, а расположение панелей в стиле Apple iWork (Pages, Numbers, Keynote) мне по какой-то причине не нравится. К тому же мне оказалось комфортнее работать с темным интерфейсом, каковой нынче есть в Photoshop CC. Плюс Sketch 2 был достаточно кривоватый, содержал немало досадных багов, да и вообще впечатления не оказывал скоростью работы. В общем, поигрался с демкой и благополучно забыл. Впрочем, оказалось, что зря…

Более 2-х тысяч часов тестирования, более 500 исправлений и улучшений, 23 новшества (из которых 10 очень мощные) – за этими сухими цифрами стоит один год нашей работы и выпуск обновленной (без сомнения существенно более мощной) версии российской САПР-платформы nanoCAD Plus 6.0. Горды ли мы этим событием? Конечно! Нам уже почти 6 лет и все это время мы постоянно наращиваем функционал нашего детища. Не просто развиваем, но и активно расширяем пользовательскую базу – у нас уже полмиллиона пользователей! На наш взгляд, nanoCAD — это достойный ответ западным САПР; пример настоящего импортозамещения, о котором так много говорят сегодня.

Те, кто в курсе – может сразу переходить на страницу скачивания новой версии в torrent-сети либо на нашем сайте. А кого интересуют подробности – добро пожаловать под кат; расскажем про новшества.