161204
| | | | |

                           

КОМПЬЮТЕРЫ / Soft (программное обеспечение)

Поиск по сайту



Как создать анимированную gif картинку, используя Adobe Photoshop

Вернуться к списку статей

AAA + -




Хотите уникальную аватарку для дневника/форума? Нигде не найти именно то, что нужно? Желаете поразить посетителей анимированными элементами дизайна на вашем веб-сайте? Создайте свою собственную анимированную gif картинку (или даже серию), используя продукты из линейки Adobe Photoshop. Поверьте, это действительно легко, справится даже начинающий. 

Вам понадобится:
- Adobe Photoshop по идее любой версии, от 5.5;
- Adobe ImageReady (идет в комплекте с Photoshop).


Создаем несколько картинок, чтобы собрать из них анимированный gif:

1. Откройте Photoshop и создайте новый пустой файл подходящего размера: как правило, в сервисах соцсетей и на форумах допускаются аватары размером 80х80, 100х100, 200х200 и в редких случаях 250х250. Выберите один из этих размеров, установите цветовой режим RGB. Если вы намерены создать движущуюся картинку, фоном для которой послужит фон сайта/форума, отметьте здесь так же прозрачный (transparent) фон. Но помните, что только некоторые фигурки получается вырезать из картинок настолько аккуратно, чтобы убрать белесые (и другого цвета) очертания, так что подумайте, все-таки задав фиксированный фон будущей аватаре или баннеру вы значительно облегчите себе жизнь.

создайте новый пустой файл подходящего размера


2. Выберите в меню пункт «Window» (Показать - инструменты/панели) и в раскрывшемся списке отметьте галочкой пункт «Layers» (Показать панель «слои»). Чаще всего галочка уже стоит, то есть показ панели задан по умолчанию.

отметьте галочкой пункт «Layers»

Панель Слои (Layers)


3. Выберите в левой узкой панели инструмент Карандаш (Pensil) и нарисуйте с его помощью картинку. Там же есть кисть, если орудовать ею вам будет удобнее. Чтобы переключиться между инструментами, нажмите на квадратик, удерживая кнопку мыши в нажатом состоянии, переведите курсор на нужный элемент в выпавшем рядом списке и отпустите.

Выберите в левой узкой панели инструмент Карандаш

Как вариант, можно нарезать необходимых объектов из найденных в Интернете картинок, используя лассо и все его аналоги из списка (Lasso Tool),

лассо

пример работы лассо

Результат работы лассо, копирования в новый файл выделенного и использования ластика


выделение квадратом и кругом (все варианты из списка Marquee Tool),

выделение квадратом и кругом

пример работы выделения кругом


волшебную палочку (Magic Wand Tool),

волшебную палочку (Magic Wand Tool)


пример работы волшебной палочки (Magic Wand Tool)

функцию копирования и вставки выделенного (после выделения, в меню выбирайте: Edit->Copy, затем в созданном вами новом файле Edit->Paste) и ластик, чтобы убрать лишнее. Уменьшайте или увеличивайте, наклоняйте, отображайте или поворачивайте скопированную картинку по своему желанию при помощи Edit->Free Transform и Edit->Transform.

Либо можно сделать надпись на нужном фоне при помощи Type Tool, и затем, используя фильтры, вносить изменения на новых слоях для получения движущейся картинки в конечном итоге; или сделать так, чтобы на каждом новом слое появлялось по 1 новой букве или новому слову.

4. Нажатием правой кнопки мыши на выделенном исходном слое выберите в панели инструментов «Слои» пункт «Дублировать слой» (Duplicate Layer). Выделите новый созданный слой, если этого не произошло автоматически. И затем, после работы, каждый раз копируйте последний слой с внесенными изменениями (либо первый, если по задумке вам нужен именно он).

выберите в панели инструментов «Слои» пункт «Дублировать слой» (Duplicate Layer)


5. Внесите на новом слое какие-то изменения в картинку: что-то добавьте (например, новый объект или буквы), что-то уберите (ластиком), уменьшите/увеличьте общий размер, поменяйте цвет какой-то детали, осветлите/затемните картинку в целом (в меню Image->Adjustments->Brightness/Contrast; таким образом, вы сможете добиться того, что ваша картинка будет мигать при смене в gif файле светлой и темной картинок), и т. д.

Image->Adjustments->Brightness/Contrast

Помните, что в gif картинке слои будут СМЕНЯТЬ по порядку друг друга, а не накладывать дополнения на первый слой. За счет дополнений и изменений в новых слоях gif картинка создаст имитацию движения. Поэтому, если вы через копирование будете добавлять новые элементы в картинку (а они пойдут опять новыми, отдельными слоями), не забывайте выделять слой с последним дополнением и далее через меню Layer->Merge Dowm (Слои->Объединить с одним нижним; нажать 1 раз или в зависимости от количества скопированных дополнений) объединять новую(ые) деталь(и)-дополнение(я) с дубликатом последнего слоя.


6. Когда все слои будут готовы, проследите чтобы именно ваш файл со слоями был активным в этот момент, и выберите в меню: File->Jump To-> Adobe ImageReady. Созданный вами файл со слоями будет перенесен в приложение ImageReady.

File->Jump To-> Adobe ImageReady



Создаем анимированную картинку в Adobe ImageReady:

1. В меню выберите и отметьте галочкой: Window->Show Animation (как правило уже установлено по умолчанию). Таким образом, вы активируете панель Анимации. В панели анимации перенесенный файл будет выглядеть, как 1 единственный кадр. Если при переносе произошел сбой и ImageReady сама автоматически сделала раскадровку, смотрите сразу п. 3.а ниже.

Активируем панель Анимации

Сама панель Анимации


2. В правом верхнем углу панели Анимации нажмите на стрелочку, откроется подменю, в нем выберите пункт Make Frames From Layers (Сделать кадры из слоев). Программа сделает вам раскадровку по слоям.

нажмите на стрелочку, откроется подменю, в нем выберите пункт Make Frames From Layers

Результат

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


2.а. В панели Анимации под каждым кадром указано время в секундах – его нужно поменять, если вы хотите, что кадры сменялись с задержкой, а не моментально, т. е. чтобы каждый кард задерживался перед смотрящим на указанное вами количество секунд. Просто нажмите на надпись и установите при желании нужное время.

3. В меню выберите: File->Save Optimized As (Сохранить оптимизированный файл как…) и далее выберите папку и имя для сохранения анимированного gif файла.
3.а. После любого изменения файла в Photoshop(е) обязательно заново повторяйте переброску файла File->Jump To-> Adobe ImageReady, иначе все настройки в ImageReady собьются в нечто непонятное.
Бывает, что настройки и синхронизация между Photoshop и ImageReady не срабатывают верно, тогда вам придется, выделяя каждый кадр в панели Анимации, переходить на панель слоев справа (аналогичную панели слоев в Фотошопе) и подключать или отключать (нажимая на изображение глаза слева от каждого слоя) для конкретного кадра нужные слои. В общем-то тоже ничего сложного.


Вот такая у нас получилась картинка


Дополнения:

- В принципе, рисовать можно и в ImageReady, т. к. панели инструментов у них с Photoshop похожи;

- На панели Анимации, внизу, под кадрами, есть стандартные кнопки управления видео – нажав на стрелку, можно запустить превью, и посмотреть, как будет выглядеть ваша gif картинка;

- Чем больше кадров, тем тяжелее будущая gif картинка, имейте это в виду.



Источник: znaikak.ru
Автор:
Голосов: 6 Общая оценка: 4.3 Просмотров: 11206
Оцените эту статью:  
Список проголосовавших: scatman (3), YokoOna (5)
   Распечатать



Ключевые слова:

Photoshop, картинка, анимированная



Ошибка в тексте? Выдели ее мышкой! И нажми Ctrl+Enter.

Для того , чтобы оставить здесь комментарий, необходимо зарегистрироваться на сайте.






MacBook Pro 2016


Камера GoPro 5


iPhone 7 и 7 Plus


Samsung Galaxy Note7


Винисиус и Том — талисманы Олимпийских и Паралимпийских игр 2016 в Рио-де-Жанейро


Pokémon Go

 
 

Статьи сегодня:

Как быстро украсить новогоднюю елку лентами?
Перед новогодними праздниками мы продумываем, ...
Как сделать бороду Деда Мороза для детского костюма?
К Новому году готовятся не только взрослые, но ...
Как выбрать, какой фильм посмотреть: премьеры декабря 2016
По традиции в декабре афиши кинотеатров пестрят ...
Как и где провести лучшую свадьбу
Свадьба – это самое ожидаемое и знаковое событие ...
Как сделать елочки из бумаги для украшения новогоднего стола?
Новогодний стол не похож на большинство других ...
Как сделать пряничный домик на Новый год? Часть 1: Выпекание и сборка.
С приходом новогодних праздников наш дом наполняется ...
Как наполнить дом новогодними ароматами: 7 простых способов
На рождественские праздники дом наполняется ...
Как легко сшить новогодние чехлы на стулья?
На новогодние праздники мы готовим очень много ...
Как найти Дом Фортис – надежный партнер в выборе мебели
Онлайн-магазин Дом ФортисПродавцов и производителей ...
Как получить по-настоящему полезную питьевую воду для повседневного применения?
Ежедневно мы расходуем огромное количество ...

Смотрите также:

Как работать в Picasa 3, или программа для тех, кто еще не обучился Photoshop
Фотошоп – довольно сложная программа. Изучать которую нужно ...
Как создавать коллажи без помощи фотошопа
Если вы успешно пользуетесь фотошопом – этот материал не для вас.
Как вставить фотографию в рамку в программе Photoshop?
На сегодняшний день практически не одно профессиональное фото ...
Как пользоваться Photoshop Touch: графический редактор для сенсорных устройств. Часть 1.
Впервые узнав об анонсировании Adobe Photoshop Touch, ...
Как пользоваться Photoshop Touch: графический редактор для сенсорных устройств. Часть 2.
Преимуществом Photoshop для сенсорных устройств является ...



ВОПРОСЫ - ОТВЕТЫ


НОВЫЙ ПОДКАСТ

Как Элвис Пресли стал королем рок-н-ролла
В истории музыки есть имена, прочно ассоциирующиеся ...

Все подкасты


ТЭГИ

2015 Adobe Apple MacBook Microsoft Word windows без брака видео вручную выглядели выгодно выявить графика графический два диск диски жесткий зрение компьютер компьютера компьютере компьютером лицензия мыши навести нанести необычный несколько новое ноутбук ноутбука объем осуществить очистить ошибки память перейти планшет плюсы подключить покупке почистить работать расположение светящиеся скрапбукинг смартфона смартфонов сменить СМС текст трехмерная улучшить ускорить файлы характеристики чистить

Не нашли ответа?
Спросите нас, как…


Письма читаем регулярно,
ищите ответы в соответствующей рубрике.