Мы запустили Форум! (*beta)






Видеокурс «Photoshop Professional. От чайника до профи за один день» поможет Вам стать профессионалом в фотошопе всего за 24 часа! Курс специально построен так, чтобы Вы научились создавать работы профессионального качества уже на следующий день. МИНИМУМ ТЕОРИИ, МАКСИМУМ ПРАКТИКИ

Подробнее...




сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Дизайн бизнес сайта


Создание холста
Создайте новый документ размером 1200х1200 пикселей с белым фоном.


Дизайн бизнес сайта


Хоть размеры нашего холста 1200х1200 пикселей, мы воспользуемся только 850 пикселями для рабочей области сайта.

Создание направляющих
Перейдите в меню Просмотр»Новая направляющая (View > New Guide) и создайте две направляющие:


Дизайн бизнес сайта

Дизайн бизнес сайта

Дизайн бизнес сайта


Создание шапки сайта
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте фигуру на всю ширину холста высотой 33 пикселя. Залейте её серым цветом в новом слое.


Дизайн бизнес сайта


Инструментом Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте фигуру того же цвета, как показано ниже:


Дизайн бизнес сайта


Объедините оба слоя с прямоугольниками в один (Ctrl+E) и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Дизайн бизнес сайта


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте ещё одну один прямоугольник высотой 184 пикселя под верхней панелью. Залейте выделение в новом слое любым цветом и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Дизайн бизнес сайта

Дизайн бизнес сайта


Напишите заголовок и слоган в левой части заголовка сайта, а на закруглённом прямоугольнике напишите номер телефона.


Дизайн бизнес сайта


Создание навигации
Инструментом Прямоугольник с закругленными краями (Rounded Rectangle Tool) с радиусом 20 пикселей создайте прямоугольник высотой 60 пикселей и шириной 430. Поместите его на уровень заголовка сайта справа:


Дизайн бизнес сайта


К слою с прямоугольником примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

Внутренняя тень (Режим – Нормальный):


Дизайн бизнес сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Дизайн бизнес сайта


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Дизайн бизнес сайта

Дизайн бизнес сайта


Заполните этот прямоугольник разделами меню и разделителями:


Дизайн бизнес сайта


Создание эффекта “Bokeh”
Создайте новый документ размером 600х600 пикселей с прозрачным фоном. Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение на весь холст и залейте его чёрным цветом.


Дизайн бизнес сайта


Установите Непрозрачность слоя – 50% и примените стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет


Дизайн бизнес сайта


Перейдите в меню Редактирование»Определить кисть (Edit > Define Brush Preset) и сохраните кисть под названием “bokeh”. Вернитесь в основной документ, выберите инструмент Кисть (Brush Tool) и выберите созданную кисть.


Дизайн бизнес сайта


Перейдите в палитру кистей (F5) и настройте так:

Форма отпечатка кисти:


Дизайн бизнес сайта


Динамика формы:


Дизайн бизнес сайта


Рассеивание:


Дизайн бизнес сайта


Другая динамика:


Дизайн бизнес сайта


Обрисуйте этой кистью голубую часть заголвка в новом слое. Потом примените стиль Наложение цвета (Layer Style - Color Overlay) с непрозрачностью 75%. Затем примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2 пикселя.


Дизайн бизнес сайта


Обрисуйте эту область ещё раз, примените наложение цвета, но без понижения непрозрачности. Также не нужно размывать круги:


Дизайн бизнес сайта


Создание специальной области
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста высотой 257 пикселей. Залейте его любым цветом в новом слое и поместите под область шапки сайта. Потом примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Дизайн бизнес сайта

Дизайн бизнес сайта


В верхней части полученного прямоугольника с отступом от шапки сайта в 1 пиксель создайте пиксельную линию толщиной 1 пиксель цветом #a7c9de.


Дизайн бизнес сайта


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте большую фигуру шириной 850 пикселей (прямо между направляющими):


Дизайн бизнес сайта


Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) в режиме контуров с радиусом 15-25 пикселей создайте вертикальную фигуру. Поместите его слева:


Дизайн бизнес сайта


Кликните правой кнопкой на контуре и выберите Образовать выделенную область (Make Selection). Как только выделение будет создано, нажмите Delete. Проделайте то же самое для правой стороны:


Дизайн бизнес сайта


К слою с голубым прямоугольником примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Зеркальный


Дизайн бизнес сайта


В каждому углу, где край закруглён, добавьте полукруг цветом #72a8cb.


Дизайн бизнес сайта


Заполните прямоугольник текстом и картинками:


Дизайн бизнес сайта


Область контента
Под предыдущей областью создайте прямоугольное выделение, выберите инструмент Градиент (Gradient Tool), установите цвет заливки – белый, цвет фона - #bee2f8. Сделайте заливку из центра холста вниз, как показано ниже.


Дизайн бизнес сайта


На правой стороне холста создайте прямоугольник (сайдбар). Обрежьте правый верхний угол:


Дизайн бизнес сайта


Перейдите в меню Стилей этого слоя с сайдбаром и настройте так:

Отбрасывание тени (Режим – Умножение):


Дизайн бизнес сайта


Внутренняя тень (Режим – Нормальный):


Дизайн бизнес сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Дизайн бизнес сайта


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Дизайн бизнес сайта


¬¬Создайте прямоугольный треугольник в обрезанном углу, как показано ниже, и примените к нему те же стили слоя, что и для самого прямоугольника.


Дизайн бизнес сайта


Добавьте содержимое туда и создайте ещё одну такую область:


Дизайн бизнес сайта


Слева от сайдбара добавьте текст, иконки, разделительные линии…


Дизайн бизнес сайта


Создание футера
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте небольшой прямоугольник в нижей части холста. Примените к нему стиль Наложение градиента:

Режим – Нормальный, Стиль – Линейный


Дизайн бизнес сайта


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Дизайн бизнес сайта


Добавьте информацию о правах и т.д.


Дизайн бизнес сайта


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


Дизайн бизнес сайта



Ссылка на источник урока

написал : seradm

Вопрос: Объясни, как ты обрезал один объект другой фигурой? Ты написал, что: "Кликните правой кнопкой на контуре и выберите Образовать выделенную область (Make Selection). Как только выделение будет создано, нажмите Delete. Проделайте то же самое для правой стороны:" Я пытаюсь повторить, а не выходит. Как ты сделал такие края? Это же не Illustrator, где все просто. Выделил 2-а объекта, где 1-й объект первичный, ты этим и обрезал за ним, другой объект

---------------


написал : kvilex

2 seradm
Да вроде все понятно расписано, даже более чем...В этом же слое с уже залитой фигурой, инструментом "прямоуг. с закругл. краями" создай новую фигуру. затем образуй выделение и нажми клавишу Delete. Та часть уже залитой цветом фигуры, которая будет находиться в только что выделенной области при этом удалится.
З.Ы. Проверь, в настройках инструмента "прямоугольник с закругленными краями" должен быть выбран параметр "контуры" а не "слой-фигура"...

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: