Дизайн шапки хостинг-сайта

Над таким дизайном мы будем работать:


Дизайн шапки хостинг-сайта


1. Создайте новый документ размером 766×800 пикселей с разрешением 72 dpi. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру, показанную ниже:


Дизайн шапки хостинг-сайта


2. К этой фигуре примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта


Обводка:


Дизайн шапки хостинг-сайта


3. Создайте ещё один прямоугольник белого цвета над первым. Установите его Заливку (Fill) – 5%.


Дизайн шапки хостинг-сайта


4. Инструментом Кисть (Brush Tool) нарисуйте эллипс в новом слое и установите Режим наложения – Наложение (Blending Mode – Overlay):


Дизайн шапки хостинг-сайта


5. Из центра эллипса инструментом Перо (Pen Tool) нарисуйте белые лучи и примените к этому слою стиль Внешнее свечение (Layer Style — Outer Glow):


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта


6. В новом слое вставьте изображение компьютера:


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта


7. Инструментом Прямоугольник (Rectangle Tool) создайте четыре прямоугольника, установите Заливку (Fill) этих слоёв – 10%. Инструментом Линия (Line Tool) создайте линии для каждого из них:


Дизайн шапки хостинг-сайта


8. Инструментом Прямоугольник (Rectangle Tool) создайте ещё один прямоугольник слева и примените к нему стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта


9. Инструментом Эллипс (Ellipse Tool) создайте белый овал, установите Заливку (Fill) этого слоя – 10%. Потом инструментом Прямоугольник (Rectangle Tool), удерживая Alt, обрежьте ненужную часть, как показано ниже.


Дизайн шапки хостинг-сайта


10. Инструментом Линия (Line Tool) нарисуйте 1-пиксельную вертикальную линию на правой стороне прямоугольника и 2-пиксельную горизонтальную внизу. Цвет — #03ADC5. Инструментом Перо (Pen Tool) создайте фигуры, показанные ниже:


Дизайн шапки хостинг-сайта


11. К горизонтальной полоске сверху примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн шапки хостинг-сайта


12. Инструментом Прямоугольник (Rectangle Tool) создайте ещё один прямоугольник. Инструментом Эллипс (Ellipse Tool), удерживая Alt, сделайте круглые вырезы:


Дизайн шапки хостинг-сайта


13. Примените стиль Наложение градиента (Layer Style — Gradient Overlay) к новым элементам:


Дизайн шапки хостинг-сайта


14. Инструментом Карандаш (Pencil Tool) нарисуйте чёрную и белую однопиксельные линии:


Дизайн шапки хостинг-сайта


15.[b] Установите Режим наложения слоя с линиями – Наложение (Blending Mode – Overlay) и Непрозрачность (Opacity) – 70%.


Дизайн шапки хостинг-сайта


[b]16. Цвет линий должен стать таким же, как и цвет меню. Сделайте копии линий и поместите их так:


Дизайн шапки хостинг-сайта


17. Займёмся созданием таких кнопок:


Дизайн шапки хостинг-сайта


18. Создайте кнопку инструментом Эллипс (Ellipse Tool) и примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн шапки хостинг-сайта


Обводка:


Дизайн шапки хостинг-сайта


Цвет обводки такой же, как и градиент. Самая тёмная область градиента — #1D66FF.
Потом создайте ещё один эллипс, который станет свечением. Установите Заливку (Fill) этого слоя – 0% и примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта


19. Сделайте несколько копий кнопок. Они должны быть разных цветов и поэтому нужно будет изменить настройки градиента для каждой кнопки:


Дизайн шапки хостинг-сайта


20. Расположите кнопки и напишите текст:

Настройки для текста кнопок:


Дизайн шапки хостинг-сайта


Настройки для внутри полупрозрачных прямоугольников:


Дизайн шапки хостинг-сайта


Настройки для названия сайта:


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта


21. Инструментом Прямоугольник (Rectangle Tool) создайте полоску, как показано ниже. Установите Заливку (Fill) этого слоя – 10%. Это создаст эффект тени:


Дизайн шапки хостинг-сайта

Дизайн шапки хостинг-сайта




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

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

21 октября 2017

Кто покупает портативные DVD-проигрыватели? Правильно, люди, которые хотят иметь возможность смотреть любимые фильмы вне зависимости от своего местонахождения. Но только те, кто по каким-либо причинам не являются владельцами ноутбука, который справится не только с этой, но и со многими другими функциями. Люди, которых на западе называют "non-IT-related", что в вольном переводе означает "имеющие слабое отношение к информационных технологиям". Поэтому при оценке таких устройств необходимо помнить, что их главными достоинствами являются не технические ноу-хау, а простота управления и надежность работы.

21 октября 2017

21 октября 2017