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





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

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


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

Подсказка

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

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

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


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


3. Затем выберите инструмент Эллипс (Ellipse Tool) и создайте блеск на фоне, предназначенный для представления сайта.



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


6. Используя тот же инструмент Эллипс (Ellipse Tool), создайте эффект освещения на верхней части фона:



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


8. Теперь создайте первичный слой разделов сайта, выбирая инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool), а также добавляя несколько вершин инструментом Добавить точку привязки (Add Anchor Point Tool). Форму элемента возможно подкорректировать с помощью инструмента Преобразовать точку привязки (Convert Point Tool).



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


10. Теперь нам необходимо создать на правой стороне рисунка слой для кнопок подвижного меню. Цвет слоя - белый. Для создания этого слоя потребуется инструмент Прямоугольник (Rectangle Tool).



Профессиональный веб-дизайн


11. Установите Заливку (Fill) слоя - 65%.



Профессиональный веб-дизайн


12. Удерживая Alt, кликните между слоями, чтобы недавно созданный слой располагался над предыдущим.



Профессиональный веб-дизайн


Профессиональный веб-дизайн


13. Скопируйте ранее сделанный слой, разработанный для разделов сайта, и расположите копию на вершине палитры слоёв. Инструментом Свободное трансформирование
(Free Transform) переместите копию в нижнюю часть рисунка. Инструментом Прямоугольник (Rectangle Tool), удерживая Alt, частично вырежьте копию.



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


15. Теперь нам нужно создать окно для дополнительной информации. Для этой операции нам понадобится инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool). Внести исправления в форму окна возможно с помощью инструмента Преобразовать точку привязки (Convert Point Tool).



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Обводка:



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


20. Создайте новый слой (Create New Layer). Нам необходимо нарисовать вертикальную линию между разделами. Выберите 2 цвета, которые указаны ниже, и инструмент Карандаш
(Pencil Tool).



Профессиональный веб-дизайн


Профессиональный веб-дизайн


21. Инструмент Ластик (Eraser Tool) поможет стереть ненужные элементы на рисунке:



Профессиональный веб-дизайн


Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


23. Теперь нам необходимо нарисовать кнопку для подвижной панели, выбирая для этого инструмент Прямоугольник (Rectangle Tool).



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Обводка:



Профессиональный веб-дизайн


Профессиональный веб-дизайн


25. При помощи инструмента Произвольная фигура (Custom Shape Tool) нарисуйте указатель на созданной кнопке цветом #205884. Инструментом Свободное трансформирование
(Free Transform) поверните указатель.



Профессиональный веб-дизайн


Профессиональный веб-дизайн


Профессиональный веб-дизайн


26. Теперь перейдите к созданию панели, предназначенной для управляющих кнопок. Для начала выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и создайте одну часть панели, затем, зажмите клавишу Shift и одновременно инструментом Эллипс (Ellipse Tool) закончите кнопку. Используйте цвет - #0E7AD9.



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


28. Далее нарисуем передвигающийся ползунок цветом #01477B. Используйте для этой операции инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool).



Профессиональный веб-дизайн


Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


Профессиональный веб-дизайн


31. Примените для кнопки стиль Тиснение (Layer Style - Bevel and Emboss).



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


32. При помощи инструмента Эллипс (Ellipse Tool) создайте управляющую кнопку.



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Обводка:



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


34. Используя инструмент Эллипс (Ellipse Tool), создайте блеск на предыдущей кнопке.



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


39. Сделайте 6 копий нового слоя и инструментом Свободное трансформирование
(Free Transform) поверните копии, где это необходимо или уменьшите их. Расположите копии так, как показано на рисунке ниже. А также мы вынуждены удалить эффект с копий верхних кнопок.



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


Профессиональный веб-дизайн


41. Примените для полосы стиль Внешнее свечение (Layer Style - Outer Glow).



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


47. Заполните раздел сайта соответствующим текстом. Настройки для оранжевого текста:



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


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



Профессиональный веб-дизайн


Профессиональный веб-дизайн







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

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

Ваше Имя

Ваш E-mail

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

Введите код: