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





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

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


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

Подсказка

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

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

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


Дизайн web портфолио фотографа


1. Создайте новый документ размером 766×500 пикселей с разрешением 72 dpi. Примените стиль Наложение градиента (Layer Style - Gradient Overlay), чтобы создать фон:


Дизайн web портфолио фотографа

Дизайн web портфолио фотографа

Дизайн web портфолио фотографа


2. В основании холста создайте полосу инструментом Прямоугольник (Rectangle Tool) цветом #444444.


Дизайн web портфолио фотографа


3. В верхней части предыдущей фигуры создайте ещё одну полоску тем же инструментом. Цвет - #656565. Потом создайте новый документ и инструментом Карандаш (Pencil Tool) создайте такой узор:


Дизайн web портфолио фотографа


Перейдите в меню Редактировать»Сохранить узор (Edit>Define Pattern) и сохраните ваш узор:


Дизайн web портфолио фотографа


4. Вернитесь в наш документ и примените стиль Наложение узора (Layer Style - Pattern Overlay) для второй полосы.


Дизайн web портфолио фотографа


Результат:


Дизайн web портфолио фотографа


5. Тем же инструментом создайте полоску в верхней части холста цветом #444444. Это будет нашей шапкой сайта. Для этого прямоугольника тоже примените стиль Наложение узора
(Layer Style - Pattern Overlay):


Дизайн web портфолио фотографа

Дизайн web портфолио фотографа


6. На последнем прямоугольнике создайте ещё одну полоску цветом #636363:


Дизайн web портфолио фотографа


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


Дизайн web портфолио фотографа


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


Дизайн web портфолио фотографа


9. Нарисуйте горизонтальную тонкую линию цветом #646464 под узорчатой полоской внизу, как показано на рисунке:


Дизайн web портфолио фотографа


10. Сделайте копию слоя с этой линией и поместите её выше, как на рисунке:


Дизайн web портфолио фотографа


11. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру, как показано ниже, чёрного цвета:


Дизайн web портфолио фотографа


12. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

Отбрасывание тени:


Дизайн web портфолио фотографа


Обводка:


Дизайн web портфолио фотографа


13. Найдите фотографию природы и поместите её так:


Дизайн web портфолио фотографа


14. Для картинки создайте рамку цветом #3A3A3A. Это можно сделать инструментом Произвольная фигура (Custom Shape Tool):


Дизайн web портфолио фотографа


15. Инструментом Преобразовать точку привязки (Convert Point Tool) можно подкорректировать размеры рамки:


Дизайн web портфолио фотографа


16. К рамке примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени:


Дизайн web портфолио фотографа


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


Дизайн web портфолио фотографа


Обводка:


Дизайн web портфолио фотографа


17. Найдите фотографию фотоаппарата и поместите в наш документ так:


Дизайн web портфолио фотографа


18. Слева от фотоаппарата вставьте названия сайта инструментом Горизонтальный текст (Horizontal Type Tool). Настройки текста показаны ниже:


Дизайн web портфолио фотографа

Дизайн web портфолио фотографа


19. Инструментом Прямоугольник (Rectangle Tool) создайте кнопку цветом #595959, как показано ниже:


Дизайн web портфолио фотографа


20. Инструментом Линия (Line Tool) создайте вертикальную линию на правой стороне кнопки цветом #545454.


Дизайн web портфолио фотографа


21. Объедините слои с кнопкой и линией в группу. Сделайте три копии группы и расположите кнопки так:


Дизайн web портфолио фотографа


22. Инструментом Вертикальный текст (Vertical Type Tool) напишите текст, соблюдая настройки шрифта, показанные ниже:


Дизайн web портфолио фотографа

Дизайн web портфолио фотографа



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

написал : cnj

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: