Урок на тему «Создание web-страниц. Создание эскиза web-страницы»
Создание web-страниц
Создание эскиза web-страницы
Создайте новый документ размером 700 на 808 пикселей, разрешение 72 Пикселя на дюйм, режим RGB — цвет, содержание — Белый.
Залейте документ следующим цветом E6f2e6 .
Создайте новый слой с названием Основа. С помощью инструмента Прямоугольное выделение, нарисуйте внутри документа прямоугольник, отступив примерно 30 пикселей с каждой стороны. Залейте построенный прямоугольник каким-нибудь цветом.
Для нового слоя задайте стиль Обводка со следующими параметрами: ширина 5 Пикселей, цвет 296750 .
Далее приступим к рисованию навигации. С помощью инструмента Прямоугольное выделение выполните прямоугольное выделение в правом верхнем углу нашего макета.
Перейдите в меню Выделение — Модификация — Сгладить, чтобы сгладить края выделения. Задайте размер 6 пикселей.
Создайте новый слой и залейте выделение цветом 3b9710 .
Примените к новому слою следующие стили:
Внутренняя тень : дистанция — 0 , размер — 10 , цвет — 184702 , уменьшение — 11
Обводка : размер — 3 , положение — Внутри, цвет — Ffffff.
Продублируйте слой с кнопкой несколько раз и разместите кнопки на одинаковом расстоянии друг от друга.
Создайте новый слой. С помощью Прямоугольного выделения нарисуйте прямоугольник, который будет закрывать нижнюю часть кнопок. Залейте новое выделение цветом — 8f D2fd.
Примените к созданному слою стиль Внутренняя тень, установив параметр дистанция равным 0 . Так же для данного слоя задайте обводку шириной 3 пикселя белым цветом.
Откройте фото с пейзажем Foto. jpg. Перетащите слой с пейзажем в ваш рабочий документ и расположите слой под кнопками и голубым прямоугольником.
Удалите ненужные части изображения пейзажа, для этого сделайте активным слой с пейзажем с нажатой клавишей Ctrl Выполните щелчок по пиктограмме слоя Основа. Появиться выделение. Далее выполните команду Инвертировать выделение и нажмите на клавиатуре клавишу Delete.
Возьмите тоже самое фото, сделайте его меньше и разместите в левой стороне заголовка на голубом прямоугольнике.
Урок на тему «Создание web-страниц. Создание эскиза web-страницы»