(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Уроки Photoshop: Как рисовать анимированные смайлики, компьютерная анимация

Источник: demiart

Как рисовать анимированные смайлики в Photoshop? Ответ здесь! Часть 1-создание общего рисунка.

Шаг 1.
Создайте новый файл:50 на 50 px,с RGB Colour и прозрачным задним слоем. Назовите слой Outline(Внешняя обводка).
Выберите цвет #565656(Убедитесь,что у вас есть этот серый цвет).
Приблизьте картинку на 1600%. Возьмите Pencil tool(cool.gif размером 1px и сделайте горизонтальную линию длиной 5px. Далее опуститесь вниз и сдвиньтесь на 1px вправо. Нарисуйте линию длиной 2px. Сделайте всё,как показано на рисунке:
Как рисовать анимированные смайлики *

Шаг 2.
Создайте новый слой.Назовите его Fill(заполнение). Сейчас мы должны приступить к окрашиванию.
Возьмите цвет #A1A1A1 и закрасьте им те точки,которые показаны на рисунке:
Как рисовать анимированные смайлики *

Далее возьмите цвет #AEAEAE и повторите тоже самое:
Как рисовать анимированные смайлики *

Потом по очереди #C2C2C2:
Как рисовать анимированные смайлики *

#D2D2D2:
Как рисовать анимированные смайлики *

#D8D8D8:
Как рисовать анимированные смайлики *

#DEDEDE:
Как рисовать анимированные смайлики *

#E7E7E7:
Как рисовать анимированные смайлики *

#F0F0F0:
Как рисовать анимированные смайлики *

Шаг 3.
Создайте новый слой и назовите его Left hand(левая рука).Это для нас она левая,потому что смотрим на спереди,а для рисунка она правая(Прим.переводчика).
Возьмите цвет #565656 и нарисуйте им горизонтальную линию размером 2px.Проделайте всё так,как показано на рисунке:
Как рисовать анимированные смайлики *

На том же самом слое закрасьте верхний левый угол цветом #E7E7E7. Затем #D2D2D2 для верхнего правого угла и нижнего левого. Цвет #AEAEAE для нижнего правого угла:
Как рисовать анимированные смайлики *

Продублируйте слой Left hand и назовите его Right hand(Правая рука). Используйте Move Tool(V) и переместите слой на правую сторону:
Как рисовать анимированные смайлики *

Объедините слои Outline и Fill. Назовите новый слой Body(Тело):
Как рисовать анимированные смайлики *

Шаг 5.
Создайте слой-папку exp​ressions(Выражения лица). Для нашего рисунка существует два выражения лица:открытые глаза и закрытые глаза(мигающие).
Создайте в папке слой Open eyes(Открытые глаза) и на этом фоне цветом #565656 нарисуйте глаза,как показано на рисунке(3px в высоту и 2px между глазами):
Как рисовать анимированные смайлики *

В этой же папке создайте слой Closed eyes(Закрытые глаза). Спрячьте слой Open eyes и нарисуйте цветом #565656 горизонтальную линию размером 6px:
Как рисовать анимированные смайлики *

Шаг 6.
Если вы хотите поменять цвет,то зайдите в Layer > New Adjustment Layer > Hue/Saturation (Ctrl, U). Пометьте Colorize и поменяйте Hue and Saturation. Сохраните:
Как рисовать анимированные смайлики *

Далее проделайте тоже самое с другими слоями,нажимая на кнопку Load:
Как рисовать анимированные смайлики *

Часть 2-анимация.

Шаг 7.
Переходите в Adobe Image Ready (Ctrl, Shift, M).

Шаг 8.
Если вы хотите сделать нормальную анимацию,скажем просто движение руки,добавляйте по 1px всё время:
Как рисовать анимированные смайлики *

Тоже самое можно сделать с глазами,телом и т.д.
Если хотите быстрее,добавляйте больше,чем 1px.

Шаг 9.
Убедитесь,что вы сделали нашему смайлу мигающие глаза.Для этого нужно сначала сделать видимым слой Open eyes,а потом Closed eyes.Должно получиться что-то такое:
Как рисовать анимированные смайлики *

Шаг 10.
Чтобы заставить наш смайл двигаться,не надо делать его просто скользящим:это выглядит некрасиво.
Заставьте смайл "прыгать" вверх на 1px.Пусть в то же время он двигается вперёд на 1px.
Продолжайте до того,пока не захотите его остановить:
Как рисовать анимированные смайлики *

Шаг 11.
Вскоре вы поймёте,что сможете сделать своего смайла со своими собственными эмоциями и действиями. Например(вот что получилось у автора):
Как рисовать анимированные смайлики *

Другие примеры:
Как рисовать анимированные смайлики *Как рисовать анимированные смайлики *Как рисовать анимированные смайлики *Как рисовать анимированные смайлики *

Ссылки по теме


 Распечатать »
 Правила публикации »
  Обсудить материал в конференции Дизайн, графика, обработка изображений »
Написать редактору 
 Рекомендовать » Дата публикации: 18.01.2010 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Подписка на 1 год. Для владельцев версии CS3 или более поздней. Adobe Creative Cloud for teams ALL Multiple Platforms Multi European Languages Licensing Subscription Migration Seat (CS3 and later)
Пакет программ Adobe Photoshop Elements 12 и Adobe Premiere Elements 12 предоставляет пользователю набор высококлассных инструментов и расширенные настройки для редактирования и улучшения качества фотографий и видеофильмов. Adobe Photoshop Elements 12 и Adobe Premiere Elements 12 Windows Russian AOO License TLP (1 - 9,999)
Adobe Media Server 5 Standard (ранее Adobe Flash Media Streaming Server) поддерживает защищенную и масштабируемую потоковую передачу медиаконтента в режиме реального времени и по запросу... Adobe Media Svr Std 5 All Platforms International English AOO License TLP Level 1 (1+)
Adobe Media Server Pro 5 (ранее Adobe Flash Media Interactive Server) поддерживает защищенную и масштабируемую потоковую передачу медиаконтента в режиме реального времени и по запросу, а также многоканальные средства связи с поддержкой реального времени. Adobe Media Svr Pro 5 All Platforms International English AOO License TLP Level 1 (1+)
Adobe Flash Builder 4.5 Premium — это средство разработки на базе Eclipse для быстрого создания динамичных мобильных, настольных и веб-приложений с использованием ActionScript и открытой среды Flex. Кроме того, программа включает профессиональные ... Adobe Flash Builder Premium for PHP 4.5 Multiple Platforms International English AOO License TLP (1 - 9,999)
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
3D принтер ProJet 1500 – персональный принтер, использующий технологию FTI, также как V-flash. Он также применяет пластик в качестве модельного материала. Его главное отличие от V-flash – работает материалами шести цветов, что позволяет получать... 3D принтер ProJet 1500
Новый PICASO 3D Designer 1.2. PICASO 3D Designer (Черный)
Купить Picaso 3D Builder - первый российский доступный 3D принтер для работы в офисе, дома, на производстве, в школе и в творческих мастерских! Picaso 3D Builder
CubeX Duo - имеет 2 печатающие головки, в отличие от CubeX, что позволяет одновременно печатать двумя цветами, но при этом снизилась область построения (230 × 265 × 240 мм). CubeX Duo
3D ручка Myriwell создана для того, чтобы создавать 3D объекты путем расплавления ABS пластика, 3D ручка проста в использовании и дешева в эксплуатации. Этот продукт должен быть интересен художникам, дизайнерам, энтузиастам, школьникам и студентам. 3D ручка Myriwell, голубая
 
Другие предложения...
 
Книжный магазин   WWW.ITSHOP.RU
Трудно представить себе современный интернетовский ресурс, полностью лишенный графики. Даже строгая минималистская парадигма создания страниц и сайтов допускает средства навигации и декоративное оформление в графическом исполнении. Время снимает... Photoshop для Web-дизайна
Настоящая работа вводит понятия общей теории имитационного моделирования и предназначена, прежде всего, для специалистов широкого спектра отраслей хозяйства, не являющихся программистами или математиками, но желающих применить самую современную... Имитационное моделирование. Учебное пособие
В учебном пособии рассматриваются основы объектно-ориентированного подхода и простейшие примеры создания приложений с графическим интерфейсом (GUI) в среде визуального программирования Visual C++; приведен обзор наиболее часто используемых... Языки и методы программирования. Создание простых GUI-приложений с помощью Visual С++
Это первое практическое руководство по созданию приложений для Windows 8 охватывает весь жизненный цикл: от разработки шаблона проекта до публикации в Windows Store. Автор книги Джереми Ликнесс, ведущий специалист компании Microsoft, поможет... Приложения для Windows 8 на C# и XAML
Сделать идеальный снимок практически невозможно, но его совсем не трудно поправить впоследствии, если знать, как это делается. Из этой книги вы узнаете, как творить с изображениями буквально чудеса средствами Photoshop CS6: от сглаживания морщин и... Photoshop CS6 для "чайников"
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Adobe Photoshop: алхимия дизайна
Утиль - лучший бесплатный софт для Windows
Corel DRAW - от идеи до реализации
Компьютерные книги. Рецензии и отзывы
 
Рассылки Maillist.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Adobe Photoshop - уроки для каждого
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Как извлечь рисунки из файла Word (24)
Вообще-то есть еще способ - сделать в Word-е Copy рисунка, открыть Microsoft Photo Editor и там:...
 
Corel. Сохранение файла в старом формате. (20)
у меня есть горящий вопрос по Корелу и никто мне не может дать на него ответ. Я работаю в...
 
Уроки CorelDraw: Визитная карточка (3)
Подскажите пожалуйста, как правильно вставить уже готовую визитную карточку (созданную в Corel...
 
Как заказчики обманывают наивных художников и дизайнеров (2)
Ни один уважающий себя деловой человек не будет бесплатно раздавать свою работу и тратить время...
 
Уроки CorelDraw: Растительный орнамент., Рисуем модные узоры (3)
Здравствуй, автор, у меня возникла проблема на этапе "Придадим форму основе орнамента, применив...
 
 
 



    
rambler's top100 Rambler's Top100