Анимированная иконка загрузки

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

1. Создайте новый документ размером 200x100 пикселей. Создайте новый слой
(Create New Layer) и выберите инструмент Прямоугольная область (Rectangular Marquee Tool), в настройках сверху установите Стиль – Заданный размер, Ширина – 4 пикселя, Высота – 20 пикселей:

Изменить

2. Теперь просто кликните на холсте, и у вас появится выделение:

Изменить

3. Залейте выделение чёрным цветом:

Изменить

4. Сделайте копию слоя и инструментом Перемещение (Move Tool), удерживая Shift, нажмите стрелку вниз на клавиатуре 4 или 5 раз. У вас получится такой результат:

Изменить

5. Выберите верхний слой и нажмите Ctrl+E . Потом сделайте копию получившегося слоя и перейдите в режим Вращения (Transform - Rotate). Удерживая Shift, поверните копию слоя на четверть оборона против часовой стрелки:

Изменить

6. Выберите инструмент Перемещение (Move Tool), чтобы применить изменения. Повторяйте эти шаги, чтобы получить результат, показанный ниже. Для удобства лучше номеровать слои.

Изменить

7. У нас должно получиться 12 слоёв с палочками. К первому слою примените стиль Наложение цвета (Layer Style - Color Overlay), цвет – светло-серый.

Изменить

8. Кликните на этом же слое и выберите Скопировать стиль слоя (Copy Layer Style), Потом выберите остальные слои с палочками, кликните правой кнопкой и выберите Вклеить стиль (Paste Layer Style).

Изменить

9. Перейдите в меню Окно»Анимация (Window > Animation). У вас должен быть такой результат:

Изменить

10. Это анимационная линия. Каждый кадр будет здесь воспроизводиться в зависимости от установленного времени. Нам нужно будет много таких кадров. Для начала изменим цвет первых 3 пар палочек. Цвет первой - #BABABA, второй - #999999, третей - #444444.

Изменить

11. Теперь кликните на иконке Новый кадр (New Frame) и мы получим копию нашего первого кадра. Измените цвет ещё раз – мы можем скопировать стили слоя для этого.

Изменить

12. Вы, наверное, заметили, что первый кадр остаётся таким же, а второй принимает изменения. Нам нужно повторить эти шаги несколько раз. Мы должны получить такой результат:

Изменить

13. Можете нажать на кнопку воспроизведения внизу. Если слишком медленно, то можно изменить длительность воспроизведения. В правом нижнем углу нажмите на стрелку для каждого кадра и измените время. Выберите все кадры, удерживая Shift, и для всех установите время – 0,1 секунда или другое по вашему желанию. Время изменится для всех кадров:

Изменить

14. Перейдите в меню Файл»Сохранить для Web (File > Save for Web). Выберите формат GIF 128. Вы можете посмотреть анимацию, используя кнопки внизу окна.

Изменить

Финальный результат:

Изменить

Ссылка на источник урока

Создан: 7 апреля 2009

loading

---------------

23 февраля 2010 09:17 | ICQ: -- | [цитировать]

загвостка в 11 пункте это что в окне анимацмя их надо 12 раз рисовать? ато я с анимацией 2 раз работаю

---------------

6 мая 2010 08:44 | ICQ: -- | [цитировать]

Radial - нет не нужно.
нужно создавать кадр новый и для него изменять цвет полоски. можно конечно создать ещё кучу копий слоя и к каждому кадру привязать, но можно и одним обойтись.

---------------
ПОДПИСЬ

6 мая 2010 10:05 | ICQ: -- | [цитировать]

недогоняю понимаю тока что если создавать копии и каждую изменять (изменять по 3 полоски, муторно) хочеться вот чтоб дошло как делать разом все

---------------

6 мая 2010 11:11 | ICQ: -- | [цитировать]

В общем когда откроете окно анимации, там будет 1-ый кадр. активируете его (кликините на нём) и последующие изменения слоёв будут привязаны к кадру. кликните на этот первый кадр и измените цвета первых трёх палочек - настройки стиля нужно изменить. потом создётё сделующий кадр и изменяете 4-6 палочки, потом ещё один и изменяете 7-9 палочки по цветам соответственно. и так далее.

---------------
ПОДПИСЬ

6 мая 2010 12:38 | ICQ: -- | [цитировать]

ура я доделал муторно однако копировать вставлять

---------------

11 мая 2010 12:34 | ICQ: -- | [цитировать]

И не прошло недели :)

---------------
ПОДПИСЬ

11 мая 2010 12:37 | ICQ: -- | [цитировать]