?

Log in

brakodelnya Below are the 10 most recent journal entries recorded in the "brakodelnya" journal:

[<< Previous 10 entries]

17th Aug 2016 г.
16:16

[Link]

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

Tags: , , ,

Leave a comment

30th May 2016 г.
18:19

[Link]

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


Люди будущего будут тусить в комариных облаках, но комары на них даже не сядут.

Tags: , , , ,

Leave a comment

17th Apr 2016 г.
12:30

[Link]

Навигация
В обычном супермаркете навигация такая:




А хочется вот так:




Tags: , ,

Leave a comment

26th Aug 2015 г.
12:33

[Link]

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











Tags: , , , ,

Leave a comment

23rd Mar 2015 г.
13:44

[Link]

Артдир




Илья Кукушкин
24 марта 2015


Здравствуйте.

Вы советуете рисовать пиктограммы в Фотошопе. Однако, когда выполняешь обводку контура, она получается «мягкой».


Скажите, как рисовать нормальные иконки. Покажите хотя бы на примере одной. До этого все пиктограммы рисовал в векторном редакторе.




Илья!

Я советую рисовать пиктограммы вектором в фотошопе в том случае, когда пиктограмма будет использоваться на экране. Если сразу делать растр, то при масштабировании линии размоются и перестанут попадать в пиксели. А рисовать ещё где-то нет смысла: всё равно потом импортировать в макет в фотошопе.

Начнём с того, что проблема «мягкой» обводки решается настройками контура:




Теперь можно нарисовать что-нибудь. Мне как раз нужна иконка газеты.

Сначала я изучаю изображаемый объект. Пропорции подсказывает гугл:




Особенности подмечаю на том, что есть под рукой:




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


Чтобы узловые точки прилипали к пиксельной сетке, нужно поставить галочку вот тут:

cmd+k

Для линий объектов, повёрнутых на угол не кратный 45°, прилипание к сетке может оказаться вредным, поэтому клавиши [cmd] и [k] могут быстро затереться :-)



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


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



Добавляю деталей. Проверяю, укладываются ли 6 колонок так, чтобы поля газеты были равными (У меня случайно получилось, что — да. Иначе пришлось бы сделать газету на пиксель шире.)





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


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


Уменьшаю до нужного размера и каждую букву загоняю в пиксельную сетку:




Наполняю газету контентом:





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

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


Честно говоря, мне даже просто вот так нравится:



Я ещё подумаю какой вариант выбрать. На сегодня всё.

Присылайте ваши дизайны на artdir@brakodelnya.ru
Публикации нестабильно выходят по понедельникам на brakodelnya.ru/artdir

Tags: , ,

4 comments |Leave a comment

23rd Dec 2014 г.
12:24

[Link]

План и реальность
01

Tags: , ,

Leave a comment

2nd Dec 2014 г.
18:58

[Link]

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

Вот 6 способов повышения эффективности чтения:

1. Читать медленнее
Человек не может читать быстрее, чем проговаривает текст про себя. 400 слов в минуту — предел. Всё дело в сублокализации. Чем быстрее читаешь — тем меньше информации осознаётся и запоминается.

2. Исписать книгу
Хорошо и правильно подчёркивать важное, писать комментарии к прочитанному, излагать тут же свои мысли.
Правильно прочитанная книга выглядит вот так:
book

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

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

6. Выйти из зоны читательского комфорта
Полезно разбавлять узконаправленное чтение какой-нибудь литературой из совершенно другой области. Много читаете про маркетинг — возьмите в библиотеке биографию Стивена Хокинга. Читаете много биографий — купити фэнтези. Самая говёная книга, как минимум научит ценить то, что раньше казалось обычным.

Ещё есть правило 50 страниц. Смысл в том, что если книга не успела зацепить за 50 первых страниц, от неё нужно избавиться. Без сожалений.

Tags: , ,

Leave a comment

28th Nov 2014 г.
21:36

[Link]

Знаки и символы. Попадание в пиксели.

Никто не хочет покупать товар в грязной или мятой упаковке. В графическом дизайне мятость продукту придаёт вялый вектор, а грязь — плохие пиксели. Сегодня я расскажу о том, как сделать пиксели хорошими.

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

Выражение «попасть в пиксели» означает, что векторная линия толщиной в один пиксель отображается на экране ровно однопиксельной. Так как векторные линии даже не подозревают о существовании пикселей, так бывает не всегда:

01

С появлением ретиновых мониторов попадать в пиксели стало вдвое важней, чем раньше.
Вот так выглядит однопиксельная линия на простом мониторе:

02


А так выглядит линия на ретиновом мониторе:

03

Нет оправдания тому, кто вместо одного аккуратного пикселя предлагает владельцам ретиновых мониторов четыре пикселя грязи.

Теперь разберём на более жизненном примере. Вот иконка с сайта ЛидМашины:

04

Слева — омерзительная размазанная каляка-маляка. Справа — прекрасная чистенькая иконка. Из-за того, что на первой иконке вектор не попал в пиксели, все линии размылились, причём каждая по-своему, а у правой колбы горизонтали вылезли за стенки сосуда:

05

Но самое ужасное — это не попавшие в пиксели измятые круги в левой колбе:

06

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

Второе, что нужно знать: пиксель — не минимальная толщина линии на экране. Бывает и полпикселя. Вот три ручки с разной толщиной штриха:
07
Но на самом деле толщина линий на этой картинке одинаковая. Отличается только степень прозрачности.
08

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

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

09

У левого скелета выносные линии — огромные толстые брёвна. Они больше мешают, чем помогают. Линии среднего скелета попали в пиксели, но они всё ещё визуально тяжелей самих подписей и привлекают к себе слишком много внимания. У правого скелета однопиксельные линии с 15-процентной непрозрачностью.

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

Простое правило номер два: любой графический элемент должен быть явным настолько, чтобы выполнять свою функцию, но не более того. Об этом же нам говорит принцип минимального различия («smallest effective difference» Тафти).

P. S. Статья опубликована в учебке ЛидМашины

Tags: , ,

1 comment |Leave a comment

30th Jun 2014 г.
03:13

[Link]

Почему знак рубля такой клёвый?
Всё дело в том, что он совершенно логично построен и как будто сам вырос из кириллицы.

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

1. Что брать за основу?
Символ валюты должен быть шириной с цифру, для удобства табличного набора (Обратите внимание, что почти во всех шрифтах ширина букв разная, а цифр — одинаковая. Это сделано специально, чтобы цифры в столбцах выравнивались по разрядам).
alignment

Значит никаких лигатур и двойных букв.

Исторически сложилось, что знак валюты — это заглавная буква с двойным зачёркиванием (почему так — чуть ниже), следовательно знак рубля должен основываться либо на «Р» либо на «R».
Над нашим алфавитом издевались все, кому не лень. Его уродовали Петровскими дыбами и кололи пролетарскими штыками. И вот пришло поколение шрифтовиков, которые полюбили своего уродливого сына и приняли его. Приняли свои буквы, стали ухаживать за ними, гладить, облизывать и хорошо кормить.
Хватит ненавидеть свой алфавит — знак рубля должен основываться на кириллице.

2. Как сделать из «Р» знак валюты?
Первым знаком валюты был доллар. Знак слизали с древнеримского Сестерция — серебряной монеты достоинством два с половиной фунта. Она так и обозначалась двумя символами: ll и S (Semis — половина).
Остальные символы валют созданы по образу и подобию доллара — буква+двойное зачёркивание: €, ₤, ¥, ₮ (Евро — исключение, но об этом позже).
Следовательно, знак рубля — это дважды перечёркнутая «Р».

3. Как и где перечеркнуть?
Выбор простой: Р+ll, либо Р+=. Есть, конечно, вариант зачеркнуть по диагонали, но во-первых, диагонали утяжеляют знак, а во-вторых, диагональное зачёркивание — это запрет, отрицание.
Все вертикальные штрихи букв толще горизонтальных (так получилось из-за особенностей инструментов, которыми изначально писались все буквы). У буквы «Р» уже есть толстая вертикаль (в отличие от S, кстати), добавлять ещё одну — бред, а две — тройной бред (в графике, в отличие от математики 1+1=3. Я расскажу об этом в будущих постах).
Значит, зачёркивать нужно по горизонтали. При этом верхнее зачёркивание сливается с нижней частью полуовала «Р». Следовательно, верхнюю горизонталь просто не нужно продолжать вправо и всё.

Ах да, можно же перечеркнуть в верхней части! Ой, нет, такой знак уже есть — это песо ₱

И вот мы получили ₷

А теперь самое вкусное:
Знак рубля круче всех на свете обозначений валют.


Символ евро нарисовал Артур Ейзенменгер (главный дизайнер Евросообщества). Но он и не думал делать знак валюты. Он нарисовал € как символ евростандарта (потому и использовал знак равенства). Спустя много лет Еврокомиссия выбрала его из тридцати других знаков, как знак валюты и до сих пор никому не рассказала об авторе символа. Причём изначально Еврокомиссия стандартизировала начертание символа, сделала из него не шрифтонезависимую гибкую графему, а логотип. Просто евробредятина.
euro

