Главная | RSS
              

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: [Blooming_Violet]  
Форум » Проявления вашего и чужого творчества » Помощь с Photoshop`ом » Анимированный бигбар.
Анимированный бигбар.
[Violet-KA]Дата: Понедельник, 09.11.2009, 22:02 | Сообщение # 1
All the things she said :з
Группа: Администраторы
Сообщений: 3196


Хотите научиться делать такое;) -
Тогда вас ждёт урооок.

На этом уроке мы научимся делать анимированные бигбары:) Такой вид анимации использовался в моих уроках только один раз (Эффект блика). Поэтому читаем повнимательнее, вчитываясь в каждое словечко;)

Итак, для начала откроем новый файл с прозрачным фоном, разрешения 350х40 (именно таков, стандартный размер любого бигбара).

Теперь откроем исходник:

Далее, перемещаем исходник на новый файл с помощью инструмента "Перемещение" (клавиша "V"). Видим такое вот безобразие:

Теперь в верхней панельке Фотошопа под главным меню (не переключая инструмент "Перемещение") ставим галочку возле надписи "Показывать ограничительную рамку" и на нашем изображении появляется рамочка (теперь желательно "Развернуть" окошко на весь экран), которую мы уменьшаем до размеров ширины заготовки бигбара(желательно с помощью клавиши "Shift". А чтобы картинка не потеряла свой изначальный вид чрезмерно сузившись - берёмся за какой нибудь из углов рамочки, а не за стороны). Далее подвигаем рамочку так, чтобы в обзоре заготовки бигбара было только её начало:

Открываем окошко слоев (Окно>Слои), создаём новый слой (Слои>Создать новый слой). Теперь мы должны сделать штриховку, а также обводку нашего бигбара (пусть они будут на одном слое). Для начала сделаем штриховку. Для этого нужно создать новый файл с такими опциями, как: разрешение - 5х5 и прозрачный фон. Приближаем созданный "мини-квадратик" до максимального размера, берём инструмент "Карандаш", квадратную кисть первого размера (1) и рисуем "косую линию" чёрным (или любым другим цветом) от одного уголка изображения к другому:

Теперь идём по такому пути: (Редактирование>Определить узор). Появляется окошко, вы нажимаете "Ок". Вот-вот, уже пол дела сделано:) Теперь снова переключаемся на наш бигбар выбираем в окошке слоев новый слой, который мы уже создали, берём инструмент "Заливка", выбираем заливку узором (панелька под главным меню, там есть "Заливка:" Основной цвет или Узор) и выбираем сам узор, в той же панельке под главным меню, а также регулируем прозрачность до 30-40%. В самом конце списка узоров должна быть наша "косая линейка", заливам ею новый слой. Теперь приступим к обводке. Выделяем "Прямоугольным выделением" весть бигбар и идём по пути (Редактирование>Выполнить обводку). Появляется окошко в котором вы выбираете цвет и толщину обводки (лучше всего 1 px). Теперь у нас есть и штриховка, и обводка:

Теперь нам осталось не так много, нужно сделать блик и конечно же надпись. Сначала - блик. Снова создаём новый слой. Берём инструмент "Овальное выделение", выделяем им чуть меньше половины нашего бигбара, желательно, чтобы это выглядело симметрично;) Теперь снова же берём инструмент "Обводка", но теперь уже цветом. Выбираем белый цвет и регулируем прозрачность в уже нам известной панельке под главным меню, до 30%, видим что-то подобное на это:

А теперь - надпись, выбираем инструмент "Горизонтальный текст", любым удобным для вас размером и шрифтом пишете любую пришедшую вам в голову=D надпись, можно использовать какие нибудь эффекты (как я), вот. А у меня получилось так:

Ну и всё, что осталось сделать - это анимация. Переходим в ImadgeReady(Shift+Ctrl+M). Открываем окошко анимации (Окно>Анимация). Там мы видим только один кадр, но это легко исправить;) Внизу этого окошка есть множество разных кнопок. Мы жмём на ту, которая, если навести мышь - выдает "Создать дубликат текущего кадра" . Первый кадр оставляем таким, какой он и есть, на втором же, мы с помощью инструмента "Перемещение" выделяем слой с самой картинкой и перемещаем рамочку с начала в самый её низ (помните ещё в начале, я говорила про то, что рамочку нужно подвигать в начало обзора, теперь же мы делаем противоположное - подвигаем в самый конец), выходит вот такое:

А вот сейчас жмем кнопочку в нижнем меню, которая, если на неё навести - выдаёт опцию "Создать промежуточные кадры". И добавляем 20 кадров. Теперь пробуем воспроизвести;) Должно быть так, чтобы картинка двигалась с верху в низ ^^ Ставим задержки где нужно, заканчиваем работу (можно сделать, чтобы картинка далее двигалась и с низу вверх). Всё! Сохраняем через "Сохранить оптимизированный, как..." и любуемся результатом:

Конечно, такие бигбары могут весить до 700 кб, но даже при скорости 512 кб/с он сможет загрузится чуть больше чем за 1 сек. ;)

Удачи!

Автор урока: Sombre_Cat aka Antishcola


Не хорошая.
 
Форум » Проявления вашего и чужого творчества » Помощь с Photoshop`ом » Анимированный бигбар.
  • Страница 1 из 1
  • 1
Поиск:


Copyright MyCorp © 2019