Объявления:
Результат урока:
![](http://globator.net/uploads/tutors/tutor33_files/33.gif)
Эффект сверкающего текста прекрасно подойдет для создания баннеров, анимированных логотипов и подписей для форумов. Создайте новый файл в Фотошопе размером 4x4 пикселя и увеличьте его в 1600 раз.
![](http://globator.net/uploads/tutors/tutor33_files/1.jpg)
С помощью этого маленького квадратика мы создадим эффектный фон для нашего баннера. Возьмите инструмент
Pencil (Карандаш)
,
установите размер в 1 пиксель и с помощью трех оттенков серого создайте такое изображение (Вы можете поэкспериментировать, меняя цвета, рисунок и размер изображения):
![](http://globator.net/uploads/tutors/tutor33_files/3.jpg)
Теперь в верхнем меню выберите
Edit-Define Pattern (Редактирование-Определить узор).
Создайте новый файл. Я взял размер 468х60 пикселей- один из самых популярных размеров баннеров в интернете. В верхнем меню кликните
Edit-Fill (Выполнить заливку),
и в появившемся меню выберите только что созданный Вами узор:
![](http://globator.net/uploads/tutors/tutor33_files/3.5.jpg)
Жмите OK. Фотошоп создает из маленького файла 4х4 пикселя вот такой интересный фон:
![](http://globator.net/uploads/tutors/tutor33_files/4.jpg)
Теперь создаем надпись, взяв инструмент
Type tool (Текст)
![](http://globator.net/uploads/tutors/tutor33_files/5.jpg)
Я использовал шрифт Concepto. Скачать его можно в разделе Шрифты. Инструкция по установке шрифтов- в упомянутом разделе.
![](http://globator.net/uploads/tutors/tutor33_files/6.jpg)
Выровняем надпись по вертикали и горизонтали. Для этого возьмите инструмент
Move tool
,
нажмите Ctrl+A на клавитатуре, чтобы выделить все изображение:
![](http://globator.net/uploads/tutors/tutor33_files/8.jpg)
И кликните по указанным иконкам на верхней панели, чтобы выровнять надпись по вертикали и горизонтали:
![](http://globator.net/uploads/tutors/tutor33_files/9.jpg)
Теперь надпись выровнена:
![](http://globator.net/uploads/tutors/tutor33_files/10.jpg)
Придадим надписи эффект рельефа:
Layer-Layer Style-Bevel and Emboss
(Слои-Эффекты слоя-Скос и рельеф).
Можете добавить любые другие эффекты.
![](http://globator.net/uploads/tutors/tutor33_files/12.jpg)
Изображение готово для дальнейших эффектов:
![](http://globator.net/uploads/tutors/tutor33_files/13.jpg)
В окне слоев создайте новый слой. Если у Вас закрыто это окно, нажмите F7 на клавиатуре.
![](http://globator.net/uploads/tutors/tutor33_files/14.jpg)
Возьмите инструмент
Brush tool (Кисть)
![](http://globator.net/uploads/tutors/tutor33_files/15.jpg)
и, нажав клавишу Shift на клавиатуре, нарисуйте прямую вертикальную линию желтого цвета. Она должна располагаться до текста.
![](http://globator.net/uploads/tutors/tutor33_files/16.jpg)
Добавим пару эффектов для желтой линии.
Layer-Layer Style-Outer Glow
(Слои-Эффекты слоя-Внешнее свечение):
![](http://globator.net/uploads/tutors/tutor33_files/17.jpg)
Layer-Layer Style-Inner Glow
(Слои-Эффекты слоя-Внутреннее свечение):
![](http://globator.net/uploads/tutors/tutor33_files/18.jpg)
Желтая линия преобразилась- теперь она похожа на луч света:
![](http://globator.net/uploads/tutors/tutor33_files/19.jpg)
Теперь пришло время младшей сестры Фотошопа- Adobe Image Ready. Перед началом работы в этой программе я рекомендую сохранить Вашу работу в формате psd. Нажмите на иконке, чтобы перейти в эту программу.
![](http://globator.net/uploads/tutors/tutor33_files/20.jpg)
Видим наш баннер в основном окне Image Ready:
![](http://globator.net/uploads/tutors/tutor33_files/21.jpg)
В окне анимации создайте дубликат кадра, кликнув по указанной иконке:
![](http://globator.net/uploads/tutors/tutor33_files/22.jpg)
Дубликат кадра создан:
![](http://globator.net/uploads/tutors/tutor33_files/23.jpg)
Убедитесь в окне слоев, что у Вас активен слой с желтой линией:
![](http://globator.net/uploads/tutors/tutor33_files/25.jpg)
Теперь перетащите желтую линию в конец текста:
![](http://globator.net/uploads/tutors/tutor33_files/24.jpg)
В верхнем меню выберите
Layer-Create Clipping Mask
(Создать обтравочную маску)(Ctrl+G)
Это позволить сделать так, чтобы желтый луч появлялся только внутри текста.
![](http://globator.net/uploads/tutors/tutor33_files/26.jpg)
Изображение слоя с желтым лучом изменилось:
![](http://globator.net/uploads/tutors/tutor33_files/27.jpg)
В главном окне желтый луч исчез:
![](http://globator.net/uploads/tutors/tutor33_files/28.jpg)
В окне анимации нажмем иконку Tween:
![](http://globator.net/uploads/tutors/tutor33_files/29.jpg)
И в появившемся меню ставим 20 кадров:
![](http://globator.net/uploads/tutors/tutor33_files/30.jpg)
В результате чего между первым и последним кадром появилось 20 новых кадров, и программа сама сделает плавный переход между ними. Чем больше кадров, тем плавнее переход и больше размер файла. Осталось нажать на кнопку Play и выбрать режим воспроизведения Forever:
![](http://globator.net/uploads/tutors/tutor33_files/31.jpg)
И насладиться анимацией %) :
![](http://globator.net/uploads/tutors/tutor33_files/33.gif)
Сохраните работу через команду
File-Save Optimized As
(Файл-Сохранить Оптимизированно как)
в формате gif:
![](http://globator.net/uploads/tutors/tutor33_files/32.jpg)
Успешной анимации!
Глобатор
Кстати, если хотите научиться создавать сайты своими руками, то настоятельно рекомендую посетить знаменитый сайт "Дикая правда"- dikarka.ru. Это лучший учебник по веб-дизайну из всех, какие я когда-либо видел.
Читайте также:
Если у Вас есть вопросы, можете задать их на нашем форуме.
Буду благодарен, если поделитесь ссылкой на эту страницу в одном из сервисов:
Присоединяйтесь к нам в Facebook (просто нажмите кнопку "Мне нравится"):
Понравился материал? Присоединяйтесь к нам в Твиттере @globatornet .
|