Данное пособие было сделано с участием очень хорошего друга. На этом уроке мы будем создавать Веб разметку варианта Портфолио, используя Матерчатую текстуру. Вы пройдете через создание логотипа, используя Adobe Illustrator, создание подсвечивания для области «сервисов» и применение текстур для разметки на этом коварном пути, который увеличит качество конечного результата. Давайте начнем.

Ресурсы
Следующие ресурсы были использованы во время создания:
Решетчатая система 960
Матерчатые узоры
Кисти Заношенной одежды
Шрифт Oswald
Чириканье птиц

Вступление
На этом уроке мы будет использовать Решетчатую систему 960. Скачайте ей и распакуйте. Затем откройте файл “960_grid_12_col.psd” в Фотошопе.
12 красных колонок, которые вы видите это сетка, которую мы собираемся использовать. Вы можете скрыть красные полосы, кликнув на иконке глаза слоя “12 Col Grid”. Этот PSD файл имеет несколько направляющих, которые будут очень полезны. Чтобы их активировать нажмите Просмотр>Показать>Направляющие (View>Show>Guides) или используйте команду Ctrl+;. Я обычно скрываю красные полосы и активирую направляющие когда мне это необходимо.

Когда создаешь Веб разметку, быстрые направляющие очень полезны. Активируйте\Деактивируйте их используя Просмотр>Показать>Быстрые направляющие. Они помогу вам выровнять каждый слой в зависимости о расположения других слоев.
Во время этого урока будет предложено создать формы с точными размерами. Когда вы создаете формы, вы можете увидеть точные ширину и высоту в Информационной панели (Окно>Инфо (Window>Info)).
Осветив основы использования Решетчатой системы 960, мы можем двигаться дальше.

Шаг 1: Установки документа
Откройте файл “960_grid_12_col.psd” в Фотошопе. Затем откройте Изображение>Размер холста (Image>Canvas Size) и установите ширину 1200 пикселей и высоту в 2400 пикселей. Этим мы получим достаточно места для работы.



Шаг 2: Создание Верхнего колонтитула нашей разметки
Создайте новую группу и назовите ее “Header”. Выберите Инструмент «Прямоугольник» (Rectangle Tool (U)) и создайте прямоугольник размерами 1200 пикселя на 520 пикселей и цветом #595e61. Назовите этот слой “Header bg”, щелкните правой клавишей на нем и выберите Конвертировать в смарт-объект (Convert to Smart Object).

Откройте Фильтр>Шум>Добавить Шум (Filter>Noise>Add Noise) и используйте настройки с картинки ниже. Этим мы создадим приятную текстуру.



Скачайте пакет «Матерчатые узоры» и откройте .PAT файл в Фотошопе. Затем щелкните два раза на слое “Header bg” чтобы открыть окно Стили слоя и добавить Наложение Узора (Pattern Overlay) используя настройки на картинке внизу и узор со скаченного пакета.



Шаг 3: Создание фона навигации
Выберите Инструмент «Прямоугольник» (U) и создайте прямоугольник вверху документа высотой 120 пикселей и цветом #000000. Назовите это слой “navigation bg”. Установите заливку слоя на 20%, щелкните два раза на слое и используйте настройки с изображения ниже для Внутренней Тени.



Теперь добавим круг на слой “navigation bg” чтобы создать место для логотипа. Выберите Инструмент «Эллипс» (Ellipse Tool (U)) и щелкните на иконке «Добавить к области фигуры (+)» (Add to shape area (+)) на панели выше изображения.
Щелкните на векторной маске слоя “navigation bg” чтобы активировать его. Затем используйте Инструмент «Эллипс», зажмите клавишу Shift и создайте круг в центре навигационной панели радиусом в 140 пикселей. Посмотрите на следующее изображение для справки.



Шаг 4: Создание узора Пунктирная линия
Создайте новый документ (Команда Ctrl+N) размером 3на1 пиксель. Увеличьте как можно больше. Затем выберите Инструмент «Прямоугольная область» (М) (Rectangular Marquee Tool (M)) и создайте квадратное выделение как показано на изображении ниже. Создайте новый слой и заполните выделение белым цветом.

Скройте слой “Background” нажатием на иконку с глазом. Затем выполните команду Ctrl+D чтобы убрать выделение. Сохраните ваш узор открыв Редактирование>Определить Узор (Edit>Define Pattern). Задайте вашему узору имя и нажмите OK.



Вернитесь к вашему документу с разметкой. Выберите Инструмент «Линия» (U) (Line Tool (U)) и установите толщину 1 пиксель. Затем зажав клавишу Shift, создайте горизонтальную линию внизу вашей навигационной панели.

Установите заливку слоя на 0% и непрозрачность на 20%. Щелкните два раза на слое чтобы открыть окно Стили Слоя и добавьте ранее созданный узор.
Теперь нам надо очистить область пунктирной линии, которая проходит поверх круга. Используйте Инструмент «Прямоугольная область» (М) чтобы выделить область. Затем откройте Слои>Маска слоя>Скрыть выделенную область (Layer>Layer Mask>Hide Selection).



Шаг 5: Добавляем градиент на фон верхнего колонтитула
Возьмите Инструмент «Прямоугольная область» (М) чтобы создать выделение, как показано на изображении ниже (1). Затем откройте Слои>Новый слой-заливка>Градиент (Layer>New Fill Layer> Gradient) и установите настройки, показанные на изображении (2).
Кликните на маске этого слоя, чтобы активировать. Затем выберите черную мягкую кисть (B) и нарисуйте поверх области, где градиент накрывает навигационную панель (3). Установите непрозрачность слоя на 3% (4).



Теперь добавим радиальный градиент в нижнюю часть фона верхнего колонтитула. Удерживая клавишу Ctrl, кликните на слое “header bg”, что бы его выделить. Затем откройте Слои>Новый слой-заливка>Градиент и установите настройки, показанные на изображении (1).
Кликните на вашем изображении и перетащите вниз вместе с окном Заливки Градиента. Установите Режим наложения слоя на мягкий свет 40%.



Шаг 6: Добавления кисти заношенной одежды на фон верхнего колонтитула
Скачайте пакет кистей и откройте их в Фотошопе. Создайте новую группу и назовите ее “brushes”. Затем выберите слой “header bg” (удерживая клавишу Ctrl кликнув по слою). Убедитесь что кисти активны и откройте Слои>Маска слоя>Показать выделенную область (Layer>Layer Mask>Reveal Selection). Теперь все, что мы положим в эту группу, будет видно только поверх области верхнего колонтитула.
Создайте новый слой внутри этой группы. Установите основной цвет белым. Выберите Инструмент «Кисть» (B) (Brush Tool (B)) и используйте некоторые кисти из которых мы скачали, чтобы добавить эффект заношенной ткани к колонтитулу. Создавайте новый слой для каждой из кистей и регулируйте непрозрачность для каждого слоя. Затем установите режим наложения группы “brushes” на Мягкий свет. Обратитесь за справкой к изображению ниже.



Шаг 7
Выберите Инструмент «Линия» (U), удерживая клавишу Shift, создайте горизонтальную линию шириной 1 пиксель и цветом #50565a. Назовите слой “1px line” и поместите его в низ колонтитула.
Сделайте дубликат слоя (Ctrl+J), возьмите Инструмент «Перемещение» (V) (Move Tool (V)) и удерживая клавишу «стрелка вверх» переместите его на один пиксель вверх. Измените цвет этой линии на #8e9496.



Шаг 8: Создание логотипа
Чтобы создать логотип мы будем использовать Фотошоп и Иллюстратор. Для начала, мы создадим текст и круг с пунктирной обводкой в Иллюстраторе и затем закончим логотип, используя Фотошоп.
Запустите Иллюстратор и создайте новый документ. Выберите Инструмент «Текст» (Т) (Type Tool (T)) и напечатайте “My Folio”. Установите каждое слово в разных объектах. Шрифт, который я использовал, называется Akzidenz-Grotesk Condensed Medium Italic.



Выберите оба объекта с текстом используя Инструмент «Выбора» (Selection Tool (J)) и откройте Объект>Расширить (Object>Expand). Это позволит редактировать текст таким образом, что можем изменять точки привязки буков.



Выберите слово “My” и подвиньте его вниз, чтобы соединить нижнюю часть буквы “y” с верхней частью буквы “F”.



Возьмите Инструмент «Выделение контура» (А) (Direct Selection Tool (A)), чтобы выбрать точки привязки нижней части буквы “y” так, как вы видите на изображении. Затем нажмите клавишу Backspace, чтобы удалить их.



Возьмите Инструмент «Перо» (Pen Tool (P)), чтобы реконструировать нижнюю часть буквы “Y” и соединить ее с буквой “F”. Убедитесь что буквы на одной траектории. Для справки посмотрите изображение ниже.



Теперь нам надо создать круг с белой пунктирной обводкой. Выберите Инструмент «Эллипс» (L), удерживая клавишу Shift, создайте круг без заливки и обводкой в 1 пиксель. Затем откройте окно «Обводки» (Окно>Обводка (Widnow>Stroke)) и настройте, как показано на изображении ниже.
Измените цвет текста на белый. Я добавил серый прямоугольник ниже всех объектов, чтобы увидеть текст и круг.



Вернемся к Фотошопу, создадим новую группу и назовем ее “Logo”. Затем выберем Инструмент «Эллипс» (U) и создадим круг с размерами 125х125 пикселей и цветом #2e3134.

Назовем это слой “circle”, щелкнем на нем два раза чтобы открыть окно Стили слоя и добавим эффект наложения слоя используя следующие настройки. Узор кожи я использовал со скаченного пакета в начале урока.



Скопируйте текстовые объекты с Иллюстратора, вернитесь в фотошоп и вставьте их как смарт-объект. Используйте команду «Свободное трансформирование контура» (Ctrl+T) чтобы изменить размер слоя и вставить его в цент темного круга. Добавьте эффект наложения цвета к этому слою используя цвет #f4f4f4.



Скопируйте пунктирный круг с Иллюстратора и вставьте в Фотошоп как смарт-объект. Используйте Инструмент «Свободное трансформирование контура» (Ctrl+T) чтобы изменить размер слоя и вставить в середину темного контура. Назовите слой “dashed circle” и установите непрозрачность на 60%.



Сделайте дубликат слоя “dashed circle” (Ctrl+J). Используйте инструмент «Свободное трансформирование контура» (Ctrl+T) чтобы изменить размер слоя до тех пор пока он не достигнет уровня границ логотипа. Назовите этот слой “bottom border”.
Используйте инструмент «Прямоугольная область» (M), чтобы выбрать верхнюю область круга как вы видите на изображении ниже. Затем откройте Слои>Маска слоя>Скрыть выделенную область. Данная процедура оставить пунктирную линию под логотипом, так как мы хотели.



Шаг 9: Добавляем навигацию
Создайте новую группу и назовите ее “Navigation”. Возьмите инструмент «Горизонтальный текст» (Т) и напишите название вашего навигационного меню, используя шрифт “Oswald” и белый цвет. Распределите пункты вашего навигационного меню равномерно по левой и правой стороне логотипа.



Создание стиля для активных пунктов меню
Возьмите инструмент «Прямоугольник со скругленными углами» (U) (Rounded Rectangle Tool) и задайте радиус 4 пикселя. Затем создайте черный прямоугольник под вашими навигационными пунктами высотой 32 пикселя.
Установите заливку слоя на 25%, щелкните два раза на нем, чтобы открыть окно Стили Слоя и установите настройки как на след. изображении.



Шаг 10: Создание области для «Публикуемого материала»
Создайте новую группу и назовите ее “Featured”. Возьмите инструмент «Горизонтальный текст» (Т) и напишите название вашего проекта, используя шрифт Oswald размером 22тч и белый цвет. Вставьте этот слой с левой стороны разметки и на 50пикселей ниже навигационной панели.



Возьмите инструмент «Горизонтальная линия» (U) и создайте горизонтальную линию шириной 300 пикселей. Установите заливку слоя на 0% и непрозрачность на 50%. Щелкните два раза по слою и добавьте узор пунктирной линии, который вы создавали ранее.
Используя Инструмент «Горизонтальный текс» добавьте текстовый блок под горизонтальной линией. Выберите шрифт Helvetica и белый цвет, задайте размер текста 13 тч. Пройдите в панель «Символ» (Окно>Символ (Window>Character)) и задайте «Интерлиньяж» (промежуток между линиями текста) на 24 тч, чтобы текст было более читабельным.



Создание кнопки «Подробнее»
Создайте новую группу и назовите ее “button”. Возьмите инструмент «Прямоугольник со скругленными углами» (U) и задайте радиус на 4 пикселя. Затем создайте скругленный прямоугольник под блоком текста размером 110х30 пикселей и задайте цвет #9ca2a6. Назовите этот слой “button”.
Сделайте дубликат слоя “button” (Ctrl+J) и переместите этот новый слой под оригинальный. Выберите инструмент «Перемещение» (V) и нажав на стрелку вниз на клавиатуре один раз переместите этот слой на 1 пиксель. Установите непрозрачность этого слоя на 50%.
Сделайте дубликат предыдущего слоя (Ctrl+J) и измените цвет на #54585b. Переместите этот слой на один пиксель вниз и задайте непрозрачность 100%.
Теперь у вас должно быть три слоя “button”. Щелкните два раза на верхнем слое, чтобы открыть окно Стили Слоя и задайте настройки с изображения ниже. Для эффекта Обводки задайте цвет #54585b.



Удерживая клавишу Ctrl, выберите два нижних слоя “button”. Правым щелчком мыши выберите «Конвертировать в смарт-объект».
Двойным щелчком на этом слое откройте окно Стили Слоя и задайте настройки с изображения ниже для Наложения Градиента. Это придаст приятный 3D эффект нашей кнопке.



Зажмите клавиши Ctrl+Shift и щелкните на нижнем смарт-объекте “button” и затем на векторной маске слоя “button”. Это приведет к выделению всей кнопки. Создайте новый слой и залейте его белым цветом. Нажмите Ctrl+D для снятия выделения.
Щелкните правой клавишей мыши на этом слое и выберите «Конвертировать в Смарт-объект». Затем откройте Фильтр>Шум>Добавить Шум и задайте настройки как на изображении ниже. Установите Режим наложения этого слоя на «Умножение» и непрозрачность 25%.



Теперь выберите инструмент «Горизонтальный текс» (Т) и напишите «Подробнее» на вашей кнопке используя шрифт Oswald размером 15 тч и белый цвет. Двойным щелчком мыши откройте окно Стили Слоя и задайте настройки с изображения ниже для эффекта Тени.



Шаг 11: Добавление слайдера изображений
Создайте новую группу и назовите ее “image slider”. Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник размером 620х300 пикселей. Назовите этот слой “image_holder”, двойным щелчком откройте окно Стили Слоя и задайте настройки как на изображении ниже для «Внешнего свечения» (Outer Glow).
Откройте в фотошопе изображение, которое вы хотите разместить в этой области и переместите его на документ, с вашей разметкой используя инструмент «Перемещение» (V). Назовите этот слой “image” и поместите его поверх слоя “image_holder”. Затем правым щелчком мыши по нему выберите создать Обтравочную маску. Теперь ваше изображение станет видимым только поверх области слоя “image_holder”.



Создание стрелок для слайдера изображений
Выберите инструмент «Произвольная фигура» (U) (Custom Shape Tool), правым щелчком по вашему изображению и выберите одну из форм стрелки. Затем создайте стрелку в правой части вашего слайдера изображений используя цвет #e2e6e8.
Назовите этот слой “right arrow”, откройте окно Стили Слоя двойным щелчком по этому слою, и установите настройки с изображения ниже. Правой клавишей мыши щелкните по этому слою и выберите Конвертировать в Смарт-объект. Затем установите непрозрачность в 40%.
Создайте дубликат этого слоя (Ctrl+J) и назовите его “left arrow”. Затем пройдите в Редактирование>Трансформирование>Отразить по горизонтали (Edit>Transform>Flip Horizontal). Переместите эту стрелку в левую часть вашей разметки. Для справки посмотрите на следующее изображение.



Создание навигационных точек для слайдера изображений
Создайте новую группу и назовите ее “navigation bullets”. Выберите инструмент «Эллипс» (U) и удерживая клавишу Shift создайте круг размерами 10х10 пикселей и цветом #4d5357. Назовите этот слой “navigation bullet”.
Создайте дубликат слоя (Ctrl+J) несколько раз и расположите их как показано на изображении ниже.
Выберите инструмент «Эллипс» (U) еще раз и создайте круг меньшего размера в середине навигационной точки, чтобы указать активное изображение. Для этого круга используйте цвет #9ca2a4.



Шаг 12: Создание области «Сервисов»
Создайте новую группу и назовите ее “Services”. Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник высотой 450 пикселей и цветом #fafafa.
Назовите этот слой “services bg”, щелкните правой клавише мыши на нем и выберите конвертировать в смарт-объект. Затем пройдите в Фильтр>Шум>Добавить шум и используйте настройки с изображения ниже.
Двойным щелчком мыши на этом слое откройте окно Стили Слоя и используйте настройки со следующего изображения для Внутренней Тени и Внешнего Свечения.



Выберите инструмент «Горизонтальная линия» (U) и перетащите горизонтальную линию вниз области «сервисов» используя цвет #d2d2d2. Назовите этот слой “1px line”.
Сделайте дубликат этого слоя (Ctrl+J) и измените цвет новой линии на белый. Затем переместите это слой выше на 1 пиксель.



Шаг 13: Добавляем контент в область «Сервисы»
Выберите инструмент «Горизонтальный текст» (T) и напишите слово «Сервисы» цветом #5b656a и размером 38 тч. Поместите этот слой в левую часть вашей разметки и добавьте 40 пикселей внизу области «Публикуемый материал».



Создайте новую группу и назовите ее “web design”. Создайте другую группу внутри этой и назовите ее “spotlights”. Мы будем создавать 3D комнату с некоторой подсветкой на изображении.
Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник с размерами 300х100 пикселей и цветом #3b44a. Назовите этот слой “border”, правым щелчком мыши выберите Конвертировать в смарт-объект.
Пройдите в Фильтр>Шум>Добавить шум и установите настройки как на изображении ниже. Затем двойным щелчком мыши откройте окно Стили Слоя и настройте как на след. изображении для Наложения Градиента.



Теперь Я покажу Вам, как создать 3D комнату. Для начала возьмите инструмент «Прямоугольник» (U) и создайте серый прямоугольник с размерами 286х86 пикселей и поместите его в центр прямоугольника “border”. Это временный слой, который нам поможет создать стены.



Возьмите инструмент «Прямоугольник» (U) и создайте прямоугольник высотой 22 пикселя и цветом #434f57. Убедитесь, что слой не заходит поверх серого прямоугольники. Назовите этот слой “floor”, двойным щелчком мыши откройте окно Стили Слоя и установите настройки как на изображении ниже.



Создайте новый прямоугольник с размерами 240х64 пикселя и цветом #3b4851. Назовите этот слой “front wall” и расположите его, как вы видите на изображении. Затем добавьте эффект Наложения Градиента для этого слоя.



Используя инструмент «Выделение Контура» (А) выберите правый верхний угол слоя “floor” и переместите его влево. Затем выберите левый верхний угол и переместите его вправо. Для справки посмотрите на изображение ниже.



Создайте прямоугольник в левой стороне 3D комнаты, используя цвет #39444b. Возьмите инструмент «Выделение контура» (А), чтобы переставить нижний правый угол этого прямоугольника, как вы видите на изображении ниже. Двойным щелчком мыши откройте окно Стили Слоя и установите настройки как показано на изображении ниже.
Создайте дубликат слоя (Ctrl+J) и переместите его вправо. Затем измените угол Наложения Градиента на 0.



Создайте новый прямоугольник вверху 3D комнаты, используя цвет #505e67. Назовите этот слой “ceiling” и используйте инструмент «Выделение контура» (A) для регулирования нижних углов как вы делали со слоем “floor”. Двойным щелчком откройте окно Стили Слоя и установите настройки как показано ниже.



Теперь вы можете удалить серый прямоугольник, который вы добавляли в начале этого шага. Ниже вы можете видеть, как выглядит моя группа «3D комната».



Сделайте правый щелчок мыши на группе “3D room” и выберите Конвертировать в смарт-объект. Затем откройте Фильтр>Шум>Добавить шум и установите настройки как показано ниже.
Двойным щелчком по этому слою откройте окно Стили Слоя и настройте, как показано ниже.



Шаг 14: Создание подсветки
Создайте новую группу и назовите ее “top lights”. Затем возьмите инструмент «Эллипс» (U) и создайте белый круг, как показано на изображении ниже. Правым щелчком по слою выберите Конвертировать в Смарт-объект. Затем откройте Фильтр>Размытие>Радиальное размытие (Filter>Blur>Radial Blur) и установите настройки как показано ниже. Назовите этот слой “light 1”.
Создайте новый круг больше предыдущего. Назовите этот слой “light 2” и конвертируйте в смарт-объект. Затем примените фильтр Радиального размытия с теми же настройками.
Повторите этот процесс еще один раз с большим кругом и назовите этот слой “light 3”. Для справки посмотрите на изображение ниже.
Сгруппируйте все три слоя “light” вместе и установите непрозрачность каждого из них:
“light 1” – 70%
“light 2” – 50%
“light 3” – Мягкий свет 40%
Сделайте дубликат группы два раза и расставьте лампочки как показано на изображении.
Удерживая клавиши Ctrl+Shift, кликните на миниатюре каждого из слоев “light” чтобы выбрать их. Затем откройте Слои>Новый корректирующий слой>Цветовой фон/Насыщенность (Layer>New Adjustment Layer>Hue/Saturation и задайте настройки, как показано на изображении ниже. Это придаст приятный голубой цвет лампочкам.
Некоторые лампочки могут выходить за края границ 3D комнаты. Чтобы это исправить, зажмите Ctrl и щелкните на миниатюре слоя “3D room”. Затем кликните на группу “top lights”, чтобы сделать ее активной и откройте Слои>Маска слоя>Показать выделенную область (Layer>Layer Mask>Reveal Selection).



Создайте новую группу и назовите ее “floor lights”. Затем возьмите инструмент «Эллипс» (U) и создайте три эллипса, как вы видите на рисунке ниже. Конвертируйте каждый слой в смарт-объект. Затем добавьте фильтр Размытие по Гауссу и Фильтр Шума к каждому слою. Установите непрозрачность для этих слоев на 40%.
Затем вы можете добавить изображение в середину 3D комнаты, которое представляет дизайн сервиса, который вы добавили. Я использовал логотип Webdesign Tuts+.



Шаг 15
Выберите инструмент «Прямоугольник» (U) и создайте белый прямоугольник с размерами 300х210 пикселей под областью подсветки. Назовите этот слой “content bg”, двойным кликом откройте окно Стили Слоя и используйте настройки как показано ниже для Внешнего Свечения.



Выберите инструмент «Перо» (P) и создайте треугольную форму, используя цвет #d1d6da, как показано на изображении. Вы можете активировать направляющие, чтобы помочь вам для создания этой фигуры.
Назовите этот слой “top triangle”, двойным кликом откройте окно Стили Слоя и используйте настройки как показано ниже. Цвет, который использовал я для эффекта Обводки это #c5cace.



Возьмите инструмент «Горизонтальный текст» (T) и добавьте контент для этой области сервиса. Для заголовка используйте шрифт Oswald размером 20 тч и цветом #747d82.
Для блока с текстом используйте шрифт Helvetica Regular с размером 13 тч и цветом #5f6c74. Также установите межстрочный интервал, для этого текстового поля 24 тч используя панель Символ.
Создайте новую черную пунктирную линию такую же, как мы создавали в начале белую. Затем возьмите инструмент «Горизонтальная линия» (U) чтобы нарисовать горизонтальную линию между заголовком и блоком текста. Установите заливку слоя на 0% и примените узор, который вы создали.
Скопируйте кнопку «Подробнее» из области «Публикуемого материала» (сделайте дубликат группы, нажав правой клавишей мыши на этой группу). Затем переместите новую кнопку под блок с текстом области «Сервисы». Для справки посмотрите на изображение ниже.



Шаг 16
Сделайте дубликат группы “web design” два раза и расставьте новые колонки как показано на изображении ниже. Затем замените заголовки и изображения, которые находятся под подсветкой.



Шаг 17: Создание области «Портфолио»
Создайте новую группу под группой “Services” и назовите ее “Portfolio”. Затем выберите инструмент «Прямоугольник» (U) и создайте прямоугольник высотой 590 пикселей и цветом #f1f1f1 под областью «сервисы».
Назовите этот слой “portfolio bg” и конвертируйте в смарт-объект. Откройте Фильтр>Шум> Добавить Шум и используйте настройки показанные ниже. Затем двойным кликом откройте окно Стили Слоя и примените одну из матерчатых текстур, которые вы скачали.



Возьмите инструмент «Горизонтальный текст» и напишите «Портфолио» в верхнем левом углу этой области. Я использовал шрифт Oswald размером 38 тч и цветом #5b656a.



Шаг 18: Добавление пунктов Портфолио
Создайте новую группу и назовите ее “images”. Затем возьмите инструмент «Прямоугольник» (U) и создайте прямоугольник с размерами 180х140 пикселей. Назовите этот слой “image_holder”.
Сделайте дубликат этого слоя (Ctrl+J) и переместите новый прямоугольник вправо на 10 пикселей от первого. Продолжайте делать дубликаты до тех пор, пока не получиться сетка, как показано ниже.



Откройте несколько изображений, которые вы хотите показать в области «Портфолио». Перетаскивайте каждое изображение на слой “image_holder”, правым щелчком по этим слоям выберите Создать Обтравочную маску. Этим мы поместим изображение в каждый прямоугольник.
На изображении ниже есть две колонки, в которые я не добавил картинок. Мы будем использовать эту область для пунктов детализации.



Шаг 19: Добавляем пункты детализации
Создаем новую группу и назовем ее “active project”. Возьмем инструмент «Прямоугольник» (U) и создаем прямоугольник поверх двух колонок, которые не имеют картинок, используя цвет #595e61.
Возьмем инструмент «Прямоугольник» (U) еще раз и создадим прямоугольник размером 330х160 пикселей. Откроем картинку, которую вы хотите отобразить в этой области, и поместим ее поверх слоя “image_holder”. Правым кликом на слое “image” выберем создать Обтравочноую маску.
Выберем инструмент «Горизонтальный текст» (T) и добавим немного контента в эту область. Для заголовка используйте шрифт Oswald размером 22 тч и белый цвет. Для блока с текстом используйте шрифт Helvetica Regular размером 13 тч и цветом #fafafa.



Создайте дубликат предыдущей кнопки «Подробнее» и поместите ее внизу блока с текстом из области “active project”.
Создайте новую группу и назовите ее “close button”. Выберите инструмент «Прямоугольник» (U) и удерживая клавишу Shift создайте квадрат размером 20х20 пикселей и цветом #484c4f. Поместите прямоугольник в верхний правый угол области “active project”.
Возьмите инструмент «Горизонтальная линия» и создайте две диагональные линии в форме «Х». Удерживая клавишу Shift чтобы перетащить линию под 450.



Шаг 20: Создание области «Блог»
Создайте новую группу и назовите ее “blog”. Возьмите инструмент «Прямоугольник» (Т) и создайте прямоугольник высотой 340 пикселей под областью «Портфолио» используя цвет #fafafa.
Правым кликом на слое выберите Конвертировать в Смарт-Объект. Откройте Фильтр>Шум> Добавить шум и используйте настройки с изображения ниже.
Возьмите инструмент «Горизонтальная линия» (U) и создайте горизонтальную линию на верху прямоугольника, используя цвет #d2d2d2. Сделайте дубликат слоя (Ctrl+J) и переместите новую линию на один пиксель вниз. Измените цвет этой линии на белый.



Шаг 21: Добавление сообщений
Выберите инструмент «Горизонтальный текст» (T) и напишите «Блог» в верхнем левом углу этой области используя шрифт Oswald размером 38тч и цвет #5b656a.
Создайте новую группу и назовите ее “post #1”. Возьмите инструмент «Прямоугольник» (U) и создайте прямоугольник размерами 180х140 пикселей. Откройте картинку, которую вы хотите показать в этой области и перетащите ее поверх слоя “image_holder”. Сделайте правый клик на слое “image” и выберите Создать Обтравочную маску, чтобы сделать его видимым только поверх области слоя “image_holder”.
Возьмите инструмент «Горизонтальный текст» и добавьте немного контента для картинки. Для заголовка используйте шрифт Oswald размером 22тч и цвет #747d82. Для текстового блока используйте шрифт Helvetica Regular размером 13тч и цветом #5f6c74. Также установите для этого параграфа межстрочный интервал 24тч. Затем добавьте кнопку «Подробнее» внизу текстового блока.
Сделайте дубликат группы “post #1” и переместите новую группу вправо. Потом вы можете поменять картинку и контент для этого нового Блог поста.



Шаг 22: Создание Нижнего колонтитула
Создайте новую группу и назовите ее “footer”. Создайте дубликат слоя “header bg” (Ctrl+J) из группы “Header” и переместите его в нижнюю часть разметки, под область «Блога». Назовите этот слой “footer bg”.



Удерживая клавишу Ctrl, кликните на миниатюре слоя “footer bg” чтобы выбрать его. Затем откройте Слои>Новый слой-заливка>Градиент (Layer>New Fill Layer> Gradient) и установите настройки указанные на изображении ниже. Пока еще окно Заливка Градиента открыто, щелкните на вашем изображении и переместите градиент вверх, как вы видите на след. изображении.
Установите Режим наложения этого слоя Мягкий свет 40%.



Возьмите инструмент «Горизонтальная линия» (U) и создайте горизонтальную линию на верхней части вашего “Нижнего колонтитула» используя цвет #50565a. Назовите этот слой “1px line”.
Создайте дубликат этого слоя (Ctrl+J) и переместите его на один пиксель вниз. Затем измените цвет этой линии на #8e9496.



Шаг 23: Создание области “Обо мне”
Теперь мы будем разбивать нижний колонтитул на три колонки: «Обо мне», «Твитер» и «Контакты».
Создать новую группу и назовите ее “about”. Выбрать инструмент «Горизонтальный текст» (T) и напишите «Обо мне» на верху первой колонки. Оставьте промежуток в 40 пикселей между верхним краем области “footer” и этим текстовым слоем.
Выберите инструмент «Горизонтальная линия» (U) и создайте горизонтальную линию под заголовком. Установите заливку этого слоя в 0% и непрозрачность в 50%. Затем примените к этому слою белый узор пунктирной линии, которую вы создали в этом уроке.
Используя инструмент «Горизонтальный текст» (T) добавьте текстовый блок под пунктирной линией используя шрифт Helvetica Regular и цвет #fafafa. Установите межстрочный интервал этого параграфа 24тч используя, панель Символ. Затем добавьте кнопку «Подробнее» под текстовым блоком.



Шаг 24: Создание области “Следуй за мной»
Создайте новую группу и назовите ее “follow me”. Затем добавьте заголовок и пару изречений в эту область. Используйте те же пунктирные линии для разделения текстовых блоков.
Добавьте кнопку «Подробнее» под фразы. Возьмите инструмент «Горизонтальный текст» (T) и измените, текст на «Следуй за мной».
Скачайте пакет Чириканье пниц и переместите пару из них на ваш документ с разметкой, под область “follow me”. Добавьте эффект Тени для этих слоев «летучек» используя настройки указанные ниже.



Шаг 25: Создание области «Контакты»
Создайте новую группу и назовите ее “Contact”. Затем добавьте заголовок на эту область и пунктирную линию под него.
Используя инструмент «Прямоугольник» (U) создайте форму контакта, как показано на изображении. Используйте заливку цветом #eff0f0 для каждого прямоугольника. Затем добавьте эффекты Внутреннее свечение и Обводку для каждого слоя с прямоугольником. Я использовал цвет для Обводки #4d5254.
Возьмите инструмент «Горизонтальный текст» (T) и напишите внутри каждого прямоугольника, что он представляет (Название, тема, email, сообщение).
Добавьте кнопку «Подробнее» под форму Контакты и измените текст «Отправить».



Шаг 26: Добавление области «Авторское право»
Создайте новую группу и назовите ее “Copyright”. Затем выберите инструмент «Прямоугольник» (U) и создайте черный прямоугольник, как вы видите на изображении ниже. Назовите этот слой “copyright bg” и установите Режим наложения на непрозрачность 20%.



Возьмите инструмент «Горизонтальная линия» (U) и создайте горизонтальную линию вверху прямоугольника, созданный ранее. Установите заливку слоя на 0% и непрозрачность на 35%. Затем установите узор пунктирной линии, созданный ранее в этом пособии.
Выберите инструмент «Горизонтальный текст» (T) и добавьте раздел авторского права в середине черного прямоугольника. Используйте шрифт Helvetica Regular размером 12тч и цветом #b1b5b7.



Результат
Мы закончили. Ниже вы можете увидеть конечный результат нашего урока. Кликните на изображении увидеть полноразмерную версию.
Я надеюсь, Вам понравился данное пособие, и вы изучили новые вещи по созданию разметки. Оставляйте ваши комментарии и вопросы в секции комментариев.