Сайт ищет новых владельцев. Пишите на e2network@yandex.ru с темой "Покупка psd.by"

Делаем макет портфолио в Photoshop

Категория: Рисование в Photoshop|Создание шаблонов сайтов|Уроки Photoshop

6 мая 2010

Этот урок научит вас создавать макет своего портфолио при помощи Adobe Photoshop. Вот такой результат мы получим в конце урока:

clip_image001

Шаг 1. Создадим новый файл File>New (Файл> Новый (Cntr+N)) размером 1000х700 пикселей.

clip_image002

Шаг 2. Примените к слою с фоном следующий стиль слоя, делая двойной щелчок на слое, с которым Вы работаете на палитре слоёв: Параметры наложения>Наложение Градиента (Blending Options>Gradient Overlay)

clip_image003

Редактор Градиентов (Gradient Editor):

clip_image004

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

clip_image005

Шаг 3. Затем мы сделаем "шапку" вебсайта, применяя ранее используемый Инструмент Прямоугольник clip_image006 (Rectangle Tool (U)).

clip_image007

Выбираем Стиль слоя: Параметры наложения>Наложение Градиента (Blending Options>Gradient Overlay)

clip_image008

Редактор Градиентов (Gradient Editor):

clip_image009

Результат должен быть таким:

clip_image010

Шаг 4. Теперь мы должны создать текстуру фона, используя для этого полезный инструмент, расположенный на BGPatterns. Устанавливайте параметры по очереди, как показано на рисунках.

clip_image011

clip_image012

clip_image013

Загрузите новый образец и пройдите Редактирование>Определить Узор (Edit>Define Pattern). На новом слое мы выберем,Редактирование>Выполнить Заливку (Edit>Fill (Shft+F5)), применив сохранённый узор.

clip_image014

Для данного слоя применим: Opacity по своему желанию. Режим наложения>Осветление основы (Blending mode>Color Dodge)

clip_image015

К этому слою примените Добавить слой-маску (Add a Mask), выберите Инструмент Кистьclip_image016 (B) чёрного цвета, чтобы стереть части текстуры, выходящие за края "шапки":

clip_image017

clip_image018

Шаг 5. Напишите теперь название сайта, использую следующие параметры шрифта:

clip_image019

clip_image020

Итог данного шага:

clip_image021

Далее выбираем Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow)

clip_image022

Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

clip_image023

Параметры наложения>Наложение градиента (Blending Options>Gradient Overlay)

clip_image024

Редактор Градиентов:

clip_image025

Примерно такого результата Вы должны добиться:

clip_image026

Шаг 6. Используя Инструмент Прямоугольник со скругленными углами clip_image027 (U) (радиус 20), сделайте кнопку меню:

clip_image028

Для слоя с кнопкой выберите следующие параметры: Заливка (Fill) 0 %, Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

clip_image029

Параметры наложения>Обводка (Blending Options>Stroke)

clip_image030

Результат:

clip_image031

Шаг 7. Сделайте три копии слоя с кнопкой (Ctrl+J) и выберите Редактирование>Свободное трансформирование (Free Transform). Разместите копии слоёв так, как показано ниже:

clip_image032

Шаг 8. Напишите названия для кнопок меню, помещая каждое слово на отдельный слой, используя следующие параметры:

clip_image033

clip_image034

Примените к слоям, содержащих названия кнопок стиль, представленный ниже: Параметры наложения>Внешнее свечение(Blending Options>Outer Glow)

clip_image035

clip_image036

Шаг 9. Затем мы выберем Инструмент Прямоугольник clip_image006[1] (U), выделяем прямоугольную область, где и будут располагаться наши изображения, зальём участок, используя цвет #F5F5F5

clip_image037

Применим Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow) со следующими настройками:

clip_image038

clip_image039

Сделайте ещё три копии слоя с прямоугольной областью (Ctrl+J) и выберите Редактирование>Свободное трансформирование (Free Transform), разместите копии как показано ниже:

clip_image040

Шаг 10. Вставьте картины на сделанных слоях (файл Hamadryad_by_waver_h.jpg):

Hamadryad_by_waver_h

clip_image041

Выберите аналогичный стиль для слоев с картинами: Параметры наложения>Обводка (Blending Options>Stroke), со следующими настройками:

clip_image042

clip_image043

Шаг 11. Используя Инструмент Прямоугольник clip_image006[2] (U) с заливкой белого цвета, разместите кнопку под картиной.

clip_image044

Примените к слою с кнопкой Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow)

clip_image045

clip_image046

Сделайте три копии слоя, содержащего кнопку (Ctrl+J), выберите Редактирование>Свободное трансформирование (Free Transform), разместите копии как показано ниже:

clip_image047

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

clip_image048

clip_image049

Ну вот, мы почти у цели. Теперь осталось ввести основной текст сайта:

clip_image050

clip_image051

Шаг 13. Что бы придать законченный вид, сделаем следующее: используя Инструмент Линия clip_image052 (U), мы проведём линию под текстом, задав цвет #6E6969.

clip_image053

Шаг 14. На последней стадии мы вставим текст, подтверждающий авторское право, используя следующие настройки шрифта:

clip_image054

clip_image055

Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow)

clip_image056

Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

clip_image057

Параметры наложения>Наложение градиента (Blending Options>Gradient Overlay)

9clip_image058

Редактор Градиентов:

clip_image059

clip_image060

Результат работы:

clip_image001[1]

Источник: Freelancer portfolio design | Перевод и творческая обработка PSD.by

Написать комментарий

О PSD.by

PSD.by - это сайт, полностью посвященный работе с Adobe Photoshop. Не важно кто вы - матерый волк Фотошопа или начинающий дизайнер, который только делает свои первый шаги. На нашем сайте вы найдете для себе много полезного - от простых до сложных уроков, большой каталог дополений для Photoshop.
Если Фотошоп для вас - это не просто название софта, то вы попали по адресу!

  • Pavel: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Андрей: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Лидия: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • andrey: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Ваграм: Просто офигенно :) [...]
Creative Suite 5 Patterns для фотошопа Примеры работ дизайнеров Работа с фотографиями Рисование в Photoshop Создание обоев для рабочего стола Уроки Photoshop гламурные кисти для фотошопа дизайн сайтов дизайн сайтоы кисти для Photoshop новогодние стили для фотошопа обработка фото в фотошопе отделение объекта от фона в фотошопе паттерны для фотошопа пример креативных дизайнов работа с текстов в фотошоп работа с текстом работа с текстом в photoshop работа с текстурами работа с эффектами в фотошоп рамки для фото в psd релиз Photoshop скачать дополнения для photoshop скачать иконки в psd скачать иконки для фотошопа скачать кисти для фотошопа скачать паттерны для Photoshop скачать стили для Photoshop скачать тени для фотошопа скачать шаблон фото скачать шрифты для фотошопа создание баннеров в фотошопе создание коллажей в фотошопе создание макетов рекламы создание макетов сайта в фотошопе создание сайтов в фотошопе стили для фотошопа стили фотошоп тени для фотошопа травяная текстура уроки фотошоп шаблоны для коллажей шаблоны фото для фотошоп шаблоны фото для фотошопа

Это интересно!