Fotodryg.ru - Уроки Фотошоп. Банер в Фотошопе


Уроки Фотошоп



Полезное на сайте


Смотреть видеоурок




От этого блюда нельзя оторваться




На главную
К списку уроков фотошоп

Уроки по дизайну сайтов в Photoshop. Создаем банер

[9] [10] [11]

Вам потребуется Photoshop 7 или выше.

1. Создаем новое изображение (файл-новый) размером 468Х60 пикселей, выбираем инструмент "Градиент". Из выпадающего списка градиентов на панели задач выбираем понравившийся (либо делаем сами) и заливаем им слой.

2. Выбираем инструмент "Текст", выбираем необходимый шрифт и размер, пишем нужную нам надпись, в нашем случае "Fotodrug". Для того, чтобы отредактировать текст применяем команду СЛОЙ-ТЕКСТ-ПРЕОБРАЗОВАТЬ В КРИВЫЕ и при помощи инструмента "Стрелка" изменяем форму нужных нам букв (каждую букву по отдельности). Изменив те буквы, которые хотели, кликаем в левом верхнем углу надписи и не отпуская кнопки мыши перемещаемся в правый нижний угол, отпускаем кнопку мыши и у нас станут выделенными все контуры надписи, правым кликом по контуру вызываем меню и выбираем пункт "Образовать выделенную область", в появившемся окне нажимаем ОК.



3. Переходим на палитру СТИЛИ, выбираем понравившийся стиль и применяем к Вашей надписи (просто кликнув по кнопке понравившегося стиля). При помощи инструмента "Перемещение" сдвигаем текст в право, так, чтобы он находился в конце нашего банера.

4. Дважды копируем слой с текстом и назовем текст 1 и текст 2. Активируем слой Текст 1 и применим к нему фильтр РАЗМЫТИЕ (Фильтр-размытие-размытие в движении) с параметром УГОЛ 0градусов, СМЕЩЕНИЕ 350 пикселов. Перед тем как открыть фильтр, программа выдаст запрос "Растрировать слой?", нажимаем ОК. При помощи инструмента "Перемещение" сдвигаем слой в лево, так, чтобы надпись находилась в самом на чале нашего банера.



5. Активируем слой Текст 2 и применим к нему фильтр РАЗМЫТИЕ (Фильтр-размытие-размытие в движении) с параметром УГОЛ 0градусов, СМЕЩЕНИЕ 150 пикселов. Сдвигаем слой в лево, так, чтобы надпись находилась между слоем с текстом и слоем Текст 1 (по середине банера).

6. Активируем инструмент "Текст", выбираем необходимый шрифт и размер, пишем надпись "Трюки и эффекты" нажимаем клавишу Enter и пишем уже на следующей строке "Photoshop". Переходим на палитру СТИЛИ, выбираем понравившийся стиль и применяем к нашей надписи. При помощи трансформации (Редактирование-свободное трансформирование) перемещаем надпись в начало банера и корректируем размер. Называем слой Текст 3.



7. Копируем слой, называем Текст 4, активируем текст, устанавливаем курсор после слова "эффекты" и нажимаем Enter, перемещаем надпись, при помощи инструмента "Перемещение", так, чтобы была видна нижняя часть надписи "Трюки и эффекты" и верхняя часть надписи "Photoshop".

8. Откройте панель анимации в Photoshop CS3 (ОКНО-АНИМАЦИЯ) или перейдите в ImageReady CS , при помощи кнопки "Редактировать в ImageReady" (внизу панели инструментов), если вы работаете в более ранней версии программы.

9. Скопируйте первый кадр 2 раза (всего получится 3 кадра). вернемся к первому кадру анимации (кликнем по нему мышью), на панели Слои оставляем видимыми - фоновый слой, слой Текст 1 и Текст 4 (у остальных слоев отключаем видимость (значек ГЛАЗ около строки слоя на панели СЛОИ). У второго кадра оставляем видимыми - фоновый слой, слой Текст 2 и Текст 4. У третьего - фоновый слой, слой Текст и Текст 3.

10.Задаем время задержки кадра: первому и второму кадру 0,1 секунды, третьему 2 секунды. Нажимаем Play.



[9] [10] [11]






Комментарии



Оставляйте пожалуйста Ваши комментарии и советы по уроку. Поля "Текст комментария" и "Имя" обязательны для заполнения

Текст комментария:


Ваше имя:


Оцените урок 1 2 3 4 5

введите цифры с картинки








Дмитрий
17:02:2010
беспонтовый ты рассказчик!






Андрюха
09:01:2010
Впервые с вашей помощью создал свой собственный банер! Все очень подробно, ясно, и четко изложено на доступном языке! Одромное спасибо Админам, за подобные уроки! Я в восторге!!!! Спасибо еще раз, все получилось! Прцветания вам!
Сайт супер нет слов!






katenchen
09:12:2009
как сохранить анимацию? желательно в vob.



как сохранить готовую анимацию, Вы можете прочитать здесь
Панти
11:12:2009







Eldos
31:12:2008
A kak coxpaHit



Для того, чтобы сохранить анимацию в Photoshop CS 3 заходим в меню ФАЙЛ-СОХРАНИТЬ ДЛЯ ВЭБ и сохраняем изображение в нужную Вам папку, как рисунок и HTML-код в формате GIF. Если сохраняете из Image Ready, то заходим в меню ФАЙЛ-СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК и сохраняем изображение как рисунок и HTML-код в формате GIF.
Панти
02:01:2009


а он не хочет сохранятся
Инкогнито
11:11:2009


В смысле, не хочет? А что пишет? Если просто закрывается вся программа когда нажимаете Сохранить для ВЭБ... , то это глюк программы. Мы сталкивались с такой проблемой, пришлось менять фотошоп.
Панти
12:11:2009







Alex
18:10:2008
а не могли бы вы еазвание меню, фильтров и тк.д. ещё и на английском писать.






Евгеша
30:08:2008
Спасибо огромное






Сергей
06:05:2008
Спасибо!