Анимиран банер във Photoshop, Дизайн в живота
Здравейте всички. В тази статия ще ви покажа как да направите gif банер с помощта на Photoshop. По принцип съм свикнал да правя банери и анимации в Adobe Flash. Естествено Photoshop не се сравнява с този пакет за функционалност за анимация. Но все пак можете да направите доста прости и интересни банери във Photoshop, тъй като в новите му версии, започвайки с CS5, доколкото знам, стана възможно да се създават анимации на прозрачност, мащабиране, перспектива и т.н. Помислете за процеса на създаване на gif банер във Photoshop на примера на работата, разположена в заглавието на статията.
Създайте нов документ600 на 200px. Фон -#589fff
Първо, нека сглобим банера в статична форма. Нека поставим върху слоя на нашия главен герой - риба, където можете да получите безплатни ресурси за работата си, написах в статията "ТОП 8 сайта с безплатни ресурси за дизайнер":
С помощта на инструмента "Персонализирана форма " ще поставим надпис с диалогов прозорец върху слоя.
Нека ви напомня, че можете да редактирате фигура (векторен обект) с помощта на инструмента„Избор на възел“.
Така че направих това - изтрих ненужните елементи в слоя с първата форма и добавих още 3 елипси, за да изглежда така, сякаш този диалогов облак идва от устата на рибата. Оказа се следното.
Сега нека поставим текста върху слоевете на документа, в реда, в който ще се появи. Тъй като текстът ще се появява един по един, естествено е в статичната версия слоевете да се припокриват. Ще покажа всички слоеве, като последният текстов слой е деактивиран.
И имайте предвид, че текстовите слоеве, които имаме, трябва да бъдат изрязани до размера на слоя с формата на диалоговия облак, така че да служи като рамка, поради която текстътвече няма да се вижда.
И така, имаме готови всички слоеве. Подредени в реда, в който се показват (отдолу нагоре). Можем да започнем анимация.
Тъй като имаме фонов слой със заключване, той няма да се показва на времевата линия, винаги ще присъства непроменен. Ако искате да анимирате фона, освободете заключването на неговия слой, като щракнете 2 пъти с левия бутон на мишката.
За всеки слой на времевата линия са предоставени атрибути за анимация. Можете да ги видите, ако разгънете списъка вляво от името на слоя. Можем да променим позиция, непрозрачност, стил.
Освен това, ако щракнете с десния бутон върху самото име на слоя на времевата линия, ще се отвори списък с допълнителни анимационни действия.
Можете да активирате създаването на ключови кадри за конкретна песен със слой, като щракнете върху иконата на часовника срещу името на атрибута на анимацията.
Жълт диамант (икона на ключов кадър) ще се появи там, където е показалецът за време на времевата линия. Например в началото. Можете да промените стойността на атрибут на обект, като например позиция, и стойността му ще бъде съхранена за този ключов кадър. След това, за да зададете нова стойност и нов ключов кадър, трябва да преместите указателя на времето на ново място. Кликнете върху иконата на диамант до името на атрибута (нова икона на ключов кадър ще се появи на времевата линия) и задайте нова стойност за атрибута. Например преместете обект на ново място.
Сега нека се опитаме да приложим придобитите знания. Нашата риба трябва да се появи отляво надясно и нейната непрозрачност трябва да се промени от 0 до 100%. Ето как ще изглежда времевата линия в този случай.
След като рибата хвърли хайвера си, диалоговият облак ще се появи на парчета. Първо елипсите, после самата фигура. Пистиможем да преместваме всеки слой на времевата линия, така че разпределяме техните позиции, така че да се появяват в желания интервал от време и задаваме анимацията на параметъраOpacity за всеки слой.
За фигурата прилагаме същите действия.
Сега нека създадем анимация за текста, използвайки същия алгоритъм. Само текстът ще има параметър не Позиция, а Перспектива, докато можем не само да променим позицията, но и да променим мащаба от по-малък към по-голям, когато текстът започне да се движи. За да направите това, използвайте стандартния инструмент за трансформация на обект (Ctrl +T ). Тъй като първоначално текстовите слоеве се изрязват според формата на фигурата, те ще се виждат само в нея. Смених и стила на втория текст. Добавен е градиент в опциите за смесване на слоя.
Сега нека подравним всички ръбове на пистите в края. За да направите това, трябва да издърпате десния ръб на всяка песен и да настроите всичко по едно и също време. За да не изчезнат внезапно всички предмети. За всяка песен можете да зададете промяната в непрозрачността на 0. Пуснете какво се е случило. Можете да натиснете клавишаинтервал.
За да запазите резултата, трябва да изберетеФайл - Запазване за уеб. Изберете формата Gif и укажете анимацията да се повтаря постоянно.
Въпреки че Photoshop не е предназначен за някаква сложна анимация (и това е разумно), но с помощта на такива прости действия можете да постигнете приличен резултат при създаването на gif банер. Особено ако сте по-удобни с Photoshop, отколкото с Flash.