13 заметок с тегом

дизайн

Схема общественного транспорта Кирова 2.0

Здесь можно рассмотреть крупнее: Схема Автобусов-2

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

Практически нереально разобраться

Я решил перерисовать всё заново, объединяя родственные маршруты в одну линию.

Это кусок из середины схемы. Вариант 2.13. Обратите внимание на красную, зелёную и голубую линии в правом нижнем углу.

Здесь видно, что в какой-то момент я решил делать линию, состоящую из нескольких маршрутов в два раза толще. (Коричневая кольцевая линия 88, т8 и т14 пока ещё тонкая.) Это немного улучшило читабельность.

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

Один и тот же участок. Здесь заметен костыль — (Кроме 3). Это проблема, когда из нескольких маршрутов, объединённых одной линией, один не останавливается на остановке.

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

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

Долго не мог определиться с тем, как подписывать маршруты на самих линиях. Итоговый вариант тоже не устраивает полностью.

Самый сложный вызов — это полностью переработанная развязка у площади Двадцатого Партсъезда.
Я схлопнул три остановки с одинаковыми названиями в одну мегаостановку. Перебрал все линии и постарался максимально упростить пересечения.

Выглядит всё равно как жесть, но прогресс очевиден.

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

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

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

Сверху — это старая палитра и первой версии схемы, по центру — новые цвета.

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

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

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

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

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

Ну и ещё несколько кусочков:

Здесь можно рассмотреть крупнее:
Схема Автобусов-2

Иоханнес Иттен «Искусство цвета»

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

Конспект книги «Искусство цвета»

2019   дизайн   Конспект   Цвет

Редизайн пакета для термобелья


Пришло время освежить упаковку, сделать её интереснее.

Старые пакеты выглядели так:

Смотрим, что сейчас творится на рынке, собираем ассоциации.

Пробуем:

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

Еще подход:

— Теперь слишком похоже на то, что было. Чёрная рамка — у нас что, траур?

Окей, дорабатываем:

— Уже лучше, нравятся яркие цвета и крупные подписи, полосочки на фоне тоже добавляют живости. Но чёрный логотип? Серьезно?

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

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

Было:

Стало:

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

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

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

Я потом расскажу отдельным постом, как это делается, пока вот картинка того, что получилось:

И кусочек покрупнее:

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

Как слои будут накладываться друг на друга:

Ну и итоговые макетики:

Пакеты из типографии:

Реалистичная тень в фотошоп. Улучшаем Drop Shadow

Есть в фотошопе пара приёмов, помогающих быстро улучшить стандартную тень, нарисованную с помощью Drop Shadow.


Нарисуем синий прямоугольник и добавим к нему эффект Layer — Layer Style — Drop Shadow

Стандартную фотошопную тень за версту видно:

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

(Вы же помните, что дополнительный цвет расположен на противоположной стороне цветового круга?)

Чтобы быстро получить дополнительный цвет нужно к значению Hue в пространстве HSB добавить 180. Если получилось больше 360, то 360 надо вычесть. Ну, то есть, просто поворачиваем координату на 180 градусов.

В нашем случае 222+180-360=42.
Уже лучше

Обычно тень затухает неравномерно. Вблизи объекта она более густая, затем резко угасает более чем вдвое и потом плавно сходит на нет. Чтобы сымитировать такое поведение, в свойствах тени есть инструмент Contour. Если ткнуть в него откроется окно с кривой распределения тени где левый нижний угол самый дальний от объекта, а правый верхний — ближний.

Чтобы сымитировать реалистичное распространение тени понадобится примерно такая кривая:

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

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

Не забудьте сохранить удачный контур, он еще не раз пригодится.

А вот, что вышло:

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

Я бы еще немного осветлил обе тени, но для наглядности оставим так

Это настройки для второй тени:

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

2018   Photoshop   дизайн   Советы   Тени
Ранее Ctrl + ↓

Вся лента постов