Рубрика: Photoshop Уроки | Урок прочитали: 3081
 (голосов: 2)

Создаём анимированную иконку в Фотошоп

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

Вот три основных раздела, которые мы будем создавать.

  1. Создание форм загрузчика.
  2. Стилизация форм.
  3. Анимация загрузчика.

Давайте начнём.

Шаг 1. Создание форм загрузчика

Начнём с создания нового документа и добавления фона.
File>New (Файл - Новый документ)
Размер – 100рх на 100рх
Дважды щёлкните по слою и преобразуйте в обычный слой.
Залейте слой тёмно-серым цветом  #3d3d3d.

Шаг 2

Просто для интереса мы добавим на наш фон узор, а затем приступим к созданию загрузчика.
Создайте новый документ 7рх на 7рх с прозрачным фоном. Выберите Pencil Tool (Карандаш) 1рх цвет чёрный и нарисуйте диагональную линию. (Щёлкните в левом верхнем углу, зажмите Shift и щёлкните в правом нижнем углу).

Далее идём в меню Edit > Define Pattern (Редактирование-Определить Узор).
Вернитесь в рабочий документ.  Стоя на фоновом слое, меню  Layer> Layer Style> Pattern Overlay (Слой-Стиль Слоя-Перекрытие Узором). В наборе узоров выберите созданный узор, уменьшите непрозрачность до 20%.

Шаг 3

Теперь нужно установить несколько маркеров.  Для этого мы будем использовать Transform Again – Shift+Ctrl+T (Повторить Трансформацию), это ускорит процесс.
Выберите инструмент Line Tool (Линия) 1 рх в режиме фигур цвет белый и с зажатой Shift нарисуйте вертикальную линию.

Чтобы выровнять линию по центру, выделите оба слоя, выберите инструмент перемещения и на верхней панели нажмите на кнопку Align Horizontal Centers (Выровнять Горизонтальные Центры).
Вот так:

Поверните линию на 45 ° - меню Edit> Free Transform – Ctrl+T (Редактирование-Свободное Трансформирование)

Далее нажмите сочетание клавиш Ctrl+Shift+Alt+T. Нажимайте это сочетание клавиш несколько раз, пока не получится, как на скриншоте ниже.

Шаг 4

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

Добавьте несколько направляющих вокруг того места, где вы хотите, чтобы была первая форма. Убедитесь, что направляющие не пересекают пиксели.

Выберите инструмент Rounded Rectangle Tool (Прямоугольник со Скруглёнными Углами) радиус 1 рх и создайте прямоугольник по направляющим. Убедитесь, что включена опция Привязать к Направляющим (View-Snap to Guides).

Используя инструмент Direct Selection Tool  (Стрелка) переместите нижние углы (узлы) нашей прямоугольной формы внутрь, так чтобы форма сужалась.

Примечание переводчика: щёлкните Стрелкой по контуру формы, далее щёлкните по одной точке с какой либо стороны формы и с зажатой Shift щёлкните по второй. Обе точки выделятся. Далее стрелкой на клавиатуре сдвиньте эти точки. То же проделайте и с двумя точками с другой стороны формы, сдвиньте противоположной стрелкой на клавиатуре на такое же количество сдвигов.

Используйте тот же трюк с копированием и поворотом на 45 ° , который использовали выше, чтобы дублировать форму по всем линиям. При повороте на  45 ° следует установить центральную точку трансформации в центр пересечения линий. Для этого зажмите Alt и переместите точку.

Повторите эти действия несколько раз, пока форма не будет скопирована по всему периметру следующим образом.

Ваша панель слоев должна выглядеть следующим образом:

Шаг 5. Стилизация форм

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

Ваш загрузчик должен выглядеть так:

Шаг 6

Дублируйте слой с предварительной формой четыре раза. Затем начинайте удалять деления на каждом слое, оставляя только нужное, пока не закончите.  Для этого воспользуйтесь  инструментом Path Selection Tool (Выделение Контура).

Примечание переводчика: чёрной стрелкой выделяйте контур и нажимайте delete. Советую назвать слои так же, как у автора.

Шаг 7

Теперь добавим  стили для каждого слоя.
На слой под названием Shine-Active  добавим стиль слоя Outer Glow (Внешнее Свечение) цвет # 90dcfc:

К этому же слою добавим стиль слоя Inner Glow (Внутреннее Свечение) цвет # a2defd:

Затем изменим цвет в стиле Color Overlay (Перекрытие Цветом) на цвет #0087c6

На слой под названием Shine-Fading1  добавим те же стили, что выше, опуская стиль слоя Outer Glow (Внешнее Свечение) и отключим видимость стиля Inner Shadow (Внутренняя Тень).

На слое под названием Shine-Fading2 изменим цвет в стиле Color Overlay (Перекрытие Цветом) на цвет  # 0087c6 непрозрачность 80%.

Примечание переводчика: у автора скриншот не с тем стилем.

На слое Shine-Fading3 изменим цвет в стиле Color Overlay (Перекрытие Цветом) на цвет #0087c6 непрозрачность 25% (обратите внимание на изменение непрозрачности).

Примечание переводчика: если форма этого слоя белая, смените её цвет на  #242424

Ваш загрузчик должен выглядеть примерно так (настройки стиля слоя по своему вкусу)

Шаг 8

У нас есть база стилей, теперь пришло время, чтобы дублировать слои. Выделите все слои, кроме фонового и сгруппируйте их Layer > Group Layers (Слой-Группа Слоёв) или Ctrl+G.

Дублируем группу, а затем повернем на 45 ° Edit > Free Transform (Редактирование-Свободная Трансформация) или Ctrl+T. Снова дублируйте верхнюю группу и поверните на 45 °  (в общей сложности у вас будет восемь групп).

Ваш загрузчик должен выглядеть примерно так:

Шаг 9. Анимация загрузчика

Хорошо, наши слои настроены, и мы готовы к анимации. Откройте панель анимации Window> Animation (Окно-Анимация). Выключите видимость всех групп, кроме первой, затем нажмите кнопку  Duplicate Selected Frames ( Дублировать Выбранные Кадры ) в панели анимации.

Примечание переводчика: в версиях CS6 и выше Window-Timeline –Сreate Frame Animation(Окно-Шкала Времени-Создать Покадровую Анимацию)

Отключите видимость первой группы и включите видимость второй.

Повторите предыдущий шаг для каждой из групп слоев. Выделите все кадры в анимации (клик по первому кадру и с зажатой Shift по последнему) и установите длительность кадра в 0,1 сек, проигрывание Forever (Непрерывно).

Далее сохраните анимацию File > Save for Web & Devices. Используйте следующие параметры для анимации GIF.

Откройте ваш GIF в веб-браузере и восхищайтесь вашим новым загрузчиком!

Источник

           

Похожие файлы и публикации:

Создаём анимированную иконку в Фотошоп
Финальное изображение, которое мы будем создавать.
Создаём анимированную иконку в Фотошоп
Хорошо, начнем с создания нового документа в Photoshop. Я создал новый документ размером 800 × 400 пикселей. Затем выберите подходящие цвета, например, # 161515, # 71777b и залейте документ линейным градиентом.
Создаём анимированную иконку в Фотошоп
Задумывались ли вы, как создаются анимированные GIF-файлы?  Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!
Создаём анимированную иконку в Фотошоп
В этом уроке я покажу, как создать макет для бизнес-сайта.
Создаём анимированную иконку в Фотошоп
Создайте новый документ в Photoshop (Ctrl+N) размером 800x1024 пикс, режим RGB, разрешение 72 пикс/дюйм. Создайте новый слой (залейте его любым цветом) и кликнете по иконке Add a layer style (Добавить стиль слоя) внизу палитры слоев, выберите Gradient Overlay (Наложение градиента).
Создаём анимированную иконку в Фотошоп
В этом уроке вы научитесь делать открытку ко Дню святого Валентина. Наверное, каждый фотошопер, должен подарить подарок, сделанный собственными руками и, конечно  же, в программе Photoshop! С уверенностью можно сказать, что  кто то будет счастлив, получить такой подарок. Сегодня мы будем делать вот такую красочную открытку.
Создаём анимированную иконку в Фотошоп
 Чтобы приступить к работе, давайте сначала посмотрим на конечный результат.
Создаём анимированную иконку в Фотошоп
Заключительный результат:
Создаём анимированную иконку в Фотошоп
В этом уроке, я покажу Вам, как создать иконку адресной книги с помощью Фотошопа. Давайте начнём!
Создаём анимированную иконку в Фотошоп
В данном уроке вы узнаете, как создать простую бумажную квитанцию в Фотошоп.
Создаём анимированную иконку в Фотошоп
В этом уроке я расскажу вам один из подходов к созданию смайлика, а затем, использую его, чтобы создать красивый эффект текста.
Создаём анимированную иконку в Фотошоп
В этом уроке Photoshop вы узнаете, как создать кинопостер в стиле минимализма. Вы узнаете, как применять текстуры, создавать световые эффекты, выделять изображения, и всё это поможет создать красивый шрифт!
Создаём анимированную иконку в Фотошоп
Сегодня мы поработаем над созданием интересного эффекта – лицо, распадающееся на кусочки.
Создаём анимированную иконку в Фотошоп
В то время, когда на смену перекидным табло приходят всё больше цифровые дисплеи, в таких местах, как аэропорты, вокзалы, автовокзалы, и так далее, они по-прежнему живут как символ путешествия. Используете ли вы их в интерфейсе приложения или ретро дизайне, автор уверен, что этот урок вы найдёте полезным и интересным.
Создаём анимированную иконку в Фотошоп
Эта 2-ая часть данного урока. В 1-ой части мы создали кисть молнию, обвели основной текст, в стиле молнии.