Веб дизайн в стиле: «Сшитая веб страница»

/ 👁 1653

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

дополнительные материалы к урокам

демо версия урока

Я буду делать дизайн на примере подписной страницы вымышленного веб сайта. Вы же можете по ходу перекраивать его под свои нужды. Давайте начнем!

Веб дизайн в стиле «Сшитой веб страницы»

1. Для начала нам нужно подготовить пару текстур для последующей работы. Для этого создайте документ в Photoshop размером 450px на 450px с фоновым цветом – черным.

Теперь выберете Filter – Filter Gallery. В открывшемся окне выбираете Texture – Texturizer и выставляете такие же параметры как не скриншоте ниже. После этого нажимайте ОК.

применяем фильтр

создание текстуры

2. Теперь продублируйте полученный слой. После этого повернем продублированный слой на 90 градусов (Edit – Transform – Rotate 90 CW).

Поставьте этому слою режим смешивания Screen и уменьшите непрозрачность слоя до 88%.

дублирование и трансформация текстуры

уменьшение непрозрачности слоя

3. Объедините оба слоя (Ctrl + Shift + E).

Теперь нажмите Filter – Sharpen – Smart Sharpen и примените настройки как на скриншоте ниже.

применение фильтра к слою

настройки для фильтра

4. Теперь сохраним получившуюся текстуру для дальнейшей работы с ней. Для этого нажимаем Edit – Define Pattern… В появившемся окне дайте название текстуре (я дам «Made Texture»).

сохранение текстуры

5. Давайте создадим еще одну текстуру. Для этого нужно создать новый документ в Photoshop 1px в ширину и 3px высотой. Сделаем фон белым. С помощью прямоугольного выделения (M) выделим самый верхний пиксель и закрасим его в черный цвет.

После этого сохраним текстуру через Edit – Define Pattern… Дайте ей имя «texture horizontal».

создание нового документа в Фотошоп

сохранение подготовленной текстуры

6. Теперь можно приступить непосредственно к дизайну самой веб страницы.

Создайте новый документ в программе Photoshop размером 800px на 600px. Залейте документ цветом #62587C. Теперь переходим на вкладку Layer – Layer Style – Gradient Overlay. Выбираем градиент от черного к прозрачному, режим смешивания устанавливаем на Overlay. Непрозрачность 40 %, вид градиента: радиальный, активируем Reverse.

выбираем градиент для фона веб страницы

настройки для градиента

Теперь выбираем Layer – Layer Style – Pattern Overlay… и устанавливаем параметры как на скриншоте ниже (в качестве Pattern нужно выбрать нашу текстуру «texture horizontal»).

выбираем заливку текстурой

настройки для заливки текстурой

7. Дублируем данный слой и установим новому слою непрозрачность 70%. Теперь переходим в Filter – Noise – Add Noise и устанавливаем настройки как на скриншоте ниже.

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

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

Теперь давайте приступим к верхней части веб страницы. Поставьте 2 вертикальные и 2 горизонтальные направляющие, чтобы очертить область, в которой будет расположена прямоугольная фигура со скругленными углами. Я отступила по 100 px справа и слева, 50 px и 200px по вертикали.

