Как да създадете анимиран уеб банер в Photoshop
Създаването на уеб банери не е от най-бляскавите работни места в света, но е нещо, което всеки дизайнер ще трябва да направи в даден момент от кариерата си, вероятно многократно. Въпреки че няма строги правила, когато става въпрос за създаване на уеб банери, разбира се, че типът трябва да е голям, а съобщението набито.
Тъй като анимираме и това, бих предложил не повече от три слайда или анимирани елемента, тъй като хората просто няма да го гледат. Мигащите елементи също могат да помогнат да привлечете вниманието на зрителя.
През следващите няколко стъпки ще покажа как да настроите и създадете прост анимиран уеб банер, който веднъж овладян, ще бъде лесен за прилагане за всяка нова работа в бъдеще.
01. Настройте вашия документ
Стартирайте Photoshop, отидете до файл> нов и изберете Web от падащото меню Preset. От падащото меню за размер изберете класация или ако размерите ви варират, изберете персонализирани и въведете ръчно размерите на пикселите.
С избраните граници на документ от менюто за изглед, плъзнете водачите, за да щракнете към всички граници на документа.
02. Добавяне на графични елементи
Сега да поставим нашите основни дизайнерски елементи. В горния пример поставих логото на квадрат T3 и тъй като създадох, водачите можеха да го преоразмерят и да го накарат лесно да прилепва към границите на документа. Поставете графика със стрелка, която ще използваме по-късно и с помощта на инструмента за тип задайте съобщението си за първия слайд. Поставете всички изображения, от които се нуждаете, и след това се уверете, че сте назовали всичките си слоеве по подходящ начин.
03. Създаване на вторични слайдове
Сега просто дублирайте слоя си тип, изключете слоя отдолу и напишете в следващия етап на съобщението, в този случай „ПРОДАВА СЕ СЕГА“. След като се зарадвате, че разполагате с всички елементи, обединете колкото се може повече от слоевете. Тъй като фонът, логото и изображението на корицата ще останат статични, ние можем да обединим това надолу, оставяйки ни четири слоя, фона, типовите слоеве и слоя стрелка.
04. Създайте рамка анимация
Сега просто кликнете върху раздела с хронология в долната част на прозореца или отидете до прозорец> Хронология. Кликнете върху малката стрелка в средата на прозореца и изберете „Създаване на анимация на рамка“ и след това щракнете върху бутона. Сега изключете всички слоеве, с изключение на фоновия слой и първия слой на съобщението. Приложете една секунда закъснение към кадъра от падащото меню на малката рамка за анимация. Сега просто щракнете върху бутона „дублиране на избрани рамки“ на времевата линия, но изключете първото съобщение и включете второто съобщение. Повторете този процес за всички слоеве, като завършите със слоя стрелка.
05. Накарайте стрелката да мига и регулирайте времето
За да накарате стрелката да мига, просто натиснете „Дублиране на избрани кадри“ от времевата линия и изключете стрелката. Настройте времето на 0,5 секунди и повторете процеса, като включвате и изключвате стрелката в панела на слоевете, така че да изглежда сякаш мига. Накрая може да поискате да коригирате някои от времето, докато сте напълно доволни. Хората имат много кратък период на внимание, така че няма смисъл да се забавят с честотата на кадрите, но все пак трябва да могат да го прочетат.
06. Запазете за уеб и устройства
Накрая отидете до „Запазване за мрежата“ и изберете GIF от падащото меню. Можете също така леко да намалите качеството тук, за да намалите размера на файла. След като сте доволни, запазете gif и след това просто го плъзнете в уеб браузър, за да го тествате.
