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

From Synfig Studio :: Documentation
Jump to: navigation, search
m (Text replace - '{{l|Category:' to '{{Category|')
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<!-- Page info -->
 
<!-- Page info -->
 
{{Title|Работа со слоями}}
 
{{Title|Работа со слоями}}
{{l|Category:Manual}}
+
{{Category|Manual}}
{{l|Category:Tutorials}}
+
{{Category|Tutorials}}
 
<!-- Page info end -->
 
<!-- Page info end -->
  
Line 8: Line 8:
  
  
В [[Animation Basics.ru|предыдущем уроке]] мы сделали первую анимацию, изменяя такие атрибуты стандартного объекта, как положение, цвет, размер. Тем не менее, этих простых изменений зачастую недостаточно для того, чтобы создавать анимацию сложных объектов и пресонажей. Для этих целей в Synfig'e используются [[Layers.ru|слои]]. Они чем-то похожи на те слои, с которыми вы, возможно, имели дело в других графических программах типа [http://www.gimp.org/ GIMP].
+
В {{l|Animation Basics.ru|предыдущем уроке}} мы сделали первую анимацию, изменяя такие атрибуты стандартного объекта, как положение, цвет, размер. Тем не менее, этих простых изменений зачастую недостаточно для того, чтобы создавать анимацию сложных объектов и пресонажей. Для этих целей в Synfig'e используются {{l|Layers.ru|слои}}. Они чем-то похожи на те слои, с которыми вы, возможно, имели дело в других графических программах типа [http://www.gimp.org/ GIMP].
  
 
{|
 
{|
Line 20: Line 20:
  
 
# Создайте файл. Не заморачивайтесь с его длинной, пусть она будет нулевая - сейчас это абсолютно не важно.
 
# Создайте файл. Не заморачивайтесь с его длинной, пусть она будет нулевая - сейчас это абсолютно не важно.
# Нарисуйте произвольный [[Rectangle Tool.ru|прямоугольник]] с помощью соответствующего инструмента.
+
# Нарисуйте произвольный {{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 Tool.ru|инструмент градиент]] (Gradient) на [[Toolbox.ru|панели инструментов]] (Toolbox), щёлкните левой кнопкой на рабочей области и не, отпуская кнопку, переместите мышь на некоторое расстояние. Затем отпустите кнопку. На экране появится переход от одного цвета к другому, а на [[Layers Panel.ru|панели слоёв]] (Layer Panel) он будет виден как новый слой под названием "Gradient". Чтобы изменить градиент, щёлкните на этот слой и с помощью [[Normal Tool.ru|инструмента преобразования]] (Normal Tool) измените положение его [[Duck.ru|уТочек]].
+
Теперь необходимо сделать две вещи. Во-первых, выберите {{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}}
  
 
Теперь у нас есть градиент, но что-то здесь не то - он занимает весь экран, а мы хотим, чтобы он был внутри нашей фигуры - прямоугольника. Ща мы всё исправим.
 
Теперь у нас есть градиент, но что-то здесь не то - он занимает весь экран, а мы хотим, чтобы он был внутри нашей фигуры - прямоугольника. Ща мы всё исправим.
  
Выделите слой градиента и слой прямоугольника на [[Layers Panel.ru|панели слоёв]].
+
Выделите слой градиента и слой прямоугольника на {{l|Layers Panel.ru|панели слоёв}}.
Затем щёлкните правой кнопкой мыши на них и выберите пункт "Encapsulate" (Изолировать). Вместо наших двух слоёв появится один слой под названием "[[Inline Canvas.ru|Inline Canvas]]" (Объединяющий слой) с треугольничком сбоку.
+
Затем щёлкните правой кнопкой мыши на них и выберите пункт "Encapsulate" (Изолировать). Вместо наших двух слоёв появится один слой под названием "{{l|Inline Canvas.ru|Inline Canvas}}" (Объединяющий слой) с треугольничком сбоку.
  
 
Вы можете обращаться с этим слоем точно также, как и с любым другим - перемещать, копировать, и т. д. Щёлкнув на треугольничке рядом с его значком вы можете получить доступ к его содержимому - слою градиента и слою с прямоугольником.
 
Вы можете обращаться с этим слоем точно также, как и с любым другим - перемещать, копировать, и т. д. Щёлкнув на треугольничке рядом с его значком вы можете получить доступ к его содержимому - слою градиента и слою с прямоугольником.
  
Если хотите изменить имя объединяющего слоя на что-то более информативное, просто выделите его на [[Layers Panel.ru|панели слоёв]] и щёлкните на его названии. Вы можете переименовывать таким образом ЛЮБОЙ слой, что вам настоятельно рекомендую.
+
Если хотите изменить имя объединяющего слоя на что-то более информативное, просто выделите его на {{l|Layers Panel.ru|панели слоёв}} и щёлкните на его названии. Вы можете переименовывать таким образом ЛЮБОЙ слой, что вам настоятельно рекомендую.
  
 
== Использование изоляции ==
 
== Использование изоляции ==
  
[[Image:Adding-layers-tutorial-2.jpg]]
+
{{l|Image:Adding-layers-tutorial-2.jpg}}
  
Тем не менее, проблема так и осталась - градиент всё ещё покрывает весь рисунок, а не ограничен прямоугольником. Без паники, просто выделяем слой градиента на [[Layers Panel.ru|панели слоёв]] и ищем на [[Params Panel.ru|панели свойств]] (Params) параметр под названием "Blend Method" ([[Blend Method.ru|метод смешивания]]). Дважды щёлкните на слове [[Blend Method.ru#Composite|Composite]] напротив названия параметра и из раскрывшегося списка выберите пункт [[Blend Method.ru#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 отдельно от программ, позволяющих упорядочивать слои просто в виде иерархической структуры.
 
Использование изоляции слоёв для структурирования рисунка значительно упрощает работу с Synfig Studio. Но многие другие программы позволяют делать то же самое.  Только что продемонстрированная концепция ограничения влияния одного слоя на другие ставит Synfig отдельно от программ, позволяющих упорядочивать слои просто в виде иерархической структуры.
  
Итак, слой может изменять отображение лишь тех слоёв, которые находятся непосредственно под ним. Другими словами, если вы положите [[Blur Layer.ru|слой размывания]] (Blur Layer) внутрь [[Inline Canvas.ru|объединяющего слоя]] (Inline Canvas), который мы только что создали, то он будет размывать только слои, находящиеся непосредственно под ним. Любые слои, находящиеся за пределами [[Inline Canvas.ru|объединяющего слоя]] не будут размыты!
+
Итак, слой может изменять отображение лишь тех слоёв, которые находятся непосредственно под ним. Другими словами, если вы положите {{l|Blur Layer.ru|слой размывания}} (Blur Layer) внутрь {{l|Inline Canvas.ru|объединяющего слоя}} (Inline Canvas), который мы только что создали, то он будет размывать только слои, находящиеся непосредственно под ним. Любые слои, находящиеся за пределами {{l|Inline Canvas.ru|объединяющего слоя}} не будут размыты!
  
Давайте проверим это. Создайте пару красных [[Circle Tool.ru|окружностей]] так, чтобы они пересекались с [[Inline Canvas.ru|объединяющим слоем]]. Затем на [[Layers Panel.ru|панели слоёв]] перетащите [[Inline Canvas.ru|объединяющий слой]] на самый верх стопки слоёв, чтобы он был поверх окружностей.
+
Давайте проверим это. Создайте пару красных {{l|Circle Tool.ru|окружностей}} так, чтобы они пересекались с {{l|Inline Canvas.ru|объединяющим слоем}}. Затем на {{l|Layers Panel.ru|панели слоёв}} перетащите {{l|Inline Canvas.ru|объединяющий слой}} на самый верх стопки слоёв, чтобы он был поверх окружностей.
  
[[Image:Adding-layers-tutorial-5.jpg]]
+
{{l|Image:Adding-layers-tutorial-5.jpg}}
  
Теперь раскройте слой "[[Inline Canvas.ru|Inline Canvas]]" и выберите самый верхний слой внутри него (это должен быть слой "Gradient"). Создайте ещё одну окружность чёрного цвета так, как показано на рисунке. Она будет создана поверх слоя "Gradient".
+
Теперь раскройте слой "{{l|Inline Canvas.ru|Inline Canvas}}" и выберите самый верхний слой внутри него (это должен быть слой "Gradient"). Создайте ещё одну окружность чёрного цвета так, как показано на рисунке. Она будет создана поверх слоя "Gradient".
  
[[Image:Adding-layers-tutorial-6.jpg]] [[Image:Adding-layers-tutorial-7.jpg]]
+
{{l|Image:Adding-layers-tutorial-6.jpg}} {{l|Image:Adding-layers-tutorial-7.jpg}}
  
На [[Layers Panel.ru|панели слоёв]] щёлкните на только что созданном слое с окружностью правой кнопкой и выберите из появившегося меню пункт "New Layer" ("Новый слой"). Раскроется подменю, внутри которого вы увидите список различных категорий слоёв, которые вы можете создавать. Нам нужно размытие, поэтому выберите категорию "Blurs", и затем внутри неё пункт "Blur". (Таким образом, вы выбрали команду "New Layer -> Blurs -> Blur".)
+
На {{l|Layers Panel.ru|панели слоёв}} щёлкните на только что созданном слое с окружностью правой кнопкой и выберите из появившегося меню пункт "New Layer" ("Новый слой"). Раскроется подменю, внутри которого вы увидите список различных категорий слоёв, которые вы можете создавать. Нам нужно размытие, поэтому выберите категорию "Blurs", и затем внутри неё пункт "Blur". (Таким образом, вы выбрали команду "New Layer -> Blurs -> Blur".)
  
[[Image:Adding-layers-tutorial-8.jpg]]
+
{{l|Image:Adding-layers-tutorial-8.jpg}}
  
Ну что-ж, размытие получилось... но что-то опять не так – внешний край размытого слоя по прежнему чёткий, несмотря на то что внутри всё размыто. Это всё потому, что [[Blend Method.ru|метод смешивания]] (Blend Method) по-умолчанию для слоёв установлен в значение [[Blend Method.ru#Composite|Composite]]. Чтобы всё было нормально, нам нужно изменить [[Blend Method.ru|метод смешивания]] на [[Blend Method.ru#Straight|Straight]]. Для этого просто выделите только что созданный [[Blur Layer.ru|слой размывания]] и на [[Params Panel.ru|панели свойств]] измените параметр "Blend Method" на [[Blend Method.ru#Straight|Straight]].
+
Ну что-ж, размытие получилось... но что-то опять не так – внешний край размытого слоя по прежнему чёткий, несмотря на то что внутри всё размыто. Это всё потому, что {{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}}.
  
: Замечание: Вы можете изменить [[Blend Method.ru|метод смешивания]], устанавливаемый по-умолчанию для новых слоёв с помощью секции [[New Layer Defaults.ru|параметры нового слоя]] (New Layer Defaults) на [[Toolbox.ru|панели инструментов]]. Возможно, в будущих версиях программы способ задания [[Blend Method.ru|метода смешивания]] для новых слоёв будет изменён.
+
: Замечание: Вы можете изменить {{l|Blend Method.ru|метод смешивания}}, устанавливаемый по-умолчанию для новых слоёв с помощью секции {{l|New Layer Defaults.ru|параметры нового слоя}} (New Layer Defaults) на {{l|Toolbox.ru|панели инструментов}}. Возможно, в будущих версиях программы способ задания {{l|Blend Method.ru|метода смешивания}} для новых слоёв будет изменён.
  
[[Image:Adding-layers-tutorial-9.jpg]] [[Image:Adding-layers-tutorial-10.jpg]]
+
{{l|Image:Adding-layers-tutorial-9.jpg}} {{l|Image:Adding-layers-tutorial-10.jpg}}
  
Отлично, теперь всё содержимое [[Inline Canvas.ru|объединяющего слоя]] "Inline Canvas" размыто, но то что под ним – нет.
+
Отлично, теперь всё содержимое {{l|Inline Canvas.ru|объединяющего слоя}} "Inline Canvas" размыто, но то что под ним – нет.
  
 
== Продолжение банкета... ==
 
== Продолжение банкета... ==
  
Если вы не поленитесь исследовать подпункт главного меню "Layer -> New Layer" ("Слой -> Новый слой"), вы обнаружите множество различных видов слоёв. Некоторые из них достаточно необычны, например "Transform -> [[Rotate Layer.ru|Rotate]]" ("Преобразование -> Вращение"). Подобные слои вы можете использовать для добавления новых атрибутов объектам. И точно так же, как и все прочие параметры объекта, эти новые атрибуты могут быть [[Animation Basics.ru|анимированы]].
+
Если вы не поленитесь исследовать подпункт главного меню "Layer -> New Layer" ("Слой -> Новый слой"), вы обнаружите множество различных видов слоёв. Некоторые из них достаточно необычны, например "Transform -> {{l|Rotate Layer.ru|Rotate}}" ("Преобразование -> Вращение"). Подобные слои вы можете использовать для добавления новых атрибутов объектам. И точно так же, как и все прочие параметры объекта, эти новые атрибуты могут быть {{l|Animation Basics.ru|анимированы}}.
  
Например, вы можете [[Creating Shapes.ru|нарисовать произвольную фигуру]] и добавить поверх неё [[Rotate Layer.ru|слой вращения]]. Изменяя его параметры, вы можете создать анимацию вращения фигуры. Этот принцип лежит в основе [[Cut-out Animation.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ă • русский • 中文(中国大陆)‎