С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание музыкального шаблона в Фотошопе

Создание музыкального шаблона в Фотошопе

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


Примечание: 

 

Для реализации этого шаблона, я использовал набор графики из коллекции Grafpedia комплект пользовательского интерфейса для веб-сайта в стиле iPhone. Он вам обязательно потребуется.

 

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

 

Создание музыкального шаблона в Фотошопе

 

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

 

Откройте Photoshop, а затем перейдите в меню Файл> Создать (File> New), введите имя документа и задайте размеры холста в 1000 на 1200 пикселей.

 

Создание музыкального шаблона в Фотошопе

 


Нажмите кнопку ОК на клавиатуре для отображения нового документа.

 

Создание музыкального шаблона в Фотошопе

 

Шаг 2: Создание меню

 

Чтобы сделать его легко и просто используйте набор iPhone Kit. Скачать его можно на этой странице http://www.grafpedia.com/vip-downloads/iphone-ui-kit-website-template. Откройте в Photoshop на выбор синий, оранжевый или зеленый комплект, какой захотите. Затем просто перетащите группу с именем «menu».

 

Создание музыкального шаблона в Фотошопе

 

Шаг 3: Создание слайдера

 

Создайте сначала новую группу (для того чтобы создать группу перейдите в меню Слои> Новый> Группа (Layer> New> Group)) и задайте ей имя «слайдер». Затем поищите картинки в Сети, добавьте их в ваш документ (размер изображений должен быть 1000 на 350 пикселей).

 

Создание музыкального шаблона в Фотошопе

 

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded rectangular tool (U)), на панели управления выбранным инструментом измените радиус скругления на 4 пикселя и создайте черный прямоугольник на изображении (прямоугольник должен быть размером в 222 на 252 пикселей).

 

Создание музыкального шаблона в Фотошопе


 

Теперь перейдите в меню Слои> Стили слоя (Layer> Layer Style) и добавьте Внешнее свечение (Outer glow) и Обводка (Stroke).

 

Создание музыкального шаблона в Фотошопе

 

Добавьте в документ изображение альбома какого-либо популярного музыканта или певца.

 

Создание музыкального шаблона в Фотошопе

 

Для создания блеска дублируйте слой с альбомом. Затем сделайте квадратное выделение и заполните его белым цветом.

 

Создание музыкального шаблона в Фотошопе

 

Используйте инструмент Прямолинейное лассо (Polygonal selection) для выделения и удаления части белого квадрата (см. рисунок ниже).

 

Создание музыкального шаблона в Фотошопе

 

Далее перейдите в меню Слои> Слой-маска> Показать всё (Layer> Layer Mask> Reveal All). Используйте на слое маски инструмент Градиент (Gradient Tool) от прозрачного к чёрному цвету. 

 

Создание музыкального шаблона в Фотошопе

 

Снова обратитесь к комплекту графики, чтобы добавить название альбома и кнопку "купить".

 

Создание музыкального шаблона в Фотошопе

 

Создайте новую группу, назовите её «навигация слайдера». Используйте инструмент Эллипс (Ellipse Tool (U)), чтобы создать четыре круга, три из них черные и один белый.

 

Создание музыкального шаблона в Фотошопе

 

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

 

Создание музыкального шаблона в Фотошопе

 

Шаг 4: Последние песни

 

Этот блок используется для воспроизведения песен, добавленных на сайт. Создайте для этого новые группы. Используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)), чтобы создать панель с размером в 442 на 40 пикселей синего цвета # 4575b3. Скопируйте стили черного меню из комплекта и вставьте их на панель.

 

Создание музыкального шаблона в Фотошопе

 

С помощью инструмента Горизонтальный текст (Text Tool (T)), чтобы добавить название на панель, а затем перейдите на веб-сайт inconfinder.com и позаимствуйте там две иконки: иконка «песня» слева и иконка «обновить» справа.

 

Создание музыкального шаблона в Фотошопе

 

С помощью инструмента Заливка (Paint Bucket Tool (G)) заполните фоновый слой цветом # dbdfe4.

 

Создание музыкального шаблона в Фотошопе

 

Используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)), чтобы создать белый прямоугольник для содержания размером в 442 на 318 пикселей (поместите прямоугольник под слой с  названием блока).

 

Создание музыкального шаблона в Фотошопе

 

Еще раз возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) для создания 6-ти квадратов размером в 110 на 110 пикселей с цветом для # d9e1eb. Добавьте обводку в 1 пиксель на каждый  квадрат (Слои> Стили слоя> Обводка (Layers> Layer Style> Stroke)) с синим цветом # 4877b4.

 

Создание музыкального шаблона в Фотошопе

 

На каждый квадрат добавьте изображение какого-нибудь популярного альбома.

 

Создание музыкального шаблона в Фотошопе

 

Чтобы создать эффект подсветки при наведении, дублируем слой с первым альбомом. Заполните квадрат с черным цветом. Уменьшите непрозрачность этого нового слоя до 70%. Добавьте название альбома, а также синюю кнопку "Купить".

 

Создание музыкального шаблона в Фотошопе

 

Шаг 5: Создание блока с правой стороны

 

Это просто. Создайте сначала новую группу и назовите ее «правая» (поместите её над группой "левая"). Создайте синюю панель с названием точно также как делали левую.

 

Создание музыкального шаблона в Фотошопе

 

Создать белый блок (как слева).

 

Создание музыкального шаблона в Фотошопе

 

Перетащите в него группу "Слайдер Медиа» из комплекта графики.

 

Создание музыкального шаблона в Фотошопе

 

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

 

Создание музыкального шаблона в Фотошопе

 

Шаг 6: Блок видео

 

Последний блок будет использоваться для трансляции музыкальных клипов. Этот блок будет легко создать, потому что он уже готов к использованию в iPhone-комплекте. 


Создайте новую группу и назовите ее «клипы». Создайте черное название (вы можете найти этот блок в комплекте).

 

Создание музыкального шаблона в Фотошопе

 

Используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) и Горизонтальный текст (Text Tool (T)), чтобы создать пять кнопок. Для первой кнопки используйте стили кнопки доступные в комплекте, а для других используйте стили ниже.

 

Создание музыкального шаблона в Фотошопе

 

Создание музыкального шаблона в Фотошопе

 

Создание музыкального шаблона в Фотошопе

 

Создание музыкального шаблона в Фотошопе

 

Теперь перетащите плейер под название блока.

 

Создание музыкального шаблона в Фотошопе

 

Шаг 7: Футер

 

Создайте сначала новую группу, которую назовите «подвал». Дублируйте синий слой (в верхнем меню) и вырежьте его часть, чтобы получилась панель (см. рисунок ниже).

 

Создание музыкального шаблона в Фотошопе

 

Используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)), чтобы создать черный блок с размером в 1000 на 60 пикселей.

 

Создание музыкального шаблона в Фотошопе

 

С помощью Горизонтальный текст (Text Tool (T)) добавьте ​​копирайты.

 

Создание музыкального шаблона в Фотошопе

 

И в заключении используйте круглую кнопку, чтобы создать некоторые ссылки на социальные сети. Иконки должны находится внутри синего круга, вы можете найти их на сайте Iconfinder по адресу: http://www.iconfinder.com/search/?q=iconset%3Asocial.

 

Создание музыкального шаблона в Фотошопе

 

Вот и всё. Шаблон готов.

 

Создание музыкального шаблона в Фотошопе

 

Надеюсь, Вам понравился этот урок.  Вы можете скачать исходный файл этого урока - http://www.grafpedia.com/downloads/web-layouts/Music-Template-by-Grafpedia.zip (только для зарегистрированных пользователей). 



Автор урока: Команда сайта http://www.grafpedia.com


Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 31.05.2012
  •   Просмотров: 4998
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки