Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

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

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. Вы можете посмотреть анимацию, используя кнопки внизу окна.


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



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


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






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

написал : xadulik

loading

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


написал : radial

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

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


написал : positive11

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

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


написал : radial

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

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


написал : positive11

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

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


написал : radial

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

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


написал : positive11

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

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


написал : Николай

Урок видимо не для новичка. Ну по крайней мере я на 4, 5 пункте уже застрял.))

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


написал : positive11

Николай, чтобы создать копию, воспользуйтесь контестным меню или сочетанием клавиш Ctrl + J

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


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: