Пошаговая инструкция изготовления юзербара. (Photoshop, английский). Шаг 1. Создаем новый документ, размером 350x20 pixels, Resolution: 72. Заливаем его черным цветом (Edit>Fill>Black). Шаг 2. Выбираем инструмент Rectangular Marquee Tool (M). Делаем выделение так, что бы по краям оставалась невыделенная область размером в 1 пиксель. Удаляем выделенную область (Delete). Снимаем выделение (Ctrl+D). Рамка готова image020 Шаг 3. Создаем новый слой, ставим его ниже слоя с рамкой и делаем активным. Заливаем серым цветом (Edit>Fill>50% Gray). Шаг 4. Снова создаем новый слой, ставим его выше созданного в Шаге 3 слоя. Заливаем его абсолютно любым цветом (Edit>Fill). Открываем Blending Options и настраиваем стиль: Blending Options: - Fill Opacity: 0% Gradient Overlay: - Blend mode: Hard Light (можно другое) - Opacity: 45% (при разных Blend mode устанавливается разное Opacity) - Gradient: Metals>Steel Bar Шаг 5. Снова создаем новый слой, ставим его выше всех слоев (кроме рамки). Заливаем его абсолютно любым цветом (Edit>Fill). Открываем Blending Options и настраиваем стиль: Blending Options: - Fill Opacity: 0% Inner Glow: - Blend mode: Linear Dodge - Opacity: 100% - Color: White - Size: 4 Шаг 6. Создаем новый документ размером 1x2 pixels, Resolution: 72. Выбираем Pencil Tool. Сбрасываем цвета (D) (Foreground Color должен стать черным, если это не произошло, делаем вручную). Ставим точку в верхний пиксель документа. Edit>Define Pattern. OK. Закрываем документ (не сохраняя) и переходим обратно к юзербару. Шаг 7. Снова создаем новый слой, ставим его выше всех слоев (кроме рамки). Заливаем недавно созданной текстурой (Edit>Fill; Use: Pattern; Custom Pattern: выбираем нашу текстуру (должна быть последней)). ОК. Ставим Blend Mode слоя - Soft Light. Шаг 8. Скачиваем шрифт visitor (советую кликать правой кнопкой и выбирать "Сохранить как"). Устанавливаем его. Выбираем Horizontal Type Tool (T). Открываем Character (Window>Character) и ставим эти настройки. Пишем им большими буквами нужную вам надпись и применяем следующий стиль: Stroke: - Size: 1 - Color: Black Шаг 9. Включаем свою фантазию, мучаем нижний слой, добавляем объекты и т. д. Сs-Game-Portal - The new and the best for you! Steam Community :: ZubastiG
Как вставить в ЮБ готовую анимацию В последнее время меня начали досаждать сообщениями типа:"Как вставить уже готовую анимацию в юзербар?". Отвечаю один раз (и нечего сообщениями этого рода захламлять мою личку Very Happy ). 1. Открываем анимацию в ImageReady. Он раскладывает вашу анимацию на кадры и слои. 2. Портируем это все в фотошоп (Ctrl+Shift+M). 3. В фотошопе переносим каждый слой анимации на новые слои вашего юб. 4. Портируем ваш юб в ImageReady (Ctrl+Shift+M). 5. Делаем на вашем юб такую же анимацию, какой она была в первоначальном виде (можете снова загрузить в IR уже готовую анимацию и посмотреть как там сформированы кадры). Сs-Game-Portal - The new and the best for you! Steam Community :: ZubastiG
Туториал анимации,фотошоп 9.0 1. Создаем 2 документа размера 350х20 пикселей в Файл - Новый 2. В первом инструментом Прямоугольное выделение делаем прямоугольник (довольно длинный, почти до конца). Затем ставим параметр Вычитание и рисуем овал инструментом Овальная область рядом с краем прямоугольника. Получается что-то вроде этого 3. Расблокируем слой (2 раза клик по слою). Далее Правая кнопка на слое - Создать дубликат слоя. На вновь получившемся слое Редактирование - Трансформирование - Отразить по горизонтели . Смещаем слой немного вправо. 4. На втором документе расблокируем слой и зальем его каким нибудь цветом. Пишем текст (кнопка с буквой Т на панели инструментов). 5. Кликаем 2 раза по слою с текстом. Выбираем Внешнее свечение. Ставим такие параметры. 6. Далее Правая кнопка - Создать дубликат слоя. Дважды кликнув на вновь получившийся слой, вы ставляем такие параметры. 7. Проделываем операцию 7 раз десять. При этом каждый раз ставим параметры больше, чем в предыдущем слое. Конечный кадр должен иметь обводку почти по краям юзербара. 8. Перетаскиваем 2 слоя из первого документа во второй при помощи инструмента Перемещение . Итог: на одном документе у нас получилось примерно 10 слоев с текстом с разными параметрами свечения; 2 слоя с прямоугольниками; нижний слой с какой нибудь заливкой или картинкой. ВАЖНО: 2 слоя с прямоугольниками следует расположить так, чтобы они перекрывали друг друга. Эти два слоя поставьте под слои с текстом, но выше нижнего слоя. 9. Окно - Анимация. В первом кадре делаем видимыми только нижний слой, и первый слой с текстом. 10. Второй кадр. Видимы второй слой с текстом (первый не виден!); нижний слой. Плюс инструментом Перемещение оттащите немного к краям слои с прямоугольниками так, чтобы их края были под линией свечения. 11. Повторяем 10 шаг до израсходования слоев с текстом. 12. При желании после этого можно сделать обратную процедуру - тьма как бы смыкается над картинкой. Технология та же, только в обратном порядке. Вот образец ... Сs-Game-Portal - The new and the best for you! Steam Community :: ZubastiG
Урок по анимации Userbar'ов в Photoshop CS3... Откройте уже готовый Userbar, который вы хотели анимировать. Откройте окно анимации (Window -> Animation). Выделяем нужный слой (1), потом выбираем инструмент "Move Tool" (2), и перемещаем слой в положение, как показано на рисунке (3) (перемещения можно совершать с помощью курсоров на клавиатуре). Кликните на небольшую стрелку, которая обозначена на рисунке, чтобы изменить задержку времени в 0,1 секунды. Затем нажимаем кнопку "Duplicates selected frames". Выберем только что сделанный нами кадр (1), берём "Move Tool" и перемещаем в положение, как показано на рисунке (2) (перемещения можно совершать с помощью курсоров на клавиатуре). Теперь выбираем кадр №1 (1), и щелкаем на кнопку "Tweens animation frames" (2). Таким образом, у нас получится последовательность анимации между первым и вторым кадром. Параметры "Tweens animation frames": Нажмите "Plays animation", чтобы просмотреть резуьтат: Если вы считаете, что анимация слишком быстра, то отмените "Tweens animation frames" (Edit -> Undo Tween), и повторите эту операцию сначала (предварительно убедившись, что выбран первый кадр), но в параметрах поставьте 50 кадров. Получается не совсем красиво, когда нет паузы между концом и началом анимации. Чтобы это исправить переходим к последнему кадру и изменяем задержку времени на одну секунду. Теперь нужно сохранить наше творчество, и желательно оптимизировать. Идем по адресу File -> Save for Web & Devices..., переходим к закладке "Optimized", выставляем указанные ниже параметры и жмем "Save" (параметры оптимизации можете менять по своему усмотрению). Сs-Game-Portal - The new and the best for you! Steam Community :: ZubastiG
