Открыть меню    

Эффект загиба страницы

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

1 Создайте новый документ (мой будет размером 600 на 420px) и залейте его черным градиентом или однородным черным цветом. Я воспользовался радиальным градиентом от #242424 к #0e0e0e.

черный фон

2 На новом слое выберите инструмент rounded rectangle tool и сделайте белый прямоугольник размером 250px (ширина) на 300px с радиусом 5px. Это будет наша страница.

белай страница

3 Используя инструмент polygonal lasso, сделайте выделенную область. Удерживайте клавишу shift, чтобы область выделения была под углом 45 градусов.

выделенная область

4 Растрируйте слой и удалите выделенную область.

удаляем область

5 На новом слое, с помощью инструменты rounded rectangle tool, сделайте закругленный белый квадрат размером 100px на 100px.

закругленный квадрат

6 Приступаем к загибу страницы. Нам необходимо избавиться от частей, выступающих за пределы страницы, поэтому растрируйте слой. Выберите область страницы (ctrl+ клик по слою) и инвертируйте область выделения (select > inverse), затем удалите лишние области.

удаляем лишние области

7 Дублируйте слой с уголком (загибом) и залейте его линейным градиентом по направлению от верхнего правого угла к нижнему левому (#c8c8c8 и #eeeeee). Данный слой будет тенью загиба.

тень загиба

8 Идите в Edit > Transform > Warp и потяните за нижний левый угол.

деформируем тень загиба

9 Поместите слой с тенью под слой с загибом.

перемещаем под слой с загибом

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

страница с загибом

Комментарии к статье