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





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

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


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

Подсказка

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

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

Этот урок поможет вам научиться создавать стильный веб-сайт для веб-студии.


Стильный веб-дизайн


1. Создайте новый документ размером 800×600 px и разрешением 72 dpi. Инструментом Заливка (Paint Bucket Tool) залейте фон цветом #E2C89F.



Стильный веб-дизайн


2. При помощи инструмента Прямоугольник (Rectangle Tool) создайте слой, разработанный для разделов сайта, и залейте его таким же цветом, как и фон. Инструмент Преобразовать точку привязки (Convert Point Tool) поможет подкорректировать форму элемента, а инструмент Добавить точку привязки (Add Anchor Point Tool) - добавить ещё одну вершину.



Стильный веб-дизайн


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



Стильный веб-дизайн


Обводка:



Стильный веб-дизайн


Стильный веб-дизайн


4. Создайте новый слой (Create New Layer) и изобразите тень под слоем разделов. Сначало выберите инструмент Кисть (Brush Tool) и нарисуйте пятно чёрного цвета, затем, используя инструмент Палец (Smudge Tool), размажьте пятно справа налево. Инструментом Ластик
(Eraser Tool) сотрите ненужные элементы.



Стильный веб-дизайн


Стильный веб-дизайн


Стильный веб-дизайн


Стильный веб-дизайн


5. Теперь перейдите к созданию кнопок меню, расположенных на заголовке сайта, с помощью инструмента Прямоугольник (Rectangle Tool). Используя инструмент Преобразовать точку привязки (Convert Point Tool), подкорректируйте форму кнопок. Расположите этот слой ниже слоя разделов.



Стильный веб-дизайн


6. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Отбрасывание тени
(Layer Style - Drop Shadow).



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Обводка:



Стильный веб-дизайн


Стильный веб-дизайн


7. Сделайте 4 копии нового слоя и в режиме Свободного трансформирования (Free Transform) поверните их, где это необходимо. При помощи инструмента Преобразовать точку привязки (Convert Point Tool) исправьте форму копий. Измените настройки для каждого слоя копии. Копии должны быть расположены, как и первая кнопка, ниже слоя разделов.



Стильный веб-дизайн


8. Для первой копии установите Заливку (Fill) слоя - 0% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow).



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


9. Для второй копии установите Заливку (Fill) слоя - 0% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow).



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Обводка:



Стильный веб-дизайн


10. Для третьей копии установите Заливку (Fill) слоя - 0% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow).



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Обводка:



Стильный веб-дизайн


11. Для четвёртой копии также установите Заливку (Fill) слоя - 0% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow).



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Обводка:



Стильный веб-дизайн


Стильный веб-дизайн


12. При помощи инструмента Произвольная фигура (Custom Shape Tool) создайте несколько звёзд (цвета указаны на рисунке ниже). Нам необходимо повернуть фигуры инструментом Свободное трансформирование (Free Transform).



Стильный веб-дизайн


Стильный веб-дизайн


Звёзды с тенью имеют одинаковые настройки:



Стильный веб-дизайн


Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


15. При помощи инструмента Произвольная фигура (Custom Shape Tool) создайте звёзды с отверстиями (слой самой нижней жёлтой звезды следует расположить ниже слоя жёлтой кнопки меню).



Стильный веб-дизайн


Стильный веб-дизайн


16. Для всех звёзд, содержащих отверстия, примените стиль Отбрасывание тени
(Layer Style - Drop Shadow).



Стильный веб-дизайн


Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Обводка:



Стильный веб-дизайн


Стильный веб-дизайн


19. Теперь добавьте в слове “Webstudio” над буквой “i” маленькую звезду цветом #D1C5B0, выбирая для этой операции инструмент Произвольная фигура (Custom Shape Tool). В режиме Свободного трансформирования (Free Transform) поверните фигуру.



Стильный веб-дизайн


Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


21. Кликните правой кнопкой мыши на недавно созданный слой звезды, создайте новый слой (Create New Layer) и выделите отдельный слой. Используя инструмент Ластик (Eraser Tool), удалите те элементы, которые показаны на рисунке ниже.



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


Стильный веб-дизайн


24. Напишите названия кнопок меню, расположенных на заголовке сайта. В режиме Свободного трансформирования (Free Transform) немного наклоните надписи. Настройки для “home”:



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


25. Выделите каждый слой, содержащий название кнопки, затем, добавьте маску слоя, кликнув на иконку внизу палитры слоёв. Далее выберите инструмент Кисть (Brush Tool). Примените тёмную кисть для светлых надписей, а для тёмных надписей используйте светлую кисть. Установите Непрозрачность (Opacity) каждого слоя - 90%.



Стильный веб-дизайн


Стильный веб-дизайн


26. Вставьте соответствующий текст в раздел сайта. Настройки для выделенного текста:



Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


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



Стильный веб-дизайн


Стильный веб-дизайн


28. Используя ранее применяемую операцию для создания меню сайта, обработайте также разделы сайта. Кисть и цвет такие же, как и фон:



Стильный веб-дизайн


29. Изобразите скриншоты работ и примените для них стиль Обводка (Layer Style - Stroke).



Стильный веб-дизайн


Стильный веб-дизайн








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

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

Ваше Имя

Ваш E-mail

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

Введите код: