Гиф анимация на прозрачном фоне баня

LiveInternetLiveInternet

—Приложения

• ОткрыткиПерерожденный каталог открыток на все случаи жизни
• Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
• Онлайн-игра «Empire»Преврати свой маленький замок в могущественную крепость и стань правителем величайшего королевства в игре Goodgame Empire. Строй свою собственную империю, расширяй ее и защищай от других игроков. Б
• Я — фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
• Толкование сновУзнайте в чем тайна вашего сна — стоит готовиться к чему-то плохому или, наоборот, надо чтобы сон обязательно сбылся. Вы непременно найдете толкование вашего сна, ведь в базе уже сейчас содержится 47

—Ссылки

—Метки

—Рубрики

• (1)
• БИБЛИОТЕКА (4977)
• АУДИОКНИГИ (СЛУШАТЬ ОНЛАЙН) (621)
• ВИДЕО. (761)
• ДОКУМЕНТАЛЬНОЕ КИНО (464)
• ИГРЫ. (81)
• КИНОТЕАТР (1181)
• МУЗЫКА. (307)
• ПОСМЕЯТЬСЯ ХОТИТЕ ? (603)
• ПРОЗА (358)
• СТИХИ. (718)
• БИЖУТЕРИЯ (358)
• БИЖУТЕРИЯ ВЯЗАНАЯ (96)
• БИЖУТЕРИЯ ИЗ БИСЕРА (159)
• БИЖУТЕРИЯ РАЗНАЯ (97)
• БИСЕР. (255)
• БОНСАЙ (23)
• ВЯЗАНИЕ с бисером (1)
• ВЫШИВКА БИСЕРОМ (50)
• ПЛЕТЕНИЕ (154)
• ВСЕ ПОД РУКОЙ, (327)
• ВЫШИВКА (546)
• ВЫШИВКА — ГЛАДЬ, КРЕСТ, РИШЕЛЬЕ. (177)
• ВЫШИВКА ЛЕНТАМИ (44)
• ВЫШИВКА ОБЪЁМНАЯ (182)
• ВЫШИВКА ПО ПЛАСТИКОВОЙ КАЙМЕ (27)
• ГОБЕЛЕНЫ. (13)
• ПОЛЕЗНОСТИ (79)
• ВЯЗАНИЕ (14850)
• Вязание на машине (71)
• CRAZY-WOOL (47)
• ТУНИССКОЕ вязание (24)
• ВЯЗАЛЬНЫЕ ГЕНЕРАТОРЫ (14)
• НУКИНГ (13)
• ВАРЕЖКИ. ПЕРЧАТКИ (273)
• ВИДЕО УРОКИ (5579)
• ВЯЗАНИЕ НА ВИЛКЕ. (65)
• ВЯЗАНИЕ+КОЖА+МЕХ+ТКАНЬ (158)
• ВЯЗАНЫЕ ИДЕИ. (272)
• ВЯЗАНЫЙ ПОДИУМ. (42)
• ВЯЗАНЫЙ ПЭЧВОРК. (60)
• ЖАККАРД (591)
• ИРЛАНДИЯ, ФРИФОРМ (1100)
• ПОЛЕЗНЫЕ ВЯЗАЛКИ (164)
• КОВРИКИ (144)
• НОСКИ, ЧУЛКИ (623)
• ОТЗЫВЫ О ПРЯЖЕ (61)
• ПЛЕДЫ (307)
• ПОЛЕЗНОСТИ (2424)
• СКАТЕРТИ, САЛФЕТКИ (618)
• УЗОРЫ — КРЮЧОК (3152)
• УЗОРЫ — СПИЦЫ (3306)
• ШАПКИ — КРЮЧОК (444)
• ШАПКИ — СПИЦЫ (610)
• ШАРФЫ, ПАЛАНТИНЫ, ШАЛИ (1168)
• ШЛЯПКИ ВЯЗАНЫЕ И ШИТЫЕ (287)
• ДОМ И В НЕМ (2190)
• ГРИБЫ (48)
• СОВЕТЫ ПО ХОЗЯЙСТВУ (554)
• ИДЕИ (312)
• ПОЛЕЗНОСТИ (326)
• РЕМОНТ СВОИМИ РУКАМИ (146)
• САД В КВАРТИРЕ (298)
• САД и ОГОРОД (765)
• ЖЕНСКАЯ ЭНЦИКЛОПЕДИЯ. (2159)
• О ДЕТЯХ и ДЛЯ ДЕТЕЙ. (525)
• ПОЛЕЗНОСТИ (1410)
• ПРАВИЛА для ЖЕНЩИН (67)
• ПРИЧЕСКИ (157)
• ЖУРНАЛЫ ПО ВЯЗАНИЮ (1897)
• Дуплет (192)
• Журнал Мод (137)
• ЗДОРОВЬЕ (1775)
• ИГРУШКИ (821)
• АМИГУРУМИ (130)
• ИГРУШКИ ВЯЗАНЫЕ (265)
• ИГРУШКИ РАЗНЫЕ (236)
• КУКЛЫ (231)
• КУЛИНАРНЫЕ РЕЦЕПТЫ. (6663)
• БЛИНЫ, ОЛАДЬИ, ЗАПЕКАНКИ. (248)
• РЕЦЕПТЫ для МУЛЬТИВАРКИ (92)
• ВИДЕО РЕЦЕПТЫ (626)
• ВЫПЕЧКА (2044)
• ЗАГОТОВКИ НА ЗИМУ (563)
• КАШИ (48)
• КОЛБАСА (206)
• КОНФЕТЫ (264)
• КРЕМ для ТОРТА (179)
• МОРОЖЕНОЕ (151)
• МЯСО, ПТИЦА, ФАРШ (850)
• НАПИТКИ (312)
• ОВОЩИ, ГРИБЫ и ЯГОДЫ (434)
• ПЕЛЬМЕНИ (98)
• ПИРОГИ, ПИЦЦА, БУЛОЧКИ. (812)
• Полезности (719)
• РАЗНОЕ (338)
• РЕЦЕПТЫ ПОСТНЫХ БЛЮД (72)
• РУЛЕТЫ, КЕКСЫ, ПРЯНИКИ (239)
• РЫБА, МОРЕПРОДУКТЫ (360)
• САЛАТЫ (130)
• СЛАДОСТИ без выпечки (330)
• СОУСЫ (101)
• СУПЫ (90)
• ТЕСТО, ХЛЕБ, КУЛИЧИ. (403)
• ТОРТЫ, ПИРОЖНЫЕ, ПЕЧЕНЬЕ. (696)
• ЯЙЦА, ТВОРОГ, МОЛОКО, сыр. (427)
• МАСТЕРА НА ВСЕ РУКИ. (1592)
• ВАЛЯНИЕ (52)
• ДЕКУПАЖ (2)
• КАРВИНГ (22)
• КИНУСАЙГА (8)
• КРУЖЕВО (206)
• ЛЕПКА (141)
• МАКРАМЕ (19)
• МЫЛО (28)
• ПЛАСТИК-В ДЕЛО. (78)
• ПЛЕТЕНИЕ (124)
• ПОДЕЛКИ ИЗ БУМАГИ (146)
• ПУГОВИЦЫ (30)
• РАЗНОЕ (498)
• РИСОВАНИЕ (148)
• СВЕЧИ (17)
• ФРИВОЛИТЕ (20)
• ЭНКАУСТИКА (1)
• МЕБЕЛЬ (196)
• МЕБЕЛЬ ИЗ ДЕРЕВА И ДСП. (56)
• МЕБЕЛЬ ИЗ КАРТОНА и др. (41)
• МЕБЕЛЬНЫЕ ИДЕИ (105)
• МОДЕЛИ ДЛЯ ДЕТЕЙ. (1828)
• ЖУРНАЛЫ — МОДА ДЛЯ ДЕТЕЙ (121)
• ИДЕИ (67)
• ОБУВКА (145)
• ОДЕЖКА ВЯЗАНАЯ (887)
• ОДЕЖКА ШИТАЯ (202)
• ШАПКИ (440)
• МОДЕЛИ ДЛЯ ЖЕНЩИН. (8889)
• БЕЗРУКАВКИ, ЖИЛЕТЫ (496)
• ЖАКЕТ, КОФТА — КРЮЧОК (481)
• ЖАКЕТЫ, КОФТЫ — СПИЦЫ (879)
• КАРДИГАНЫ (481)
• КОСТЮМЫ (201)
• НИЖНЕЕ БЕЛЬЕ, КУПАЛЬНИКИ (159)
• ПАЛЬТО (272)
• ПЛАТЬЯ — КРЮЧОК (742)
• ПЛАТЬЯ — СПИЦЫ (363)
• ПОНЧО (95)
• ПУЛОВЕР, СВИТЕР — КРЮЧОК (528)
• ПУЛОВЕР, СВИТЕР — СПИЦЫ (2458)
• ПЫШЕЧКИ- КРАСАВИЦЫ. (98)
• ТОП, ТУНИКА — КРЮЧОК (995)
• ТОП, ТУНИКА — СПИЦЫ (507)
• ШОРТЫ, ЛОСИНЫ, БРЮКИ (73)
• ЮБКИ (436)
• МОДЕЛИ ДЛЯ МУЖЧИН. (394)
• МУДРОСТЬ ПРИДЁТ, ЖИВИТЕ! (937)
• ИКОНЫ, МОЛИТВЫ (111)
• ПРИТЧИ, РАССКАЗЫ, СТИХИ (839)
• ХРАМЫ (48)
• НЕ ХОЧУ БЫТЬ ЧАЙНИКОМ. (1637)
• «ПРОГРАММА ЭДИТОР.» (100)
• ПОЛЕЗНОСТИ (1053)
• Про ЛИ.РУ (253)
• ФОТОШОП (220)
• НОВОСТИ (2310)
• ТЕКУЩИЕ НОВОСТИ. (2294)
• ОБУВЬ (804)
• ОБУВЬ ВЯЗАНАЯ (137)
• ОБУВЬ СВОИМИ РУКАМИ (116)
• ТАПОЧКИ ДОМАШНИЕ (562)
• ПОЛЕЗНЫЕ СОВЕТЫ. (807)
• РАЗНОЕ (400)
• СУМКИ (281)
• КРАСОТА И ВОПЛОЩЕНИЕ (29)
• ПЛАСТИКОВЫЕ и др. (14)
• СУМКИ ВЯЗАНЫЕ (155)
• СУМКИ ШИТЫЕ (85)
• ЦВЕТЫ, (378)
• ЦВЕТЫ ВЯЗАНЫЕ (240)
• ЦВЕТЫ ИЗ КАПРОНА и ТКАНИ (130)
• ЧТО ПРИГОДИТСЯ ДЛЯ ДНЕВНИКА. (3625)
• ФЛЕШ (234)
• АНИМАШКИ (160)
• ГЕНЕРАТОРЫ (414)
• ДЛЯ РАМОЧЕК полезное (229)
• КЛИПАРТЫ (387)
• КНОПКИ — ПЕРЕХОДЫ (63)
• КОДЫ HTML (122)
• КОММЕНТАРИИ (51)
• ОТКРЫТКИ, КАРТИНКИ (156)
• ПОЛЕЗНОСТИ (780)
• РАЗДЕЛИТЕЛИ (82)
• РАМОЧКИ (671)
• РАМОЧКИ «ЗДОРОВЬЕ» (36)
• РАМОЧКИ «полезные советы» (4)
• РАМОЧКИ «РЕЛИГИЯ» (35)
• РАМОЧКИ без ТЕМЫ (95)
• РАМОЧКИ ДАЧНЫЕ (43)
• РАМОЧКИ ДЕТСКИЕ (13)
• РАМОЧКИ для ВИДЕО (21)
• РАМОЧКИ для СТИХОВ (51)
• РАМОЧКИ ЖЕНСКИЕ (34)
• РАМОЧКИ зимние (7)
• РАМОЧКИ колдовские (2)
• РАМОЧКИ КОМПьютер (9)
• РАМОЧКИ КУЛИНАРНЫЕ (136)
• РАМОЧКИ праздничные (18)
• РАМОЧКИ РУКОДЕЛЬНЫЕ (35)
• РАМОЧКИ ЦВЕТОЧНЫЕ (52)
• СХЕМЫ (392)
• ФОНЫ (423)
• ШИТЬЕ. (2308)
• ПЕРЕДЕЛКИ (256)
• ПОДИУМ (56)
• ПОЛЕЗНОСТИ (831)
• СИНЕЛЬ (5)
• ШЬЕМ САМИ (1174)
• ЭЗОТЕРИКА. (253)
• ГАДАНИЕ и ТЕСТЫ (45)
• ЭТИКЕТ. (53)
• ЭТО ИНТЕРЕСНО (4441)
• АВТОМОБИЛЬ (38)
• СОЦИОНИКА (12)
• Интересные статьи (9)
• АРХИТЕКТУРА (119)
• ВЕК ЖИВИ — ВЕК УЧИСЬ (154)
• Великая Отечественная (84)
• ДЛЯ ИНФОРМАЦИИ (1598)
• ЖИВОТНЫЕ и ПТИЦЫ (473)
• ИСТОРИЯ (175)
• КЛУБ ПУТЕШЕСТВЕННИКОВ (568)
• НЕПОЗНАННОЕ (456)
• ПЛАНЕТА — НАШ ДОМ (304)
• Полезно знать (393)
• САДЫ, ЦВЕТЫ, ЭКЗОТИКА (105)
• СКУЛЬПТУРЫ, КАРТИНЫ, ФОТО. (155)
• Ю (78)
• личное (2)

—Цитатник

Летняя кофточка «Subtle Spring» Нарядная летняя кофточка с ажурной кокеткой сде.

Ну очень эффектная резинка на спицах Источник

Вяжем мужчинам спицами. Ирландский свитер .

Следки на спицах без шва. Подробный и простой МК для начинающих Источник

Оригинальный узор спицами Тюльпаны Раппорт узора состоит из 11 петель и 16 рядов. .

—Поиск по дневнику

—Подписка по e-mail

—Статистика

GIF АНИМАЦИЯ (КЛИПАРТ) НА ПРОЗРАЧНОМ ФОНЕ

GIF АНИМАЦИЯ (КЛИПАРТ) НА ПРОЗРАЧНОМ ФОНЕ

v

Источник статьи: http://www.liveinternet.ru/users/belenaya/post436134289/

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Создаем анимацию с прозрачным фоном

Здесь я расскажу вам как можно создать gif анимацию с прозрачным задним фоном, то есть ее можно будет вставить в любое место вашего сайта, и будет смотреться так как будто вы используете javascript, все это будем осуществлять с помощью бесплатных онлайн сервисов (fotoshop-online и animator-online), поэтому загружать на свой компьютер программы не понадобиться.
Скачать исходники для статьи можно ниже

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

Давайте создадим пузырек, который поднимается вверх.

Шаг 1. Загружаем на компьютер картинку пузырька с прозрачным задним фоном.

Для начала нам нужно отыскать изображение пузырька. Для поиска картинок я использую Google.

Вообще для создания дизайна сайтов вебмастера используют в основном 3 формата изображения – это jpg, gif, png.

Причем форматы gif и png поддерживают свойство прозрачности, а gif еще и анимацию.

Поэтому для того, чтобы найти изображения с прозрачным фоном можете в поиске забивать, например: “пузырек png” или “пузырек gif”.

Открываем Google, вводим в строку поиска например “пузырек gif”, далее слева выбираем пункт “картинки” и выбираем понравившуюся нам, далее сохраняем ее на свой компьютер.

Шаг 2. Работа в онлайн графическом редакторе.

Сейчас в интернете есть множество онлайн графических редакторов типа Photoshop, будем использовать один из них, так как просто не охото устанавливать на свой компьютер пиратскую программу (официальный Photoshop платный), да еще и кряки, которые могут заразить компьютер различного рода вирусами.

Я буду пользоваться следующим онлайн ресурсом:

Я открыл свой найденный на Google пузырек и сразу же видно, что фон за ним прозрачные (фон в виде шахматной доски).

Теперь нам нужно подогнать изображение под тот размер, который нам необходим, например я определился, что пузырек у меня будут располагаться в подвале и в ширину он будут занимать 200 px, а в высоту 210 px.

А скаченное изображение у нас имеет размер 43 на 44 px.

Для увеличения выбираем в онлайн графическом редакторе в верхнем меню пункт “Изображение”, далее подпункт “Размер изображения”, в открывшемся окошке снимаем галочку напротив значения “Сохранить пропорции” и изменяем размер, например 200 на 210 px, жмем “ок”.

Теперь уменьшим сам пузырек, для этого нажимаем комбинацию клавиш ctrl+t (одновременное нажатие клавиш ctrl и t или же можете выбрать в меню онлайн редактора пункт “Редактировать” и подпункт “Free transform”) и уменьшаем сам шарик, при уменьшении можете зажать клавишу shift, тогда шарик сохранит свои пропорции.

Теперь для создания эффекта анимации нам нужно создать кадры, которые будут показывать движение данного пузырька.

Сохранять изображения будем в формате png (так как он поддерживает прозрачность фона, можно было бы и в gif, но данный графический редактор его не поддерживает).

Для начала нам нужно выбрать инструмент перемещение, слева в окошке “Инструменты” он выглядит как черная стрелочка.

Теперь можете передвигать пузырек.

Вот какие кадры получились у меня.

Шаг 3. Создаем эффект анимации.

Для этого воспользуемся другим онлайн ресурсом, а именно:

Здесь загружаем наши сохранные изображения (кадры нашей будущей анимации), для этого нажимаем кнопку обзор и выбираем по порядку изображения, как видите есть только три строчки для добавления файлов, но чтобы добавить четвертую и т.д., вам необходимо нажать на ссылку “Добавить еще одну картинку”.

Далее можно настроить размер будущей анимации, здесь выберите пункт “Дополнительно” и укажите свой размер, я указал нужный мне: 200 px.

Следующее, что можно настроить – это скорость анимации (быстрее или медленнее будут сменяться кадры вашей анимации), я оставил “Нормально”.

Осталось нажать на кнопку “Создать анимацию” и здесь вы можете увидеть как это будет выглядеть.

Теперь сохраняем анимацию на свой компьютер, для этого нажимаем на ссылку “Сохранить эту картинку на ваш компьютер”.

Все готово, осталось вставить данную анимацию в нужном месте на своем сайте.

Я вставлял пузырек себе в футер (подвал), получилось достаточно интересно.

Для этого заходите в панель управления вашим сайтом, в левом меню выбираете пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов находите footer.php и вставляете в нем картинку с gif анимацией, ну например так:

Похожие записи:

Создаем анимацию с прозрачным фоном : 3 комментария

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

Спасибо за очень подробное описание. Обязательно воспользуюсь.

Замечательный материал. Попробовала сделать, получилось классно. Спасибо большое

Источник статьи: http://www.mnogoblog.ru/sozdaem-animaciyu-s-prozrachnym-fonom