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





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

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


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

Подсказка

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

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

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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


5. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте кнопку на панеле меню на заголовке сайта и поверните её инструментом Свободное трансформирование (Free Transform). Цвет кнопки - #C92130.



Web дизайн для портфолио


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



Web дизайн для портфолио


7. Сделайте 4 копии созданной кнопки и измените цвет каждой копии:



Web дизайн для портфолио


8. При помощи инструмента Эллипс (Ellipse Tool) нарисуйте необходимый элемент для кнопок меню:



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


12. С помощью того же инструмента нарисуйте ещё несколько кругов на нижней части панели сайта:



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


16. Все 3 круга должны выглядеть одинаково. Их цвет - #FF627A. Примените для кругов стиль Отбрасывание тени (Layer Style - Drop Shadow).



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


17. Используя предыдущий инструмент, вставьте ещё один круг, как на рисунке ниже:



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


19. Теперь нам необходимо написать названия кнопок меню сайта и наклонить их инструментом Свободное трансформирование (Free Transform). Настройки для текста указаны ниже:



Web дизайн для портфолио


Web дизайн для портфолио


20. Также добавьте название сайта. Настройки для “WEBSITE”:



Web дизайн для портфолио


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



Web дизайн для портфолио


Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


24. Используя инструмент Карандаш (Pencil Tool) белого цвета, нарисуйте указатель на кнопке:



Web дизайн для портфолио


Web дизайн для портфолио


25. Пронумеруйте разделы сайта, соблюдая нижеуказанные настройки:



Web дизайн для портфолио


Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


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



Web дизайн для портфолио


Web дизайн для портфолио


27. Найдите в Интернете соответствующие логотипы и разместите их внутри раздела сайта:



Web дизайн для портфолио


Web дизайн для портфолио


28. При помощи инструмента Эллипс (Ellipse Tool) создайте специальное окно белого цвета, предназначенное для скриншота.



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


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



Web дизайн для портфолио


31. Найдите 3 скриншота и расположите их, поворачивая, над окнами (удерживая Alt, кликните между слоем окна и слоем скриншота).



Web дизайн для портфолио


Web дизайн для портфолио


32. Сделайте то же самое для остальных скриншотов:



Web дизайн для портфолио


33. Затем при помощи инструмента Эллипс (Ellipse Tool) создайте слой, предназначенный для прокручивающейся кнопки, цветом #FD9B00.



Web дизайн для портфолио


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



Web дизайн для портфолио


Обводка:



Web дизайн для портфолио


35. Создайте новый слой (Create New Layer). Выберите инструмент Карандаш (Pencil Tool) и нарисуйте на созданной прокручивающейся кнопке белый указатель, направленный в левую сторону.



Web дизайн для портфолио


Web дизайн для портфолио


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



Web дизайн для портфолио






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

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

Ваше Имя

Ваш E-mail

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

Введите код: