Хостинговый сайт

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


Хостинговый сайт


1. Создайте новый документ размером 1200х1200 пикселей, залейте фон цветом #eeeeee. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение верхней части холста. Высота выделения – 40-42 пикселя.


Хостинговый сайт


2. Залейте выделение любым цветом в новом слое и примените стиль Наложение градиента (Layer Style — Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Хостинговый сайт


3. Создайте новый документ размером 25х25 пикселей и инструментом Карандаш (Pencil Tool) или Кисть (Brush Tool) нарисуйте узор, показанный ниже.


Хостинговый сайт


4. Когда, закончите, нужно будет сохранить узор. Для этого перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните ваш узор. Вернитесь в основной документ и сделайте выделение слоя с прямоугольником (Ctrl+Click), создайте новый слой (Create New Layer), выберите инструмент Заливка (Paint Bucket Tool) и в настройках сверху выберите созданный узор. Потом залейте выделение и установите Непрозрачность слоя – 2%.


Хостинговый сайт


5. Теперь добавим небольшой эффект свечения. Сделайте выделение верхней части полоски, как показано ниже.


Хостинговый сайт


6. В новом слое залейте выделение белым цветом и установите Непрозрачность слоя – 50%.


Хостинговый сайт


7. Перейдём к созданию заголовка. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 145 пикселей на всю ширину холста.


Хостинговый сайт


8. Выберите инструмент Овальная область (Elliptical Marquee Tool) создайте выделение, удерживая Shift, чтобы дополнить область кругом.


Хостинговый сайт


9. В новом слое залейте выделение любым цветом и примените стиль Наложение градиента (Layer Style — Gradient Overlay):

Режим – Нормальный, Стиль — Линейный


Хостинговый сайт


10. Сделайте выделение слоя с созданной фигурой (Ctrl+Click) и примените Сжатие (Modify – Contract) со значение 10 пикселей. Создайте новый слой (Create New Layer) и залейте выделение любым цветом.

Так как фигура была сжата, то боковые стороны также имеют отступ в 10 пикселей. Наша фигура должна быть сжата только сверху и снизу, а ширина её должна оставаться прежней. Для этого сделайте выделение боковых сторон и растяните их до прежних размеров.


Хостинговый сайт


11. Потом примените следующие стили к слою с маленькой фигурой в меню Стилей слоя (Layer Style — Blending Options):

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


Хостинговый сайт


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


Хостинговый сайт

Хостинговый сайт


12.


Хостинговый сайт


13. Инструментом Эллипс (Ellipse Tool) создайте круг, как показано ниже:


Хостинговый сайт


14. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Внутренняя тень (Режим – Умножение):


Хостинговый сайт


Тиснение (Стиль – Контурное тиснение, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):


Хостинговый сайт


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


Хостинговый сайт

Хостинговый сайт


15. Инструментом Прямоугольная область (Rectangular Marquee Tool) или Прямоугольник (Rectangle Tool) создайте 4 прямоугольника, как показано ниже.


Хостинговый сайт


16. Примените фильтр Сферизация (Spherize Filter). В зависимости от размера прямоугольников примените столько раз этот фильтр, сколько нужно. В моём случае мне хватило одного раза.

Поместите эти прямоугольники на шар и установите Непрозрачность слоя – 20%.


Хостинговый сайт


17. Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже.


Хостинговый сайт


18. Залейте выделение белым цветом и установите Непрозрачность – 20%, потом добавьте маску слоя (Layer Mask). Сделайте заливку градиентом снизу вверх, но остановитесь в центре круга.


Хостинговый сайт


19. Повторите последние шаги ещё раз, чтобы получить результат, показанный ниже. Во второй раз именитее направление заливки градиентом.


Хостинговый сайт


20. Вставьте в область шара логотип и установите Режим наложения этого слоя – Перекрытие (Blending Mode – Overlay). Инструментом Горизонтальный текст (Horizontal Type Tool) напишите заголовок и слоган.


Хостинговый сайт


21. К слою с логотипом примените следующие стили слоя:

Отбрасывание тени (Режим – Умножение):


Хостинговый сайт


Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):


Хостинговый сайт

Хостинговый сайт


22. Также подпишите разделы меню.


Хостинговый сайт


23. Между разделами нужно создать разделители. Для этого создайте две 1-пиксельные линии высотой с внутреннюю фигуру, которые нужно будет расположить рядом друг с другом. Одна линия будет белой, другая чёрной. Установите Режим наложения этого слоя – Перекрытие (Blending Mode – Overlay).


Хостинговый сайт


24. Под областью шапки сайта напишите ещё текст.


Хостинговый сайт


25. Примените к нему стиль Отбрасывание тени (Layer Style — Drop Shadow):


Хостинговый сайт


26. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) со значением радиуса 10 пикселей создайте фигуру, как показано ниже.


Хостинговый сайт


27. Перейдите в меню Стилей слоя и настройте так:

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


Хостинговый сайт


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


Хостинговый сайт


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


Хостинговый сайт

Хостинговый сайт


28. Заполните этот прямоугольник контентом:


Хостинговый сайт


29. Создайте, таким же образом, сайдбар.


Хостинговый сайт


30. Потом создайте две линии в одном слое:


Хостинговый сайт


31. Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже, и залейте его чёрным цветом.


Хостинговый сайт


32. Примените к этому слою фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 6-8 пикселей. Установите Непрозрачность – 5% и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение нижней половины размытого овала.


Хостинговый сайт


33. Нажмите Delete, добавьте икону Twitter и подпишите:


Хостинговый сайт


34. Создайте ещё три прямоугольника и вставьте между ними иконки из этого набора.


Хостинговый сайт


35. В каждый прямоугольник напишите информацию о хостинговых планах.


Хостинговый сайт


36. Выберите все слои шапки сайта, включая слои с шаром и логотипом, но без навигационного меню. Сделайте копию этих слоёв и перетащите в нижнюю часть холста. Инструментом Свободное трансформирование (Free Transform) измените размер слоёв, чтобы получить нормальный футер.

Примените Отражение по горизонтали (Transform – Flip Horizontal) и расширьте футер:


Хостинговый сайт


Финальный результат:


Хостинговый сайт





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

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

20 июля 2018

Дата анонса: 2006/02/10 Эффективное разрешение, МП: 6 Диагональ ЖК-дисплея, дюймы: 2.4

20 июля 2018

Байонет: Canon EF Тип объектива: стандартный Фокусное расстояние: переменное

20 июля 2018

Байонет: Canon EF Тип объектива: макро Фокусное расстояние: постоянное