Анимированный аватар в Photoshop - Уроки photoshop - WEB-мастеру - Форум
Страница 1 из 11
Модератор форума: FOREVER 
Форум » WEB-мастеру » Уроки photoshop » Анимированный аватар в Photoshop
Анимированный аватар в Photoshop
FOREVER Дата: Вторник, 23.06.2009, 16:04 | Сообщение # 1


Сообщений: 970
[ 100 ]
Offline
Анимированный аватар в Photoshop

Несколько раз меня спрашивали, как сделать такой эффект на аватарке
Как мог написал ниже.. критика и дополнения приветствуются.

Урок писался в английской версии Photoshop CS3

1.Новый док. 100х100. Заливаем paint-bucket.gif черным цветом.
Слой переименуем и дадим ему название (фон)

Продублируем слой с фоном, зальем paint-bucket.gif белым цветом и назовем (рамка)

2. Теперь берм инструмент Rounded Rectangle Tool радиус закругления
примерно 5pix, цвет переднего плана черный colors.gif рисуем по середине квадрат.

Затем выделим слой рамка (просто кликнем по иконке слоя)
Сtrl+клик по слою с формой загрузится выделение.

Жмем клавишу Delete убираем выделение Ctrl+D.
Слой с формой нам не нужен по этому удаляем его delete-layer.gif .
Получается следующее.

3. Теперь нам нужно нарисовать рисунок камуфляжа.
Есть много способов рисовать камуфляж я использовал плагин VanDerLee Camouflage.
Скачать можно в конце урока. Ctrl+клик по слою (рамка) загрузится выделение.
Идем в меню Filter выбираем VanDerLee--->Camouflage.
Примерные настройки фильтра первый цвет 353420 второй 1f1f13.

Жмем ОК после чего Ctrl+D. Получится должно следующее.

4. Добавим стиль к нашей рамке. Правый клик по иконке слоя
добавляем стиль.

Outer Glow

Bevel and Emboss

Gradient Overlay

Stroke

Получится должно следующее.

5. Создадим новый пустой слой create-a-new-layer.gif над слоем (фон) назовем (Решетка).
Отключаем видимость layer-visibility.gif слоя (Рамка)
Выбираем инструмент pencil.gif Pencil Tool толщина линии 1pix выставляем цвет 17f000.
Зажимаем Shift исполняем следующее. Думаю у вас линии получатся лучше чем у меня..)
Не боимся делать линии разной длинны в дальнейшем мы их выровняем .. biggrin.gif

Дублируем слой с решеткой заходим Edit--->Transform--->Rotate 90CW
Сливаем слой (Решетка) и копию.

Клик по слою с решеткой выбираем инструмент Rectangular Marquee Tool rectangular-marquee.gif
Радиус закругления 2px и делаем вот такое выделение.

После чего зажимаем Ctrl+Shift+I инвертируем выделение и жмем Delete


Теперь Ctrl+D снимаем выделение. Opacity слоя ставим 40%
Должно получится что-то подобное.. Слой (Рамка) можно открыть layer-visibility.gif

6. Для тех кто не запарился продолжаем.
Создаем новый слой create-a-new-layer.gif над слоем (Решетка)
Теперь нам нужно что-то написать берем инструмент Horizontal Type Tool horizontal-type.gif
цвет 17f000 пишем текст.

7. Добавим эффект стекала к рамке.
Создадим новый слой выше всех слоев назовем слой (Блик) выбираем инструмент Pen Tool pen.gif .
Цвет белый и нарисуем вот такую форму.

Растеризуем слой (Блик) Левый клик по слою Rasterize Layer
Добавим векторную маску Add Vector Mask add-a-layer-mask.gif
Выбираем инструмент Gradient Tool gradient.gif цвет от белого к черному.
Зальем нашу маску получится должно примерно так.

Разместим слой (Блик) под слой (Рамка)
Сольем слой рамка и блик, для этого отключим видимость layer-visibility.gif всех слоев кроме
двух верхних. Зажимаем Shift+Ctrl+E

Продублируем слой решетка и поместим его выше всех слоев Opacity слоя ставим 15%

8. Ну вот пришло время создать анимацию для этого нам нужно создать форму.
Создаем новый документ на прозрачном фоне размер 100х300.
Выбираем инструмент Rectangular Marquee Tool rectangular-marquee.gif радиус закругления 0.
Делаем выделение примерно по середине нашего документа.

Создадим новый слой create-a-new-layer.gif выбираем инструмент Gradient Tool gradient.gif настройки градиента см. рисунок.

Зальем paint-bucket.gif выделение следующим образом.

Ctrl+D снимаем выделение.

Дальше опять берем инструмент Rectangular Marquee Tool rectangular-marquee.gif
Делаем два выделения вверху и внизу заливаем paint-bucket.gif их черным цветом для этого нам
понадобится инструмент Paint Bucket Tool

Берем Pencil Tool pencil.gif цвет 7F000 толщина линии 1 рх зажимаем Shift
И проводим линию под зеленым цветом.
Сливаем все слой в один, зажимаем все те же Shift+Ctrl+E и назовем слой (Свечение)

Должно получится как на картинке.

9. Перетаскиваем слой свечение на наш аватар.
Размещаем слой таким образом чтобы (зеленая часть) была в верху.

Вот в таком порядке должны быть слои…

11. Дублируем слой (Свечение) левй клик по иконке слоя Duplicate layer
зажимаем Ctrl+T. После чего начинаем опускать наше свечение по оси Y на 5 pix
Повторно дублируем слой Duplicate layer свечение Ctrl+T и опускаем по Y на 5 pix
так до тех пор пока индикатор со свечением не пройдет по всему
аватару и не скроется за рамкой. У вас примерно получится 20 слоев со свечением.

Осталось совсем не много. .. rolleyes.gif

Отключаем видимость layer-visibility.gif всех слоев (Свечение) кроме первого
(слой который первый над текстом) Расположение слоев …

10. Открываем Windows –-->Animation
Начинаем добавлять кадры для этого делаем видимым слой (Свечение copy)
На панели анимации жмем Duplicate selected frames.

Продолжаем дальше, скрываем layer-visibility.gif
(Свечение copy) делаем видимым layer-visibility.gif слой (свечение copy 2) жмем Duplicate selected frames .
И так до тех пор пока не добавим все слои (свечение).
Теперь осталось проверить ест ли цикл у нашей анимации.

Для этого поставим галочку напротив опции (forever) непрерывно в цикле.

Нажимаем Plays Animation для того что бы посмотреть результат.

Итак осталось сохранить нашу анимацию для этого заходим.

File--->Save for Web&Devices

Автор: Dynamite

 
Награды: 36
Aston Дата: Среда, 03.02.2010, 10:59 | Сообщение # 2


Сообщений: 23
[ 0 ]
Offline
Слишком резко слово "DA" скрывается, ну т.е постепенно с затемнением было бы интереснее)
 
Награды: 0
Форум » WEB-мастеру » Уроки photoshop » Анимированный аватар в Photoshop
Страница 1 из 11
Поиск:

Этот сайт закрыт. Хотите пообщаться на форуме, тогда вам сюда: X-uCoz.ru
| Скрипты для uCoz | Шаблоны для uCoz | Графика для uCoz | Статьи | Бесплатно | Скачать | Кисти | Всё для uCoz |

При копировании материала с сайта, ссылка на FOREVER-web.ru обязательна!
Copyright
FOREVER-web © 2010 | Используются технологии uCoz | Карты сайта: Сайт / Форум