Дизайн портфолио в стиле гранж

Здравствуйте, дорогие друзья! Поздравляю всех мужчин с праздником, с Днем Защитника Отечества. Желаю Вам здоровья, успехов, любви, процветания! Чтобы все было клево!

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

Итак, сегодня мы с Вами будем создавать дизайн портфолио наших работ.

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

Что нам понадобиться:

Шаг 1. Создаем новый файл

Откройте фотошоп и создайте в нем новый файл, для этого перейдите в меню Файл>Создать. В открывшемся окне установите размер 1000 пикс. по ширине и 1000 пикс. по высоте, в качестве заполнения фона выберите Прозрачный и затем нажмите ОК.

Шаг 2. Заполняем фон

Перейдите в меню Слои>Новый>Слой, чтобы создать новый слой, или сделайте это, используя панель слоев. Далее из набора гранжевых текстур выберите черную и вставьте ее на данный слой.

Я считаю, что она должна быть темнее. Поэтому давайте создадим новый слой и зальем его черным цветом, предварительно уменьшив ему непрозрачность до 75%.

Шаг 3. Рисуем линии границ

Выберите инструмент Прямоугольник и нарисуйте в верхней части нашего портфолио небольшой прямоугольник. Залейте его цветом #404040.

Теперь, чтобы образовать полоски, мы будем использовать стиль слоя Наложение градиента, для этого перейдите в меню Слои>Стиль слоя>Наложение градиента и выберите из палитры градиентов градиент Полосы на прозрачном.

Затем добавьте стиль Наложение текстуры, установите Масштаб в 1%, а Непрозрачность в 35%.

Сейчас давайте добавим Глянец. Установите Цвет глянца: #de6003, Смещение: 10 пикс., Размер: 10 пикс.

Шаг 4. Дублируем слой с полосками

Дублируйте данный слой, используя комбинацию клавиш Ctrl+J или, нажав правой клавишей мыши по данному слою и выбрав Дублировать слой.

Шаг 5. Создаем меню

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

Теперь перейдите в режим Свободной трансформации, для этого нажмите комбинацию клавиш Ctrl+T. Далее щелкните по кнопке «Переключение между свободной трансформацией и режимами деформации».

Растяните точки трансформации как на картинке ниже:

Шаг 6. Добавляем гранж

Используя гранжевые кисти, с помощью инструмента Ластик потрите края нашего искаженного прямоугольника, таким образом, придав гранжевый эффект.

Шаг 7. Добавляем страницы

Для этого выберите инструмент Текст и добавьте страницы. Для страницы «Главная» установите цвет #7b2e00 и #737266 для остальных страниц.

Шаг 8. Создаем шапку портфолио

Выберите инструмент Прямоугольник и создайте прямоугольник. Залейте его черным цветом и установите Непрозрачность в 75%.

Шаг 9. Создаем фон блока шапки

Создайте еще один прямоугольник поверх того, что мы создали в предыдущем шаге, и залейте его цветом #141414.

Шаг 10. Добавляем к блоку гранжевый стиль

Также как и в Шаге № 6, выбираем инструмент Ластик и в качестве кисточки устанавливаем одну из наших гранжевых кистей. Затем просто потрите им края.

Шаг 11. Добавляем изображение в шапку портфолио

Добавьте на новый слой изображение. Затем примените к данному слою стиль слоя Внешнее свечение, цвет #311b11.

Шаг 12. Добавляем текст к шапке

С помощью инструмента Прямоугольник нарисуйте прямоугольник по длине нашей шапки и залейте его цветом #3e3e3e, уменьшите Непрозрачность до 60%. Теперь добавьте какой-то заголовок, установите для него цвет #faf6c6, а заполняющий текст сделайте белым.

Шаг 13. Создаем блоки с информацией

Создайте небольшой прямоугольный блок серого цвета #4c4b4b и уменьшите его Непрозрачность до 60%.

Теперь снова, используя инструмент Ластик с гранжевой кистью, сотрите края созданного нами прямоугольника.

Поверх основного блока создайте еще один маленький блок и залейте его цветом #671101, затем уменьшите его Непрозрачность до 50%.

Теперь повторите этот процесс, создав, таким образом, 3 блока. Удостоверьтесь, что цвет заголовков #faf6c6, а цвет остального текста белый.

Для создания кнопочек выберите инструмент Эллипс и создайте маленький кружочек, залейте его черным цветом. Далее, используя инструмент Перо, создайте стрелочку и залейте ее цветом #6c2b0b. Затем просто повторите эти действия для создания остальных кнопочек.

Шаг 14. Делаем футер

Снова выберите инструмент Прямоугольник  и нарисуйте им прямоугольник, залейте его цветом #682808. Уменьшите его Непрозрачность до 40%. Также как и в Шаге № 6, сотрите края данного прямоугольника.

Теперь, используя инструмент Текст, добавьте текст буллитов. Сами же буллиты создайте с помощью инструмента Кисть.

Повторите данный процесс, чтобы увеличить их количество. Затем добавьте социальные иконки в левую часть футера.

Теперь добавьте копирайт и панель навигации, используя инструмент Текст. С помощью инструмента Линия, создайте небольшие разделители между пунктами нижнего меню. Используйте цвет #682808.

Шаг 15. Конечные поправки

Первое, что мы подправим, это добавим лого в верхний правый угол нашей работы. Также добавьте небольшую заплатку, используя инструмент Прямоугольник. Далее с помощью ластика создайте гранжевый эффект и последнее – уменьшите Непрозрачность данному слою до 70%.

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

Ну, вот и подошел наш урок к концу. Надеюсь, он понравился Вам, и Вы извлекли из него для себя что-то интересное и полезное. Спасибо за внимание. До новых встреч!

Автор: PsDeluxe.com;

Переводчик: Сергей Заставный.