Дизайн веб-сайта

Узнайте, как создать эффективный и современный веб-сайт для вашей дизайн-студии.


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


3. Создайте новый документ размером 4×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте узор цветом #59AAC8.



Дизайн веб-сайта


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор.



Дизайн веб-сайта


4. Создайте новый документ размером 4×4 px и разрешением 72 dpi. Тем же инструментом Карандаш (Pencil Tool) нарисуйте ещё один узор. Цвет фона — #002848, а цвет узора такой же, как и в предыдущем.



Дизайн веб-сайта


5. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Создайте новый слой (Create New Layer) и при помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой для разделов сайта цветом #4F95B3.



Дизайн веб-сайта


6. Примените для слоя стиль Наложение узора (Layer Style — Pattern Overlay).



Дизайн веб-сайта


Обводка:



Дизайн веб-сайта


Дизайн веб-сайта


7. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) уменьшите копию и измените цвет на #004D7B.



Дизайн веб-сайта


8. Примените для копии стиль Внутреннее свечение (Layer Style — Inner Glow).



Дизайн веб-сайта


Дизайн веб-сайта


9. Создайте ещё один документ размером 4×4 px и разрешением 72 dpi. Инструментом Карандаш (Pencil Tool) нарисуйте следующий узор. Цвет фона — #104668, цвет узора — #588EB0.



Дизайн веб-сайта


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор.



Дизайн веб-сайта


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



Дизайн веб-сайта


11. Примените для слоя стиль Тиснение (Layer Style — Bevel and Emboss).



Дизайн веб-сайта


Текстура (Тиснение). (Rock Patterns Set):



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Обводка:



Дизайн веб-сайта


Дизайн веб-сайта


12. Скопируйте новый слой и в режиме Свободного трансформирования (Free Transform) уменьшите копию, как показано ниже:



Дизайн веб-сайта


13. Установите Заливку (Fill) слоя — 0% и примените для копии стиль Наложение градиента (Layer Style — Gradient Overlay).



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


14. Объедините в группу все слои, содержащие левый раздел. Скопируйте эту группу и инструментом Свободное трансформирование (Free Transform) горизонтально сузьте копию и расположите её, как на рисунке ниже:



Дизайн веб-сайта


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



Дизайн веб-сайта


16. Теперь нарисуйте тонкую полосу цветом #002848 и расположите её ниже нового слоя. Используйте для этой операции инструмент Прямоугольник (Rectangle Tool).



Дизайн веб-сайта


17. Установите Непрозрачность (Opacity) слоя — 50% и примените для слоя стиль Наложение узора (Layer Style — Pattern Overlay).



Дизайн веб-сайта


Дизайн веб-сайта


18. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool), создайте первичный слой для кнопок меню на заголовке сайта, цветом #065E91.



Дизайн веб-сайта


19. Снова выберите инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) и нарисуйте кнопку на панеле меню цветом #0473AC.



Дизайн веб-сайта


20. Примените для слоя стиль Тиснение (Layer Style — Bevel and Emboss).



Дизайн веб-сайта


Обводка:



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


22. Используя инструмент Эллипс (Ellipse Tool), нарисуйте первичный слой логотипа сайта цветом #003F6E.



Дизайн веб-сайта


23. Примените для слоя стиль Внутренняя тень (Layer Style — Inner Shadow).



Дизайн веб-сайта


Дизайн веб-сайта


24. Скопируйте созданный слой и инструментом Свободное трансформирование (Free Transform) уменьшите копию:



Дизайн веб-сайта


25. Примените для копии стиль Внутреннее свечение (Layer Style — Inner Glow).



Дизайн веб-сайта


Тиснение:



Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


26. Напишите на логотипе заглавные буквы, составляющие название сайта, соблюдая нижеуказанные настройки:



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


28. Напишите само название сайта. Настройки для “Design”:



Дизайн веб-сайта


Настройки для “Studio”:



Дизайн веб-сайта


Дизайн веб-сайта


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



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


30. Вставьте названия кнопок меню, название текущей страницы и авторское право, соблюдая нижеуказанные настройки:



Дизайн веб-сайта


Дизайн веб-сайта


31. Теперь необходимо вставить текст в соответствующий раздел. Настройки для оранжевого текста:



Дизайн веб-сайта


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



Дизайн веб-сайта


Дизайн веб-сайта


32. Теперь добавьте картинки на наш сайт:



Дизайн веб-сайта








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

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

20 июня 2018

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

20 июня 2018

20 июня 2018

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