Анимирани банери
Анимирани GIF файлове не са много популярни сред дизайнерите и се възприемат като шега. Защото анимирани картинки, не са много добро качество, а често и отвлече вниманието на потребителя от четене съдържанието на страницата. Но ако това е правилно поставен в страницата, анимацията може да привлече интерес. След като прочетете този урок ще се научите как да създадете анимирани банери лесно в Photoshop.
Етап 1. Отваряне на програмата Photoshop и да се създаде нов документ Ctrl + N, размера на 250x250 пиксела с 70 пиксела / инч резолюция. С помощта на инструмента Paint Bucket Tool (G) (Fill) запълване на фоновия цвят # f2f2f2.
Стъпка 2. Поставете логото в топ центъра на инструмента.
Стъпка 3: Под логото напиши лозунг използване Horizontal Type Tool (Т) (Horizontal Type).
Стъпка 4. В лентата с инструменти изберете Rectangular Marquee Tool (M) (правоъгълна област) и на нов слой направете селекция като тази на снимката по-долу. Запълнете го с цвят # b90909.
Отворете стиловете слой да се направи двойно кликване върху слоя с червена ивица и прилагат тези стилове:
Сянка (сянка):
Градиент покритие (градиент наслагване):
Стъпка 5. Добавете още текст на различни слоеве. В този случай, аз написах тези думи: уроци, статии, съвети, Freebies, Basix, видео, Premuim. Вижте изображението по-долу.
Rasterize всички текстови слоеве, за това моля, кликнете с десния бутон на мишката върху слоя с текста, и от менюто изберете Rasterize Текст команда (Rasterize текста), а след това да създадете за тях изрезка маска, като отидете на Layer> Добави подстригване менюто Mask (Слоеве - Създаване подстригване маска) , Изключете видимостта на слоевете с изключение уроци слой, като кликнете върху иконата на окото в ляво от името на слой.
Стъпка 6: Добавете малко привлекателни икона. Избрах PSDTUTS икона, можете да изберете друг.
Стъпка 7. В долната част на банера напишете текст.
Стъпка 8: На нов слой създаде овална зона и я запълнете с цвят #fdfcfc.
Към получената фигура прилагат тези стилове:
Хвърлена сянка (сянка):
Inner Glow (Inner Glow)
Градиент покритие (градиент наслагване):
Стъпка 9. Нашият банер е готов! Сега ние се заемем с работата на анимацията. Първо, отворете прозореца панел> Анимация Анимация (Window - Animation). Аз ще работя с график, (не е времето изтича анимация).
Забележка: Тази функция е достъпна само за Photoshop Extended.
Всички слоеве и по-ниска стойност непрозрачност (непрозрачност) до 0%.
Стъпка 10. Въз основа на изображението по-долу, въведете ключови кадри и къде трябва да се увеличи плътността.
Стъпка 11. Нашият график е да се грижат за свършената до:
Стъпка 12. Animation е готов! Щракнете върху Възпроизвеждане, и да видим резултата. Ако е необходимо, можете да го промените. За да запазите вашия банер, отидете на File> Save за уеб Устройства (Файл - Съхраняване на Web & Devices). Задайте параметри, както е показано по-долу, и след това щракнете върху Save (Запиши).
