Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Дизайн музыкального сайта., Web-design: Band website template

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Дизайн музыкального сайта., Web-design: Band website template


 
Опции учебника
Дизайн музыкального сайта., Web-design: Band website template

Предыдущий учебник Дизайн музыкального сайта., Web-design: Band website template Следующий учебник
Опубликовал(а) Gostemilov
22.06.2015
Дизайн музыкального сайта., Web-design: Band website template


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. Но можно выбрать свой шрифт на сайте http://www.dafont.com/ После того как автор написал свой текст навигации (News, Tours, Discography, Biography, Gallery) автор применил следующие стили к слою с текстом:
Drop Shadow
Gradient Overlay


Также автор сделал к каждому слову прозрачность по своему усмотрению. А также он подчеркнул слова.


Ну а теперь добавьте текст и картинки:



Во всём проделанном у нас должно получиться вот это:

нажмите, чтобы увеличить
Автор: Photoshopstar.com
Перевод: Gred

Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 55
Сообщений: 92,014
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Оригинал урока
demiart.ru/forum/index.php?showtopic=51259
  #1  
By Gostemilov on 22.06.2015, 07:15
Дизайн музыкального сайта., Web-design: Band website template



Где смотреть? Нет ссылки.
  #2  
By Gostemilov on 22.06.2015, 07:15
Дизайн музыкального сайта., Web-design: Band website template

Lona, Теперь всё исправленно.
 



Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
Шаблон дизайна для музыкального сайта, веб-дизайн Gostemilov Необработанные уроки Photoshop 0 23.06.2015 15:45
Дизайн сайта с кляксами, Web Design Layout Tutorial Gostemilov Необработанные уроки Photoshop 0 22.06.2015 09:45
Дизайн сайта Мебельной Компании, Interior Design Layout Gostemilov Необработанные уроки Photoshop 0 22.06.2015 06:05
Оранжевый сайт для дизайн-студии, Website Design Studio Gostemilov Необработанные уроки Photoshop 0 21.06.2015 20:10
Дизайн сайта для Художника, Learn how to create an artistic website Gostemilov Необработанные уроки Photoshop 0 19.06.2015 03:00

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 14:00. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 15.00%).