Дизайн сайта MP3 Setvice

В этом уроке мы будем создавать такой дизайн музыкального сайта:


Дизайн сайта MP3 Setvice


1. Создайте новый документ размером 500×400 пикселей с разрешением 72 dpi. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте фигуру на весь холст. Это будем нашим фоном. Для слоя с фигурой примените стиль Наложение градиента
(Layer Style — Gradient Overlay) с такими настройками:


Дизайн сайта MP3 Setvice

Дизайн сайта MP3 Setvice


2. Инструментом Эллипс (Ellipse Tool) создайте фигуру, как показано ниже. Она не будет сразу иметь такой эффект. Его создание описано в следующем шаге:


Дизайн сайта MP3 Setvice


3. Установите Заливку (Fill) слоя с кругом – 0% и перейдите в меню Стилей слоя
(Layer Style — Blending Options) и настройте так:

Внешнее свечение:


Дизайн сайта MP3 Setvice


Внутреннее свечение:


Дизайн сайта MP3 Setvice


Обводка:


Дизайн сайта MP3 Setvice


4. Инструментом Кисть (Brush Tool) закрасьте некоторые части круга тем же цветом, что и фон.


Дизайн сайта MP3 Setvice


5. Инструментом Прямоугольник с закруглёнными слоями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте 3 фигуры-кнопки:


Дизайн сайта MP3 Setvice


6. Чтобы создать вышепоказанный эффект, примените эти стили в меню Стилей слоя
(Layer Style — Blending Options):

Внутренняя тень:


Дизайн сайта MP3 Setvice


Наложение градиента:


Дизайн сайта MP3 Setvice


7. Инструментом Эллипс (Ellipse Tool) создайте круг в пределах свечения. Потом, удерживая Alt, вырежьте внутреннюю часть этим же инструментом:


Дизайн сайта MP3 Setvice


Для этого круга потом примените стиль Внешнее свечение (Layer Style — Outer Glow):


Дизайн сайта MP3 Setvice


8. Под первым слоем с кругом создайте ещё один круг цветом #818181. Теперь нужно поработать со стилями слоя, чтобы получить результат, показанный ниже. Этому посвящены следующие шаги.


Дизайн сайта MP3 Setvice


9. Создайте новый документ размером 4х4 пикселя с разрешением 72 dpi. Инструментом Карандаш (Pencil Tool) создайте такой узор:


Дизайн сайта MP3 Setvice


10. Перейдите в меню Редактировать»Определить узор (Edit>Define Pattern) и сохраните этот узор. Затем вернёмся к нашему последнему созданному кругу, который мы должны залить. Перейдите в меню Стилей слоя (Layer Style — Blending Options) для этого круга и примените эти стили:

Наложение градиента:


Дизайн сайта MP3 Setvice

Дизайн сайта MP3 Setvice


Наложение узора:


Дизайн сайта MP3 Setvice


11. Теперь инструментом Эллипс (Ellipse Tool) создайте ещё один круг цветом #112840, как показано ниже.


Дизайн сайта MP3 Setvice


12. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и примените эти стили для последнего круга:

Внутреннее свечение:


Дизайн сайта MP3 Setvice


Обводка:


Дизайн сайта MP3 Setvice


13. Сейчас инструментом Эллипс (Ellipse Tool) создайте ещё один круг внутри. К нему мы тоже применим стили слоя и он будет выглядеть так:


Дизайн сайта MP3 Setvice


14. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Внутреннее свечение:


Дизайн сайта MP3 Setvice


Наложение градиента:


Дизайн сайта MP3 Setvice


15. Сделайте копию последнего слоя и уменьшите её немного инструментом Свободное трансформирование (Free Transform).


Дизайн сайта MP3 Setvice


16. Нам нужно создать ещё один круг белого цвета:


Дизайн сайта MP3 Setvice


17. Добавьте маску слоя, кликнув на соответствующую иконку внизу палитры слоёв. Чёрной кистью создайте прозрачность. Установите Режим наложения – Наложение
(Blending Mode – Overlay) и Заливку (Fill) – 20%. Вы получите блик:


Дизайн сайта MP3 Setvice


18. Сделайте копию последних двух слоёв с кругом и бликом и уменьшите копии, сохраняя пропорцию. Измените градиентную заливку круга со светло-серой на почти белую:


Дизайн сайта MP3 Setvice


19. Создайте ещё один круг цветом #DD812F, потом, удерживая Alt, создайте ещё один круг внутри, чтобы сделать вырез. Вы должны получить такой результат:


Дизайн сайта MP3 Setvice


К этому слою примените стиль Тиснение (Layer Style — Bevel and Emboss):


Дизайн сайта MP3 Setvice


20. Теперь займёмся созданием таких маленьких кругов:


Дизайн сайта MP3 Setvice


Инструментом Эллипс (Ellipse Tool) создайте круг цветом #E2E2E4. Потом примените стиль Обводка (Layer Style — Stroke).


Дизайн сайта MP3 Setvice


Потом создайте ещё один круг меньших размеров цветом #DD812F.


Дизайн сайта MP3 Setvice


21. Теперь будем добавлять текст:


Дизайн сайта MP3 Setvice


22. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст на кнопках, соблюдая эти настройки текста:


Дизайн сайта MP3 Setvice

Дизайн сайта MP3 Setvice


23. Последний элемент – это логотип, который должен быть помещён посередине.


Дизайн сайта MP3 Setvice


Ниже показаны настройки текста “MP3”:


Дизайн сайта MP3 Setvice


Также нужно применить эти стили слоя:

Наложение градиента (Layer Style — Gradient Overlay):


Дизайн сайта MP3 Setvice


Обводка:


Дизайн сайта MP3 Setvice


Это настройки слова “server”:


Дизайн сайта MP3 Setvice

Дизайн сайта MP3 Setvice







Делаем Web-дизайн

Вас может также заинтересовать:

18 декабря 2018

Цифровой фотоаппарат - это сложное электронно-механическое устройство, которое просто обязано дарить людям хорошее настроение и красивые и яркие снимки. Качество и стабильность работы во многом зависят от воздействия внешних факторов, в том числе и от того, как за камерой ухаживать. Если соблюдать несложные правила ухода за фототехникой, то аппарат прослужит владельцу долго. Конечно, можно просто дыхнуть на аппарат и протереть его носовым платком либо плюнуть и почистить майкой, но ведь не зря придумано столько разнообразных средств для ухода за фотокамерой. Каждый продавец будет советовать и нахваливать именно тот комплект, который есть у него на витрине. Не всегда такие заявления будут верны. Лучше заранее подготовить все необходимое и снимать спокойно, не думая о пятнах, соринках и пылинках. Не стоят они того, чтобы огорчение мешало творчеству.

18 декабря 2018

С камерой EXILIM EX-ZS6 легко сохранить все памятные моменты вашей жизни: В простом режиме вы в любой ситуации сможете с легкостью делать великолепные снимки, не беспокоясь о настройках. Снимать трудные сцены (например, пейзажи или групповые фото) просто благодаря разрешению 16,1 мегапикселей и 26-мм широкоугольному объективу с 5-кратным оптическим зумом. Теперь вы не пропустите ни одной важной детали. EXILIM EX-ZS6 - это идеальная повседневная камера, так как она всегда под рукой и легко помещается в любой карман.

18 декабря 2018

Дата анонса: 2010-01-15 18:38:11 Эффективное разрешение, МП: 14 Диагональ ЖК-дисплея, дюймы: 2.7 Вес с батареей и картой памяти, г: 204