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

Первая часть обзора

В этот раз расскажу о рабочих панелях. Если в общем, то все примерно такое же как в Иллюстраторе. Есть пара непонятных моментов, есть пара очень удобных штук, которых нет у больших конкурентов. Включить все или по отдельности можно в меню «View->Studio->...»

Недавно я решал задачу организовать все SVG-файлы, используемые в проекте, в виде одного спрайта. До этого мне приходилось использовать самописное решение для такой задачи. На этот раз я решил воспользоваться популярной библиотекой svg-sprite, однако был сильно удивлен сколько разных способов создания она предлагает. Какой-то единой статьи где были разобраны все способы я не нашел, вся информация была разбросана по блогам и отдельным публикациям. Поэтому я решил собрать доступные в библиотеке способы для генерации спрайтов в одном месте, попутно проанализировав их преимущества и недостатки. Итак, поехали.

Как вы пользуетесь иконками в keynote? Мало кто может похвастаться тем, что делает это без труда: иконки приходится либо качать в картинках и нудно обтравливать, либо можно скачать PNG (цвет которых невозможно поменять, и которые нельзя нормально отмасштабировать). Ну либо можно совсем заморочиться и при помощи специальных программ перегонять иконки по одной в закрытый векторный формат Keynote.

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

Страница проекта >

Скачать freenote можно тут.

Спасибо за внимание!

Уже некоторое время дизайнеры пользуются новой программой для векторной графики и иллюстраций — Affinity Designer. Это подробный обзор для любителей попробовать новое в работе.

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

Приветствую! Чем хороший логотип отличается от плохого? Об этом написана не одна тысяча статей, проанализированы сотни ребрендингов и даже есть целый бизнес-линч. Мы создаем платформу для разработчиков, поэтому наш логотип должен без труда узнаваться на конференциях, адекватно встраиваться в статьи и обучающие материалы, хорошо ложиться на общую концепцию облачной платформы для телефонии. Мне очень нравится логотип GitHub: симпатичная помесь осьминога и кошки импонирует разработчикам, при этом логотип можно легко видоизменять под разные задачи. По возможности я стараюсь заимствовать грамотные решения: для создания нашего лого я решил разобраться, с чем еще, кроме кошки, можно скрестить осьминога. Под катом — история разработки нового логотипа VoxImplant, от проверки концепта до ролл-ап стендов и наклеек на ноутбуки.

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

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



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

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

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

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

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

Этот перевод как бы дополняет мою предыдущую публикацию про 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

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

Итоговый выпуск иконок

Пять лет тому назад мы начали рисовать набор пиксельных иконок. Мода была на Vista. К концу 2013 года набор FatCow дорос до 3926 иконок. Это на 356 иконок больше, чем у Fugue, который весной того же года остановился на цифре 3570 (размер: 16х16). 352 иконки из бонуса Fugue (32х32 и 24х24) не в счет (как повторы). Но дальнейшее развитие иконок FatCow заморожено. Увы, мы не увидим круглой цифры из 4000 иконок (работы осталось на месяц), не увидим выпуска для ретины дополнительных размеров уже существующих иконок, разработки прекращены из-за отсутствия бюджета. Успели сделать пробу для retina и только.

Да, это не мега-фото-реалистичные-3D еще-одни-никому-не-нужные-иконки, это старая пиксельная школа. Где в почете был маленький размер и ограничение цветовой гаммы. Пройдут еще 10 лет… и, мы искренне верим, пиксельные иконки так и останутся в ходу. И если Вы ценитель древних видов искусства, дней зарождения компьютерной графики, пожалуйста за ширмой!

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

Такой вопрос поставили в 1990 году перед группой учёных, чтобы решить проблему долгосрочного обслуживания хранилища ядерных отходов Waste Isolation Pilot Plant (WIPP). Здесь применяется метод глубокого геологического захоронения отходов. Нормативный срок службы сооружения — 10 000 лет. После размещения капсул в соляной шахте на глубине 600 м и запечатки хранилища отходы можно оставить без обслуживания. Поскольку вода не проникала туда примерно 250 млн лет, можно осторожно предположить, что этого не случится ещё 200 000 лет, пока отходы опасны для жизни.

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

Для решения этой сложной задачи собрали рабочую группу. Очень интересно посмотреть на предложенные ими варианты.

Господа, хабровчане!
В течение долгих лет заключения Дюфрейн пробивал тоннель в стене камеры альпинистским молотком. Закрывая дыру плакатами с изображением знаменитых американских красоток, во время побега из тюрмы Шоушенка он пролез в подвал, пробил канализационную трубу и прополз по ней за ограду тюрьмы.
Пиксель — молоток Гасунса-Дюфрейна. Пять лет каторжного труда позади. Это последный релиз иконок FatCow, 3926 шт… Мы снимаем плакат с Монро-Мардж в белом платье над канализационным люком. Что мы видим? 1428 лего-кубиков, гигапиксельная панорама Спрингфильда на 22848 пикселей. Перед вами воссозданый в пикселях оголенный диван Симсонов на 89 слайдах, без звука. Через неделю готовы рассказать про the making of, а пока follow the white rabbit...

Приветствую хабросообщество. Хочу поделиться с вами одним из своих последних мини-проектов — генератором иконок по геоданным MIG. С его помощью можно сгенерировать векторные (SVG) и растровые (PNG) иконки, с заданными параметрами (цвет, размер, обводка и прочее).



Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.

Доброго времени суток! Сегодня я хочу поделиться шестью наборами социальных иконок ICON.PACK, которые отрисовал на днях. Все иконки разбиты на 6 групп, отличающихся по форме.

Этот пост предназначен для подготовленного пользователя Хабрахабр и ведущих аналитиков веб-агентств, работающих с Google Analytics.

Три недели назад хабраюзер centaurus опубликовал пост о своих великолепных котиках, который имеет на данный момент 475 плюсов, почти 100 тысяч просмотров и занимает почетное первое место на пятой странице “Лучших постов за всё время”.

Мы, коллектив Бурук, решили, что нельзя оставлять мохнатых котиков только для технарей и добавили их к нам в выдачу вариантов перелета.

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

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

Я надеюсь тут остались люди, которые помнят старый и ужасный на вид HabraPack? В последнее время я начал натыкаться на свои жуткие иконки на большом количестве сайтов и даже в терминалах оплаты местной компании, в разделе «Социальная сеть». Также, совсем недавно, знакомые попросили чуть обновить иконки, что я собственно и сделал.



Я буду обновлять иконки раз в день, большим количеством иконок. А пока можете СКАЧАТЬ и спокойно пользоваться, если вдруг найдутся люди, кому понравится.

.PSD файл прилагается.

Как правильно нарисовать иконку (размер 32х32, часть I)

Хочу предложить вашему вниманию урок по созданию иконок размером 32х32 в программе Adobe Photoshop. Данный урок позволит научиться рисовать иконки не прилагая много усилий – в итоге вы поймете что рисование иконок для интерфейсов не такая уж и сложная задача, нужно лишь запастись терпением, и знать представление о работе в программе Adobe Photoshop.

Итак, начнем! В первую очередь, чтобы иконки не выбивались из размера и были похожи по стилю, нужно сделать шаблон, на основе которого мы будем рисовать серию иконок.