Портфолио внештатного сотрудника

1. Создайте новый документ размером 1000×700 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон рисунка:



Портфолио внештатного сотрудника


2. Примените для слоя стиль Наложение градиента (Layer Style — Gradient Overlay).



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


3. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте заголовок сайта.



Портфолио внештатного сотрудника


4. Примените для заголовка стиль Наложение градиента (Layer Style — Gradient Overlay).



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


5. Теперь необходимо создать узор инструментом, который расположен здесь: BGPatterns. Установите по очереди нижеуказанные настройки:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


6. Создайте новый узор, перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Затем на новом слое (Create New Layer) перейдите в меню Редактировать>Выполнить заливку (Edit>Fill) и установите сохранённый узор.



Портфолио внештатного сотрудника


7. Установите Заливку (Fill) слоя — 0% и Режим наложения – Осветление основы
(Blending Mode – Color Dodge).



Портфолио внештатного сотрудника


8. Добавьте маску слоя, кликнув на иконку внизу палитры слоёв и выберите инструмент Кисть (Brush Tool) чёрного цвета, чтобы стереть части узора, выходящие за края заголовка:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


9. Вставьте название сайта, соблюдая настройки ниже (используйте этот шрифт — font):



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


11. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 20 рх) создайте кнопку меню:



Портфолио внештатного сотрудника


12. Установите Заливку (Fill) слоя — 0% и примените для кнопки стиль Внешнее свечение
(Layer Style — Outer Glow).



Портфолио внештатного сотрудника


Обводка:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


13. Сделайте 3 копии слоя кнопки и в режиме Свободного трансформирования (Free Transform) расположите их, как на рисунке ниже:



Портфолио внештатного сотрудника


14. Напишите названия кнопок меню, располагая каждое слово на отдельном слое:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


16. При помощи инструмента Прямоугольник (Rectangle Tool) создайте панель сайта цветом #F5F5F5.



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


18. Сделайте 3 копии последнего слоя и в режиме Свободного трансформирования
(Free Transform) расположите копии, как на рисунке ниже:



Портфолио внештатного сотрудника


19. Вставьте рисунки на созданные слои. Вы можете использовать фото, которое находится здесь


Портфолио внештатного сотрудника


20. Примените для изображений стиль Обводка (Layer Style — Stroke):



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


21. Инструментом Прямоугольник (Rectangle Tool) нарисуйте кнопку белого цвета под рисунком:



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


23. Сделайте 3 копии слоя кнопки и инструментом Свободное трансформирование
(Free Transform) расположите их, как показано ниже:



Портфолио внештатного сотрудника


24. Вставьте названия на сделанных кнопках:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


25. Теперь вставьте основной текст сайта. Настройки указаны ниже:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


26. При помощи инструмента Линия (Line Tool) создайте линию под текстом цветом #6E6969.



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


27. Теперь вставьте авторское право, соблюдая настройки ниже:



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


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



Портфолио внештатного сотрудника


Портфолио внештатного сотрудника








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

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

21 ноября 2018

EF-S 10-22 мм f/3,5–4,5 USM – объектив для цифровых зеркальных камер. Объектив специально сконструирован для цифровых зеркальных камер c размером сенсора APS-C и креплением EF-S ( Canon EOS 20D, EOS-20Da,...

21 ноября 2018

Дата анонса: 2007/02/22 Эффективное разрешение, МП: 7.1 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 175

21 ноября 2018

16,1 мегапикселей, 5-кратный зум, запись в формате 720p HD, оптический стабилизатор Optical SteadyShot, ЖК-экран 7,5 см, функции Sweep Panorama и iAUTO