Photoshop
3D эффекты Анимация более 1 часа до 1 часа до 30 минут Имитации
Интерфейсы Коллаж Концептуальные Обработка фото Пейзаж Плакаты и фоны Элементы и текст Простые уроки Реальные объекты Реклама Ретушь и лицо Рисование силуэты, люди, здания Явления природы Сложные уроки Спецэффекты Средние уроки Трюки Фотошоп Фильтры Фотошоп с нуля Illustrator

Создаем удивительный красочный макет для сайта
Нравится(+) 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) добавим некоторые элементы на панели навигации.

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

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

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

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

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

Или так.

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

На этом наш урок дизайна окончен. Всего вам доброго и творческих успехов!
Информация
Автор / Разработчик
Автор не указан
Перевел
Артеменко Любовь
Источник
Добавил
Lubashka
Дата
22-10-2019, 23:39
Метки:  еще статьи

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

Создаем удивительный красочный макет для сайта
Социальне сети:
Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии

Комментариев нет...
Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете


Последние уроки
Опубликовано 6-09-2019, 21:48
Опубликовано 21-05-2019, 14:55
Архив сайта
Теги
.