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

From Synfig Studio :: Documentation
Jump to: navigation, search
(Screenshots added)
m (Text replace - '{{l|Category:' to '{{Category|')
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<!--Categories-->
+
<!-- Page info -->
[[Category:Учебники]]
+
{{Title|Работа со слоями}}
 +
{{Category|Manual}}
 +
{{Category|Tutorials}}
 +
<!-- Page info end -->
  
 
== Введение ==
 
== Введение ==
  
  
В [[Основы анимации|предыдущем уроке]] мы сделали первую анимацию, изменяя такие атрибуты стандартного объекта, как положение, цвет, размер. Тем не менее, этих простых изменений зачастую недостаточно для того, чтобы создавать анимацию сложных объектов и пресонажей. Для этих целей в Synfig'e используются [[Слой|слои]]. Они чем-то похожи на те слои, с которыми вы, возможно, имели дело в других графических программах типа [http://www.gimp.org/ GIMP].
+
В {{l|Animation Basics.ru|предыдущем уроке}} мы сделали первую анимацию, изменяя такие атрибуты стандартного объекта, как положение, цвет, размер. Тем не менее, этих простых изменений зачастую недостаточно для того, чтобы создавать анимацию сложных объектов и пресонажей. Для этих целей в Synfig'e используются {{l|Layers.ru|слои}}. Они чем-то похожи на те слои, с которыми вы, возможно, имели дело в других графических программах типа [http://www.gimp.org/ GIMP].
  
 
{|
 
{|
 
|
 
|
Тем не менее, слои в Synfig'е отличается от обычных слоёв тем, что:
+
Тем не менее, слои в Synfig'е отличаются от обычных слоёв тем, что:
 
# слои могут быть организованы в иерархическую структуру;
 
# слои могут быть организованы в иерархическую структуру;
 
# слои могут изменять поведение (или вид) слоёв, лежащих ниже.
 
# слои могут изменять поведение (или вид) слоёв, лежащих ниже.
  
  
Работает это всё достаточно просто. Давайте посмотрим на простом примере.
+
Работает это всё достаточно просто. Давайте посмотрим на несложном примере.
  
 
# Создайте файл. Не заморачивайтесь с его длинной, пусть она будет нулевая - сейчас это абсолютно не важно.
 
# Создайте файл. Не заморачивайтесь с его длинной, пусть она будет нулевая - сейчас это абсолютно не важно.
# Нарисуйте произвольный [[Инструмент прямоугольник|прямоугольник]] с помощью соответствующего инструмента.
+
# Нарисуйте произвольный {{l|Rectangle Tool.ru|прямоугольник}} с помощью соответствующего инструмента.
 
|| ||
 
|| ||
[[Image:Rectangle-tool-on-panel.jpg]]
+
{{l|Image:Rectangle-tool-on-panel.jpg}}
 
|}
 
|}
  
  
[[Image:Adding-layers-tutorial-0.jpg]]
+
{{l|Image:Adding-layers-tutorial-0.jpg}}
  
 
== Комбинирование слоёв ==
 
== Комбинирование слоёв ==
  
Теперь необходимо сделать две вещи. Во-первых, выберите [[Инструмент градиент]] (Gradient) на [[Панель инструментов|панели инструментов]] (Toolbox), щёлкните левой кнопкой на рабочей области и не, отпуская кнопку, переместите мышь на некоторое расстояние. Затем отпустите кнопку. На экране появится переход от одного цвета к другому, а на [[Панель слоёв|панели слоёв]] (Layer Dialog) он будет виден как новый слой под названием "Gradient". Чтобы изменить градиент, щёлкните на этот слой и с помощью [[Инструмент перемещения|инструмента перемещения]] (Normal Tool) измените положение его [[уТочка|уТочек]].
+
Теперь необходимо сделать две вещи. Во-первых, выберите {{l|Gradient Tool.ru|инструмент градиент}} (Gradient) на {{l|Toolbox.ru|панели инструментов}} (Toolbox), щёлкните левой кнопкой на рабочей области и не, отпуская кнопку, переместите мышь на некоторое расстояние. Затем отпустите кнопку. На экране появится переход от одного цвета к другому, а на {{l|Layers Panel.ru|панели слоёв}} (Layer Panel) он будет виден как новый слой под названием "Gradient". Чтобы изменить градиент, щёлкните на этот слой и с помощью {{l|Normal Tool.ru|инструмента преобразования}} (Normal Tool) измените положение его {{l|Duck.ru|уТочек}}.
  
