Создаем удивительный красочный макет для сайта 0

Создаем удивительный красочный макет для сайта - уроки фотошоп



Из этого урока дизайна вы узнаете, как создать интересный красочный макет для сайта.

Навыки для "прокачки":
- создание кисти
- создание форм
- работа со стилями слоя
- работа с кистями

Создадим новый документ размером: 270X270 пикселей и создадим простую форму с помощью инструмента Элипс (Ellipse Tool)

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь добавим следующие Cтили слоя (Add a layer style)

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

Вот что получилось.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь перейдем Редактирование-> Определить кисть (Edit-> Define Brush Preset)

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь введите имя для вашей кисти, и нажмите кнопку ОК.
Далее активируем Кисть (Brush) , и создадим несколько пятен, на макете.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Изменим Режим смешивания слоя (Blend Mode) на Жесткий свет (Hard Light), и снизим Непрозрачность (Opacity) этого слоя до 65%

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь перейдем Окно-> Кисть (Windows-> Brushes) и настроим кисть как показано ниже.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

Затем создадим новый слой поверх всех слоев, и кистью, которую мы только что создали, будем рисовать на шапке сайта. Обратите внимание, что вам нужно, установить размер кисти 40-50.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь рисуем.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Далее перейдем Фильтр-> Размытие-> Размытие по Гауссу (Filter-> Blur-> Gaussian Blur) и поставим следующее значение.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь изменим Режим смешивания слоя (Blend Mode) на Мягкий свет (Soft Light), и установим Непрозрачность (Opacity) на 50%

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создадим новый слой (нажмите CTRL + SHIFT + ALT + N), и измените, Режим смешивания слоя (Blend Mode) на Перекрытие (Overlay), и значение Непрозрачность (Opacity) до 50%, а затем Кистью (Brush Tool) нарисуем такие же круги.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Наша шапка готова. Теперь создадим несколько форм инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool)

Создаем удивительный красочный макет для сайта - уроки фотошоп

Для верхней панели навигации добавим следующие Cтили слоя (Add a layer style)

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создаем удивительный красочный макет для сайта - уроки фотошоп

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

Создаем удивительный красочный макет для сайта - уроки фотошоп

Для нижней формы снизим Непрозрачность (Opacity) до 20%.
Теперь добавим текст на наш макет, инструментом Горизонтальный текст (Horizontal Type Tool)

Создаем удивительный красочный макет для сайта - уроки фотошоп

Создадим новый слой, и инструментом Карандаш (Pencil Tool) добавим некоторые элементы на панели навигации.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Теперь добавим несколько изображений на наш макет. Это наш окончательный результат.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Вот так выглядел бы макет, если бы мы сделали кисть треугольники.

Создаем удивительный красочный макет для сайта - уроки фотошоп

Или так.

Создаем удивительный красочный макет для сайта - уроки фотошоп

На этом наш урок дизайна окончен. Всего вам доброго и творческих успехов!

Сайт: Stadion-Kuban.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте: vk.com/Stadion-Kuban

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Автор не указан
Перевел
Артеменко Любовь
Сложность
Легкая
Источник
Добавил
Lubashka
Дата
22-10-2020, 23:39
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 5 * 9 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта
.