Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим как шаг за шагом сделать яркую страничку которая возможно подойдет для онлайн-бизнеса.


Финальный результат

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Приступаем к уроку Фотошопа


Давайте начнем работу с создания нового файла (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")) 766x750 px, 72 dpi.

Затем выберем Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) для создания фона.

Щелкнув 2 раза на слое на панели слоев (для вызова настроек стиля слоя), выберем следующие параметры. ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Результат: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Далее, используя все тот же инструмент, делаем центральную панель страницы. Белого цвета.


Берем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") радиус скругления 2 px чтоб сделать кнопку меню, распаложенной в загаловке сайта.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Вызываем параметры слоя (выставляем стили слоя): ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) с параметрами как на изображении ниже: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Вот что у нас выходит: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

И снова с помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") радиусом 2 px чтобы сделать блик на кнопке белого цвета.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры слоя Fill (Заливка) 17%.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Комбинируем в группу все слои с кнопочками меню веб сайта (нажмите Ctrl для того,чтобы отметить нужные слои и, удерживая нажатой левую кнопку мыши, перенесите отмеченные слои на "Create a new group selection" (Создать новую выборку группы).

Сделайте пять копий новой группы и, выбрав → Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)), разместите копии, как показано ниже. Изменим параметры кнопок...


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Измененные параметры кнопки. Первый слой (выставляем стили слоя). ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента. ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры блика: Fill (Заливка) 49%.

Blending mode (Режим наложения) - Color Dodge (Осветление основы).

Выставляем стиль слоя: ↓

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента.

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Напишите названия кнопок используя инструмент → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T"): ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Далее рисуем лого для нашего сайта. Для начала возьмем Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) для основных элементо цвета #00E5E1, нажмем Alt для того, чтобы тем же инструментом стереть ненужное.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Вторая часть нашего логотипа. Нам нужно сделать полоску и с помощью Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) поворачиваем ее как надо.. Жмем Alt чтобы удалить ненужные элементы и не забудьте, что цвет все тот же.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Поместите надпись, содержащую имя сайта, как внизу показано.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Время нарисовать баннер. Берем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") радиуса 10 px.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры слоя (выставляем стили слоя).


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Теперь нарисуем небольшой блик белого цвета на баннере, выбрав Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") и поставим ему Fill (Заливка) 11%.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Далее выбираем Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U") (1 pt) белого цвета чтоб нарисовать перекрещивающиеся линии (нажав SHIFT).


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Меняем настройки слоя. ↓

Fill (Заливка) 20%.

Blending mode (Режим наложения) - Soft light (Мягкий свет).


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Берем Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U") и выбираем звездочку из таблицы.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Меняем параметры слоя (выставляем стили слоя): ↓

Blending Options (Параметры наложения) > Drop Shadow (Тень) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента.

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Вот так: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Пишем слоган на баннере.


Настройки текста: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Пишем заголовок..


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Пишем остальной текст...


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Сейчас с помощью Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) делаем панельку входа.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Меняем настройки слоя (выставляем стили слоя).


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Делаем две копии последнего слоя и, выбрав → Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) меняем размер копий, располагая их как показано ниже: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Создаем окошки информации, выбрав Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") радиусом 4 px белого цвета.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Делаем копию последнего слоя и выбираем снова → Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) чтобы расположить копию как показано на следующей картинке: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Потом нам нужно нарисовать кнопочку с помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") радиус 5 px.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Выставляем параметры слоя (задаем стили слоя).


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента: ↓

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Копию делаем слоя с кнопкой и выбираем Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) чтоб расположить так как показано ниже: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Берем Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U") и рисуем другую маленькую звездочку.


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Выставляем параметры слоя (задаем стили слоя).


Blending Options (Параметры наложения) > Drop Shadow (Тень) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента.

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента.

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Копируем последний слой и выбираем Delete Anchior Point Tool Инструмент : Перо - Удалить опорную точку (Инструмент : Перо - Удалить опорную точку) чтобы стереть ненужное. Convert Point Tool Инструмент - Угол / Подменю инструмента Перо (Инструмент Угол / Подменю инструмента Перо) поможет вам корректировать элементы фигуры.. также нам нужно поменять параметры слоя-копии: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) параметры: ↓


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Параметры градиента.

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Сольем все слои со звездочками в один (нажмем Ctrl чтоб отметить нужные слои и CTRL+E чтобы сдить их). Применим Add a Mask (добавить маску, внизу панели слоев) и берем Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") черного цвета чтобы стереть участки, выходящие за границы..


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

На этой панели напишем..


Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Последняя стадия включает в себя написание копирайта.


Вот и все.


Финальный результат

Рисуем дизайн сайта для онлайн-бизнеса используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru