Рубрика: Photoshop Уроки | Урок прочитали: 920
 (голосов: 0)

Создаём макет портфолио в Фотошоп

В этом уроке веб-дизайна начального уровня вы научитесь создавать макет веб-портфолио, который имеет фиксированный деревянный фон. Также мы будем использовать дополнительные кисти, чтобы расставить акценты в дизайне.

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


Ресурсы

Текстура дерева
Шрифт Myriad Pro (платный ресурс)
Шрифт Myriad Pro (бесплатный ресурс)
Кисти FlightOfGrey
Иконки социальных сетей

Шаг 1 - Создание документа

Создайте новый документ с размерами 1024 x 912 пикселей

Шаг 2 - Добавление фона

Добавьте на фон деревянную текстуру. Я использовал эту деревянную текстуру зерна. Измените размер текстуры, используя Трансформирование (Free Transform (Ctrl + T)), чтобы текстура подходила размерами к холсту.

Шаг 3 - Создание фона для заголовка

Создайте новый слой. С помощью инструмента Прямоугольная область (Rectangle Marquee  Tool (M)) создайте выделение и заполните его черным цветом (# 000000).

Примечание переводчика: для создания нового слоя нажмите Ctrl+Shift+Alt+N. Для заливки используйте инструмент Заливка (Paint Bucket Tool (G)).

Шаг 4
 
Используя инструмент Прямолинейное лассо (Polygonal Lasso Tool (L)), сделайте неровные органическое выделение в нижней части фона заголовка для создания ребристых краев. После того как вы сделали выделение, перейдите в меню Редактирование > Очистить (Edit > Clear).

Примечание переводчика: для выделения удобнее использовать инструмент Перо (Pen Tool (P)), т.к. в любое время вы можете исправить линию или отменить шаг. Обрисуйте область, как показано на рисунке. Правой кнопкой > Образовать выделенную область > ОК. А чтобы все было ровно можно использовать Сетку (Ctrl + ’).

Шаг 5

Установите непрозрачность этого слоя 85% , чтобы увидеть текстуру дерева  за фоном заголовка.

Шаг 6 - Создание логотипа сайта

Для названия сайта мы можем использовать простой текстовый логотип. Я использовал шрифт Myriad Pro с белым цветом (#FFFFFF) для первой половины названия и с зеленым (# 93B19D) для второй половины. Поместите логотип в левом верхнем углу холста с помощью инструмента Перемещение (Move Tool (V)).

Шаг 7 - Добавление навигации

Теперь добавим несколько ссылок с правой стороны от нашего заголовка при помощи инструмента Горизонтальный текст (Horizontal Type Tool (T)). Для ссылки "Home" установите цвет (#D9D5BB), а для остальных (#DDCFAB). Разместите их как показано на рисунке:

Шаг 8 - Создание активной ссылки навигации

Ссылка "Home" будет служить нашему макету в виде активной ссылки, которая указывает текущую страницу сайта, на которой находится пользователь. Добавим мазок за ней, чтобы еще больше придать ссылке вид активности. Чтобы это сделать, скачайте кисть FlightOfGrey Stroke Brush Set от DeviantArt и установите её. Конечно, вы можете использовать и свои кисти.

Если вы используете указанные выше кисти, найдите похожую на ту, которая указана на рисунке ниже. Создайте слой под слоем с текстом ссылки, а затем, используя инструмент Кисть (Brush Tool (B)) с голубоватым цветом (#355D63), нарисуйте активную ссылка (см. ниже).

Шаг 9 - Создание блока Введение

Возьмите тот же инструмент Кисть (Brush Tool (B)) и выберите другую кистью того же набора. Установите Размер (Master Diameter) около 300px. Убедитесь, что цвет переднего плана черный (#000000). Вы можете обрезать лишние брызги с помощью инструмента Лассо (Lasso Tool (L)) и перейдя в меню Редактирование > Очистить (Edit > Clear). У вас должно получиться примерно так:

Примечание переводчика: создайте новый слой для заголовка блока, чтобы можно было вращать брызги и далее мы будем работать с этим слоем. Чтобы кисть получилась более темная, как на рисунке, щелкните несколько раз на одном месте.

Шаг 10

Теперь для текущего слоя добавьте Наложение цвета (Color Overlay) в стилях слоя

Шаг 11

Установите шрифт, похожий на Helvetica, чтобы добавить  текст «Introduction» и используйте инструмент Горизонтальный текст (Horizontal Type Tool (T)), с грязно-белым цветом (#F1E6D8) . У вас должно получиться следующее:

Шаг 12

Пришло время использовать инструмент Кисть (Brush Tool (B)) еще раз. Возьмите третью кисть из набора FlightOfGrey, убедитесь, что цвет переднего плана установлен на черный (#000000) и установите Размер (Master Diameter) кисти примерно на 400 px. На новом слое нарисуйте пятно следующим образом:

Шаг 13

Получилось немного светлее, чем нам хотелось бы. Поэтому продублируйте слой несколько раз (Ctrl+J), чтобы затемнить пятно. Напишите внутри этого пятна текст (я использовал классический шрифт).

Шаг 14 - Создание слайдера

Правая сторона от блока «Introduction» будет хорошим местом для слайдера. Я создал эскиз изображения с размером около 420 х 165 px , а затем добавил Внешнее свечение (Outer Glow) и Обводку (Stroke) в стиле слоя. Вы можете использовать следующие настройки в стиле слоя:

Шаг 15 - Добавление иконок социальных сетей

Итак, пришло время добавить социальные иконки. Используя ту же кисть, которую мы использовали для задней части заголовка блока «Введение», добавьте черный мазок, как показано на рисунке ниже, используя кисть немного больше, чем раньше.

Шаг 16

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

Шаг 17 - Создание блока «Последние проекты»

Сделайте область для блока «Последние проекты» под блоком «Вступление». Для этого воспользуйтесь инструментом для выделения Прямоугольная область (Rectangle Marquee Tool (M)). Создайте прямоугольник, похожий на следующий, и залейте его черным цветом (#000000). Уменьшите непрозрачность слоя до 85%.

Примечание переводчика: перед тем как залить прямоугольник, создайте новый слой.

Шаг 18

Добавьте к слою Внешнее свечение (Outer Glow) в стиле слоя:

Шаг 19

Придумайте и создайте содержимое блока, похожее на следующее изображение. Эскиз внутри блока сделайте 220px на 160px. Цвет заголовка должен быть #C3E2E0, а текстовое описание белое (#FFFFFF).

Шаг 20

Миниатюра выглядит немного унылой и скучной, поэтому давайте добавим Внутреннюю тень (Inner Glow) и Обводку (Stroke) в стилях слоя (используйте настройки как показано ниже), чтобы придать эскизам слоя последних проектов границы и немного внутренней тени.

Шаг 21

Теперь сделайте еще два блока, дублируя слои первого, а затем переместите дублированные слои в право с помощью инструмента Перемещение (Move Tool (V)). Вот что должно получиться:

Шаг 22 - Завершение работы созданием простого футера

Последним шагом является добавление авторских прав, которые представлены в виде простого текстового колонтитула. Чтобы сделать текст немного более заметным на этом деревянном фоне, вы можете использовать инструмент Осветлитель (Dodge Tool (O)), чтобы сделать область светлее. Окончательный вариант дизайна с футером:

Автор: Matthew Heidenreich
Переводчик: Морозов Виталий

           

Похожие файлы и публикации:

Создаём макет портфолио в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Создаём макет портфолио в Фотошоп
Итоговый результат:
Создаём макет портфолио в Фотошоп
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Создаём макет портфолио в Фотошоп
Вот такой домик получится после данного урока
Создаём макет портфолио в Фотошоп
Финальное изображение
Создаём макет портфолио в Фотошоп
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Создаём макет портфолио в Фотошоп
В этом уроке вы научитесь создавать шаблон сайта портфолио, специально предназначенный для публикации графических работ (для веб-дизайнеров, дизайнеров или фотографов). Дизайн портфолио будет создан в стиле винтаж.
Создаём макет портфолио в Фотошоп
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Создаём макет портфолио в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Создаём макет портфолио в Фотошоп
В этом уроке вы узнаете, как создать элегантный и стильный макет портфолио в Photoshop.
Создаём макет портфолио в Фотошоп
В этом уроке мы создадим стальной текст при помощи стилей слоя. В процессе работы Вы научитесь создавать узор царапин при помощи простой кисти.
Создаём макет портфолио в Фотошоп
В этом уроке я хотел бы показать вам интересный способ смещения текста.
Создаём макет портфолио в Фотошоп
Вот что мы должны получить:
Создаём макет портфолио в Фотошоп
В этом уроке я покажу, как нарисовать красную сумку для покупок. В этом уроке будут приведены основные приёмы рисования, такие как создание фигур, затемнение, и добавление теней.
Создаём макет портфолио в Фотошоп
Для начала создайте новый документ размером, например, 1900 × 1200. Сделайте цвет переднего плана #000000 и #46577c. Создайте новый слой (Ctrl+Shift+N) и зайдите в меню Filter – Render – Clouds (Фильтр – Рендеринг – Облака).
Создаём макет портфолио в Фотошоп
В этом уроке я покажу, как создать макет сайта на футбольную тематику.
Создаём макет портфолио в Фотошоп
Вот один из множества туториалов, как сделать красивую новогоднюю открытку для ваших лучших друзей и родственников. Надеюсь, они обрадуются, получив открытку, подобную этой. Итак, начнем!
Создаём макет портфолио в Фотошоп
Тем не менее, в этом уроке, среднего уровня сложности, я покажу вам, как сделать потрясающую иконку с нуля, используя Photoshop. От Вас потребуются базовые знания Photoshop и знакомство с Pen Tool (P).