|
|
Предыдущая тема :: Следующая тема |
Автор |
Сообщение |
parfait
Аспирант Сибмамы
На сайте с 28.01.10 Сообщения: 2123 В дневниках: 2272 Откуда: Sib
|
Добавлено: Чт Фев 03, 2011 13:04 Заголовок сообщения: Как сделать анимированный баннер? |
|
|
Добрый день, дорогие СибМамы и СибПапы!!!
Посмотрела темки- не смогла найти Как в Фотошопе Сделать
АНИМИРОВАННЫЙ БАННЕР!
Последний раз редактировалось: parfait (Сб Фев 05, 2011 12:04), всего редактировалось 1 раз |
|
Вернуться к началу |
|
|
A.Potter
мудрый папа
На сайте с 20.05.08 Сообщения: 4892 В дневниках: 7 Откуда: Russia, Barnaul
|
Добавлено: Пт Сен 30, 2011 14:14 |
|
|
Вот простейший сайт-генератор любых картинок и баннеров: http://gifr.ru/
Или кого-то смущает фирменный ярлычек "gifr.ru" в правом верхнем углу картинки? |
|
Вернуться к началу |
|
|
parfait
Аспирант Сибмамы
На сайте с 28.01.10 Сообщения: 2123 В дневниках: 2272 Откуда: Sib
|
|
Вернуться к началу |
|
|
yuliya_myod
Школьные годы
На сайте с 23.10.11 Сообщения: 1251 В дневниках: 1 Откуда: Ленина, 12
|
|
Вернуться к началу |
|
|
Владимир_Хрусталев
бойкий папа
На сайте с 14.10.11 Сообщения: 327 В дневниках: 3 Откуда: Новосибирск
|
Добавлено: Пн Дек 19, 2011 9:28 |
|
|
Дарю:
Обьясню на примере юзербара, но обычный баннер идет размером 460х60 пикселей.
Шаг первый:
Начинаем с самого простого. На рисунке обозначенны пункты (в звездочках)
1. Создаем новый документ. Идем в Файл -> Новый или же просто жмем Ctrl + N
В появившемся окне ставим параметры:
2. Имя: User Bar (на ваше усмотрение, прим. автора)
3. Ширина юзер бара 350 пикселей (заметьте что не сантиметров и не дюймов)
4. Высота юзербара 19 пикселей и нажимаем на кнопочку "Да" или "Ок"
Шаг второй:
1. У нас получается вот такая вот полосочка ^_^ (Если она вдруг очень большая, то проверьте, поставили ли вы пикселы а не сантиметры)
2. Создаем новый документ (мы уже умеем это делать, не так ли?)
Шаг третий:
1. Теперь ширину мы ставим 3 пикслеа...
2. ... и высоту тоже 3 пиксела
Жмем "Да" или "Ок".
3. Получаем оооочень маленький квадратик. (Большой звездочкой отмечен инструмент "Лупа" или "Увеличительное стекло", воспользуйтесь им чтобы увеличить этот квадратик до максимального размера увеличения, а именно 1600% как показанно красным прямоугольником)
Шаг четвертый:
Средней звездочкой отмечена кнопка "Рисования" и для того чтобы выбрать на ней "Карандаш" надо щелкнуть по этой кнопке ПРАВОЙ кнопкой мыши и выбрать нужный инструмент.
1. Итак как сказанно в небольшом предисловии сверху, выбираем карандаш
Большой звездочкой отмечен размер выбранного инструмента (в данном случае карандаша) его нужно поменять на 1 пиксель как у меня на рисунке
2. С помощью карандаша в 1 пиксель рисуем вот такую полоску
Шаг пятый:
1. Как показанно у меня на рисунке, мы выбираем Редактирование -> Определить узор
2. В новом окне у нас появится имя нашего файла ("Полосочки" в моем случае) его можно поменять по вашему усмотрению.
Жмем "Да" или "Ок" соглашаясь со всеми всплываемыми окнами (если таковые появятся)
Шаг шестой:
1. Файл -> Открыть и этим все сказанно. Или же просто Ctrl+O
2. Вводим адрес картинки которую вы хотите видеть на своём будующем юбаре, или же двойной щелчок по ней (отмеченно красным) (В моем случае это Хью Лори) (Желательно брать картинку побольше для начала, потипа обоев или такого рода)
Жмем "Открыть" (отмеченно красным "Open")
Шаг седьмой:
1. На панели инструментов (где мы ранее выбирали "Увеличительное стекло") мы выбираем инструмент "Прямоугольное вырезание" и выделяем понравившуюся часть картинки (вообще в юзербарах с людьми в основном берутся глаза. Ну кто будет делать юзербар с носом, рукой, ртом итд?)
2. С помощью инструмента "Перемещение" мы тащим выделеную часть картинки на юзербар как показанно пунктиром.
Шаг восьмой:
1. Как я показал на рисунке, картинку можно двигать (не только вверх и влево, а как угодно) (Хочу обратить ваше внимание на то, что обои с которых вы резали ту или инную часть остались целыми и невридимыми ^_^)
Жмем Shift+Ctrl+N и нажимаем "Да" или "Ок"
2. Давим CTRL+A. Выполняем: Редактирование -> Выполнить заливку
Шаг девятый:
1. В появившемся окне выбираем "Узор"
2. Дальше нажав на небольшую стрелочку (на рисунке она входит в "красную зону" и находится справа от полосок) мы ищем тот узор что делали вначале. А именно всеми любимые "Полосочки"
3. Непрозрачность мы ставим ~ от 10 до 20, но это зависит от рисунка. Желательно не пренебрегать. В своем случае я поставил 15%
Жмем "Да" или "Ок" и замечаем что нашу картинку покрыли слегка заметные полоски (на картинке я увеличил чтобы было более заметно)
Шаг десятый:
Нажмите сначала клавишу "D" а потом "X" (чтобы отрегулировать цвет)
Большой звездочкой отмечен инструмент "Фигура". На него как и ранее на инструмент "Рисование" нужно нажать правой кнопкой мыши...
1. ...и выбрать "Овал" или, как его ещё называют, "Эллипс"
2. Делаем следующие. Наводим курсор (перекрестие) ровненько на левый верхний угол и дальше, не отпуская левой кнопки мыши, тянем овал в правый нижний угол.
3. Должно получится что то наподобии этого (Новичков просьба не пугатся, все в порядке, так и должно быть)
Шаг одиннадцатый:
С помощью стрелок на клавиатуре или инструмента "Перемещение" тащим овал наполовину вверх.
1. Теперь, на панели слоев (если таковая у вас отсутствует (по умолчанию она вроде должна быть снизу справа) то нажмите F7), щелкаем правой кнопкой мыши по слою с фигурой (Название по умолчанию у него "Фигура 1")
2. Выбираем "Параметры наложения"
Шаг двенадцатый:
1. В новом окне, выделяем "Параметры наложения: Заказные" (вобщем то что выделенно у меня)(по умолчанию оно и должно быть выделенно)
2. Непрозрачность ставим ~ на 20-30% (В моем случае 25)
Жмем "Да" или "Ок". Чувствуете разницу, не так ли?
Шаг тринадцатый:
1. Вот что то наподобии должно получится у вас.
Большой звездочкой отмечена кнопка "Текст" на панели инструментов. Выбираем её.
Шаг четырнадцатый:
1. Выбираем место для текста (дело в том, что у юзербара размером 350*19 при шрифте визитор в 10 пикс можно легко найти середину (по вертикали) и разместить текст ровно, чтобы он не был не снизу не сверху), а задействовав кнопочки со стрелками на вашей клавиатуре или опять инструмент "Перемещение" можно изменить положение написанного вами текста (В моем случае "D. House Fan")
Шаг пятнадцатый:
1. На панели слоев выделяем слой с текстом (он приобретает имя написанного текста)
Большой звездочкой отмечена кнопка "Добавить стиль текста" (ранее когда мы заходили в "Параметры наложения" у нашего овала вам наверняка заметились в новом окне и другие строки такие как "Тень", "Обводка" итд. Для того чтобы зайти в это окно ещё раз можно нажать эту кнопку. Просто я хочу расказать вам о всевозможных вариантах) жмем на эту кнопку и выбираем "Обводка"
2. Ставим размер 1 пикс.
3. Цвет ставим черный.
(Прим. автора: если хотите, то можете поставить галочку напртив строки "Тень")
Жмем "Да" или "Ок"
Шаг шестнадцатый:
Большой звездочкой отмеченна кнопка "Новый слой" Жмем на неё (Прим. автора: Новый слой можно так же создать с помощью клавиш Ctrl+N или зайдя в "Слой -> Новый -> Слой")
1. У вас должен появится вот такой вот новый слой. Теперь когда он выделен жмем Ctrl+A и вы заметите выделение вокруг вашего юзербара.
2. Заходим в Редактирование -> Выполнить обводку
Шаг семнадцатый:
1. Выставляем Ширину (рамки кстати) 1 пикс.
2. Цвет рамки должен быть черным (хотя бы для начала, а потом будете эксперементировать)
3. Непрозрачность - 100%
Жмем "Да" или "Ок"
Итак, мы получили уже готовый юзербар. Поздравляю!
Шаг восемнадцатый:
Благодаря фотошопу файлы можно сохранять в разных форматах. Многие спорят в каком правильно хранить юзербар: *.png или *.gif, но одно ясно точно. Оригинал можно (и даже нужно) хранить в формате *.psd ибо если вы вдруг забудете про какую то деталь, к примеру блик или текст, захотите поменять, отформатировать итд), то сможете сделать это только в этом формате. В других все слои просто слепятся друг с другом. Однако об авторском праве я вам пожалуй говорит не стану... Но лично я храню файлы в формате *.gif однако дело ваше. Чтобы сохранить юзербар зайдите в Файл -> Сохранить как или Shift+Ctrl+S, выберите директорию (папку) в которой хотите чтобы хранился ваш юзербар и формат.
Добавлено спустя 6 минут 28 секунд:
Victoriana писал(а): | а Вы не подскажете,как сделать так,чтобы картинка при клике выводила на мою тему,а не на гифр? |
Доброго времени суток!
Это будет выглядеть примерно так:
[url=нужная Вам ссылка для перехода][img]ссылка на Ваш баннер[/img][/url]
в теги [img][/img] необходимо заключать ссылку на баннер, который вы загрузите путем создания нового ответа на форуме. Есть такая опция "Загрузить картинку".
а теги [url][/url] помогут сделать Ваш баннер не просто мерцающей картинкой а картинкой при клике на которую можно бует переместиться в Вашу тему.
Добавлено спустя 9 минут 50 секунд:
И по анимации:
Откройте уже готовый Userbar, который вы создали по примеру выше. Откройте окно анимации (Window -> Animation).
Выделяем нужный слой (1), потом выбираем инструмент "Move Tool" (2), и перемещаем слой в положение, как показано на рисунке (3) (перемещения можно совершать с помощью курсоров на клавиатуре).
Кликните на небольшую стрелку, которая обозначена на рисунке, чтобы изменить задержку времени в 0,1 секунды.
Затем нажимаем кнопку "Duplicates selected frames".
Выберем только что сделанный нами кадр (1), берём "Move Tool" и перемещаем в положение, как показано на рисунке (2) (перемещения можно совершать с помощью курсоров на клавиатуре).
Теперь выбираем кадр №1 (1), и щелкаем на кнопку "Tweens animation frames" (2). Таким образом, у нас получится последовательность анимации между первым и вторым кадром.
Параметры "Tweens animation frames":
Нажмите "Plays animation", чтобы просмотреть резуьтат:
Если вы считаете, что анимация слишком быстра, то отмените "Tweens animation frames" (Edit -> Undo Tween), и повторите эту операцию сначала (предварительно убедившись, что выбран первый кадр), но в параметрах поставьте 50 кадров.
Получается не совсем красиво, когда нет паузы между концом и началом анимации. Чтобы это исправить переходим к последнему кадру и изменяем задержку времени на одну секунду.
Теперь нужно сохранить наше творчество, и желательно оптимизировать. Идем по адресу File -> Save for Web & Devices..., переходим к закладке "Optimized", выставляем указанные ниже параметры и жмем "Save" (параметры оптимизации можете менять по своему усмотрению).
Кстати, моя работа в моей же подписи этого форума собрал за 8 минут _________________
|
|
Вернуться к началу |
|
|
yuliya_myod
Школьные годы
На сайте с 23.10.11 Сообщения: 1251 В дневниках: 1 Откуда: Ленина, 12
|
|
Вернуться к началу |
|
|
parfait
Аспирант Сибмамы
На сайте с 28.01.10 Сообщения: 2123 В дневниках: 2272 Откуда: Sib
|
|
Вернуться к началу |
|
|
Владимир_Хрусталев
бойкий папа
На сайте с 14.10.11 Сообщения: 327 В дневниках: 3 Откуда: Новосибирск
|
|
Вернуться к началу |
|
|
yuliya_myod
Школьные годы
На сайте с 23.10.11 Сообщения: 1251 В дневниках: 1 Откуда: Ленина, 12
|
|
Вернуться к началу |
|
|
Tatyana_sr
Аспирант Сибмамы
На сайте с 29.10.10 Сообщения: 4124 В дневниках: 5 Откуда: с.м. Золотая Нива
|
Добавлено: Ср Дек 28, 2011 20:33 |
|
|
Владимир_Хрусталев
Всё так понятно, большое спасибо!
Вот только в своём фотошопе 8.0 sc не нашла окно видео
а у вас какой?
Добавлено спустя 32 минуты 49 секунд:
нашла, надо открыть Файл -> править в ImageReady |
|
Вернуться к началу |
|
|
Владимир_Хрусталев
бойкий папа
На сайте с 14.10.11 Сообщения: 327 В дневниках: 3 Откуда: Новосибирск
|
|
Вернуться к началу |
|
|
Tatyana_sr
Аспирант Сибмамы
На сайте с 29.10.10 Сообщения: 4124 В дневниках: 5 Откуда: с.м. Золотая Нива
|
Добавлено: Чт Дек 29, 2011 9:30 |
|
|
Владимир_Хрусталев
не у меня именно второй программой открывается, вчера всё облазила, cs8 у меня а дальше всё то же самое как вы объясняли по тем же пунктам
у меня был раньше 5й фотошоп, только не помню CS он был или нет а к этому я как то привыкла уже. |
|
Вернуться к началу |
|
|
Helen20042005
Академик
На сайте с 26.12.07 Сообщения: 25882 В дневниках: 152 Откуда: Новосибирск, Ленинский, Широкая
|
Добавлено: Чт Янв 19, 2012 11:56 |
|
|
|
|
Вернуться к началу |
|
|
Марина М-о
Подготовишка
На сайте с 03.08.11 Сообщения: 364 В дневниках: 2 Откуда: Новосибирск, Первомайка
|
Добавлено: Вт Фев 19, 2013 11:05 |
|
|
Обратилась в GIFr так там загрузка фото из компа шла 15 мин,так и не дождалась,ушла.Это так и нужно, долго загружается или как? если грузить 3 фото ,так это пол дня уйдет |
|
Вернуться к началу |
|
|
Раз, два, три
Вся такая внезапная
На сайте с 10.09.07 Сообщения: 7470 В дневниках: 184 Откуда: Академгородок/ВЗ
|
Добавлено: Вс Фев 24, 2013 18:33 |
|
|
Вот несколько ссылок на видео-уроки "как сделать простой баннер в фотошопе".
|
|
Вернуться к началу |
|
|
|
|
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах
|
|