Мы запустили Форум! (*beta)
сортировать посты по: Рейтингу | Посещаемости | Комментируемые
Подсказка
Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.
*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.


Хоть размеры нашего холста 1200х1200 пикселей, мы воспользуемся только 850 пикселями для рабочей области сайта.
Создание направляющих
Перейдите в меню Просмотр»Новая направляющая (View > New Guide) и создайте две направляющие:
Создание направляющих
Перейдите в меню Просмотр»Новая направляющая (View > New Guide) и создайте две направляющие:



Создание шапки сайта
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте фигуру на всю ширину холста высотой 33 пикселя. Залейте её серым цветом в новом слое.
Инструментом Прямоугольная область (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. Поместите его на уровень заголовка сайта справа:
Инструментом Прямоугольник с закругленными краями (Rounded Rectangle Tool) с радиусом 20 пикселей создайте прямоугольник высотой 60 пикселей и шириной 430. Поместите его на уровень заголовка сайта справа:

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





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

Установите Непрозрачность слоя – 50% и примените стиль Обводка (Layer Style – Stroke):
Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет
Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет

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





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

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

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



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


Перейдите в меню Стилей этого слоя с сайдбаром и настройте так:
Отбрасывание тени (Режим – Умножение):
Отбрасывание тени (Режим – Умножение):




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



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




Ссылка на источник урока
Создан: 8 марта 2010
написал : seradm
Вопрос: Объясни, как ты обрезал один объект другой фигурой? Ты написал, что: "Кликните правой кнопкой на контуре и выберите Образовать выделенную область (Make Selection). Как только выделение будет создано, нажмите Delete. Проделайте то же самое для правой стороны:" Я пытаюсь повторить, а не выходит. Как ты сделал такие края? Это же не Illustrator, где все просто. Выделил 2-а объекта, где 1-й объект первичный, ты этим и обрезал за ним, другой объект
---------------15 марта 2010 14:37 | ICQ: -- | [цитировать]
написал : kvilex
2 seradm
Да вроде все понятно расписано, даже более чем...В этом же слое с уже залитой фигурой, инструментом "прямоуг. с закругл. краями" создай новую фигуру. затем образуй выделение и нажми клавишу Delete. Та часть уже залитой цветом фигуры, которая будет находиться в только что выделенной области при этом удалится.
З.Ы. Проверь, в настройках инструмента "прямоугольник с закругленными краями" должен быть выбран параметр "контуры" а не "слой-фигура"...
---------------Да вроде все понятно расписано, даже более чем...В этом же слое с уже залитой фигурой, инструментом "прямоуг. с закругл. краями" создай новую фигуру. затем образуй выделение и нажми клавишу Delete. Та часть уже залитой цветом фигуры, которая будет находиться в только что выделенной области при этом удалится.
З.Ы. Проверь, в настройках инструмента "прямоугольник с закругленными краями" должен быть выбран параметр "контуры" а не "слой-фигура"...
20 марта 2010 20:26 | ICQ: -- | [цитировать]


+2
