Аудиоплеер в формате PNG

Воскресенье, 13 Января 2013 г. 11:05 + в цитатник

Photo Editor Online.
Аудиоплеер в формате PNG на Mail.Ru.

Ксения уже рассказывала в сообществе о том,
как сделать аудиоплеер без фотошопа с
помощью Photo Editor Online.
Я обещала рассказать как сделать
аудиоплеер в формате PNG,сегодня выполняю
своё обещание.
Прежде всего перед изготовлением
плеера,вы должны помнить,что ваш плеер будет
ОБРАМЛЯТЬ аудио,а значит он должн быть по
размеру больше,чем содержимое.
размеры ауди на Mail.Ru:
если плеер размещаете в личном блоге:
width="360" (ширина)
height="60"(высота)
если плеер размещаете в блоге сообщества:
width="622" (ширина)
height="60"(высота)
Например,я хочу сделать плеер для этого
музыкального файла:

HTML- код любого муз.файла на Майл ру:
duration="MM:SS" url="music:ссылка на файл mp3">
где
"Исполнитель"-наименование исполнителя композиции;
"Композиция"-наименование произведения;
"MM:SS"- длительность композиции в минутах
и секундах;
"ссылка на файл mp3" - прямая ссылка на mp3-файл
(начинающаяся с "http://" и т.д.)
Внимание!Исполнителя композиции и
название возможно отредактировать.
В блоге сообщества так же отражается ещё и ID файла:ник
или имя того пользователя,который загрузил этот файл.
Поэтому размер файла "ширина" в блоге сообщества больше.
УЧТИТЕ это при создании своего плеера!
Что собой представляет аудиоплеер на Mail.Ru?
Это изображение(в нашем случае коллаж) +
вставленый в него муз.файл.
В этом посте расскажу подробно как сделать
коллаж-изображение для плеера в формате PNG
для вставки в личный блог и блог сообщества
на Mail.Ru.
I . Изображение в формате PNG для плеера в личном блоге.
1.Заходим в Photo Editor Online.
2.Создаём в нём новый рисунок(обратите внимание
на размеры и прозрачность).

3.Помните!Каждый элемент вашего изображения-
это новый СЛОЙ,который при объединении с
другими слоями и даёт нужный результат.

4.Инструментом "закруглённый прямоугольник",зажав ЛКМ,
рисуем основу нашеего будущего плеера.Выбрав инструмент,
произведём настройки как у меня на скрине ниже:

Настраивая "непрозрачность",будте внимательны:чем меньше
значение,тем прозрачнее будет ваш рисунок.
Указывая радиус:чем больше значение,тем округлее углы фигуры.
5.Придадим этому слою какой-нибудь стиль,
например как у меня на скрине ниже:

(все скрины в посте кликабельны!)
6.Теперь сделаем "желобок" нашему будущему плееру.
Его можно или нарисовать или сделать из-какого-нибудь
разделителя,изображения и т.д.(призовите на помощь
своё воображение и фантазию).Я загружу с компьютера:

Изменим размер:

Придадим стиль:

7.Нарисуем на нашем будущем плеере элементы:

8.Подпишем плеер:

Вот и готов наш шаблончик..
Но это ещё не всё..
Обрезаем лишнее,запоминаем размер,сохраняем,
например,на компьютер...

Вот что получилось у меня:

II. Изображение в формате PNG для плеера в
блоге сообщества
По такому же принципу(см.выше) изготовляем шаблончик
для плеера,который разместим потом в посте сообщества:

Результат:

В следующем посте на эту тему расскажу как
просто вставить шаблон и музыку в HTML-код,
чтобы потом вставить аудиоплеер в посты своего
блога или сообщества на Mail.Ru.
При прочтнеии постов-уроков:
Учитесь читать,читая-вчитывайтесь,
вчитываясь-вдумывайтесь,вдумываясь-понимайте,
поняв-делайте.

~АмаZона Анна ~
для сообщества