Веб дизайн с использованием текстур, имитирующих материал ткани выглядит очень необычно и привлекательно. В этом уроке я покажу Вам шаг за шагом, как выполнить такой интересный веб дизайн.
Я буду делать дизайн на примере подписной страницы вымышленного веб сайта. Вы же можете по ходу перекраивать его под свои нужды. Давайте начнем!
Веб дизайн в стиле «Сшитой веб страницы»
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 с параметрами, как показано ниже.
14. Очертите при помощи направляющих область для расположения блока подписки. Выберите «Прямоугольник со скругленными углами» (радиус скругления 15 px), выберите цвет (я взяла #f4e5b6). Нарисуйте прямоугольник в определенной для него области.
Теперь примените к слою стили, как показано ниже. В качестве Pattern нужно выбрать текстуру, которую мы создали в самом начале («Made Texture»).
15. Давайте сделаем шов вокруг фигуры.
Для этого убедитесь, что слой с только что нарисованной фигурой активен. Возьмите инструмент текста «Type tool», поднесите курсор к краю фигуры, пока не увидите, что возле курсора появилась изогнутая линия. Когда Вы ее увидели можете кликнуть по экрану – теперь мы можем писать вокруг выбранной фигуры. Нужно писать: тире, пробел, тире, пробел… и так далее, пока не опишите всю фигуру полностью.
16. Возьмите инструмент «Прямоугольник со скругленными углами» (радиус скругления 3 px), цвет такой же, как и у нашей фигуры с лопастями. Нарисуйте невысокий прямоугольник вдоль фигуры нашей формы для подписки (по ширине он должен быть шире формы справа и слева где-то на 5 – 7 пикселей).
А теперь примените для него сохраненный стиль и «шум», как мы делали это раньше (см. скриншот).
17. Чтобы придать правдоподобности нарисованному заголовку, нужно нарисовать те края, которые как бы получаются при загибании.
Для этого возьмите инструмент «Перо» (P) с черной заливкой и без обводки и нарисуйте маленькие треугольники слева и справа, как показано ниже. Это поможет имитировать загнутые области.
18. Внутри формы нарисуйте область для ввода адреса электронной почты. Ее можно сделать также при помощи «Прямоугольника со скругленными углами» с заливкой и обводкой. А после уменьшить непрозрачность слоя.
19. С помощью того же инструмента Прямоугольника нарисуйте кнопочку для отправки. К ней я применила те же стили, что и к основному прямоугольнику формы.
20. Осталось только добавить текст с названием сайта, заголовком формы, текст для кнопки и для поля ввода. Здесь я использовала шрифт Tahoma, но Вы можете использовать тот, который подойдет Вам.
Вот в общем то и все. Вы можете выполнять целый веб дизайн в таком стиле, или отдельную страницу, или отдельные элементы. В любом случае, возьмите эти приемы на вооружение и они помогут Вам в создании более уникальных дизайнов.
Подписывайтесь на обновление блога, чтобы получать новые уроки первыми. Пишите в комментариях о том, что бы Вам было интересно узнать. А также делитесь со своими друзьями этой статьей через кнопки социальных сетей – это будет лучшей благодарностью!
Успехов Вам и до новых встреч!
Wonderful post! We will be linking to this particularly great post on our site.
Keep up the great writing.
Thanks , I’ve recently been looking for information approximately this toic for ages and yours is
the best I’ve came upon soo far. But, what in regards tto the
conclusion? Are you positive about thhe source?