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





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

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


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

Подсказка

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

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

В этом уроке мы будем создавать страницы для портфолио:



Web-страница для портфолио



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



Web-страница для портфолио


2. Найдите в Интернете узор, показанный ниже:



Web-страница для портфолио


3. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Создайте новый слой (Create New Layer) и перейдите в режим Редактировать>Выполнить заливку (Edit>Fill), затем, вставьте узор в наш главный рисунок.



Web-страница для портфолио


4. Добавьте маску слоя, кликнув на соответствующую иконку внизу палитры слоёв. Выберите инструмент Кисть (Brush Tool) (Непрозрачность (Opacity) - 20%) чёрного цвета и обрисуйте верхнюю часть рисунка:



Web-страница для портфолио


Web-страница для портфолио


5. Установите для слоя Режим наложения – Мягкий свет (Blending Mode – Soft Light).



Web-страница для портфолио


6. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте тонкую полосу цветом #0F1715 на нижней части рисунка.



Web-страница для портфолио


7. Используя тот же инструмент, создайте панель меню для заголовка сайта.



Web-страница для портфолио


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



Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


9. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 10 рх) создайте на панеле меню кнопку. Удерживая Alt, инструментом Прямоугольник (Rectangle Tool) вырежьте ненужные элементы.



Web-страница для портфолио


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



Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


11. Теперь выберите инструмент Линия (Line Tool) (толщина - 2 рх) и создайте линию над панелью меню. Основной цвет - белый. Затем, в режиме Свободного трансформирования
(Free Transform) внесите соответствующие исправления в цвет краёв. Рамку направьте вниз (следует чётко определить края). Удерживая Alt, тем же инструментом прервите линию в трёх нижеуказанных местах, на одинаковом расстоянии (сегменты доожны быть равными).



Web-страница для портфолио


Web-страница для портфолио


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



Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


13. При помощи того же инструмента Линия (Line Tool) нарисуйте 4 вертикальных линии.



Web-страница для портфолио


14. Примените те же настройки для каждой слоя, содержащего белую линию. Установите Заливку (Fill) слоя - 30%.



Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


Для “home page”:



Web-страница для портфолио


Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


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



Web-страница для портфолио


Для “PORTFOLIO”:



Web-страница для портфолио


Web-страница для портфолио


18. Инструмент Прямоугольник (Rectangle Tool) поможет создать слой для фотографий нашего портфолио.



Web-страница для портфолио


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



Web-страница для портфолио


Обводка:



Web-страница для портфолио


Web-страница для портфолио


20. Выберите фотографию портфолио и разместите её над созданным ранее слоем:



Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


22. Вставьте необходимые названия разделов. Настройки для “WELCOME, PHOTO”:



Web-страница для портфолио


Для “TO MY PORTFOLIO, CATEGORIES”:



Web-страница для портфолио


Web-страница для портфолио


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



Web-страница для портфолио


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



Web-страница для портфолио


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



Web-страница для портфолио


Web-страница для портфолио


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



Web-страница для портфолио


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



Web-страница для портфолио


Настройки для текста-ссылки:



Web-страница для портфолио


Web-страница для портфолио


26. Также заполните следующий раздел текстом. Настройки указаны ниже:



Web-страница для портфолио


Web-страница для портфолио


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



Web-страница для портфолио


28. Напишите авторское право нашего сайта. Настройки указаны ниже:



Web-страница для портфолио



Web-страница для портфолио






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

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

Ваше Имя

Ваш E-mail

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

Введите код: