Artkost

Шаг 1.

Создаем новый документ любых размеров. Ширина важней чем высота. Поэтому рекомендуется использовать размеры между 920 и 1000 pixels. Ширина будет соответствовать всем мониторам. Берем Paint Bucket Tool,и заливаем задний фон цветом: #141414
Выберем слой с задним фоном и нажмем CTRL+J. Тем самым мы дублируем слой. Вы увидите новый слой выше оригинального
Выберем второй слой и следуем Filter > Noise > Add noise
В окне Add noise установим настройки, как показано ниже

Скачаем следующий патерн. Правый щелчок на картинке и выбираем «save image as»

Открываем картинку в Photoshop, и следуем Edit > Define pattern. Пишем имя для патерна и жмем ОК.

Шаг 2.

Создаем новый слой выше всех. (Быстрые клавиши: SHIFT+CTRL+ALT+N)
Выбираем Rectangular Marquee Tool и создаем вверху макета выделение.

Берем Paint Bucket Tool, и выбираем патерн который мы создали несколько секунд назад

Нажмем один раз внутри нашего выделения с помощью Paint Bucket Tool, и жмем CTRL+D чтобы снять выделениеt. Это мой результат:

С помощью Rectangle Tool , мы создадим черную форму

После создаем другую форму в том же месте, но белого цвета

Растерезуем слой, для этого выберем слой, и правый щелчок, и выбираем — Rasterize layer

Шаг 3.

Выбираем Eraser Tool, и круглой кистью удалим левую часть и правую часть белой формы. Мой результат:

Создаем новый слой, и перетаскиваем вверх всех слоев. Выбираем Brush Tool, и создаем два простых круга на макете.

Режим смешивания ставим «Soft Light»

Результат:

Шаг 4.

Берем Rounded Rectangle Tool, и ставим радиус закругления углов — 20

Создаем формы на макете.

Для четырех форм добавляем стиль слоя:

Результат:

Шаг 5.

Для нижних форм, я добавил следующий стиль слоя:

Вот так футер должен будет выглядеть:

Шаг 6.

Теперь забавная часть урока. Добавим света, чтобы создать имитацию 3D пространства.
Берем Line Tool и создаем горизонтальную линию белого цвета.

Правый щелчок на слое и выбираем Rasterize layer и потом берем Eraser Tool, и удаляем правую и левую части линии.

Дублируем слой и двигаем на несколько пикселей.

Следуем Filter > Blur > Gaussian blur, и настройки как показано ниже.

Дублируем заблюренную линию дважды (жмем CTRL+J )
Результат:

По такой вот технологии я создал линии света на всех сторонах

Шаг 7.

Результат:

Вверху создаем навигационную панель. Используем Rounded Rectangle Tool чтобы добавить форму. Меняем радиус на 9 pixels.

Стили слоя для панели навигации

Результат:

Дублируем эту форму и добавляем другой стиль слоя:

Результат:

Шаг 8.

Дублируем форму еще раз, после чего я выбираю оба слоя в панели Слоев. Жмем CTRL+E чтобы слить слои в один. Это команда растерезует слои.
Выбираем Eraser Tool, и круглой мягкой кистью удаляем углы у формы.

Добавим другую форму с помощью Rounded Rectangle Tool. Я поместил форму справа, от панели навигации.

Создаем форму как показано на рисунке:

Чтобы создать форму сверху, вы должны создать простую форму с помощью Rounded Rectangle Tool. Дальше растерезуем форму, и удалим ненужную верхнюю часть.
И добавим следующий стиль слоя:

Результат:

Дублируем слой, далее я выбрал два слоя в панели Слоев и слил их в один. С помощью Eraser Tool я удалил ненужные части формы.

После я высветил эту часть с помощью белой линии . Вы знаете как создать этот эффект, поэтому я не буду объяснять его снова.

Шаг 9.

Добавляем детали в два блока. (иллюстрации, рыбу)
Теперь работаем над лого. Я использовал текстовое лого в этом урокеl. Пишем слово Grafpedia ввреху макета следующим шрифтом: Myriad Pro (Bold Italic)

Стили слоя к лого:

Результат:

Финальный результат:

Автор:Grafpedia