Обычный дизайн сайта

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


Обычный дизайн сайта


Создание документа
Создайте новый документ:


Обычный дизайн сайта


Создание фона
Используя инструмент Заливка (Paint Bucket Tool), залейте фон цветом #EEEEEE. Потом примените фильтр Добавить шум (Add Noise Filter):


Обычный дизайн сайта


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


Обычный дизайн сайта


В новом слое залейте выделение любым цветом и примените эти стили в меню Стилей слоя (Layer Style — Blending Options):

Внутреннее свечение (Режим – Нормальный, Метод – Мягкий):


Обычный дизайн сайта


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


Обычный дизайн сайта


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


Обычный дизайн сайта

Обычный дизайн сайта


На нижней стороне созданного прямоугольника создайте 1-пиксельную линию белого цвета:


Обычный дизайн сайта


На навигационной панели напишите названия разделов:


Обычный дизайн сайта


Одно слово я написал другим цветом, так как я хочу подсветить этот раздел, то есть сделать его активным. Для этого создайте выделение, как показано ниже, инструментом Прямоугольная область (Rectangular Marquee Tool):


Обычный дизайн сайта


Залейте его любым цветом в новом слое, который нужно расположить под текстовым. Потом примените эти стили:

Внутреннее свечение (Режим – Нормальный, Метод – Мягкий):


Обычный дизайн сайта


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


Обычный дизайн сайта

Обычный дизайн сайта


Теперь нужно создать разделители. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте 1-пикслельные линии разного цвета:


Обычный дизайн сайта

Обычный дизайн сайта


В пустую область после разделов поместите область поиска. Используйте инструменты фигур и текстовый инструмент для этого. Для кнопки “Go!” те же стили, что и для кнопки “Home”.


Обычный дизайн сайта


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


Обычный дизайн сайта


Залейте его любым цветом в новом слое и примените такие стили:

Наложение цвета (Режим – Нормальный):


Обычный дизайн сайта


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


Обычный дизайн сайта


Также внизу создайте 1-пикслельную линию белого цвета:


Обычный дизайн сайта


Под навигационной панелью добавьте заголовок сайта. Я использовал два разных цвета и шрифт как в фильме “Звёздные войны”. Также примените к заголовку стиль Отбрасывание тени (Режим – Умножение):


Обычный дизайн сайта

Обычный дизайн сайта


Под заголовком вставьте картинку:


Обычный дизайн сайта


Сделайте выделение слоя с изображением (Ctrl+Click), примените Расширение (Modify – Expand) со значением 10 пикселей:


Обычный дизайн сайта


Создайте новый слой (Create New Layer) под слоем с изображением и залейте в нём выделение белым цветом. Потом к белому прямоугольнику добавьте тонкую обводку. Справа от картинки добавьте небольшое описание:


Обычный дизайн сайта


Область контента
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и установите значение радиуса – 30 пикселей.


Обычный дизайн сайта


Создайте выделение, как показано ниже:


Обычный дизайн сайта


Залейте его любым цветом в новом слое и примените такие стили:

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


Обычный дизайн сайта


Наложение цвета (Режим – Нормальный):


Обычный дизайн сайта


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


Обычный дизайн сайта

Обычный дизайн сайта


Сделайте 2 копии этого прямоугольника и поместите так:


Обычный дизайн сайта


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


Обычный дизайн сайта


Футер
Тем же инструментом создайте прямоугольник в нижней части холста. Примените к нему те же стили слоя, что и для последних прямоугольников:


Обычный дизайн сайта


Добавьте в эту область нужные данные о правах и всё готово.


Обычный дизайн сайта





Делаем Web-дизайн

Вас может также заинтересовать:

15 декабря 2018

Несмотря на трудные времена, которые переживает сейчас плазменная технология, ее качество продолжает улучшаться. После ухода с рынка телевизоров компании Pioneer, пальму первенства подхватила компания Panasonic. Глядя на очередную новинку, совершенно точно можно сказать, о том, что уровень качества, заданный легендарным брендом, как минимум достигнут, а, возможно, уже и превзойден.

15 декабря 2018

Дата анонса: 2011/07/27 Эффективное разрешение, МП: 14 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 120

15 декабря 2018

Дата анонса: 2007/01/29 Эффективное разрешение, МП: 7.1 Диагональ ЖК-дисплея, дюймы: 3