Дизайн сайта компании по разработке сайтов

15 ноября 2012 · Глеб Х. · «Мир Фотошопа»

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

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N) размером 1024х1300 пикселей. Инструментом Paint Bucket Tool (G) залейте фон цветом #669999. Затем создайте новый слой (Ctrl + Shift + N), выберите инструмент Brush Tool (B) размером 500 пикселей и нарисуйте белое пятно в верхней части холста. Установите режим наложения слоя на Hard Light и понизьте Opacity до 84%.

Шаг 2

Наш сайт будет состоять из следующих элементов:

  • Контент (Content),
  • Слайдер (Slider),
  • Навигация (Navigation),
  • Форма обратной связи (Form).

Вам нужно создать 4 группы для каждой секции сайта. Создайте новый слой и назовите его «header». Он должен быть внутри группы «Navigation». Инструментом Rectangular Marquee Tool (M) создайте выделение на всю ширину холста высотой 40 пикселей. Залейте его цветом #333333.

Выберите инструмент Horizontal Type Tool (T), шрифт «Rockwell», жирный, размером 10pt. На верхней панели напишите название сайта слева (MisterDesign). Справа напишите разделы сайта.

Выберите инструмент Rounded Rectangle Tool (U) и создайте фигуру цветом #669999 под слоем «Home». Таким образом мы обозначим активную страницу.

Шаг 3

Мы закончили с навигационной панелью, теперь займёмся контентом. Выберите текстовый инструмент и напишите «WEBSITE THAT ROCKS», используя тот же шрифт размером 36pt. Цвет этого слогана — #eeeeee. Создайте копию этого текстового слоя (Ctrl + J). Расположите копию под оригиналом, измените цвет на #555555 и понизьте Opacity до 50%. Выберите инструмент Move Tool (V) и сдвиньте слой на 1 пиксель вправо и вниз (используйте клавиши стрелок).

Шаг 4

Так как это сайт компании, занимающейся веб-дизайном, нужно разместить несколько готовых работ. Мы возьмём это изображение, но Вы можете использовать любое другое. Размер изображения — 511х309 пикселей. Вставьте его в наш документ и расположите под слоганом справа. Затем инструментом Polygonal Lasso Tool (L) создайте треугольное выделение в правом верхнем углу. Нажмите Delete.

Создайте ещё одно треугольное выделение и залейте его белым цветом. На скриншоте оно залито серым цветом, но не обращайте на это внимание.

Текстовым инструментом напишите описание к шаблону слева от картинки. После того, как текст будет написан, выделите его и перейдите в меню Window → Paragraph для выравнивания.

Шаг 5

Теперь займёмся слайдером. На нём будут размещены лучшие проекты компании. Создайте новый сой в группе «Slider». Инструментом Rounded Rectangle Tool (U) создайте фигуру размером 875х238 пикселей белого цвета. Кликните правой кнопкой мыши на слое с прямоугольником и выберите пункт Rasterize Layer. Назовите слой «slider».

Инструментом Ellipse Tool (U) создайте два круга на боковых сторонах прямоугольника. Оба слоя тоже нужно растрировать. Затем все три слоя объедините в один (Ctrl + E).

Кликните дважды на объединённом слое слайдера, чтобы открыть окно стилей. Примените стиль Stroke:

  • Size: 5 пикселей
  • Color: #CCCCCC
  • Position: Outside

Установите для шрифта «Rockwell» размер 10pt и цвет #333333. Создайте стрелки по бокам слайдера.

Вставьте несколько шаблонов сайтов и уменьшите их до 224х179 пикселей. Каждая картина имеет 5-пиксельную обводку цветом #CCCCCC. Создайте её при помощи стиля Stroke. В настойках установите Position на Inside.

Шаг 6

Переходим к последней секции сайта — футеру. Создайте новый слой «footer» внутри группы «form». Инструментом Rectangular Marquee Tool (M) создайте прямоугольник на всю ширину холста высотой 354 пикселя. Цвет — #333333. Тем же инструментом создайте чёрную линию-разделитель толщиной 7 пикселей в верхней части этого прямоугольника.

Данную секцию нужно назвать так, чтобы клиент сразу понял какую форму ему нужно заполнить. Выберите шрифт «Rockwell» жирный размером 10pt и напишите «Request a quote now, get it in 30 minutes». Цвет — белый.

Те же шрифтом размером 18pt напишите список полей.

Инструментом Rectangular Marquee Tool (M) создайте прямоугольник размером 347х32 пикселя белого цвета. Примените к нему стиль Stroke.

Создайте несколько копий белого прямоугольника (Ctrl + J) и расположите их напротив названий полей.

Последнее поле нужно увеличить инструментом Free Transform (Ctrl + T).

Используя шрифт «Rockwell» размером 10pt напишите белым цветом «Send!». Под этим словом создайте прямоугольник с закруглёнными углами цветом #669999.

Шаг 7

Справа от формы осталась пустая область. Заполним её отзывом клиента. Заголовок «WHAT CLIENTS ARE SAYING» был написан шрифтом «Rockwell» размером 10pt. Сам отзыв написан шрифтом «Georgia», наклонный, размером 10pt. Имя клиента — «Rockwell» размером 8pt.

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

Мы выбрали! Производим тумбочки; шкаф металлический двухстворчатый . Лучшие кресла.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта psdvibe.com, автор перевода указан в начале урока.

Баки расширительные, печи ермак для бани цены . Скидки магазина печи дымоходы.