анимация в фотошоп
Итак, анимированные картинки.
Буду очень подробно и со скриншотами раскладывать все по полкам.
Предлагаю начать с аватара для жж.
Первой частью будет описано создание рисованного юпика.
Мне кажется, что правильнее начать именно с этого ибо так проще понять сам процесс анимации.
Опять же это ИМХО и профессионалов прошу либо промолчать, либо отправиться писать свой собственный пост.
А я продолжу для тех, кто про фотошоп знает только то, что это фотошоп.
Над первой частью поста я работала в Adobe Photoshop CS3 а вторую доделываю на работе в CS2.
(Это я к тому, что скрины будут разные)
Итак, загружаем саму программу.
Создаем новый документ.
File - New
В появившемся окне задаем размер изображения. Рекомендую 500х500 px (точек).
На мой взгляд, работать с таким размером намного проще, чем с более маленьким и при необходимости его всегда можно уменьшить.
Здесь же можно присвоить документу имя.
Я сразу выставляю Resolution. Но сделать это можно и при сохранении для web уже готовой анимации.
Resolution - кол-во точек на дюйм (dpi)
DPI - Dot Per Inch. Чем больше количество точек, тем больше можно увеличить изображение без потери качества. В полиграфии для печати кртинок принят стандарт в 300 точек. Нам для web нужно 72dpi.
Color mode - цветовая модель. RGB - (Red, Green, Blue) аддитивная цветовая модель.
Background Contents - цвет фона документа. Я оставляю белый.Сохраняем документ в удобное для вас место.Теперь придумываем, что мы хотим нарисовать. Мне в голову одновременно пришли скелет рыбы и нога зеленого человечка. Думаю, что остановлюсь на рыбе и буду рисовать ее кистью (brush tool)
С левой стороны экрана есть панель инструментов. Там и можно найти кисть
Если ваша панель инструментов отличается от моей не пугайтесь. Это все зависит от версии программы. Инструменты у нас с вами одинаковые.
Форму и диаметр кисти можно выбрать (инструмент должен быть активен)
Цвет кисти тоже можно выбрать ниже два раза щелкнув на одном из квадратиков на панели инструментов. (на скрине красный и белый. Верхний = активный).
Рисуем первый элемент (кадр) анимации. У меня голова скелета рыбы. Я поменяю красный цвет на черный и выберу плоскую кисть. Будет немного криво, так как я рисую не на графическом планшете, а мышкой
Вот что получается у меня:
Это будет первый кадр. Второй будет на новом слое.
Смотрим на экран и с правой стороны ищем палитру Layers. По молчанию она всегда справа. А если вы открыли фотошоп в первый раз, то она точно там :)
Если ее нет, то нужно зайти в меню Window и поставить галочку напротив Layers.
Или просто нажать F7, что быстрее и правильнее. В самой палитре пока только один слой - background.
Нам нужно сделать копию слоя.
Есть два пути: Долгий и корявый - нажать на слой правой кнопкой мыши и из развернувшегося списка выбрать duplicate layer.
Второй - нажать ctrl+J Получилось? Если да, то в палитре появился еще один слой - layer 1
Сейчас слой 1 активен (выделен)…что нам и нужно, т.к рисовать нам нужно именно на нем.
Я дорисую еще линию. Спинку-позвоночник.
У меня это выглядит так
Т.к. "слой 1" в палитре слоев самый верхний, то слоя "background" под ним не видно.
Если вдруг понадобится вернуться на какой-то из слоев для редактирования, нужно убрать "глаз"
(слева от слоя) у всех слоев которые расположены выше нужного слоя. Нужный слой выделить и редактировать.
Если вам не понравилось нарисованное, то отменить действие можно нажав ctrl+Z.
Но отменится только один шаг. Отменить несколько можно в палитре History. Она тоже должна быть с правой стороны. Если нет, то искать ее нужно там же где и Layers (window - history). Нажимая на одну из команд (например, «brash tool») вы возвращаетесь к этому действию и таким образом отменяете все действия, которые следовали за ним.
Теперь мне нужно дорисовать еще хвост рыбы, кости и хотя бы один глаз.
Я копирую (ctrl+J) слой «layer 1» на котором рисовала спинку и получаю слой «layer 1 copy». Рекомендую два раза клацнуть на названии слоя мышкой и переименовать его. Я дам ему имя «2». На нем я нарисую хвост рыбы. Теперь снова копирую этот слой («2») и получаю слой «2 copy». Переименовываю его в слой «3» и рисую на нем линию рядом с головой рыбы. Снова копирую слой, переименовываю и дорисовываю еще линию. И так далее пока послойно не нарисую весь рисунок.
Много раз копируя слои и дорисовывая на них разные фрагменты изображения я получила такой рисунок:
У меня получилось 10 слоев, но это не значит что у вас их должно быть столько же.
Если нарисовали все что хотели, то двигаемся дальше.
Еще раз идем в меню Window и ставим галочку напротив Animation.
Внизу экрана откроется палитра анимации. Пока еще на ней только один кадр.
(с этого места я работаю в версии CS2)
C правой стороны открывшегося окна есть маленькая стрелочка. Под красным крестиком - "закрыть окно".
Жмем на стрелочку.
и выбираем "make frames from layers"
таким образом мы из каждого слоя сделали отдельный кадр.
нажмите на любой кадр и посмотрите на палитру слоев (Layers). В палитре выделен тот слой, который виден на этом кадре (рядом с ним "глазик"), а остальные отключены.
Внизу палитры есть кнопочка "плэй". Нажмите и посмотрите устраивает ли вас "скорость" анимации.
Время задержки кадра можно изменить (черная стрелочка на самом кадре)
А once (под первым кадром) нужно изменить на forever, чтобы анимация "прокручивалась" постоянно.
На девять первых кадров я поставлю время 0.1 сек. А на последний 2 сек., чтобы полноценная рыба дольше задерживалась на экране.
В принципе все. осталось только подогнать размер для жж под 100px по длинной стороне (или 100х100 если изображение вписывается в квадрат)
В палитре инструментов (там где кисть) есть инструмент Crop tool. C его помощью можно кадрировать изображение. В палитре слоев выбираем самый верхний слой, кликаем мышкой в любом месте на рисунке (лучше кликать там где предполагается левый верхний угол аватара) и тянем мышкой рамку столько, сколько нужно. Я сделала так:
Если все нарвится - жмем enter.
Теперь идем в меню Image (наверху. там же где file и window)
выбираем image size. Поставьте галочку напротив Constrain Proportion и измените размер в px.
теперь сохраняем анимацию.
Меню File и Save for Web.
Сохраняем в формате gif в любое удобное место.
