Как создать профессиональный веб-макет в Photoshop

Разработка хорошо выглядящих чистых и функциональных веб-макетов является неотъемлемой частью жизни веб-дизайнеров. В этом уроке мы собираемся создать чистый и профессиональный веб-макет в 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% и покрасьте. Если вы найдете его слишком сильным, отрегулируйте непрозрачность слоя отдельно.
Красиво смешанный.