Войти Регистрация

← Первая часть урока

Шаг 6: Добавляем секцию слайдшоу

Включите сетку трафарета. Выбрав Rectangular Marquee Tool (Прямоугольная область), (M), создайте ниже навигации выровненное по центру выделение, охватив по ширине 14 колонок сетки, и залейте (Shift + F5) его черным (#000000).

Скриншот 21

Измените Blend Mode (Режим смешивания) прямоугольника на Soft Light (Мягкий свет), что позволит фону немного просвечиваться через него.

Скриншот 22

Пора вставить картинку в наше слайд-шоу. Откройте в Photoshop фотографию, например такую, как закат "Sunset", включенную в список ресурсов урока, и перенесите на ваш холст, подогнав ее масштаб с помощью функции Free Transform (Свободное трансформирование).
Спрячьте на время фото и, выбрав Rectangular Marquee Tool (Прямоугольная область), создайте внутри блока слайд-шоу выделение, как на рисунке ниже.

Скриншот 23

Давайте добавим маску нашему фото, выделив этот слой и кликнув на иконке Add vector mask (Добавить слой-маску) в нижней части палитры слоев, что приведет к созданию маски с выделенной нами областью. Теперь, снова включив видимость слоя фотографии, вы заметите (если все сделано правильно), что части изображения вне маскированной области будут скрыты.

Скриншот 24

Шаг 7: Создаем кнопки управления слайд-шоу

Ниже слоев слайд-шоу создайте новую группу слоев с названием "arrow" (стрелка) и добавьте внутри нее новый слой.
Включите Ellipse Tool (Эллипс) и с левой стороны слайд-шоу нарисуйте кружок, затем добавьте ему Outer Glow (Внешнее свечение) и Gradient Overlay (Наложение градиента).
Outer Glow (Внешнее свечение)
Выберите для этого эффекта черный (#000000) цвет.

Скриншот 25

Gradient Overlay (Наложение градиента)
Настройте градиент от темно-коричневого (#271303) цвета к более светлому оттенку такого же тона (#3a2102).

Скриншот 26

Вот как сейчас выглядит наша левая кнопка управления слайд-шоу.

Скриншот 27

Нам нужно будет удалить из круга лишнюю здесь тень, но прежде чем сделать это, необходимо "сплющить" эту фигуру, перейдя в Layer > Rasterize > Shape (Слои > Растрировать > Фигуру). После этого, выбрав Rectangular Marquee Tool (Прямоугольная область), выделите на слое с кружочком ниже слайд-шоу область необходимого размера и нажмите Delete, чтобы удалить ненужную часть в контуре выделения.

Скриншот 28
Скриншот 29

Теперь давайте добавим нашей кнопке стрелку. На новом слое включите Rounded Rectangle Tool (Прямоугольник со скругленными углами) и на панели настроек выберите Shape Layers (Слой-фигура), и Radius (Радиус закругления) 30 px. Такой большой радиус сделает каждый конец фигуры более округлым.
Нарисуйте, вытянув по диагонали, фигуру, которая будет представлять левую сторону стрелки, и затем добавьте ей стиль слоя Color Overlay (Наложение Цвета), выбрав в настройках темный, неброский оранжевый цвет (#b56d1b).

Скриншот 30

Для создания правой части стрелки скопируйте фигуру и разверните дубликат, перейдя в Edit > Transform Path > Flip Horizontal (Редактирование > Трансформирование контура > Отразить по горизонтали).

Скриншот 31

Выделите в палитре слоев оба слоя, составляющие стрелку, и перейдя в Edit > Transform > Rotate (Редактирование > Трансформирование контура > Поворот), поверните стрелку на 90o острием влево.

Скриншот 32

Объедините эти слои, выбрав их в палитре слоев и нажав затем Ctrl/Cmd + E. Скопируйте объединенный слой.

Скриншот 33

Измените цвет дубликата на черный (#000000), добавив ему стиль слоя Color Overlay (Наложение цвета), и с помощью инструмента Move Tool (Перемещение), (V) сдвиньте на 1 рх влево. Этот прием создаст эффект вдавленной фигуры.

Скриншот 34

Сейчас мы создадим правую стрелку. Выберите на панели слоев группу слоев "arrow" и, скопировав ее, разверните дубликат на 180 o, перейдя в (Edit > Transform > Flip Horizontal Редактирование > Трансформирование контура > Отразить по горизонтали). Затем перенесите копию кнопки управления на правую сторону слайд-шоу.

Скриншот 35

Сейчас у нас должна получиться примерно такая картина:

Скриншот 36

Шаг 8: Создание уменьшенных копий фотографий

Включите снова трафарет сетки. Выбрав Rectangular Marquee Tool (Прямоугольная область), сделайте выделение шириной около 4-х с половиной колонок под слайд-шоу слева. Залейте его черным (#000000) цветом и затем измените Blend Mode (Режим наложения) на Soft Light (Мягкий свет).

Скриншот 37

Откройте в Photoshop фотографию подсолнуха и перенесите ее на свой холст, затем уменьшите примерно до 80% от размера оригинала.
Спрячьте на время слой подсолнуха и, включив Rectangular Marquee Tool (Прямоугольная область), создайте внутри первого прямоугольника немного меньшее выделение. Включите видимость фото подсолнуха и кликните на иконке маски слоя в палитре слоев, обрезав, таким образом, снимок по контуру выделенной области.

Скриншот 38

Давайте добавим нашей миниатюре красивую подпись. Выбрав Rectangular Marquee Tool (Прямоугольная область), создайте выделение в нижней части фотографии и залейте его темно-коричневым цветом (#261103). Уменьшите непрозрачность (Opacity) этого слоя до 85%, чтобы фотография частично просвечивалась сквозь него.
Включив Horizontal Type Tool (Горизонтальный текст), сделайте надпись, например "NATURE" (Природа). Я использовал шрифт Helvetica с желтым (#ffbf47) цветом текста.

Скриншот 39

Добавьте под миниатюрой какой-нибудь текст в качестве своего рода описания для этой отдельной картинки.

Скриншот 40

Повторив предыдущие действия, добавьте еще две уменьшенных копии фотографий, выбрав их по своему усмотрению, или используя снимки "Baby boy" (ребенка) и "Bokeh" (блики), предложенные в начале урока.

Скриншот 41

Шаг 9: Создаем подвал

Заключительным шагом в нашем творческом процессе будет оформление области подвала сайта. Создайте новый слой. Возьмите Pencil Tool (Карандаш), (B) и, выбрав темно-коричневый цвет (#2c1303), проведите под миниатюрами фотографий горизонтальную, ограничительную линию шириной 14 колонок, которая будет представлять собой разделитель между областью главного контента и подвалом.
Совет: Чтобы линия была прямой, создавая ее, удерживайте клавишу Shift.

Скриншот 42

Скопируйте только что созданный слой линии и, применив к дубликату эффект Color Overlay (Наложение цвета), измените его цвет на белый (#ffffff). Затем сдвиньте белую копию на 1 рх вниз и, открыв вкладку Blend Mode (Режим смешивания) выберите стиль слоя Overlay (Перекрытие), а Opacity (Непрозрачность) уменьшите до 18%, создав в итоге эффект вдавленной линии.

Скриншот 43

Наконец, включите Type Tool (Горизонтальный текст) и добавьте в подвал текст соответствующего содержания, например информацию об авторских правах (copyright information).

Заключение

Мы успешно закончили создание изящного макета дизайна сайта, используя различные приемы и методы, которые обычно применяются при разработке макетов сайтов.


Комментировать

captcha

Вход

Зарегистрируйтесь, если нет учетной записи

Восстановить пароль
Регистрация
Восстановить пароль
Войти в личный кабинет