Все для фотошопа. Фотошоп для всех

Сайт для тех, кто хочет научиться фотошопу. Уроки для русского фотошопа.

Уроки фотошопа. Как сделать плеер с анимированной картинкой

Уроки фотошопа. Как сделать плеер с анимированной картинкой.

Этот урок фотошопа  «Как сделать плеер» , я писала для блога на mail.ru. Теперь урок более подробный и с хорошими скриншотами. Урок фотошопа будет полезен не только для того, чтобы сделать плеер. Урок научит вас использовать готовые гифки для своих работ в фотошопе. Все картинки кликабельны. Кликайте и скрины откроются в большем размере. Загружаем в фотошоп готовую гифку ( в Инете их много), вот такую:

Уроки фотошопа. Как сделать плеер с анимированной картинкой.




1.

2. Теперь загружаем в фотошоп готовый шаблон плеера. Такой шаблон можно сделать самостоятельно, но это будет уже другой урок.  Итак: этот шаблон уже подготовлен для размещения на нем гифки, сохраните его на компьютер и откройте в фотошопе.


3. Переходим на слой с танцующей бабушкой. 
Берем инструмент пипетка (1) и выбираем с картинки любой понравившийся цвет. У меня это будет сиреневый. Этот цвет появляется на панели инструментов (2).  После этого переходим на слой с плеером, берем инструмент заливка (3) и заливаем плеер сиреневым цветом. Не забудьте для заливки перейти на слой с плеером, а то бабушку зальете.


4. Теперь сделаем плеер более объемным. Для этого открываем окно со стилями: идем на верхней панели в Окно — стили и просто выбираем в выпавшем окне, подходящий по цвету стиль, нажимаем и получается объемный плеер.

5. После этого берем инструмент текст (4) и подписываем плеер своим именем или ником, подбирая подходящий размер и гарнитуру шрифта. Подписывать лучше черным цветом, потому что потом к подписи так же можно применить стили, чтобы подпись стала более объемной. Переместите подпись инструментом перемещение (5), в уголок плеера.


6. Дальше переходим на слой с гифкой. Ищем на самой верхней  панели Основная рабочая среда значок Упорядочить документы (6). Нажимаем на маленькую треугольную стрелочку справа от значка. Откроется окно, где надо выбрать квадратик (слева второй сверху), разделенный пополам по вертикали. Наш рабочий стол разделится на 2 части. Слева должна стоять  гифка с бабушкой, справа плеер, а в панели слоев 2 слоя с гифкой.

7. Теперь нужно перенести нашу гифку на слой с плеером — объединить их. В панели слоев у нас 2 слоя. Нижний активный с глазком и выделен синим цветом, а верхний неактивный, без глазка. Встаем на нижний слой, и зажимаем клавишу Shift, после чего кликаем мышкой по верхнему неактивному слою. Оба слоя выделятся синим цветом. Встаем на эти слои, зажимаем левую кнопку мыши ,(в панели инструментов мы стоим на значке Перемещение (7) и перетаскиваем слои на рабочий стол, прямо на плеер. На нем появилась наша бабушка.

8. Теперь снова идем наверх, нажимаем  стрелочку около квадратика Упорядочить документы (8) и выбираем самый верхний, левый квадратик с целым полем.  На рабочем столе остался один плеер с гифкой.  Но она стоит неровно. Берем инструмент Перемещение (9), (оба слоя с гифкой на панели слоев синего цвета),  и перемещаем бабушку в центр плеера или в любое другое место на плеере.

9. Так как в процессе перетаскивания гифки, анимация куда-то пропала и бабушка больше не хочет танцевать, надо ее восстановить. Итак, что мы видим: на панели слоев у нас 4 слоя. Нижний с плеером, дальше слой с подписью и два верхних с гифкой. Нужно объединить слои с плеером и подписью. Для этого отключаем глазки на 2 верхних слоях с гифкой, встаем на нижний слой с плеером и кликаем по нему правой кнопкой мыши. В выпавшем окне выбираем Объединить видимые.  Осталось 3 слоя. Встаем на средний слой с гифкой, он активный-на нем горит глазик, но глазик также есть и на нижнем слое с плеером. На нем он должен гореть всегда. Самый верхний слой неактивный.

10. Дальше идем в кадры. Там у нас 1 кадр. Справа, на панели кадров находим маленький квадратик с треугольной кнопочкой (10), нажимаем на нее и в выпавшем окне выбираем Создать кадры из слоев. на панели появилось 3 кадра. Обратите внимание, что на панели слоев глазки горят на нижнем слое и на среднем (средний активный-выделен синим цветом), а на верхнем глазка нет (11).

11. Теперь обратите внимание, что только на первом кадре есть и плеер и гифка, на 2-х же других одна гифка, а плеера нет. Чтобы он появился на всех 3 кадрах, сделайте простую вещь-встаньте на слой с плеером и дважды кликните по нему левой кнопкой мыши. На всех 3 кадрах появилось полное изображение.

12. Теперь в панели кадров встаем на первый кадр и справа нажимаем на значок корзина (12). Этот кадр лишний, он нам больше не нужен и мы его удаляем.

13. Теперь приступаем непосредственно к самой анимации. Проверим соответствие кадров слоям. 1 кадр — это 2 слой; 2 кадр — это 3 слой. Возле каждого кадра есть треугольничек, нажимаем на него и выставляем нужное время. В данном случае, это 0,3 сек. Включаем анимацию, проверяем, как работает и,  если все устраивает — сохраняем. Файл — сохранить для Web и устройств. Вот и все. Включаем и любуемся! Чтобы вставить в такой плеер музыку, воспользуйтесь специальным кодом плеера, где вы подставите вместо русских слов ссылку на свой блог , ссылку № 1 Радикала на саму картинку и  музыку.

Код для плеера:

А вот и наш готовый плеер:


Готовые картинки плееров вы можете посмотреть и скачать себе бесплатно здесь…

Примечание: урок был написан давно и возможно некоторые действия,, например по использованию ссылок с Радикала, уже не действенны, тем не менее слова из песни не выкинешь, так же как из проиндексированного урока, поэтому прошу моих читателей отнестись с пониманием и просто не использовать последний, 13 пункт урока. Во всем остальном урок даст вам понимание работы с готовыми гифками, надеюсь что это поможет вам в вашем творчестве. Благодарю за вниманием к моим урокам!

Скачать урок фотошопа Как сделать плеер с анимированной картинкой можно бесплатно с Яндекс Диска.


Впишите свой email :

Понравилась статья? Поделись с друзьями!





Почитай, тебе понравится!

Уроки анимации ,
Отзывов к Уроки фотошопа. Как сделать плеер с анимированной картинкой уже: 12...
  • Олечка Коновалова

    Олька, великолепный урок у тебя получился, так держать! Вот мне только непонятно почему ты использовала другой хостин для размещения картинок? Что он дает сайту?

    Ответить
  • svetli

    молодец,многим пригодится твой урок

    Ответить
  • Ната-Леони

    Замечательный урок! Пригодится! Спасибо!)))

    Ответить
  • Алена

    Спасибо за урок!Давно хотела попробовать сделать такой плеер!

    Ответить
  • Татьяна Лазарева

    Оля здравствуйте! Мы с Вами немного знакомы.- Иногда общались в Мире. Сейчас я подписалась на Кошкин дом. Сегодня получила рассылку. Сделала 2 урока. Коллаж лебединая верность и Анимироавнный плеер.Какая была радость- когда все получилось. Спасибо Оля огромное. Я так рада. что вас узнала. надеюсь будете мне хорошим учителем- а я примерная ученица. Хотела послать Вам сюда работы, но не знаю как. Пошлю в Мир Спасибо Оля еще раз за Ваш труд

    Ответить
  • Татьяна

    Здравствуй Олечка!
    Прекрасный урок! Хочу попробовать подобный плеер сделать для поста в блоге. Только у меня есть один вопросик. Как его оживить (т.е. сделать флешь плеером)? Извини, что задаю тебе так много вопросов. Просто из первого должно выходить второе, а как это сделать не пойму? А за урок огромное СПАСИБО!!!

    Ответить
  • Татьяна

    Оля,не знаю как выразится точнее, Сделав плеер в ФШ, мы по сути получаем картинку, которую сохраняем себе в компьютер, далее, через Радикал, создаём ссылку. А потом, чтобы в посту сделать работающий плеер, нам нужен, наверное какой-то флеш (html) код, куда мы должны вставить код картинки (т.е. картинку — плеер, что мы создали в ФШ) и mp3 ссылку, чтобы плеер начал воспроизводить музыку? Суть вопроса: в какой код мы вставляем ссылки музыки и картинки? Хотя это конечно уже вопрос не по ФШ. Может ты знаешь? Ты ведь большой спец во многих вопросах по работе с блогами. Я просто восхищаюсь твоими познаниями, Олечка, и благодарю тебя за помощь и подсказки!

    Ответить
    • Ольга

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

      Ответить
      • Татьяна

        Олечка, большое спасибо! Мой п. ящик:mutovina01@mail.ru

        Ответить
        • Ольга

          Я отправила тебе кодик плеера.

          Ответить
  • Алёна

    Спасибо больдое!Все получилось!!

    Ответить
    • Ольга

      Я очень рада, Аленка!

      Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Имя *
Email *
Сайт
Ваш комментарий
:bye:  :good:  :negative:  :scratch:  :wacko:  :yahoo:  B-)  :heart:  :rose:  :-)  :whistle:  :yes:  :cry:  :mail:  :-(  :unsure:  ;-)