Главная страница сайта

1. Создайте новый документ размером 850×912 px и разрешением 72 dpi. При помощи инструмента Заливка (Paint Bucket Tool) залейте фон цветом #191E24.



Главная страница сайта


2. Создайте новый слой (Create New Layer) и используйте на нём инструмент Прямоугольная область (Rectangular Marquee Tool) для создания нескольких прямоугольных элементов (цвета указаны на рисунке ниже). Каждый элемент создайте на новом слое.



Главная страница сайта


3. При помощи инструмента Ластик (Eraser Tool) сотрите уголки в 3 px каждого прямоугольника, как на рисунке ниже.



Главная страница сайта


4. Скопируйте последний слой 4 раза (Ctrl+J), объедините копии в один слой (Ctrl+E), переместите этот слой под слои прямоугольников и примените для него фильтр Размытие по гауссу (Gaussian Blur Filter).



Главная страница сайта


Получим:



Главная страница сайта


5. Примените для каждого прямоугольника стиль Тиснение (Layer Style — Bevel and Emboss).



Главная страница сайта


Наложение градиента:



Главная страница сайта


Настройки градиента:



Главная страница сайта


Настройки градиента для каждого прямоугольника:



Главная страница сайта


Получим:



Главная страница сайта


6. При помощи инструмента Прямоугольная область (Rectangular Marquee Tool) создайте 4 других прямоугольника на новом слое (Create New Layer). Инструментом Заливка
(Paint Bucket Tool) залейте новые элементы белым цветом. Установите Непрозрачность (Opacity) — 20%.



Главная страница сайта


7. При помощи инструмента Перо (Pen Tool) нарисуйте линию:



Главная страница сайта


8. Выберите нижеуказанную кисть и настройте так:



Главная страница сайта


9. Создайте новый слой (Create New Layer) и выберите опцию Paths, дважды кликнув на слое и нажмите Ok. Затем выберите следующее:



Главная страница сайта


В результате получим линию:



Главная страница сайта


10. Примените для линии стиль Внешнее свечение (Layer Style — Outer Glow).



Главная страница сайта


Наложение градиента:



Главная страница сайта


Настройки градиента:



Главная страница сайта


В результате получим разноцветную линию:



Главная страница сайта


11. Таким же методом нарисуйте ещё несколько линий, не применяя стилей слоя:



Главная страница сайта


12. Расположите эти слои под прямоугольниками. Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте тонкую линию на основании сайта цветом #262B31.



Главная страница сайта


13. Создайте новый документ размером 5×5 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте диагональную линию.



Главная страница сайта


14. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Вернитесь к первому документу и перейдите в меню Редактировать>Выполнить заливку (Edit>Fill) и найдите сохранённый узор в опции Custom Pattern, нажмите Ok. Проделайте эту работу на новом слое (Create New Layer).



Главная страница сайта


15. Инструменты Прямоугольная область (Rectangular Marquee Tool) и Ластик (Eraser Tool) помогут стереть ненужные элементы и расположить этот слой под прямоугольниками. Установите Заливку (Fill) слоя — 10%:



Главная страница сайта


16. Создайте оранжевую линию — #C53300, затем на основании — серую.



Главная страница сайта


Начните создавать логотип:



Главная страница сайта


17. Вставьте текст, соблюдая настройки ниже для верхней линии:



Главная страница сайта


Затем для нижней:



Главная страница сайта


18. Для обеих линий примените стиль Отбрасывание тени (Layer Style — Drop Shadow).



Главная страница сайта


Внешнее свечение:



Главная страница сайта


19. Теперь вставьте название кнопки:



Главная страница сайта


Настройки текста:



Главная страница сайта


20. Примените для надписи стиль Отбрасывание тени (Layer Style — Drop Shadow).



Главная страница сайта


Наложение градиента:



Главная страница сайта


Настройки градиента:



Главная страница сайта


Результат:



Главная страница сайта


21. Теперь вставьте соответствующий текст:



Главная страница сайта


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



Главная страница сайта


Настройки для самого текста:



Главная страница сайта


Главная страница сайта






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

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

20 июля 2018

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

20 июля 2018

20 июля 2018

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