Выбираем из панели инструментов «Прямоугольник со скругленными углами», устанавливаем радиус скругления на 20px, цвет – розовый (#bb325d) и рисуем в получившейся из направляющих области прямоугольник.

рисуем прямоугольник со скругленными углами

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

Для этого выберете инструмент «Прямоугольник со скругленными углами», установите радиус скругления на 3 px. Нарисуйте небольшой вытянутый прямоугольник и примените к слою с прямоугольником стили как на скриншотах ниже, соблюдая те же настройки:

применяем градиент

применяем заливку

создаем тень слою

Через меню Filter – Noise – Add Noise… добавьте «шум» слою, используя настройки, как показано на рисунке ниже:

добавляем шум для слоя

10. Теперь продублируйте получившийся слой еще 3 раза, разнесите полоски по разным углам и при помощи Свободной Трансформации (Ctrl + T) придайте каждой нужный наклон.

разносим продублированные фигуры по разным углам

11. Теперь займемся розовым прямоугольником. Мы сделаем его немного выпуклым и придадим такую же текстуру, как и у фона.

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

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

применяем градиент

применяем тень

Теперь придадим «шум» фигуре. Для этого идем в Filter – Noise – Add Noise…
Примените настройки для «шума» на рисунке ниже:

добавляем шум скругленному прямоугольнику

12. Давайте помесим только что созданный стиль в Стили Фотошопа, чтобы мы могли обратиться к нему одним кликом мыши.

Для этого дважды кликните на Effects под слоем с розовым прямоугольником. В появившемся окне нажмите на кнопку «New Style…» и дайте имя стилю.

создаем стиль для Фотошоп

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

13. Выберите инструмент «Custom Shape Tool». Вверху в настройке Shape выберите подходящую Вам фигуру (я выбрала что-то похожее на лопасти пропеллера). Установите цвет заливки, обводку уберите и нарисуйте фигуру где-то по центру нашего розового прямоугольника.

рисуем произвольную фигуру

Теперь щелкните по нашему стилю из окошка Styles, а после добавьте «шум» как Вы делали это ранее.

устанавливаем стиль для фигуры и добавляем ей шум

А также добавьте к уже установленным стилям еще один – Inner Shadow с параметрами, как показано ниже.

добавляем Inner Shadow для слоя

14. Очертите при помощи направляющих область для расположения блока подписки. Выберите «Прямоугольник со скругленными углами» (радиус скругления 15 px), выберите цвет (я взяла #f4e5b6). Нарисуйте прямоугольник в определенной для него области.

рисуем прямоугольник для формы подписки

Теперь примените к слою стили, как показано ниже. В качестве Pattern нужно выбрать текстуру, которую мы создали в самом начале («Made Texture»).

придаем заливку из текстуры для фигуры

придаем фигуре тень

15. Давайте сделаем шов вокруг фигуры.

Для этого убедитесь, что слой с только что нарисованной фигурой активен. Возьмите инструмент текста «Type tool», поднесите курсор к краю фигуры, пока не увидите, что возле курсора появилась изогнутая линия. Когда Вы ее увидели можете кликнуть по экрану – теперь мы можем писать вокруг выбранной фигуры. Нужно писать: тире, пробел, тире, пробел… и так далее, пока не опишите всю фигуру полностью.

пишем текст вокруг фигуры

16. Возьмите инструмент «Прямоугольник со скругленными углами» (радиус скругления 3 px), цвет такой же, как и у нашей фигуры с лопастями. Нарисуйте невысокий прямоугольник вдоль фигуры нашей формы для подписки (по ширине он должен быть шире формы справа и слева где-то на 5 – 7 пикселей).

А теперь примените для него сохраненный стиль и «шум», как мы делали это раньше (см. скриншот).

рисуем заголовок формы

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

Для этого возьмите инструмент «Перо» (P) с черной заливкой и без обводки и нарисуйте маленькие треугольники слева и справа, как показано ниже. Это поможет имитировать загнутые области.

имитируем загибы

18. Внутри формы нарисуйте область для ввода адреса электронной почты. Ее можно сделать также при помощи «Прямоугольника со скругленными углами» с заливкой и обводкой. А после уменьшить непрозрачность слоя.

рисуем поле для ввода e-mail

19. С помощью того же инструмента Прямоугольника нарисуйте кнопочку для отправки. К ней я применила те же стили, что и к основному прямоугольнику формы.

рисуем кнопку в Фотошоп

20. Осталось только добавить текст с названием сайта, заголовком формы, текст для кнопки и для поля ввода. Здесь я использовала шрифт Tahoma, но Вы можете использовать тот, который подойдет Вам.

готовый веб дизайн

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

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

Успехов Вам и до новых встреч!

Tags:

2 комментария

  1. https://Dreamproxies.com/ 13.06.2019
  2. https://dreamproxies.com/ 16.06.2019

Leave a Reply