Бесплатный
графический редактор


Случайный урок:

Девушка из золота

Сайт Родителям о детях








Система Orphus



Бегущая строка

Автор: Викулова Юлия

Добавлено: 2009-07-12


В GIMP анимацию можно сделать несколькими способами. Либо с помощью различных плагинов, позволяющих в той или иной мере автоматизировать процесс анимирования, либо одним из "ручных" способов покадрового создания анимации. Сегодня мы рассмотрим, как в gimp добиться эффекта бегущей строки без применения каких-либо дополнительных плагинов.
Итак, создаем изображение с белым фоном, размером 300х100.
Любым понравившимся шрифтом создаем надпись :

 
Удаляем текстовую информацию: Слой — >Удалить текстовую информацию.
Выделяем текст: Слой — >Текст в выделение — >Текст в выделение:

 

Далее либо заливкой инструмент Заливка, либо градиентом  закрашиваем текст. И снимаем выделение: Выделение —> Снять.
Создаем копию Фона. Поднимаем поверх всех слоев, затем создаем копию слоя с текстом, располагаем над фоном, и сдвигаем с помощью инструмента перемещение  его так, чтобы видно было только первую букву:
 

 

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

 

Опять делаем копию фона, размещаем под копией текстового слоя. Далее возвращаемся к копии слоя с текстом, делаем слой к размеру слоя, как было описано выше, и объединяем с копией фона. Получили 2 кадр. Продолжаем в том же порядке, пока не покажется вся надпись:
 

 

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

 

Когда все кадры готовы, удаляем текстовый слой, а слой Фон оставляем.
Делаем оптимизацию, и сохраняем как анимацию. Если есть необходимость меняем время задержки кадра. В результате получается вот такая бегущая строка:

Аналогичным способом можно добиться такого результата:

 

 

Просмотров: 28526




 

 

Ваши комментарии     



Серенити       15.07.2009 - 22:50       Ссылка      

очень понравился урок. Спасибо большое)


Magneto       15.08.2009 - 19:48       Ссылка      

Строка smile , но не совсем бегущая. А вобще пошаговое создание анимации очень трудоёмкий труд. Может есть специальные программы ?


ingvar       15.08.2009 - 20:23       Ссылка      

Больше, чем в гимпе, я не видел автоматизации анимации. В фотошопе вообще такой фишки нет. В минимуме вы можете просто взять 2 изображения на слоях и включить фильтр "анимация" - гимп все сделает сам "по умолчанию". Смысл уроков в "тюнинге" - как добиться нужного нам эффекта.


Андрей Пожарко       15.08.2009 - 20:57       Ссылка      

Конечно, есть специальные программы для анимации, но тут мы их не рассматриваем, т.к. у нас сайт о GIMP. Для него же есть дополнительные плагины, облегчающие анимацию. Мы обязательно рассмотрим их работу в следующих уроках по анимации. Совершенно с вами согласен, что покадровое анимирование - ужасно трудоемкое занятие и годится разве что для несложних банеров из нескольких кадров. По поводу вашей почти бегущей строки - края букв получились рваные - это типичная ошипка при анимировании, которой можно было легко избежать. Предлагаю вам написать урок по решению этой проблемы smile


Андрей Пожарко       15.08.2009 - 21:00       Ссылка      

Ingvar, ну почему же, в ФШ есть довеска для работы с анимацией - ImageReady. Помню когда-то доводилось с ним работать, но своя рубашка (GIMP) ближе к телу smile


ingvar       15.08.2009 - 21:32       Ссылка      

"Довесок" - очень точное слово. Я тоже с ним возился - глючно, как по мне. Чиста в фаташопи этава нет. smile


Magneto       16.08.2009 - 04:22       Ссылка      

>Андрей Пожарко : в своей работе "почти бегущая строка" я умышлено отключил "Антиалиасинг" текста. В крайнем случае можна было использовать фильтр "Гауссово размывание" с небольшим значением, для каждого слоя. Так что можна сказать что рваные буквы это задумка автора smile. Спасибо!


Андрей Пожарко       16.08.2009 - 10:12       Ссылка      

Magneto, ну что вы! Гауссово размывание, чтобы сгладить края - это вы здорово придумали big_smile . Все равно что зайти по шею в воду, чтобы умыться. Нет, я ни это имел в виду :р . Я вам, кстати, письмо писал, не смотрели?


Magneto       16.08.2009 - 11:02       Ссылка      

>Андрей Пожарко : как бы Вы решили эту проблему ?


Андрей Пожарко       16.08.2009 - 11:22       Ссылка      

Эта проблема связана с форматом GIF, для которого нужно картинку преобразовывать в режим индексированных цветов. Так вот делать это нужно уже в самом конце, перед сохранением. А до этого все нужно рисовать в RGB. Но и это ничего не даст, если не учесть одну деталь. Проведите эксперимент. Создайте новое изображение в режиме цвета RGB и напишите любой текст черным цветом. Увеличте чтобы было хорошо видно край буквы. Теперь Изображение-Режим-Индексированное. Посмотрите что произошло - край "порвало". Вернитесь назад и на этот раз сделайте по-другому: сначала подсуньте под текст фоновый слой (например белый) и объедините текст с фоном. Теперь снова Изображение-Режим-Индексированное. На этот раз с краем все в порядке. Выводы делайте сами smile .


ZЗмейгорын       19.08.2009 - 03:11       Ссылка      

Когда все кадры готовы, удаляем текстовый слой, а слой Фон оставляем. Делаем оптимизацию, и сохраняем как анимацию. Если есть необходимость меняем время задержки кадра. В результате получается вот такая бегущая строка: .................................................................. Ну,вот,как всегда,на самом интересном месте.Можно немножко подробнее описать концовку об "оптимизации",где эта функция находится?Как к ней добраться ?


Amanus       28.08.2009 - 12:20       Ссылка      

Спасибо за урок) Легко)


akvilegia       13.11.2009 - 22:50       Ссылка      

Получается,к картинке эту бегущую строку пришпандорить нельзя?Просматривать ее приходится через проигрыватель...


Андрей Пожарко       13.11.2009 - 23:41       Ссылка      

Не совсем понял суть проблемы. Что значит "нельзя пришпандорить"? Так она уже как-бы на картинке smile. Проигрыватель для того, чтобы не сохранять всякий раз, и потом смотреть результат, а сразу смотреть не сохраняя, при этом не останавливая проигрывателя можно на ходу еще что-то умдудряться подправлять в анимации, и смотреть на изменения онлайн.


akvilegia       14.11.2009 - 14:18       Ссылка      

Нет...Я не про то...Можно, уже сохраненную бегущую строку, наложить на какую-нибудь открытку?


Андрей Пожарко       14.11.2009 - 17:59       Ссылка      

Можно без проблем. Открыть файл со строкой, увеличить размер холста, перевести из индексированных цветов в RGB, открыть как слой свою открытку, передвинуть ее в низ списка слоев. Готово. Есть недостаток - фон под надписью будет белый. Если нужно от него избавится, то придется повозится.


оксана       13.01.2010 - 22:24       Ссылка      

но, во первых в ФШ можно делать анимацию и без помощи ImageReady, принцип тот же и в принципе не сложно.


Андрей Пожарко       13.01.2010 - 23:38       Ссылка      

Все замерли в ожидании "во-вторых" smile.


Angelina       24.01.2010 - 17:04       Ссылка      

Все сложное на самом деле простое и понятное


Softwayer       12.02.2010 - 10:37       Ссылка      

Magneto, надпись надо было сделать фирменным убунтовским шрифтом. А так ничего.


m0nako       31.03.2010 - 09:38       Ссылка      

люди плз помогите дайте видео урок а то не получается буква с фоном объединяется а передвинуть тескт не льзя!!


Андрей Пожарко       31.03.2010 - 12:39       Ссылка      

Наш видеооператор уволился, ждите пока найдем другого.


Женя       02.04.2010 - 23:50       Ссылка      

Здравствуйте.Может я не туда обращаюсь но куда класть скаченные кисти для гимпа?Точнее в какую папку?


Женя       03.04.2010 - 00:01       Ссылка      

а текстуры?


Андрей Пожарко       03.04.2010 - 12:08       Ссылка      

Женя, тут кое-что есть об установке кистей.


Женя       03.04.2010 - 21:20       Ссылка      

Андрей спс.


rustam       11.04.2010 - 09:28       Ссылка      

я сделал все кадры, но не могу сохранить как анимацию (сохранятеся только последний кадр). Пож-та подскажите как сделать "оптимизацию"??? и как сохранить?


Андрей Пожарко       11.04.2010 - 16:51       Ссылка      

Rustam, посмотрите в конце первого урока об анимации, там в конеце подробно описано то, что вас интересует.


rustam       11.04.2010 - 18:01       Ссылка      

Андрей Пожарко огромное спасибо


Рома       18.06.2010 - 09:45       Ссылка      

А в какой проге то делать это((


Андрей Пожарко       18.06.2010 - 21:35       Ссылка      

Рома, ответ на ваш вопрос написан в шапке сайта wink .


ilvira-crazy       25.10.2010 - 12:31       Ссылка      

big_smile


Илья       06.12.2010 - 20:05       Ссылка      

оптимизация?


VVS       10.02.2011 - 13:02       Ссылка      

"Далее на копии слоя с текстом щелкаем правой кнопкой мыши, выбираем Слой к размеру изображения, и объединяем этот слой с копией фона." Но ведь для этого нужно слой перенести на верх. И последующие действия тоже не понятны. Для людей впервые делающих нужно писать ДЕТАЛЬНО. У меня НИЧЕГО не получилось .


Артемий       05.03.2011 - 20:08       Ссылка      

и спасибо


катя       22.05.2011 - 22:46       Ссылка      

sad а как копию фона делать?


S-28       23.05.2011 - 00:31       Ссылка      

катя, выделите в списке слоев слой с фоном и чуть ниже есть кнопка "Скопировать слой".


вава       05.07.2011 - 20:07       Ссылка      

а где эти списки


Павел       23.10.2011 - 11:30       Ссылка      

Добрый день. Использовал несколько ваших уроков для создания баннера 88х31 с использованием бегущей строки. Все получилось, но... получил анимацию со 162 слоями. Размер ее 106 кб. Подскажите, можно ли снизить размер до 24 кб? Может уменьшить количество цветов или еще что-то...


Андрей Пожарко       23.10.2011 - 23:10       Ссылка      

Павел, уменьшение количества цветов, конечно, уменьшит размер, но точно не в 4 раза. Можно попробовать еще разные методы оптимизации, но тоже вряд ли так сильно получится. Хотелось бы увидеть эту анимацию.


Павел       25.10.2011 - 15:22       Ссылка      

Андрей, можно каким-то образом прислать вам ее в личку?


Павел       26.10.2011 - 00:22       Ссылка      

Еще хотел бы спросить, а как уменьшить количество цветов на картинке .jpg? Или как рациональней уменьшить ее вес для веб? (при сохранении программа предлагает выбрать % качества). И последний вопрос, есть ли в вашей колекции урок по накладыванию защитных водяных знаков на картинки?


Андрей Пожарко       26.10.2011 - 14:42       Ссылка      

Для jpg используется режим RGB 8бит, здесь уже уменьшить нельзя. Но можно уменьшить размер файла оперируя параметрами jpg при сохранении. Для этого в меню Файл-Сохранить как сохраняйте с разрешением .jpg, дальше откроется диалог параметров. Там разверните его, чтобы увидеть расширенные настройки, и также поставьте галочку Просмотр в окне изображения. После чего меняя параметры качества jpg вы будете сразу видеть размер итогового файла.

Файл можете отправить на fotohost.org или на почту gimp()nas2.net.


Павел       26.10.2011 - 15:42       Ссылка      

Спасибо за помощь.


Ирина       07.11.2011 - 23:03       Ссылка      

У меня получилось. Спасибо.


Алексей       02.01.2012 - 23:00       Ссылка      

Доброго времени суток! У меня такая проблема: после копирования слоев и последующего их редактирования, информация изменяется на всех слоях сразу, и на копии и на оригинале! sad тоесть когда я перетащил букву на скопированном слое, она переезжает и на остальных sad подскажите что делать smile


Алексей       03.01.2012 - 20:43       Ссылка      

Все уже понял


Андрей Пожарко       04.01.2012 - 02:22       Ссылка      

Хорошо. А то не было возможности ответить.


Диана       11.05.2012 - 16:21       Ссылка      

Как это "Поднять поверх всех слоев"?


Андрей Пожарко       15.05.2012 - 00:20       Ссылка      

Меню Слой - Стопка слоев - Сделать слой верхним. Либо в списке слоёв просто мышкой перетянуть слой выше по списку.


Ирина       26.06.2012 - 10:54       Ссылка      

Спасибо большое!!! smile


Ирина       26.06.2012 - 10:56       Ссылка      

Я сделала немного по другому(добавила кадров)


sergey       18.04.2013 - 08:54       Ссылка      

Выделяем текст: Слой — >Текст в выделение — >Текст в выделение: этого ненашел в gimp 2.84


Андрей Пожарко       24.04.2013 - 09:53       Ссылка      

sergey, Слой - Прозрачность - Альфа-канал в выделение. Или правой кнопкой мыши на слое в списке слоев.


Victoria       27.02.2014 - 17:54       Ссылка      

Благодарю за урок smile вот такая надпись у меня.


юрий       11.04.2016 - 08:50       Ссылка      

фильтры - анимация - Move layer можно сделать бегущую надпись и справа налево и сверху вниз


Добавить комментарий:

[b] [i] [u] [quote]     :) :| :( :D :o ;) :/ :P :lol: :mad: :rolleyes: :cool:


Введите результат =    








Проект OpenNET © 2008-2017 Андрей Пожарко Деньги владельцам сайтов