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





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

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


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

Подсказка

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

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

Научитесь создавать тёмный профессиональный веб-сайт из этого детально описанного и качественного урока.



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


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



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


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



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


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



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


3. Выберите предыдущий инструмент Прямоугольник (Rectangle Tool) и создайте нижний слой, разработанный для панели сайта. Цвет слоя - #1B242B.



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


4. Теперь с помощью инструмента Прямоугольник с закругленными краями
(Rounded Rectangle Tool) создайте рамку одного из разделов сайта (цвет рамки- #1B242B).



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


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



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


6. При помощи инструмента Линия (Line Tool) вставьте горизонтальную полосу в недавно созданную рамку. Цвет полосы - #585D60.



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


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



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


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



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


9. Создайте рамки внутри созданных разделов сайта. Используйте инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool), который поможет создать внешние границы, затем, удерживая Alt, сотрите внутреннюю часть тем же инструментом. Подкорректируйте форму рамки инструментом Преобразовать точку привязки (Convert Point Tool).



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


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


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



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


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



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


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



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


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



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


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



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


13. Используя предыдущий инструмент, изобразите тень на недавно созданном слое.



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


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


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



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


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



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


15. При помощи инструмента Карандаш (Pencil Tool) нарисуйте 2 вертикальные полосы. Первая полоса, расположенная на левой стороне, имеет чёрный цвет, а вторая полоса с правой стороны - белый.



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


16. Установите Непрозрачность (Opacity) слоя - 40%.



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


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



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


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



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


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


19. Напишите название самого сайта. Настройки для “design studio”:



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


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



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


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


20. Примените для надписи “design studio” стиль Тиснение (Layer Style - Bevel and Emboss):



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


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



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


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



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


21. Примените для надписи “creative studio” стиль Внутренняя тень (Layer Style - Inner Shadow):



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


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



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


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



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


22. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите элемент, обведённый красным цветом, из таблицы ниже. Он будет служить нам в качестве логотипа.



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


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


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



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


Тиснение:



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


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



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


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



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


24. С помощью инструмента Карандаш (Pencil Tool) нарисуйте 3 треугольника цветом #BBBEC3.



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


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


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



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


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


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



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


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



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


28. Заполните соответствующий раздел сайта необходимым текстом, соблюдая нижеуказанные требования:



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


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


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



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


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



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


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


30. Инструмент Карандаш (Pencil Tool) поможет нарисовать треугольник с тенью рядом с недавно добавленным текстом.



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


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


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



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


32. Последний этап создания сайта включает в себя добавление логотипов в последний раздел сайта:



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







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

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

Ваше Имя

Ваш E-mail

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

Введите код: