Как да направите анимиран GIF банер за един уеб сайт в Photoshop CS, бизнес блог Макс Meteleva
Приложението е винаги една и съща - да се привлече вниманието на посетителите, така че те отидоха да си страница.
Така че нека да създадете нов документ File -> New. Вие не можете да се придържат към стандартите и да изберете всякакъв размер и дължина и височина може да изберете размера от падащия списък на Photoshop настройки.
Първо най-важното от които се нуждаем да направим, е да ви помоля да очертае около знамето на един пиксел.
- Създайте нов слой и го кръстете "Frame"
- Натиснете CTRL + A, за да изберете всички. След това отидете на Edit на елемента -> Stroke. Следните настройки се прилагат:
Дължина: 1 пиксел, цвят: черен, местоположението (Местоположение): от центъра на режима на смесване (blendingmode): нормално, непрозрачност (непрозрачност): 100%
Това ни дава ясен един пиксел граница около нашия банер. Сега всички следващи слоеве се наслагват един върху друг, но най-важното слой ще останат видими. Кои сме направили.
Сега ние трябва да се запитаме цветен градиент на полето с овална форма. Отиди на секция меню Layer (Layers) -> Layer Style -> Blend. Аз използвам настройките по подразбиране в следните цветове:
Също така, нанесете малко вътрешна сянка. Просто променете непрозрачността на 20%
След това ние създаваме друг закръглен регион, който ще се намира под нашето лого. Нанесете запълване градиент в следните цветове:
Направи 2px удар в овалната зона. Но къде е логото, което правя запълване на заден план в светлосиво, че не изглеждаше толкова плоска.
И сега ние се пристъпи към най-интересната част от нашия банер дизайн - анимации.
За да добиете представа два блока ще бъдат поставени в нашата основна област на текста, т.е., те ще светне, първо един, после още една, и тя ще бъде банер анимация.
С помощта на инструмента "Текст", за да създадете произволна текст, който ще се вмести в нашата гранична зона.
Сега се скрие слоя с текста и добавете втори слой с помощта на различни текстове, да го добавите към мястото, където беше първата.
Избор на втори слой с текста, получаваме следното:
В момента сме напълно подготвени за анимацията, преминете в режим на изображението Готов като кликнете на съответния бутон.
Образът Готов, ще видите следните слоеве палитра за анимация, както е показано по-долу:
Кликнете върху иконата "нова рамка" (или новата рамка), като по този начин можете да дублира избрания слой.
Като се започне от 2 на избрания слой, изберете слоя с видими текстови палитра слоеве и да го преместите на пиксела (натиснете стрелката нагоре два пъти).
Ако се вгледате в първия кадър и втория фрейм, ще забележите някои от разликата им един от друг.
Сега дублира последния кадър, а след това използвайте стрелка надолу и да се премести на текстовия слой е около 10 пиксела, и задайте слой непрозрачността на 70%
Отново, дублира последния кадър чрез плъзгане на текстовия слой до 15 пиксела, и задайте непрозрачността на слоевете 40%
Сега ние работим с второто текстово поле.
Скриване на текстово поле на предишния и да се премести на друг слой, за да бъде видим. Ние го преместите, както и предишния, т.е. 10 пиксела и прави непрозрачност 40%
Клониране на последния кадър.
Преместете този слой слой с текста на около 15 пиксела и оставят непрозрачност 70%
Отново клонирате последния кадър.
Сега преместете слоя с текста е по-висока с около 10 пиксела, и задайте непрозрачност анимирани GIF банер 100%
Сега се движат текстовото поле под 2 пиксела.
Сега всичко, което трябва да се повтаря от стъпка 8, по-късно, този слой, и още един слой бум.
Ако сте направили всичко правилно, трябва да получите около 14 кадъра.
В долната част на всеки кадър ще видите "0 секунди." Това е времето на забавяне между кадрите.
Заменете ги рамки закъснение от 0.05 или 0.1, в зависимост от това колко бързо искате да пуснете банера.
За да настроите стойността на 0.05, кликнете върху стрелката до 0 секунди и след това изберете "Други" и въведете желания номер.
Както можете да видите, превърта текстови много по-бързо, толкова бързо, че не е възможно да имат време да чете. Така че ще трябва да се определи стойността закъснение от 2 секунди, а след това резултатът е, че ще има нещо подобно.
се извършва с осем стъпала).
Ако установите, че трудно урок, който отдавам под изходния код с банер.