[[Image:Adding-layers-tutorial-1.jpg]]
+
{{l|Image:Adding-layers-tutorial-1.jpg}}
  
 
Теперь у нас есть градиент, но что-то здесь не то - он занимает весь экран, а мы хотим, чтобы он был внутри нашей фигуры - прямоугольника. Ща мы всё исправим.
 
Теперь у нас есть градиент, но что-то здесь не то - он занимает весь экран, а мы хотим, чтобы он был внутри нашей фигуры - прямоугольника. Ща мы всё исправим.
  
Выделите слой градиента и слой прямоугольника на [[Панель слоёв|панели слоёв]].
+
Выделите слой градиента и слой прямоугольника на {{l|Layers Panel.ru|панели слоёв}}.
Затем щёлкните правой кнопкой мыши на них и выберите пункт "Encapsulate" (Изолировать). Вместо наших двух слоёв появится один слой под названием "[[Объединяющий слой|Inline Canvas]]" с треугольничком сбоку.
+
Затем щёлкните правой кнопкой мыши на них и выберите пункт "Encapsulate" (Изолировать). Вместо наших двух слоёв появится один слой под названием "{{l|Inline Canvas.ru|Inline Canvas}}" (Объединяющий слой) с треугольничком сбоку.
  
 
Вы можете обращаться с этим слоем точно также, как и с любым другим - перемещать, копировать, и т. д. Щёлкнув на треугольничке рядом с его значком вы можете получить доступ к его содержимому - слою градиента и слою с прямоугольником.
 
Вы можете обращаться с этим слоем точно также, как и с любым другим - перемещать, копировать, и т. д. Щёлкнув на треугольничке рядом с его значком вы можете получить доступ к его содержимому - слою градиента и слою с прямоугольником.
  
Если хотите изменить имя объединяющего слоя на что-то более информативное, просто выделите его на [[Панель слоёв|панели слоёв]] и щёлкните на его названии. Вы можете переименовывать таким образом ЛЮБОЙ слой, что вам настоятельно рекомендую.
+
Если хотите изменить имя объединяющего слоя на что-то более информативное, просто выделите его на {{l|Layers Panel.ru|панели слоёв}} и щёлкните на его названии. Вы можете переименовывать таким образом ЛЮБОЙ слой, что вам настоятельно рекомендую.
  
 
== Использование изоляции ==
 
== Использование изоляции ==
  
[[Image:Adding-layers-tutorial-2.jpg]]
+
{{l|Image:Adding-layers-tutorial-2.jpg}}
  
