Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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



Web дизайн от дизайнерской студии


1. Создайте новый документ размером 555×671 px и разрешением 72 dpi и залейте его цветом #586168.



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


4. Тем же инструментом Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте нижнюю панель сайта в 3 уровня. На первом уровне мы создадим первый элемент (подкорректируйте углы элемента инструментом Преобразовать точку привязки
(Convert Point Tool)). На втором уровне зажмите Shift и сделайте остальную работу. На третьем уровне, удерживая Alt, сотрите середину фигуры.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


6. Выберите инструмент Линия (Line Tool) и создайте разделительную вертикальную линию цветом #464F56.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


7. Примените для линии стиль Наложение цвета (Layer Style - Color Overlay).



Web дизайн от дизайнерской студии


Обводка:



Web дизайн от дизайнерской студии


8. Сделайте 5 копий нового созданного слоя и расположите их, как показано в следующем рисунке:



Web дизайн от дизайнерской студии


9. Затем выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и создайте нижний слой центральной части сайта.



Web дизайн от дизайнерской студии


10. Расположите правильно все слои и примените для последнего слоя стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


12. Примените для элемента стиль Внешнее свечение (Layer Style - Outer Glow).



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


13. Теперь с помощью инструмента Прямоугольник (Rectangle Tool) создайте ещё один элемент, предназначенный для заголовка сайта.



Web дизайн от дизайнерской студии


14. Примените для элемента стиль Внутренняя тень (Layer Style - Inner Shadow).



Web дизайн от дизайнерской студии


Внутреннее свечение:



Web дизайн от дизайнерской студии


Тиснение:



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


15. Сделайте 3 копии созданного слоя и расположите их, как показано на рисунке:



Web дизайн от дизайнерской студии


16. Затем перейдите к созданию заголовка сайта в несколько этапов, методом, используемым ранее. Основной инструмент: Прямоугольник с закругленными краями (Rounded Rectangle Tool). Подкорректировать углы поможет инструмент Преобразовать точку
привязки (Convert Point Tool), а вырезать отверстия возможно зажатием клавиши Alt.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


17. Примените для заголовка сайта стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн от дизайнерской студии


Внутреннее свечение:



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


20. Выберите инструмент Линия (Line Tool) и нарисуйте горизонтальную полосу чёрного цвета.



Web дизайн от дизайнерской студии


21. Теперь необходимо создать несколько вертикальных полос на заголовке сайта, так же как мы создавали их на нижней панеле сайта (или вы можете просто скопировать их).



Web дизайн от дизайнерской студии


22. Используя инструмент Линия (Line Tool), нарисуйте разделительную полосу на панеле кнопок меню.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


24. Сделайте 2 копии нового созданного слоя и расположите их так, как показано в рисунке ниже:



Web дизайн от дизайнерской студии


25. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте слой углубления на верхней части кнопки.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


27. Снова выберите инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) и создайте ещё один слой на недавно созданном слое.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


29. Для нашего удобства, объедините в группу все слои, содержащие углубление верхней части с синей установкой. Затем, сделайте 3 копии новой группы.



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


32. Заполните центральную часть сайта соответствующим текстом. Настройки для выделенного текста:



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


33. Теперь вставьте картинки напротив каждого пункта.



Web дизайн от дизайнерской студии


34. Примените для всех картинок стиль Обводка (Layer Style - Stroke).



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


36. Примените для слова “Design” стиль Внешнее свечение (Layer Style - Outer Glow):



Web дизайн от дизайнерской студии


Тиснение:



Web дизайн от дизайнерской студии


Наложение цвета:



Web дизайн от дизайнерской студии


37. Примените для слова“Studio” стиль Отбрасывание тени (Layer Style - Drop Shadow):



Web дизайн от дизайнерской студии


38. Теперь напишите названия кнопок меню, расположенных на заголовке сайта. Настройки указаны ниже:



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


39. При помощи инструмента Карандаш (Pencil Tool) нарисуйте непрерывную линию, сформированную из нескольких точек.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


40. Скопируйте созданный слой и расположите копию, как показано на рисунке:



Web дизайн от дизайнерской студии


41. Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте полосу на кнопках меню сайта.



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


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



Web дизайн от дизайнерской студии


Web дизайн от дизайнерской студии







Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: