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

дизайн

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

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

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

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

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


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

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

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

Пробуем:

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

Еще подход:

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

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

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

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

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

Было:

Стало:

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2018   Photoshop   дизайн   Советы   Тени

Кино по средам. Социология вкуса.

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

Ранее Ctrl + ↓

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