Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Вогнутая заливка

Вогнутые фигуры выглядят полыми или вдавленными и могут быть нарисованы, как линейные градиенты от темного к светлому (в противоположность выпуклым фигурам). Используя комбинацию нескольких фигур с градиентной заливкой, мы можем создать простой вид в каком-то измерении.

Рисунок 7.17. Выпуклые фигуры выступают наружу, выражены линейными градиентами от светлого к темному. Выпуклые фигуры выглядят приподнятыми, отлично подходят для кнопок

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

Рисунок 7.19. Вогнутые фигуры могут быть нарисованы как линейные градиенты от темного к светлому. Поперечное сечение (слева). Элементы с градиентной заливкой (справа)

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

Сферические фигуры

Сферические фигуры часто создаются радиальными градиентами. Радиальные градиенты начинаются от центра и перерастают в круговую диаграмму. В Photoshop центральная точка градиента может перетаскиваться мышкой по холсту, когда открыто окно задания градиента (для градиентных заливок) или когда открыто окно стилей слоя (для градиентов стилей слоя).

Для сферических фигур характерно отражение рассеянного света с поверхности ниже. Воспроизвести этот эффект возможно с несколькими незначительными изменениями градиентов. Использование фотографий и других исходников может помочь вам точно настроить величину контраста, который вам необходим для воспроизведения заданного материала (см. рис. 7.22).

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

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

Отраженные градиенты

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

Угловые градиенты

Угловые градиенты – это прекрасный способ имитации отражения окружающих предметов в металлических объектах. Как и у радиальных градиентов, центральная точка градиента может перемещаться в Photoshop при помощи мышки и курсора, когда градиентное окно открыто (для градиентных заливок) или когда открыто окно стилей (для градиентов стилей слоя).

Градиенты на градиентах

Комбинирование слоя заливки градиентом (Gradient Fill Layer) с градиентным стилем слоев (Gradient Layer Style) позволяет вам наложить два различных градиента, создавая более сложные и динамичные результаты. Чтобы соединить градиенты, вам нужно установить режим смешения для градиентов стилей слоя (Gradient Layer Style). Это позволит слою градиентной заливки (Gradient Fill Layer) проявиться через градиент стилей слоя (Gradient Layer Style). В примере, данном ниже, я использовал режим смешения Screen (хорошо для осветления) либо Multiply (хорошо для затемнения).

Рисунок 7.23. Центральная точка углового градиента может перетаскиваться курсором по холсту при открытом градиентном окне

Рисунок 7.24. Для комбинирования градиентов вам нужно установить режим смешивания для стиля градиентного слоя (Gradient Layer Style), т. е. Screen (хорошо для осветления) или Multiply (хорошо для затемнения)

Рисунок 7.25. Неразмытый градиент (слева) в сравнении с размытым (справа). Градиент справа выглядит более гладким (ровным)

Размытие градиентов

Добавление размытия в градиент дает более ровные результаты, потому что дает изысканно-узорчатый эффект или белый шум. Неразмытые градиенты часто содержат визуальную сегментацию (полосатость). Размытие даже больше важно, если ваш рисунок будет просматриваться на дешевых нематических жидкокристаллических экранах (TN LCD) c шестью битами на канал и некоторых других видах дисплеев, где присутствуют проблемы с постеризацией (приданием «плакатного стиля»). Photoshop может размывать слои градиентной заливки, а также градиенты, нарисованные с помощью градиентного инструмента, поэтому советую вам включать эту опцию. Градиенты, нарисованные в Illustrator, не могут размываться, так же как и векторные смарт-объекты (Smart Objects), которые вставляются в Photoshop из Illustrator.

Если вы используете прозрачность как часть градиента, он тоже не будет размываться, что иногда приводит к визуальной сегментации (полосатости). Для определенных случаев есть решение: если вы используете градиент с прозрачностью для того, чтобы осветлить область белым цветом, то использование неразмытого градиента с режимом смешивания слоев на экране (Screen layer blending mode) позволит вам размыть его. Та же техника применяется для затемнения, с режимом смешивания Multiply. Размытие цветов – это ювелирная работа. И подчас оно едва уловимо. В примере слева мы повысили контраст для того, чтобы выделить размытый паттерн. Градиент справа выглядит более ровным, потому что он размыт.

Текстуры

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

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

Однако здесь есть небольшая сложность. Текстуры, как правило, основаны на растровом изображении, поэтому они выглядят как фотография. Как мы уже говорили, растровые изображения или растровые слои масштабируются неудачно, и их нужно избегать, где только возможно. Photoshop предлагает три способа добавления текстуры, которая также будет без разрушений изменять масштаб ваших документов: Pattern Fill Layers (Заливка слоев паттернами), Pattern Layer Styles (Стили заливки паттернами) и Smart Objects (смарт-объекты).

Создание паттерна

Чтобы создать паттерны в Photoshop мы можем использовать опцию выделения с помощью рамки (Marquee Selection tool) для выбора прямоугольной площади, а затем выбрать опции Edit → Define Pattern (Редактировать → Задать паттерн). После создания паттерн готов к использованию как через слой заполнения паттерном (Pattern Fill Layer), так и через паттерный стиль слоя (Pattern Layer Style).

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

Если хотите проверить точно, как выглядят паттерны в определенных масштабах, то вам придется создавать версии для каждого нужного размера. Например, вы могли бы создать два шаблона для iOS текстуры: один для масштабирования в Retina-устройствах, а другой – для масштабирования в не-Retina-устройствах. Потом при экспорте всех финальных исходников изображения вы бы включили паттерны, используемые в ваших Pattern Fill Layers и Pattern Layer Styles.

Слои заливки паттерном

Слои заливки паттерном (Pattern Fill Layers) в точности соответствуют своему названию: это слои, заполняемые узорами. Они могут также факультативно содержать векторную маску, поэтому, даже если растровое изображение внутри слоя с паттерном смягчается при масштабировании, границы будут оставаться резкими. Двойной щелчок на миниатюру Pattern Fill Layer на панели слоев открывает опции, позволяющие вам установить масштаб паттерна независимо от масштаба документа.

Стили заливки паттерном

Стили заливки паттерном (Pattern Layer Styles) подобны заливкам паттерном (Pattern Fills), но применяются как стиль слоя. Это значит, что они не могут использоваться вместе с опциями Solid Color Fill Layers (Заливка слоев однотонным цветом), Gradient Fill Layers (Слой заливки градиентом) и даже с другими слоями Pattern Fill Layers (Заливка паттерном).

Смарт-объекты (Smart Objects)

В Photoshop смарт-объекты (Smart Objects) – это документы, расположенные внутри слоя, что дает идеальную возможность вставлять текстуру высокого разрешения в документ с низким разрешением. Смарт-объекты формируются, когда формируется их исходный файл. Смарт-объекты, созданные внутри Photoshop, формируются в их исходном размере, затем их масштаб увеличивается или уменьшается с использованием растрового масштабирования.

Лучше всего использовать смарт-объекты в виде прямоугольной области с векторной маской, применяемой для фигуры. Это означает, что сама текстура будет масштабироваться в растровом изображении, а фигура будет перерисована по размерам как векторный объект, создавая четкие границы.