Тем не менее, проблема так и осталась - градиент всё ещё покрывает весь рисунок, а не ограничен прямоугольником. Без паники, просто выделяем слой градиента на [[Панель слоёв|панели слоёв]] и ищем на [Панель свойств|панели свойств] (Params) параметр под названием "Blend Method" ([[Метод смешивания]]). Дважды щёлкните на слове [[Метод смешивания#Composite|Composite]] напротив названия параметра и из раскрывшегося списка выберите пункт [[Метод смешивания#Onto|Onto]] (Наложение).
+
Тем не менее, проблема так и осталась - градиент всё ещё покрывает весь рисунок, а не ограничен прямоугольником. Без паники, просто выделяем слой градиента на {{l|Layers Panel.ru|панели слоёв}} и ищем на {{l|Params Panel.ru|панели свойств}} (Params) параметр под названием "Blend Method" ({{l|Blend Method.ru|метод смешивания}}). Дважды щёлкните на слове {{l|Blend Method.ru#Composite|Composite}} напротив названия параметра и из раскрывшегося списка выберите пункт {{l|Blend Method.ru#Onto|Onto}} (Наложение).
  
[[Image:Adding-layers-tutorial-3.jpg]]
+
{{l|Image:Adding-layers-tutorial-3.jpg}}
  
 
Теперь градиент будет отображаться только в пределах прямоугольника. Мои поздравления! Вы только что создали свои первые взаимодействующие слои.
 
Теперь градиент будет отображаться только в пределах прямоугольника. Мои поздравления! Вы только что создали свои первые взаимодействующие слои.
  
[[Image:Adding-layers-tutorial-4.jpg]]
+
{{l|Image:Adding-layers-tutorial-4.jpg}}
  
= Непереведённая часть =
+
Использование изоляции слоёв для структурирования рисунка значительно упрощает работу с Synfig Studio. Но многие другие программы позволяют делать то же самое.  Только что продемонстрированная концепция ограничения влияния одного слоя на другие ставит Synfig отдельно от программ, позволяющих упорядочивать слои просто в виде иерархической структуры.
  
If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of scope as just demonstrated sets Synfig apart from other programs with layer hierarchies.
+
Итак, слой может изменять отображение лишь тех слоёв, которые находятся непосредственно под ним. Другими словами, если вы положите {{l|Blur Layer.ru|слой размывания}} (Blur Layer) внутрь {{l|Inline Canvas.ru|объединяющего слоя}} (Inline Canvas), который мы только что создали, то он будет размывать только слои, находящиеся непосредственно под ним. Любые слои, находящиеся за пределами {{l|Inline Canvas.ru|объединяющего слоя}} не будут размыты!
  
However, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a [[Blur Layer]] on top of the layers inside the [[Paste Canvas|inline canvas]] we just created, it would just blur them -- anything under the inline canvas would not be blurred!
+
Давайте проверим это. Создайте пару красных {{l|Circle Tool.ru|окружностей}} так, чтобы они пересекались с {{l|Inline Canvas.ru|объединяющим слоем}}. Затем на {{l|Layers Panel.ru|панели слоёв}} перетащите {{l|Inline Canvas.ru|объединяющий слой}} на самый верх стопки слоёв, чтобы он был поверх окружностей.
  
Let's try it. Add a few circles under the inline canvas we just created. Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Outline" layer). This is where we want to insert the blur. Right click on the selected layer and a popup menu will appear. The first item in that popup is "New Layer". Inside of the "New Layer" menu, you'll see several categories of layers you could create, but what we want is a blur, so goto the Blur category and select the "Blur" layer. (so that would be "New Layer->[[Blur Layer Category|Blurs]]->[[Blur Layer|Blur]]")
+
{{l|Image:Adding-layers-tutorial-5.jpg}}
  
Well, it blurred... but something is not quite right--the inside edge of the outline is now all soft, but it still kinda looks like there is a hard edge on the outside. It is doing this because the blend method of the blur defaulted to "[[Blend Method#Composite|Composite]]" (you can change the [[New Layer Defaults#Default Blend Method|default blend method]] for new layers from the [[New Layer Defaults]] section of the [[Toolbox]]). What we want is a blend method of "[[Blend Method#Straight|Straight]]". Just select the blur layer, and change the [[Blend Method]] to "[[Blend Method#Straight|Straight]]" in the [[Params Dialog]].  
+
Теперь раскройте слой "{{l|Inline Canvas.ru|Inline Canvas}}" и выберите самый верхний слой внутри него (это должен быть слой "Gradient"). Создайте ещё одну окружность чёрного цвета так, как показано на рисунке. Она будет создана поверх слоя "Gradient".
  
(NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this)
+
{{l|Image:Adding-layers-tutorial-6.jpg}} {{l|Image:Adding-layers-tutorial-7.jpg}}
  
Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!
+
На {{l|Layers Panel.ru|панели слоёв}} щёлкните на только что созданном слое с окружностью правой кнопкой и выберите из появившегося меню пункт "New Layer" ("Новый слой"). Раскроется подменю, внутри которого вы увидите список различных категорий слоёв, которые вы можете создавать. Нам нужно размытие, поэтому выберите категорию "Blurs", и затем внутри неё пункт "Blur". (Таким образом, вы выбрали команду "New Layer -> Blurs -> Blur".)
  
== Digging further... ==
+
{{l|Image:Adding-layers-tutorial-8.jpg}}
  
If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '[[Transform Layers Category|Transform]] > [[Rotate Layer|Rotate]]' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the [[Animation Basics|previous animation tutorial]], you can change them to be different on certain [[Keyframes|keyframes]]. Synfig will take care of interpolating the steps in between.
+
Ну что-ж, размытие получилось... но что-то опять не так – внешний край размытого слоя по прежнему чёткий, несмотря на то что внутри всё размыто. Это всё потому, что {{l|Blend Method.ru|метод смешивания}} (Blend Method) по-умолчанию для слоёв установлен в значение {{l|Blend Method.ru#Composite|Composite}}. Чтобы всё было нормально, нам нужно изменить {{l|Blend Method.ru|метод смешивания}} на {{l|Blend Method.ru#Straight|Straight}}. Для этого просто выделите только что созданный {{l|Blur Layer.ru|слой размывания}} и на {{l|Params Panel.ru|панели свойств}} измените параметр "Blend Method" на {{l|Blend Method.ru#Straight|Straight}}.
  
For example, you could create a [[Star Layer|star]] from the [[Layer Menu]], add a [[Rotate Layer]]. Combine this with the lesson learned in the [[Animation Basics|last tutorial]] and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.
+
: Замечание: Вы можете изменить {{l|Blend Method.ru|метод смешивания}}, устанавливаемый по-умолчанию для новых слоёв с помощью секции {{l|New Layer Defaults.ru|параметры нового слоя}} (New Layer Defaults) на {{l|Toolbox.ru|панели инструментов}}. Возможно, в будущих версиях программы способ задания {{l|Blend Method.ru|метода смешивания}} для новых слоёв будет изменён.
 +
 
 +
{{l|Image:Adding-layers-tutorial-9.jpg}} {{l|Image:Adding-layers-tutorial-10.jpg}}
 +
 
 +
Отлично, теперь всё содержимое {{l|Inline Canvas.ru|объединяющего слоя}} "Inline Canvas" размыто, но то что под ним – нет.
 +
 
 +
== Продолжение банкета... ==
 +
 
 +
Если вы не поленитесь исследовать подпункт главного меню "Layer -> New Layer" ("Слой -> Новый слой"), вы обнаружите множество различных видов слоёв. Некоторые из них достаточно необычны, например "Transform -> {{l|Rotate Layer.ru|Rotate}}" ("Преобразование -> Вращение"). Подобные слои вы можете использовать для добавления новых атрибутов объектам. И точно так же, как и все прочие параметры объекта, эти новые атрибуты могут быть {{l|Animation Basics.ru|анимированы}}.
 +
 
 +
Например, вы можете {{l|Creating Shapes.ru|нарисовать произвольную фигуру}} и добавить поверх неё {{l|Rotate Layer.ru|слой вращения}}. Изменяя его параметры, вы можете создать анимацию вращения фигуры. Этот принцип лежит в основе {{l|Cut-out Animation.ru|создания особого типа анимации – перекладки}}.

Latest revision as of 18:14, 13 January 2010

Languages Language: 

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆)‎

Warning!

This page contains outdated information.

The release of Synfig Studio 0.64.0 introduced new terminology and this translated page needs to be updated according to original English text.

You can help updating this page - see instructions here. Thank you!

warning end


Введение

В предыдущем уроке мы сделали первую анимацию, изменяя такие атрибуты стандартного объекта, как положение, цвет, размер. Тем не менее, этих простых изменений зачастую недостаточно для того, чтобы создавать анимацию сложных объектов и пресонажей. Для этих целей в Synfig'e используются слои. Они чем-то похожи на те слои, с которыми вы, возможно, имели дело в других графических программах типа GIMP.

Тем не менее, слои в Synfig'е отличаются от обычных слоёв тем, что:

  1. слои могут быть организованы в иерархическую структуру;
  2. слои могут изменять поведение (или вид) слоёв, лежащих ниже.


Работает это всё достаточно просто. Давайте посмотрим на несложном примере.

  1. Создайте файл. Не заморачивайтесь с его длинной, пусть она будет нулевая - сейчас это абсолютно не важно.
  2. Нарисуйте произвольный прямоугольник с помощью соответствующего инструмента.

Image:Rectangle-tool-on-panel.jpg


Image:Adding-layers-tutorial-0.jpg

Комбинирование слоёв

Теперь необходимо сделать две вещи. Во-первых, выберите инструмент градиент (Gradient) на панели инструментов (Toolbox), щёлкните левой кнопкой на рабочей области и не, отпуская кнопку, переместите мышь на некоторое расстояние. Затем отпустите кнопку. На экране появится переход от одного цвета к другому, а на панели слоёв (Layer Panel) он будет виден как новый слой под названием "Gradient". Чтобы изменить градиент, щёлкните на этот слой и с помощью инструмента преобразования (Normal Tool) измените положение его уТочек.

Image:Adding-layers-tutorial-1.jpg

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

Выделите слой градиента и слой прямоугольника на панели слоёв. Затем щёлкните правой кнопкой мыши на них и выберите пункт "Encapsulate" (Изолировать). Вместо наших двух слоёв появится один слой под названием "Inline Canvas" (Объединяющий слой) с треугольничком сбоку.

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

Если хотите изменить имя объединяющего слоя на что-то более информативное, просто выделите его на панели слоёв и щёлкните на его названии. Вы можете переименовывать таким образом ЛЮБОЙ слой, что вам настоятельно рекомендую.

Использование изоляции

Image:Adding-layers-tutorial-2.jpg

Тем не менее, проблема так и осталась - градиент всё ещё покрывает весь рисунок, а не ограничен прямоугольником. Без паники, просто выделяем слой градиента на панели слоёв и ищем на панели свойств (Params) параметр под названием "Blend Method" (метод смешивания). Дважды щёлкните на слове Composite напротив названия параметра и из раскрывшегося списка выберите пункт Onto (Наложение).

Image:Adding-layers-tutorial-3.jpg

Теперь градиент будет отображаться только в пределах прямоугольника. Мои поздравления! Вы только что создали свои первые взаимодействующие слои.

Image:Adding-layers-tutorial-4.jpg

Использование изоляции слоёв для структурирования рисунка значительно упрощает работу с Synfig Studio. Но многие другие программы позволяют делать то же самое. Только что продемонстрированная концепция ограничения влияния одного слоя на другие ставит Synfig отдельно от программ, позволяющих упорядочивать слои просто в виде иерархической структуры.

Итак, слой может изменять отображение лишь тех слоёв, которые находятся непосредственно под ним. Другими словами, если вы положите слой размывания (Blur Layer) внутрь объединяющего слоя (Inline Canvas), который мы только что создали, то он будет размывать только слои, находящиеся непосредственно под ним. Любые слои, находящиеся за пределами объединяющего слоя не будут размыты!

Давайте проверим это. Создайте пару красных окружностей так, чтобы они пересекались с объединяющим слоем. Затем на панели слоёв перетащите объединяющий слой на самый верх стопки слоёв, чтобы он был поверх окружностей.

Image:Adding-layers-tutorial-5.jpg

Теперь раскройте слой "Inline Canvas" и выберите самый верхний слой внутри него (это должен быть слой "Gradient"). Создайте ещё одну окружность чёрного цвета так, как показано на рисунке. Она будет создана поверх слоя "Gradient".

Image:Adding-layers-tutorial-6.jpg Image:Adding-layers-tutorial-7.jpg

На панели слоёв щёлкните на только что созданном слое с окружностью правой кнопкой и выберите из появившегося меню пункт "New Layer" ("Новый слой"). Раскроется подменю, внутри которого вы увидите список различных категорий слоёв, которые вы можете создавать. Нам нужно размытие, поэтому выберите категорию "Blurs", и затем внутри неё пункт "Blur". (Таким образом, вы выбрали команду "New Layer -> Blurs -> Blur".)

Image:Adding-layers-tutorial-8.jpg

Ну что-ж, размытие получилось... но что-то опять не так – внешний край размытого слоя по прежнему чёткий, несмотря на то что внутри всё размыто. Это всё потому, что метод смешивания (Blend Method) по-умолчанию для слоёв установлен в значение Composite. Чтобы всё было нормально, нам нужно изменить метод смешивания на Straight. Для этого просто выделите только что созданный слой размывания и на панели свойств измените параметр "Blend Method" на Straight.

Замечание: Вы можете изменить метод смешивания, устанавливаемый по-умолчанию для новых слоёв с помощью секции параметры нового слоя (New Layer Defaults) на панели инструментов. Возможно, в будущих версиях программы способ задания метода смешивания для новых слоёв будет изменён.

Image:Adding-layers-tutorial-9.jpg Image:Adding-layers-tutorial-10.jpg

Отлично, теперь всё содержимое объединяющего слоя "Inline Canvas" размыто, но то что под ним – нет.

Продолжение банкета...

Если вы не поленитесь исследовать подпункт главного меню "Layer -> New Layer" ("Слой -> Новый слой"), вы обнаружите множество различных видов слоёв. Некоторые из них достаточно необычны, например "Transform -> Rotate" ("Преобразование -> Вращение"). Подобные слои вы можете использовать для добавления новых атрибутов объектам. И точно так же, как и все прочие параметры объекта, эти новые атрибуты могут быть анимированы.

Например, вы можете нарисовать произвольную фигуру и добавить поверх неё слой вращения. Изменяя его параметры, вы можете создать анимацию вращения фигуры. Этот принцип лежит в основе создания особого типа анимации – перекладки.


Languages Language: 

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆)‎