Создаем макет для сайта студии веб - дизайна

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

В этом уроке веб дизайна вы узнаете, как легко можно создать светящийся макет с прозрачными кнопками. Сложность: низкая Время: до 1 часа Навыки для «прокачки»: - работа с фильтрами - работа с режимами смешивания слоев - создание макета по сетке (grid) - создание простых форм Для начала мы сделаем красочный фон, а затем превратим его в хороший макет. Давайте начнем наш урок с создания нового документа размером: 960х900 пикс. установим цвет переднего плана на # 141414. Затем инструментом Заливка (Paint Bucket) нажмете один раз в вашем документе. Далее активируем Кисть (Brush Tool), мягкую круглую кисть, и сделаем 3 пятнышка в макете следующими цветами: # A864a8 # Ed1c24 # 662d91 Создаем макет для сайта студии веб - дизайна - уроки фотошоп Пожалуйста, обратите внимание, размер кисти должен быть 600 пикселей. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Затем перейдем в Фильтр-> Шум-> Добавить шум (Filter-> Noise-> Add Noise). Создаем макет для сайта студии веб - дизайна - уроки фотошоп И используйте следующие параметры. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Ваш макет будет выглядеть, примерно так. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Затем перейдем в Фильтр-> Размытие-> Размытие в движении (Filter-> Blur-> Motion Blur). Создаем макет для сайта студии веб - дизайна - уроки фотошоп Установим Угол (Angle) 90 и Смещение (Distance) на 998 Создаем макет для сайта студии веб - дизайна - уроки фотошоп Это очень простой способ создать хороший фон для вашего сайта. На изображении ниже вы можете посмотреть, как должен выглядеть ваш макет. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создадим новый слой (нажмите CTRL + SHIFT + ALT + N). Создаем макет для сайта студии веб - дизайна - уроки фотошоп Еще раз активируем Кисть (Brush Tool) белого цвета. Создаем макет для сайта студии веб - дизайна - уроки фотошоп И будем использовать еще раз большую, мягкую, круглую кисть. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Затем этой кистью создадим другую точку на нашем макете. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Потом изменим Режим смешивания слоя (Blend Mode) на Перекрытие (Overlay). Создаем макет для сайта студии веб - дизайна - уроки фотошоп Теперь создадим панели навигации. Для этого нам понадобится инструмент Прямоугольник (Rectangle Tool) С помощью этого инструмента создадим простую форму. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Затем выберем Прямоугольник со скругленными углами (Rounded Rectangle Tool), и установим радиус до 6 пикселей. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Активируем Сетку (Grid), чтобы лучше скоординировать наш макет в следующих шагах. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте 3 формы, как на рисунке ниже. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Теперь добавим некоторые Cтили слоя (Add a layer style): Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп Вот что должно получиться. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создадим другие формы с помощью того же инструмента: Создаем макет для сайта студии веб - дизайна - уроки фотошоп Для всех этих форм добавим следующие Cтили слоя (Add a layer style): Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп Создаем макет для сайта студии веб - дизайна - уроки фотошоп Вот что получилось. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Наш урок дизайна почти закончен, осталось только добавить текст и некоторые элементы. Как обычно активируем инструмент Горизонтальный текст (Horizontal Type Tool) и напишем текст. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Теперь добавим изображение в верхней части макета. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Там же, добавим две стрелки инструментом Произвольная фигура (Custom Shape Tool). Создаем макет для сайта студии веб - дизайна - уроки фотошоп Вот что у нас получилось. Создаем макет для сайта студии веб - дизайна - уроки фотошоп Вот так легко и просто с помощью наших уроков веб дизайна можно создать красивые макеты. Всего вам доброго и творческих успехов. Автор/Переводчик: Артеменко Любовь Ссылка на источник: http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

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