Перспектива длительной прокачки вряд ли обрадует хотя бы одного игрока. Но существует более легкий и менее длительный способ прокачки персонажей в Тера. Какой же? Можно воспользоваться такой услугой как быстрая прокачка персонажей Tera.
Программа – Photoshop CS3 Extended и выше.
Вот три основных раздела, которые мы будем создавать.
- Создание форм загрузчика.
- Стилизация форм.
- Анимация загрузчика.
Давайте начнём.
Начнём с создания нового документа и добавления фона.
File>New (Файл — Новый документ)
Размер – 100рх на 100рх
Дважды щёлкните по слою и преобразуйте в обычный слой.
Залейте слой тёмно-серым цветом #3d3d3d.
Просто для интереса мы добавим на наш фон узор, а затем приступим к созданию загрузчика.
Создайте новый документ 7рх на 7рх с прозрачным фоном. Выберите Pencil Tool (Карандаш) 1рх цвет чёрный и нарисуйте диагональную линию. (Щёлкните в левом верхнем углу, зажмите Shift и щёлкните в правом нижнем углу).
Далее идём в меню Edit > Define Pattern (Редактирование-Определить Узор).
Вернитесь в рабочий документ. Стоя на фоновом слое, меню Layer> Layer Style> Pattern Overlay (Слой-Стиль Слоя-Перекрытие Узором). В наборе узоров выберите созданный узор, уменьшите непрозрачность до 20%.
Теперь нужно установить несколько маркеров. Для этого мы будем использовать Transform Again – Shift+Ctrl+T (Повторить Трансформацию), это ускорит процесс.
Выберите инструмент Line Tool (Линия) 1 рх в режиме фигур цвет белый и с зажатой Shift нарисуйте вертикальную линию.
Чтобы выровнять линию по центру, выделите оба слоя, выберите инструмент перемещения и на верхней панели нажмите на кнопку Align Horizontal Centers (Выровнять Горизонтальные Центры).
Вот так:
Поверните линию на 45 ° — меню Edit> Free Transform – Ctrl+T (Редактирование-Свободное Трансформирование)
Далее нажмите сочетание клавиш Ctrl+Shift+Alt+T. Нажимайте это сочетание клавиш несколько раз, пока не получится, как на скриншоте ниже.
Используя ту же технику, как описано выше, мы собираемся добавить небольшие формы для нашего загрузчика на каждой линии созданной сетки, будто наш загрузчик идёт по кругу.
Добавьте несколько направляющих вокруг того места, где вы хотите, чтобы была первая форма. Убедитесь, что направляющие не пересекают пиксели.
Выберите инструмент Rounded Rectangle Tool (Прямоугольник со Скруглёнными Углами) радиус 1 рх и создайте прямоугольник по направляющим. Убедитесь, что включена опция Привязать к Направляющим (View-Snap to Guides).
Используя инструмент Direct Selection Tool (Стрелка) переместите нижние углы (узлы) нашей прямоугольной формы внутрь, так чтобы форма сужалась.
Примечание переводчика: щёлкните Стрелкой по контуру формы, далее щёлкните по одной точке с какой либо стороны формы и с зажатой Shift щёлкните по второй. Обе точки выделятся. Далее стрелкой на клавиатуре сдвиньте эти точки. То же проделайте и с двумя точками с другой стороны формы, сдвиньте противоположной стрелкой на клавиатуре на такое же количество сдвигов.
Используйте тот же трюк с копированием и поворотом на 45 ° , который использовали выше, чтобы дублировать форму по всем линиям. При повороте на 45 ° следует установить центральную точку трансформации в центр пересечения линий. Для этого зажмите Alt и переместите точку.
Повторите эти действия несколько раз, пока форма не будет скопирована по всему периметру следующим образом.
Ваша панель слоев должна выглядеть следующим образом:
У нас есть предварительная форма загрузчика, сейчас мы собираемся добавить несколько стилей слоя, чтобы немного его украсить.
Color Overlay (Перекрытие Цветом) цвет # 242424
Drop Shadow (Тень)
Inner Shadow (Внутренняя Тень)
Ваш загрузчик должен выглядеть так:
Дублируйте слой с предварительной формой четыре раза. Затем начинайте удалять деления на каждом слое, оставляя только нужное, пока не закончите. Для этого воспользуйтесь инструментом Path Selection Tool (Выделение Контура).
Примечание переводчика: чёрной стрелкой выделяйте контур и нажимайте delete. Советую назвать слои так же, как у автора.
Теперь добавим стили для каждого слоя.
На слой под названием 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
Ваш загрузчик должен выглядеть примерно так (настройки стиля слоя по своему вкусу)
У нас есть база стилей, теперь пришло время, чтобы дублировать слои. Выделите все слои, кроме фонового и сгруппируйте их Layer > Group Layers (Слой-Группа Слоёв) или Ctrl+G.
Дублируем группу, а затем повернем на 45 ° Edit > Free Transform (Редактирование-Свободная Трансформация) или Ctrl+T. Снова дублируйте верхнюю группу и поверните на 45 ° (в общей сложности у вас будет восемь групп).
Ваш загрузчик должен выглядеть примерно так:
Хорошо, наши слои настроены, и мы готовы к анимации. Откройте панель анимации Window> Animation (Окно-Анимация). Выключите видимость всех групп, кроме первой, затем нажмите кнопку Duplicate Selected Frames ( Дублировать Выбранные Кадры ) в панели анимации.
Примечание переводчика: в версиях CS6 и выше Window-Timeline –Сreate Frame Animation(Окно-Шкала Времени-Создать Покадровую Анимацию)
Отключите видимость первой группы и включите видимость второй.
Повторите предыдущий шаг для каждой из групп слоев. Выделите все кадры в анимации (клик по первому кадру и с зажатой Shift по последнему) и установите длительность кадра в 0,1 сек, проигрывание Forever (Непрерывно).
Далее сохраните анимацию File > Save for Web & Devices. Используйте следующие параметры для анимации GIF.
Откройте ваш GIF в веб-браузере и восхищайтесь вашим новым загрузчиком!
Автор: Andrew Wilson
Переводчик: Svetlana
Данный урок подготовлен для Вас командой сайта http://www.photoshop-master.ru