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

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

Из этого урока дизайна вы узнаете, как создать интересный красочный макет для сайта. Сложность: низкая Время: до 30 минут Навыки для "прокачки": - создание кисти - создание форм - работа со стилями слоя - работа с кистями Создадим новый документ размером: 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) добавим некоторые элементы на панели навигации. Создаем удивительный красочный макет для сайта - уроки фотошоп Теперь добавим несколько изображений на наш макет. Это наш окончательный результат. Создаем удивительный красочный макет для сайта - уроки фотошоп Вот так выглядел бы макет, если бы мы сделали кисть треугольники. Создаем удивительный красочный макет для сайта - уроки фотошоп Или так. Создаем удивительный красочный макет для сайта - уроки фотошоп На этом наш урок дизайна окончен. Всего вам доброго и творческих успехов! Автор/Переводчик: Артеменко Любовь Ссылка на источник: http://www.grafpedia.com/tutorials/design-an-awesome-colorful-layout

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика