Разработка хорошо выглядящих чистых и функциональных веб-макетов является неотъемлемой частью жизни веб-дизайнеров. В этом уроке мы собираемся создать чистый и профессиональный веб-макет в Photoshop с нуля. По пути вы можете узнать полезные методы для создания проектов. Так что начните!

Предварительный просмотр финальных результатов

Создание профессионального веб-макета Photoshop Учебник

Ресурсы

• Набор значков функций — wefunction.com ( альтернатива )
• Иконки Twitter — iconeden.com
• Bebas Font — dafont.com

Шаг 1: Макет

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

Я поставил ниже один, используя только серые тона. Таким образом, мы устраняем цвет со сцены в этот момент. Чтобы мы могли сосредоточиться на макете в целом и избегать испортить цвета. Это дает большую свободу для быстрого изменения и перестановки вещей. Макет может быть настолько подробным, насколько вы хотите. Для этого я собираюсь с приведенным ниже. Просто кратко определите макет и что там происходит.

Шаг 2: Настройте холст

Итак, у нас есть синяя печать для нашего макета. Давайте на самом деле соединить дизайн! Мы собираемся создать макет шириной 960 пикселей. Создайте новый документ с разрешением 1200 x 1500.

Это макет шириной 960 пикселей, поэтому нам нужно определить рабочую область, добавив рекомендации. Нажмите Ctrl + A, чтобы выбрать весь документ.

Перейдите в меню «Выбор»> «Выбор трансформации». Уменьшите выделение до 960 пикселей в ширину. Это рабочая область макета.

Добавьте направляющие линии к выбору.

Нам нужно создать некоторое дополнение между границей и содержимым, которое мы добавим позже! При повторном выборе выбора выберите «Выбор трансформации». Измените размер до 920 пикселей в ширину. Это означает, что 20 пикселей дополняют каждую сторону суммой 40 пикселей отступов.

Добавьте руководства к выбору.

Шаг 3. Создание заголовка

Давайте создадим заголовок макета! Сделайте выделение высотой 465 пикселей.

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

Добавить градиент в заголовок. Дважды щелкните по миниатюре слоя. Выберите Gradient Overlay. Создайте нижний цветной градиент. Используйте настройки.

Это должно выглядеть так.

Затем нужно добавить подсветку в заголовок. Создайте новый слой, нажав Ctrl + Alt + Shift + N . Выберите мягкую кисть диаметром 600 пикселей. Выберите # 19535a для цвета кисти. Просто нажмите один раз в центре заголовка.

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

Нажмите Удалить, чтобы удалить выбранную часть. Это выглядит ниже.

Термоусадочные его вертикально, нажав Ctrl + T .

Нам нужно убедиться, что выделенное пятно идеально сосредоточено на заголовке. Выберите слои, заголовок и подсветку и нажмите «V», чтобы переключиться на «Переместить инструмент». На панели параметров выберите «Выровнять горизонтальные центры».

Создайте новый слой, нарисуйте линию выделения с одним пикселем, используя инструмент «Карандаш» с цветом # 01bfd2.

Сглаживайте края с помощью градиентной маски. Выберите инструмент «Градиент», создайте градиент ниже на панели параметров.

Примените вышеуказанный градиент.

Шаг 4. Создание шаблона текстуры

Теперь создайте простой шаблон проверки и примените его к заголовку. Выберите инструмент «Карандаш», установите размер кисти в 2 пикселя и добавьте две точки, которые касаются друг друга. Выключите фон и выберите точки. Выберите «Редактирование»> «Определить шаблон».

Создайте новый слой и поместите его ниже слоя выделения. Выберите область, в которой мы хотим применить шаблон. Нажмите Shift + F5, чтобы загрузить диалоговое окно Fill. Выберите шаблон, который только что был создан. И хорошо.

Выбор заполняется шаблоном. Присмотритесь.

Смешайте шаблон плавно в заголовке. Добавьте маску слоя к слою шаблона. Выберите мягкую кисть и нарисуйте большой мягкой щеткой. Выберите #ffffff для цвета кисти. Уменьшите непрозрачность кисти примерно на 60% и покрасьте. Если вы найдете его слишком сильным, отрегулируйте непрозрачность слоя отдельно.

Красиво смешанный.