В этом уроке делаем анимационный банер, например, такой:
Шаг 1. Для начала создаем изображение 200Х300.
Заливаем его нужный фоном или оставляем прозрачный фон.
Создаем новый слой (ctrl+shift+N).
Далее выбираем инструмент «скругленный прямоугольник»
(shift+U несколько раз пока не попадем на то что нам нужно).
Задаем скругление 10 пикселей.
Выставляем его в режим Path как показано на рисунке.
Рисуем скругленный прямоугольник на слое что мы создали.
Нажимаем ctrl+enter для преобразования контура в выделение и заливаем любым цветом (на данный момент цвет не важен).
Должно получится что-такое:
Шаг 2. Создаем тень для полученного скругленного прямоугольника.
В свойствах слоя задаем следующие параметры тени:
Создаем градиент (цвет вы можете выбирать сами — поэкспереминтируйте).
Я, например, использовал следующий градиент:
Шаг 3. Создаем еще один слой на котором мы размещаем текст или рисунок.
Это может быть цветной рисунок/текст или одноцветный рисунок/текст. Я использовал простой текст и добавил к нему контур.
Далее в свойствах слоя выставляем параметры тени:
Цвет тени выбирайте исходя из цвета фона.
Шаг 4. Создание блика.
Создаем еще один слой где изпользуя инструмент «скругленный прямоугольник» (уже просто U) рисуем контур с скруглением 9 пикселей и отступами по боках от «основного тела» иконки порядка 1—2 пикселя.
Нажимаем ctrl+enter для преобразования контура в выделение и заливаем его полупрозрачным градиентом (от белого до прозрачного, режим смешивания слоя — Soft Light).
Должно получится как на рисунке:
Далее используя инструмент «pen» (нажимаем «P»), отрисовуем дугу среза по середине иконки. Должно получится что похожее как на рисунке.
Нажимаем ctrl+enter для преобразования контура в выделение и удаляем лишний градиент (del).
Далее создаем три текстовых слоя дублированием друг друга, наполняем их текстом.
Для удобства, при создании каждого последующего слоя с текстом — делаем невидимым предыдущий слой.
Например у меня получились такие три варианта:
[показать] [показать] [показать]
На следующем этапе создаём анимацию. Для этого выводим палитру «Animation» для фотошопа версии CS2 и выше. У кого более ранние версии — заходим в строке меню в пункт File и выбираем там пункт Edit in ImageReady. Там в строке меню в пункте Window выводим палитру Animation.
Нажатием на эту кнопку делаем дубликаты кадров, выставляем в каждом из них нужный текст. Выделяем все кадры и выставляем задержку в секундах:
Затем нажимаем File — Save Optimized As, даем название файлу и сохраняем в GIF-формате
Вот и всё. Экспериментируйте и создавайте красивые банеры!
Спасибо http://mikele.blog.ru/