$
Сейчас почти во всех шрифтах знак доллара перечёркнут не двумя, а одной линией. Всё дело в том, что в мелких кеглях и жирных начертаниях две линии превращают знак в кашу. Более того, вертикальные штрихи всегда толще горизонтальных (уже писал). Даже в шрифтах с постоянной толщиной штриха их делают чуть толще, для визуальной компенсации — глаз воспринимает горизонтали чуть толще вертикалей. Если посмотреть на любой знак доллара в жирном начертании, зачёркивание не подчиняется правилам инструмента — оно всегда тонкое и кажется чужеродным (либо стыдливо торчит по краям S).
dollar
или £
Символ фунта очень даже ничего, если бы не два но:
1. Знак невозможно написать быстро. Если не остановиться в нижнем углу — получится что-то невнятное, больше похожее на евро (у других ребят такой проблемы нет):
cursive
2. Знак используется для хреновой тонны разных валют. Причём сейчас принято, что £ — это фунт, а ₤ — это лира.
Ну и да, знак основан на букве «L», которая с трудом узнаётся. Хотя кого это волнует.


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



Знак рубля вырос сам собой. Его не нарисовал долбанутый на всю голову женоподобный монарх, желающий контролировать всё, от бород бояр до букв в алфавите. Он логичен и естественен.
pedestal

И напоследок про кириллицу:
До реформы языка 1918 года, в кириллистическом алфавите была буква «ять» — ѣ. Она до сих пор носит идеологию кириллицы. Из этой буквы делают бренды:
vodka
Она прекрасная и очень русская (я про букву, водку не пробовал).
Конечно же новый символ рубля никак с ней не связан, но когда видишь ѣ, родство ₷ с кириллицей становится совершенно очевидным.

Tags: , ,

Leave a comment

11th Jun 2014 г.
20:58

[Link]

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

Иконка-клякса:
Это любая иконка, сделанная одним цветом с незначительными деталями. По сути они передают только силуэт объекта - его тень. Они лучше остальных масштабируются, сохраняя узнаваемость. Лучший выбор для фавиконок, иллюстраций к закладкам в интерфейсах и навигации.
Прекрасный представитель стиля - Герд Арнц:
arnc

Аиговские навигационные иконки:
айга


Или вот ещё великолепнейшие китайские иконки:
Китай


Все олимпийские пиктограммы (за исключением олимпиады в Германии, 1936 года и зимних игр во Франции, 1968 и Италии, 2006) нарисованы в этом стиле:
Олимп


Карандашные иконки (или иконки-линии):
Такие иконки лучше проработаны, имеют больше деталей, а потому хуже масштабируются. Они рисуются линиями одной толщины (обычно максимально тонкими) и отлично подходят для графических интерфейсов, в том числе вэба. С появлением ретины стали очень популярны, благодаря повышенной чёткости линий.
Такие иконки, наравне с иконками-кляксам, отлично иллюстрируют пункты меню и всякие закладки и живут всюду в современных интерфейсах:
iphone


Более проработанные могут служить иллюстрациями к целым блокам текста на сайтах и ​​лендингах.
погода


Иконки с сайта ЛидМашины:
leadmachine
И просто отлично смотрятся вывороткой (светлым по тёмному):
золото


Именно такие пиктограммы использовались в первой графической операционной системе для Макинтоша. Хотя там и встречались исключения с заливками, где нарушался принцип постоянной толщины линий:
макинтош
Сейчас эти Макинтошевские пиктограммы отнесли бы к пиксельным (уверен, что кто-нибудь обязательно сделает скин с такими иконками, если ещё не сделал)

А вот у Винды принципа постоянной толщины линий вообще не было, поэтому (хотя, конечно, не только поэтому) все иконки первой Винды омерзительны:
выиграть
Пиксельные иконки:
Сейчас их не очень много, но я уверен, что скоро подход наберёт обороты (особенно при скрещивании стилей, но об этом позже).
пиксель
Поликолорные иконки:
Смысл в том, что в иконке используется от двух до пяти-шести плашечных цветов. Цвета контрастные и яркие. Такими иконками проще всего что-то брендировать:
поисковая оптимизация


Красно-бело-чёрные:
Главбух


Иконки видеоаппаратуры:
камера


Ещё один пример:
яма

И ещё один. Тут ещё и линии постоянной толщины (хоть и слишком толстые, для карандашного стиля):
цвет
А теперь самое мясо.
Объединяем карандашный стиль с поликолорностью и получаем бесконечное разнообразие:
Иконки линиями постоянной толщины в трёх цветах:
poliline
или вот:
shveycarmius

Или ну совсем карандашные иконки, но с залитыми фирменным цветом элементами:
Colorline

Оставляем от иконок-клякс общий толстый контур, а нутро прорисовываем тонкими линиями постоянной толщины (т.е. всего участвует две толщины линий) и вуаля:
boldline

Тут рассмотрен плоско-графический подход к пиктограммам.
Я совсем не написал об игровых иконках:
gameicons


О вот таком стиле, с трудом поддающимся классификации
colba

О всяких изометрических подходах (которые, к слову сказать, легко объединяются с другими стилями):
izometr

И даже про обожаемые мной фотореалистичные иконки ни слова:
photoreal

Tags: , , ,

4 comments |Leave a comment

[<< Previous 10 entries]

Powered by LiveJournal.com