[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Форум по продуктам Adobe » Уроки Photoshop » Строгий дизайн для портфолио в Фотошоп
Строгий дизайн для портфолио в Фотошоп
tops88Дата: Суббота, 02.08.2014, 16:11 | Сообщение # 1
Постер
Группа: Пользователи
Сообщений: 25
Репутация: 0
Итоговый результат:

Исходники к уроку:
  • Иконки
  • 960 Grid System
    Шаг 1. Создание структуры сайтаДля начала скачайте 960 grid system. Откройте файл "960_download\templates\photoshop\960_grid_12_col.psd". Нажмите Ctrl+Shift+C, чтобы изменить размер холста.

    Используя инструмент Заливка  (Paint Bucket Tool) залейте фоновый слой цветом #242b30. Теперь Вам нужно создать папки для каждой части сайта.

    Шаг 2. Создание шапки сайтаСоздайте новую папку и назовите её "Header". Перейдите в  Вид > Новая направляющая (View > New Guide), в появившемся окне выберите Ориентация (Orientation) - Горизонтальная (Horizontal), и в поле Позиция (Position) введите 100px.

    Выберите инструмент Прямоугольная область  (Rectangular Marquee Tool), создайте выделение, как показано на скриншоте ниже, и залейте его белым (#FFFFFF) цветом.

    Добавьте стили слоя:

    Наложение градиента (Gradient Overlay):
    - линейный градиент;
    - угол 90;
    - #171c20;
    - #22292f;

    Обводка (Stroke):
    - #0d1012;


    Шаг 3. Создание логотипаСоздайте папку "Logo", внутри папки "Header". Выберите инструмент Текст  (Type Tool) и напишите своё название сайта, с теми же настройками, что и на скриншоте ниже.

    Добавьте стили слоя:


    Наложение градиента (Gradient Overlay):
    - линейный градиент;
    - угол: 90;
    - #929292;
    - #bcbdbd, Позиция (Location): 30%;
    - #dfdfdf, Позиция (Location): 50%;
    - #dfdfdf, Позиция (Location): 100%;


    Теперь создайте новый слой, назовите его "Light " и поместите его под текстовым слоем. Создайте выделение, как показано на скриншоте ниже.

    Установите цвет переднего плана на белый (#FFFFFF). Выберите инструмент Кисть  (Brush Tool), в параметрах кисти выберите кисть с теми же параметрами, что и на скриншоте ниже.

    Создайте такое же осветление, как и на скриншоте.

    Установите Непрозрачность (Оpacity) на 80% и режим наложения измените на Мягкий свет (Soft Light).

    Шаг 4. Создание навигацииСоздайте папку "Navigation" внутри папки "Header". Выберите инструмент Текст  (Type Tool) и создайте несколько пунктов меню, со следующими настройками:

    Я выделил ссылку "Home", потому что это активная ссылка. Для остальных ссылок я использовал цвет #b6aefd. Для активной ссылки добавьте следующие стили:

    Наложение цвета (Color Overlay):
    - #232a2f;

    Создайте новый слой и поместите его под слой с активной ссылкой. Возьмите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool) и установите радиус скругления в 5px.

    Добавьте следующие стили:


    Наложение градиента (Gradient Overlay):
    - линейный градиент;
    - угол: 90;
    - #929292;
    - #bcbdbd, Позиция (Location): 30%;
    - #dfdfdf, Позиция (Location): 50%;
    - #dfdfdf, Позиция (Location): 100%;

    Обводка (Stroke):
    - #13181b;

    Шаг 5. Создание слайд-шоуСоздайте новую направляющую (Вид > Новая направляющая (View > New Guide)). Ориентация (Orientation) - Горизонтальная (Horizontal), Позиция (Position) - 140px. Повторите действия и создайте ещё одну направляющую, позиция - 440px.
    Создайте новую папку - "Slideshow". Выберите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool), радиус - 5px, и создайте прямоугольник, как на скриншоте ниже, залейте цветом - #171c20.

    Добавьте стили слоя:

    Создайте выделение для слоя, перейдите в Выделение > Модификация > Сжать (Selection > Modify > Contract) и сожмите выделение на 5px. Создайте 4 новых направляющих и перетащите к краям выделения.

    Выберите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool) с радиусом в 5px. Цвет я выбрал - #36414a. На самом деле, цвет для этой формы не имеет значения, т.к. это будет подложка для изображений.

    Добавьте стили слоя:

    Внутреннее свечение (Inner Glow):
    - #424f5a;

    Обводка (Stroke):
    - #111417;


    Внутри папки "Slideshow" создайте папку "divider". Выберите инструмент Прямоугольное выделение ( Rectangular Marquee Tool). Создайте две 1 пиксельные вертикальные линии. Цвет первой - #111417. Цвет второй - #424f5a.

    Мы разделим слайд-шоу на 2 части. В левую часть мы поместим описание к картинке, из правой части, и две кнопки. Внутри папки "Slideshow" создайте папку "left". Выберите инструментПрямоугольник со скруглёнными углами  (Rounded Rectangle Tool), радиус - 5px. Создайте прямоугольник внутри подложки.

    Добавьте стили слоя:
    Наложение градиента (Gradient Overlay):
    - Стиль: линейный;
    - #242b31;
    - #36414a;


    Создайте новый слой "header". Возьмите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool), создайте прямоугольник и поместите его так же, как на скриншоте ниже.

    Добавьте следующие стили слоя:
    Внутреннее свечение (Inner Glow):
    - #424f5a;

    Наложение градиента (Gradient Overlay):
    - Стиль: линейный;
    - #21282d;
    - #2f3840;

    Обводка (Stroke):
    - #111417;


    Теперь добавьте свой заголовок, используя инструмент Текст  (Type Tool). (Цвет - #171c20; Отступ - 20px)

    Дублируйте слой с текстом и сместите на 1 пиксель вниз. Добавьте стили слоя:
    Наложение градиента (Gradient Overlay):
    - Стиль: линейный;
    - #d4d4d4;
    - #ffffff;


    С помощью инструмента Текст  (Type Tool) добавьте описание.

    Внутри папки "Slideshow" создайте папку "Read more". Возьмите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool). Создайте прямоугольник и поместите так же, как на скриншоте ниже. Выберите инструмент Текст  (Type Tool) и напишите "Read more", цвет - #dedede.

    Создайте папку "prev_next". Выберите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool). Создайте и поместите прямоугольник так же, как и на скриншоте ниже.

    Добавьте стили слоя:



    Наложение градиента (Gradient Overlay)::
    - Стиль: линейный градиент;
    - угол: 90;
    - #929292;
    - #bcbdbd, Позиция (Location): 30%;
    - #dfdfdf, Позиция (Location): 50%;
    - #dfdfdf, Позиция (Location): 100%;

    Обводка (Stroke):
    - #161b1f;


    Выберите инструмент Произвольная фигура  (Custom Shape Tool) и выберите такую же стрелку, как и на скриншоте ниже.

    Поместите её, как на скриншоте ниже:

    Добавьте стили слоя:

    Наложение градиента (Gradient Overlay)::
    - Стиль: линейный градиент;
    - угол: 90;
    - #21282d;
    - #2f3840, Позиция (Location): 50% и 100%;


    Теперь возьмите какую-нибудь картинку и поместите её в правую часть слайд-шоу.

    Выберите инструмент Перо  (Pen Tool) и создайте такую же форму, как на рисунке ниже, залейте её чёрным (#000000) цветом.

    Перейдите в Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur) радиус размытия установите 5px. Непрозрачность (Оpacity) установите на 80%.

    Шаг 6. Создание блока "What I Do"Выберите инструмент Текст  (Type Tool), напишите свой заголовок и поместите так же, как и на скриншоте ниже.

    Добавьте стили слоя:

    Наложение градиента (Gradient Overlay):
    - Стиль: линейный градиент;
    - #d4d4d4;
    - #ffffff;

    Внутри папки "What I Do" создайте 4 папки: "I Capture Smiles", "I Design Websites", "Awards I Receive" и "I love to Socialize". С помощью инструмента Текст (Type Tool) напишите какой-нибудь текст для каждого блока. Для заголовков я использовал следующие настройки: Цвет - #dfdfdf; Размер - 18pt. Для описания: Цвет - #dfdfdf; Размер - 12pt. Стили для кнопки "Read more" те же, что и у кнопки в Слайд-шоу. Размер блока - 220px.

    Если Вы выполнили предыдущий шаг, то у Вас должно уже получится что-то вроде этого:

    Шаг 7. Создание разделителяВнутри папки "Divider" создайте новую папку "lines". Чтобы сделать разделитель воспользуйтесь инструментом Линия  (Line Tool). Цвет первой линии - #111417. Цвет второй - #364148.

    Выберите инструмент Прямоугольник  (Rectangle Tool), создайте и поместите прямоугольник так же, как на скриншоте ниже. Заливку (Fill) уменьшите до 0%.

    Добавьте стили слоя:


    Дублируйте слой и измените стиль Наложение градиента (Gradient Overlay).

    Цвет градиента - #242b30;


    Шаг 8. Создание блока "About Me"Внутри папки "About Me" создайте новый слой, выберите инструмент Текст  (Type Tool) и добавьте заголовок и описание. Используйте те же настройки, что и в блоке "What I Do".

    Шаг 9. Создание блока "My Portfolio"Внутри папки "My Portfolio" создайте новый слой, и с помощью инструмента Текст  (Type Tool) напишите свой заголовок.

    Выберите инструмент Прямоугольник ( Rectangle Tool) и поместите прямоугольник, как показано на скриншоте ниже.

    Добавьте стили слоя:

    Обводка (Stroke):
    - #161b1f;

    Поместите своё изображение тем же способом, что и в слайд-шоу.

    Теперь, добавьте описание, для этого возьмите инструмент Текст  (Type Tool) и напишите описание так, как показано на скриншоте ниже.

    Шаг 10. Создание футераСоздайте новый слой, внутри папки "Footer". Выберите инструмент Прямоугольник  (Rectangle Tool), цвет - #171c20, создайте прямоугольник (Высота - 50px) и поместите так же, как на скриншоте.

    Добавьте стили слоя:
    Внешнее свечение (Outer Glow):
    - #111417;

    Обводка (Stroke):
    - #364148;

    Добавьте свои копирайты в левой части футера и несколько ссылок в правой.

    Шаг 11. Добавление фонового свеченияВыберите папку "Background" и внутри неё создайте 2 слоя и назовите их "Slideshow_light" и "whatido_light". Выберите слой "Slideshow_light", возьмите инструмент Прямоугольная область ( Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.
    Чтобы создать свечение выберите инструмент Кисть  (Brush Tool), размер - 700, жёсткость (hardness ) 0%. Создайте свечение, как показано на скриншоте ниже. В режиме наложения выберите Мягкий свет (Soft Light), Непрозрачность (Оpacity) 70%.


    У Вас должен будет получится такой же эффект:

    Выберите слой "whatido_light". Возьмите инструмент Прямоугольная область  (Rectangular Marquee Tool) и создайте выделение, как на скриншоте ниже.


    Режим наложения измените на Мягкий свет (Soft Light) и Непрозрачность (Оpacity) уменьшите до 70%. Создайте свечение, как на скриншоте ниже.

    Вот и всё! Надеюсь, Вы узнали что-то новое в этом уроке, и, надеюсь, Вам понравился этот урок!
    Итоговый результат:
    р е к л а м а
  •  
    Форум » Форум по продуктам Adobe » Уроки Photoshop » Строгий дизайн для портфолио в Фотошоп
    Страница 1 из 11
    Поиск: