Александр
12 февраля 2013

Добрый день!

Я давно знаком с Фотошопом. Но за время нашего знакомства мне так и не открылся один инструмент: не могу понять смысл кривых и принцип их использования. Известно, что Фотошоп – редактор, в котором одного и того же результата можно добиться разными методами. Пожалуйста, объясните на наглядном примере, в чём преимущество кривых, и как ими пользоваться.



Кривые — одна из важнейших фич Фотошопа.

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

Добавляем эффекты:

Так, кнопка получилась слишком маленькая:

Нет проблем, растягиваем:

Поскольку ни одного пикселя не нарисовано вручную, вся логика графического устройства кнопки сохраняется при разных манипуляциях:

С легкостью размножаем кнопки:

Крайние кнопки хочется превратить в стрелки. Подрисовываем недостающий кусок к левой, тени и обводки перерисовываются сами:

Такой же кусок приклеиваем к правой, заодно красим кнопку «Удалить» в красный (меняем пару параметров слоя):

Вот как вся конструкция выглядит в панели слоёв:


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

Перетаскиваем эффекты со слоя на соседние всей пачкой, а на красную кнопку — только новую тень и градиент:

Красную хочется ещё доработать напильником, но это другой совет :-)


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

Благодаря кривым, результат намного приличнее:


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

P. S.
Читатели и уважаемые советчики подсказывают, что, возможно, Александр спрашивал о тональных кривых, которые Curves. Что ж, эти кривые могут стать темой другого совета :-)
P. P. S.

Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Радомир Купфер
12 февраля 2013

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

Как дополнительный плюс в сторону кривых в проектировании веб-интерфейсов, с развитием стандартов ХТМЛ и ЦСС, появляется всё больше и больше возможностей переносить кривые как кривые напрямую в веб, минуя растеризацию. Благодаря этому, мы можем спокойно масштабировать элементы в зависимости от размера экрана пользователя, не парясь насчёт плохого качества изображения.

Денис Новиков
12 февраля 2013

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

Иван Титов
12 февраля 2013

Даже при рисовании фавыконок я предпочитаю использовать кривые. Это позволяет натурально передать форму фигуры и при этом сохранить хорошую резкость (за счёт точного попадания в пиксели).

Илья, по поводу кривых в Фотошопе давно мучает один вопрос: можно ли там нарисовать не фигуру, а незамкнутую линию? Векторные линии (например, созданные в Иллюстраторе) вполне себе живут в документе Фотошопа в виде смарт-объектов. Но как же их нарисовать без сторонних программ?

Александр Ким
12 февраля 2013

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

Алексей Баянкин
12 февраля 2013

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

Сергей Мелихов
12 февраля 2013

«Ручка» (Pen Tool) — самый лучший инструмент при отделениии объекта от фона. Форму обводки легко менять, а фон удобно не удалять, а прятать под векторную маску, чтобы можно было в любой момент отредактировать маску.

Артем Таныгин
12 февраля 2013

Одна из проблем кривых в Фотошопе — отсутствие нормальной возможности изменять радиус скругления углов. Хочу посоветовать отличный скрипт:
http://photoshopscripts.wordpress.com/…/02/03/corner-editor-photoshop-script

Установите, поставьте на горячую клавишу и будет счастье.

Денис Комарицких
12 февраля 2013

Полагаю, подразумевались другие кривые (Curves), которые тональные.

Михаил Озорнин
12 февраля 2013

Про те кривые, которые Curves, обстоятельно написал Павел Косенко:
http://pavel-kosenko.livejournal.com/297878.html

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

Сергей Якунин
12 февраля 2013

Думаю, наиболее сложный вопрос Фотошопа — работа с векторными элементами. Тонкость в том, что вектор (path) может быть использован только в качестве карты прозрачности слоя — т. н. маски слоя. Слой может быть любого типа — растровый слой, заливки или цветокоррекции. Плюс ещё можно набирать текст вдоль кривой.

Векторные элементы существуют в следующих ипостасях:
1) невидимый путь в панели Path — просто «склад» векторных элементов, плюс тут лежат пути для набора текста вдоль них;
2) фигура (shape layer) — слой заливки цветом с векторной маской (самый распространненый тип);
3) векторная маска слоя.

Кстати, в новых версиях Фотошопа векторная маска наложенная на слой заливки (фигура, shape layer) явно не видна в панели слоёв. Её нельзя удалить, а с удалением последней векторной точки удаляется весь слой. Это может запутать новичка.

Ещё один момент — векторный путь может содержать несколько кривых, причем они взаимодействуют. Одна кривая может быть выше другой: у кривых есть z-index. Он соответствует порядку их появления. Если нижнюю кривую вырезать и вставить (cut, paste), она будет выше всех остальных кривых — в пределах одного пути или векторной маски.

Камиль Кэмингтон
12 февраля 2013

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

Я всё же надеюсь, что Александр спрашивал именно про те кривые, про которые сказал Денис (Curves).

Евгений Решетов
12 февраля 2013

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

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

Никита Шеховцов
13 февраля 2013

Что мне понравилось в последнем Фотошопе и Иллюстраторе, это возможность переносить кривые туда и обратно без смарт-объектов, с возможностью редактирования.

Иллюстратор → Фотошоп: Выделяем фигуру, жмём Контроль+C, переключаемся в Фотошоп, жмем Контроль-V, всплывает меню вставки, выбираем шейп.

Фотошоп → Иллюстратор: Выделяем шейп по точками директ тулом, жмем Контроль+C, переключаемся в Иллюстратор, жмем Контроль-V, всплывает меню вставки, выбираем шейп.

Евгений Калмыков
14 февраля 2013

Кривые позволяют работать по отдельности с каждым каналом, учитывая, что в Фотошопе доступно 10 каналов + всевозможные подмешивания, то это очень гибкий инструмент. Но тут как с любым инструментом, нужно понимать, что вы делаете.

Про тональные кривые, есть очень хорошие книги Дэна Маргулиса:
http://www.ozon.ru/context/detail/id/1600903/
http://www.ozon.ru/context/detail/id/2807318/

Сравнить продуктивность разных подходов можно, почитав совет:
http://artgorbunov.ru/bb/soviet/20120711/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Недавно всплыло

7 Кто ты? 1 Как сделать плавный переход от общения с администратором к директору? 1 2