Tags: макет сайта | Уроки Photoshop | уроки web дизайна | уроки создания сайта

В этом уроке создадим макет сайта -портфолио на основе текстуры "джинс".

Для начала сохраните следующее изображение на ваш компьютер, предварительно нажав на изображение для увеличения.

Откройте файл в фотошоп и перейдите к меню Правка-Определить узор. Задайте узору  любое имя и нажмите клавишу ОК.
Далее применим инструмент Заливка, только убедитесь в том, что выбрана заливка узором, и выберите тот узор, который вы только что создали.

Щелкните на созданный вами новый документ размером 1000*1100 пикс.   инструментом Заливка и вы увидите как узор заполнил ваш макет.

При помощи инструмента Прямоугольник со скругленными углами создадим две формы в центре макета белого цвета.

Каждой форме добавим следующие стили:

Вот предварительный результат:

Инструментом Перо создадим форму черного цвета  внизу нашего макета -она будет использоваться в качестве колонтитула.

Добавим этой форме несколько стилей:

Вот что должно получится:

С помощью инструмента Горизонтальный текст нанесем примерный текст  на наш макет.

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

Как вы видите все изображения с квадратными углами , мне хотелось бы чтобы они были округлые, чтобы этого добиться выполним несколько этапов. Воспользуемся инструментом Прямоугольник со скругленными углами (радиус округления углов вы можете выбрать какой вам понравится) в моем случае радиус округления - 5 пикс.

Создадим форму с округлыми углами над нашим изображением.

Как вы видите для этой формы был использован красный цвет и на нем была уменьшена прозрачность до 80% Для того чтобы было лучше видно границы рисунка.

Следующим шагом нажмите на миниатюре маски в палитре слоев, удерживая при этом клавишу CTRL.

После этого нажатия вы увидите выделение вокруг красной формы.

Вы можете скрыть слой-маску при этом выделение будет активным.

Далее выберите слой с Рождественским венком  в палитре слоев, затем  перейдите в меню Выделение-Инверсия. Вы увидите что выбелено стало все кроме этого изображения. Далее нажмите клавишу Удалить на клавиатуре.

Вы увидите что углы стали округлыми . Последним шагом нажмите ctrl + D чтобы снять выделение.

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

Вот результат до сих пор:

Далее добавим несколько иконок в нижнюю часть макета.

Инструментом Перо создадим вкладку прокрутки.

Добавим те же стили слоя что и для белой формы.

Сделаем посередине формы стрелочку.

Вот окончательный результат:

Источник: