Сгиб

Сгиб

Сейчас мы будем пробовать согнуть лист бумаги и посмотрим, получится ли у нас? Этот приём широко используется и до сих пор остаётся главной особенностью дизайна Web 2.0. Возможно, Вы видели подобную технологию в изображении стикеров, которые присутствуют почти на всех сайтах с недавнего времени. Но мне нравится такой тип загиба бумаги больше, чем стикеры, поэтому я выбрал эту технологию для Вас. Этот пример взят с Bridge 55.

Сгиб

Шаг 1

Открываем новый документ, устанавливаем размеры холста: 470рх в ширину и 300рх в высоту, заливаем цветом #d4cdb1. Создаём новый слой и с помощью инструмента Rounded Rectangle Tool рисуем фигуру 310рх в ширину и 400рх в высоту. Заливаем фигуру цветом #391e0b.

Сгиб

Шаг 2

Используя инструмент Pen Tool, рисуем треугольник, как показан на картинке. Заливаем его цветом #e5e2d1.

Сгиб

Шаг 3

Выделяем контур треугольника с помощью инструмента Direct Selection Tool. Теперь снова возьмем инструмент Pen Tool и поднесем его близко к контуру, пока не появится маленький «+» рядом с инструментом Pen Tool. Кликнем на контуре и добавляем 2 дополнительные точки, так как показано на картинке.

Сгиб

Шаг 4

С помощью инструмента Direct Selection Tool кликаем на одной из точек и выгибаем кривую, как это показано на картинке. Сделайте то же самое со второй точкой.

Сгиб

Шаг 5

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

Сгиб

Шаг 6

Перемещаем точки, как это показано на картинке.

Сгиб

Шаг 7

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

Сгиб

Шаг 8

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

Сгиб

Шаг 9

Почти закончили. Добавим только градиент Gradient Overlay для треугольника. Используйте такие же настройки, как на картинке. Также добавим маленькую тень, с помощью Drop Shadow.

Сгиб

Шаг 10

После добавления нескольких навигационных элементов изображение должно выглядеть так. Очень легко, не так ли?

Сгиб

Marko Prljić
Перевод: http://www.4webmaster.ru/

Рекомендуем почитать:
Типографская врезка
Отбрасывание тени
Как создать реалистичные слезы в Photoshop


Оставить комментарий: