ссылки на уроки рисования аниме

удачные ссылочки:

Уроки аниме - рисование глаз, ушей, носа

Как рисовать тело (манга и аниме - общие принципы)  хороший урок.

аниме, рисовать лицо, вид"три четверти"

пропорции лица на примере фотографии

пропорции лица

Пропорции лица у мультипликационных персонажей

еще  как рисовать лицо для анимашки. построение.

интересные уроки из и-нета

сюда буду скидывать находки, показавшиеся интересными, - те, что хочется когда-нить опробовать, или которые уже пригодились.
когда наберется много, рассортирую в разные сообщения

Загибающийся флеш-уголок для сайта.

От автора: "данный материал сложно назвать уроком в полном понимании этого слова. Скорее, здесь я хочу поделиться с Вами одной привлекательной вещицей, которая подойдет для любого сайта – это загибающийся уголок для сайта. Вполне вероятно, что Вы уже видели такую штуку в сети – это колышущийся уголок в правом верхнем углу сайта, который при наведении на него курсора загибается, открывая скрытую под ним картинку. Вещь довольно привлекательная и, что самое главное, прицепить ее на любой сайт не составит особого труда и не займет много времени – всего пару минут и уголок уже на сайте."

50 креативных портфолио сайтов.

От автора: "Создание своего личного портфолио сайта, возможно, одно из самых сложных заданий, которое вам придется делать. Вы сами себя критикуете и, что бы ни было сделано, вы всегда хотите это изменить и сделать еще лучше.

Для вдохновения взгляните на эти портфолио сайты. Они различные для разработчиков (для них, как правило, дизайны очень точные), для дизайнеров (красочные и яркие) и фотографов"

«Блог о веб-дизайне» - еще не смотрела.

Выбираем верный шрифт: практическое руководство по типографской разметке в Сети.

построение тени1 - удачный и простой урок о посторении тени, ее правильном расположении
построение тени2 - продолжение. тот же автор.


тени - василий пирогов. От автора: "цель этого урока показать тени, которые похожи на реальные, применимы для дизайна сайтов и которые не надо рисовать по 5 часов."

Создание градиентной маски расписано по пунктам + пример. и аналогичный урок 2012

След от MovieClip'а тающий след движущегося объекта.

Светящаяся фотография 

ADOBE FLASH покадровая анимация  frame by frame

                                          ADOBE FLASH

CS4- CS5

требуется

- нарисовать две ноги

- в каждом ключевом кадре одну из них перемещать в новое положение

- запустить проверить сохранить

пошагово

1. на временной шкале обозначен одн кадр с пустым кружочком.

когда на "сцене" появится рисунок, этот кружочек станет черным.

2.  для того, чтобы ноги не бежали слишком быстро, keyframes будем делать не в каждом, а в каждом пятом кадре:

   -  курсором щелкаем по кадру номер 5

   -  F6 - создание нового ключевого кадра 

   -  смещаем правую ногу в новое положение

     и т.д.

   - кадры на временной шкале можно выделять и копировать,

   и "приклеивать" в другое место

   - в нижней части временной шкалы есть иконка onion scin, нажав которую можно увидеть уже созданные кадры (см в предыдущем сообщении), это облегчит размещение новых

3.проверочный запуск Ctrl + Enter

ADOBE FLASH анимация - введение                                             ADOBE FLASH

CS4- CS5

во Флеше можно создать анимацию 4-ех видов:

Frame by Frame покадровая анимация: в каждом кадре происходит маленькое изменение;

Shape Tween анимация формы, плавное превращение одной фигуры в другую, промежуточные кадры программа просчитывает самостоятельно;

Motion Tween анимация движения - смещение объекта из одной точки в другую, причем нужно создать первый и последний кадры, промежуточные кадры программа просчитывает самостоятельно. можно задавать дополнительные параметры вращения, замедления\ускорения;

Classic Tween похоже на Motion Tween, но, так сказать, упрощенный вариант

анимация - изменение свойств объекта во времени.

общее для всех четырех видов анимации во Флеше:

временная шкала Timeline

слева layers - слои. их может быть много. желательно каждый анимированный объект размещать на отдельном слое. порядок слоев на временной шкале обычно соответствует порядку наложения объектов на "сцене".

на разных слоях могут параллельно находиться разные виды анимации

справа кадры.
Keyframe , ключевой кадр - это кадр, в котором мы задаем новые свойства (местоположение, цвет, размер...) объекта. он обозначается на шкале черной точкой.
для добавления ключевого кадра курсором щелкнуть по нужному кадру на шкале, после чего F6.
для добавления обычного кадра курсором щелкнуть по нужному кадру на шкале, после чего F5.
для удаления кадра то же + Shift

в нижней части временной шкалы есть иконка onion scin, нажав на которую можно увидеть уже созданные кадры.
сверху, там где расположена нумерация кадров, появляется область, выделенная серым и ограниченная двумя кружочками, которые можно перетягивать, увеличивая или уменьшая область видимых кадров.



для предварительного просмотра ролика Ctrl + Enter

для того, чтобы сохранить формат swf достаточно запустить Ctrl + Enter после того, как рабочий файл был сохранен обычным способом (File - Save as...) - файл swf автоматически будет сохранен в той же папке, что и рабочий

ADOBE FLASH еще не анимация                                                 ADOBE FLASH

CS4- CS5

Window - 
                Other Panels -
                                       History 
History - описание на адобовском сайте

Window - 
                Library

библиотека существует для хранения символов.

символ  - Graphic изображение, Button кнопка или Movie Clip фрагмент ролика.

символ может быть повторно использован, 

из него можно создать экземпляры символа, позволяющие использовать его , вариируя местоположение, цвет и т.д.

для того, чтобы созданное нами нечно поместить библиотеку, его нужно перетянуть, и в появившемся окошке задать тип и название. другой вариант - Modify - Convert to symbol или попросту F8

при импорте картинок (JPG,GIFF, PNG и др: Об импорте иллюстраций во Flash) в библиотеке тоже создаются символы. импортировать можно двумя способами:              

                                                  Import to Stage

                            File - Import -                                         

                                                  Import to Library

Import to Stage разместит все выбранные картинки на сцене одну под другой и создаст для каждой символ типа image

Import to Library создаст для всех выбранных картинок символ в библиотеке.

любой символ типа image может быть использован в качестве заливки. если имидж маленький, он, как паттерн, повторяет себя нужное количество раз. изменить, повернуть, увеличить-уменьшить его можно с помощью инструмента Gradient Transform.

превратить имидж в графический символ можно с помощью F8.

для того, чтобы изменить символ, следует щелкнуть по нему дважды  на сцене или в библиотеке, сделать все, что требовалось, и не забыть вернуться в нормальный режим. изменение символа повлечет за собой изменение всех его экземпляров, размещенных на сцене.

для каждого экземпляра символа типа Movie Clip можно задать instance name - имя экземпляра.

у экземпляров типа Movie Clip и Graphic можно менять color effects в окошке Properties: tint - оттенок , alpha - прозрачность, advanced - (типа, продвинутые настройки для крутых пацанов) все сразу.

Символы, экземпляры и ресурсы библиотеки

Работа с символами

Работа с экземплярами символов

Работа с библиотекой

Общий доступ к ресурсам библиотеки

Работа с символами-кнопками

Масштабирование и кэширование символов

Символы и ActionScript

Timeline временная шкала

пару слов об анимации

пустой кружок в первом кадре становится черным, когда кадр заполняется (мы создаем что-нибудь на сцене). 

   для того, чтобы создать изменения существующего положения объектов нужно поместить курсор в нужный (новый) кадр на временной шкале и создаем keyframe - ключевой кадр (с черным кружочком внутри) с помощью меню из правой кнопки мышки или F6. после чего в новом ключевом кадре производим (на сцене) требуемые изменения.

   для того, чтобы существующее на сцене положение просуществовало дольше по времени, можно добавить обычные (неключевые) кадры F5 или insert frame  из правого меню мышки. курсор размещается на том кадре, до которого  мы хотим оставить нынешнее положение неизменным.

   для выделения нескольких кадров нужно щелкнуть черной стрелочкой вне временной шкалы, выделить их с шифтом или протянув по ним курсором. выделенные кадры можно перетягивать по временной шкале, из слоя в слой, копировать перетягиванием + Alt.

   для того, чтобы удалить некоторое количество кадров, нужно выделить их и нажать Shift + F5.

   для удаления одного из ключевых кадров Shift + F6.

   ключевые кадры всегда обозначены черной точкой, в последнем кадре есть пустой прямоугольничек.

   можно копировать, вырезать кадры и даже менять их направление - reverse frames.

   если нажать на цветной квадратик на одном из слоев, на сцене мы увидим контуры того же цвета, что и квадратик, тех фигур и объектов, которые принадлежат этому слою.

   в нижней части временной шкалы имеются кнопочки:

onion skin (луковая кожа) , дает эффект стеклянного стола с подсветкой :позволяет видеть очертания фигур из прошлых кадров. можно увеличить или уменьшить количество видемых кадров на верху временной шкалы).

   edit multiple frames кажется,позволяет редактировать кадры, перетягивать содержимое. надо будет проверить.

ADOBE FLASH инструменты, текст, цвет                                              ADOBE FLASH

CS4- CS5

это будет не слишком подробно, ибо местами похоже на иллюстратор и фотошоп. в первую очередь сосредоточусь именно на различиях. на случай потребности в более подробном описании инструментов, свойств и т.д. оставлю несколько удобных ссылочек. да и погуглив можно найти массу уроков, объяснений и проч.

Window -  
                  Properties (свойства)

  во Флеше одно из важнейших окошек:
если "сцена" пуста или нет выделенных объектов, - это окно настроек самой сцены: при нажатии на кнопку Edit можно менять размер, цвет, в каких единицах измерения будут вспомогательные линейки (Rulers) и количество кадров в секунду.
 когда выбран какой-либо инструмент, большая часть настроек появится здесь же. забавно, что у части инструментов (н-р кисть, резинка и др) некоторые настройки обнаруживаются в нижней части левой линейки инструментов. вероятно, в этом есть какой-то пока недоступный мне сакральный смысл.
вообще, по чему ни щелкнешь курсором,
настройки того и следует искать в этом окне.

немного об инструментах:

при использовании многих инструментов рисования, в нижней части линейки инструментов появляется кнопочка Object Drawing - рисование объектов (в адобовских хелпах), если ее нажать, созданные фигуры будут цельными, а в 
верхней части окошка Properties появится надпись Drawing object.
 Drawing object всегда рисуется поверх  сложных форм

если кнопочку оставить ненажатой, нарисованная фигура\ форма не будет цельной (как рисовать прямоугольник):
один щелчек на заливку выделит только заливку;
один щелчек на контур выделит контур - или его часть (как унижнего левого квадрата. выделенную часть контура я перекрасила в оранжевый цвет для наглядности). для того, чтобы выделить весь контур, нужно щелкнуть по нему черной стрелочкой дважды.
для того, чтобы выделить всю фигуру, и контур, и заливку, нужно щелкнуть дважды по заливке.
для того, чтобы выделить часть фигуры (средний квадрат в верхней строке), достаточно  черной стрелочкой перетянуть по диагонали будущего выделенного участка или, если хочется более сложную фигуру выделить, нужен инструмент Lasso. с его помощью можно нарисовать от руки фигуру или выбрать в нижней части линейки инструментов другие настройки (вернее, замену) лассо, знакомые по фотошопу. 
две фигуры одного цвета объединаются в одну, если у них имеется общая площадь.
если фигуры разного цвета, вехняя "съест" находящийся под ней участок нижней, как в случае с правым нижнем квадратом и оранжевым кругом на рисунке выше.

кроме того, сложные фигуры можно деформировать: если подвести курсор к невыделенной фигуре, около него появится дуга. в этом положении, нажав на левую кнопку мышки, можно подтолкнуть\перетянуть участок контура вместе с заливкой. если все это проделать, нажав Alt, вместо дуги получим угол

Rectangle Primitive отличается от обычного тем, что настройки закругления углов в окне Properties можно менять и после того, как фигура нарисована.

Oval Tool

Oval Tool можно отстроить в окошке Properties до начала рисования фигуры довольно разнообразными способами.
Oval Primitive, как и Rectangle Primitiveможно настраивать после того, как фигура нарисована.
PolyStar Tool ,как ясно из названия, создает звезды и полигоны. настройки как обычно.


Brush - кисть рисует заливкой, не контуром. настройки толщины и формы кисти в нижней части панели инструментов. кроме того, там есть хитрые настройки, позволяющие рисовать над, под и даже вместо имеющейся фигуры
Pencil - рисует обводку, контур

в нижней части панели инструментов отстраивается "гладкость" линии"
straighten - выпрямляет
smooth - сглаживает
ink (чертить тушью) - дает наиболее близкий к оригиналу результат.

Free Transform Tool - трансформация фигур
Gradient Transform Tool - изменение градиентной или паттерной (каттинка, фот.) заливки

Paint Bucket Tool - создает заливку или меняет ее цвет
Ink Bottle Tool - создает обводку или меняет его цвет

Eraser Tool - ластик, стирательная резинка. его настройки тоже в нижней части линейки инструментов верхняя иконка на выбор позволяет стирать внутри, снаружи, сверху и фиг знает где еще, средняя - краник - стирает по  цветам, нижняя - выбор формы и размера ластика

Text Tool - все настройки, как обычно, в окошке Properties (свойства)

пока что нам рассказали, что в режиме Classic Text есть под-режимы: static text - "вживляется": после окончания работы с ним в дальнейшем перестает быть текстом, а значит не меняется, вне зависимости от того, есть ли на компе клиента данный шрифт, или нет, но! его нельзя использовать в коде (не уверена, что такое изложение ситуации корректно, но так нам рассказали на уроке, а мне вникать сейчас немного недосуг)

dinamic text - просто текст. изменится, если у клиента не окажется нужного шрифта, может быть использован при программировании

input text - для ввода данных.

в подробности можно вникнуть на адобовском сайте:

Текст

О тексте и шрифтах

Создание текста

Настройка атрибутов текста

О многоязычном тексте

Создание многоязычного текста

Формат XML-файла для многоязычного текста

Многоязычный текст и ActionScript

Window - Color

      

менять цвета, градиент, всяческие заливки. при щелчке по одному из прямоугольничков с цветом разворачивается окошко с набором  цветов
под ведерком маленький черный квадратик, наложенный на маленький белый - дают черно белую вариацию;
белый квадрат с красной диагональю - убирает цвет выделенной фигуры\заливки\обводки
ну и следующий значек меняет местами цвета заливки и обводки.