Web-design: Band website template
В этом уроке будет показанно как сделать музыкальный сайт в стиле Grungy.
Рисуем1. Разработка шаблона сайта
Очевидно, что первое мы должны сделать, это создать новый документ. Автор использовал не большой размер 760х760 px. Вы возможно, захотите использовать больше. Создайте новый слой Ctrl+Shift+N. Далее, что нужно сделать это заполнить фон с довольно темным цветом, автор использовал серо-коричневый. (# 47433a)
2. Добавляем текстуры для фона
Чтобы добавить некоторые текстуры на фон можно использовать некоторые фильтры. Автор начал с применением фильтра Noise с низким значением (Filter> Noise> Noise, на Amount 0,9).
И поставте в поле Distribution параметр Gaussian и ниже Monochromatic.
Далее, скачайте специальные кисти для нашего дизайна и в некоторых углах нанесите тонкие детали. И сделайте прозрачность от 20 до 50% по вашему усмотрению.
Сделайте немного больше полос (не забудьте использовать различные кисти. Не забывайте использовать низкую прозрачность и при каждом рисовании разной кисти не забудьте создавать новые слои. И у вас должно получиться красивый grungy фон.
3. Наводим марафет
Добавьте штамп для будущего сайта. Как добавлять печати см. здесь. После того как сделали штамп и добавили его, снизьте прозрачность до 30% и измените режим слоя на Soft Light.
Наконец объеденим все слои вместе (Layer > Flatten Image).
И сделаем освещение слою (Filter > Render > Lighting Effects) и измените параметры так как показанно на рисунке (автор использовал такие параметры, вы если хотите можете использовать другие параметры).
Должно получиться вот это:
4. Проектирование содержания секции (обязательно!)
Каждый сайт нуждается в содержание раздела, так что давайте сделаем его. Выберите Rounded Rectangle tool и сделайте прямоугольник в середине документа коричневого цвета (#716a5d). И снизьте прозрачность до 40%.
Далее, нажмите правой кнопкой мыши по последнему созданному слою т.е созданному квадрату и в меню выберите Blending Options и поставьте галочки напротив пунктов Outer Glow и Inner Glow. В Outer Glow измените параметры как на скриншоте и в Inner Glow тоже измените как на скриншоте.
Должно получиться вот это:
Далее добавьте маску слоя (Layer > Layer Mask > Reveal All). И при необходимости используйте ластик.
5. Разработка базового текста логотипа
Теперь пришло время дать шаблону жизнь, давайте добавим текст! Для этого скачайте шрифт под названием "4990810". Скачали? Отлично! Теперь собственно добаляем текст, измените размер шрифта на 48pt и измените цвет текста на #c9c4b8. Когда написали снова зайдите в Blending Options и измените параметры Drop Shadow и Gradient Overlay как показанно на скриншотах:
Должно получиться вот это:
Теперь добавим авторские надписи типо Copyright, год, и название сайта. Возьмем например шрифт Tahoma или Arial и напишем снизу точто надо, кстати используйте размер 11pt, а цвет #5c584e так как для нашего фона подойдет цвет именно такой.
Теперь, что еще является обязательным для веб-сайта? Навигация, конечно!
Автор использовал шрифт Cornet. Но можно выбрать свой шрифт на сайте www.dafont.com/ После того как автор написал свой текст навигации (News, Tours, Discography, Biography, Gallery) автор применил следующие стили к слою с текстом:
Drop Shadow
Gradient Overlay
Также автор сделал к каждому слову прозрачность по своему усмотрению. А также он подчеркнул слова.
Ну а теперь добавьте текст и картинки:
Во всём проделанном у нас должно получиться вот это:
Автор: Photoshopstar.com
Перевод: Gred
Источник