Урок на тему Создание web-страниц. Создание эскиза web-страницы


Создание web-страниц

Создание эскиза web-страницы

Создайте новый документ размером 700 на 808 пикселей, разрешение 72 Пикселя на дюйм, режим RGB – цвет, содержание – Белый.

Залейте документ следующим цветом E6f2e6.

Создайте новый слой с названием Основа. С помощью инструмента Прямоугольное выделение, нарисуйте внутри документа прямоугольник, отступив примерно 30 пикселей с каждой стороны. Залейте построенный прямоугольник каким-нибудь цветом.

Для нового слоя задайте стиль Обводка со следующими параметрами: ширина 5 Пикселей, цвет 296750.

Далее приступим к рисованию навигации. С помощью инструмента Прямоугольное выделение выполните прямоугольное выделение в правом верхнем углу нашего макета.

Перейдите в меню Выделение – Модификация – Сгладить, чтобы сгладить края выделения. Задайте размер 6 пикселей.

Создайте новый слой и залейте выделение цветом 3b9710.

Примените к новому слою следующие стили:

    Внутренняя тень: дистанция - 0, размер - 10, цвет – 184702, уменьшение – 11

    Обводка: размер – 3, положение - Внутри, цвет – Ffffff.

Продублируйте слой с кнопкой несколько раз и разместите кнопки на одинаковом расстоянии друг от друга.

Создайте новый слой. С помощью Прямоугольного выделения нарисуйте прямоугольник, который будет закрывать нижнюю часть кнопок. Залейте новое выделение цветом – 8fD2fd.

Примените к созданному слою стиль Внутренняя тень, установив параметр дистанция равным 0. Так же для данного слоя задайте обводку шириной 3 пикселя белым цветом.

Откройте фото с пейзажем Foto. jpg. Перетащите слой с пейзажем в ваш рабочий документ и расположите слой под кнопками и голубым прямоугольником.

Удалите ненужные части изображения пейзажа, для этого сделайте активным слой с пейзажем с нажатой клавишей Ctrl Выполните щелчок по пиктограмме слоя Основа. Появиться выделение. Далее выполните команду Инвертировать выделение и нажмите на клавиатуре клавишу Delete.

Возьмите тоже самое фото, сделайте его меньше и разместите в левой стороне заголовка на голубом прямоугольнике.