Skip to content

Commit

Permalink
added new blog post
Browse files Browse the repository at this point in the history
  • Loading branch information
Kamila Gareeva authored and Kamila Gareeva committed Nov 14, 2014
1 parent 6a765fc commit f24d036
Show file tree
Hide file tree
Showing 11 changed files with 278 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
---
title: Как создавалась анимация, посвященная "Bulutfon"
date: 2014-11-14
author: kamilagareeva1
tags: animation, bulutfon, created, design, business, ru
---

В этой статье я расскажу вам о поэтапном создании рекламного ролика.

1. этап – рождение сюжета;
2. этап – моделирование главного персонажа;
3. этап – создание комикса;
4. этап – превращение главного персонажа в марионетку при помощи «костей» в специальной анимационной программе;
5. этап – создание всех объектов, которые будут использованы при анимации;
6. этап – анимирование;
7. этап – озвучивание анимации;
8. этап – подборка музыки для фона;
9. этап – объединение анимации, музыки и озвучки.


### 1 этап – рождение сюжета…

История рассказывает нам о компании Bulutfon, обо всех ее существующих продуктах, сервисах и инновационных проектах, позволяющих сделать бизнес-процесс своих клиентов удобнее и проще.

### 2 этап – моделирование главного персонажа…

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

![main character](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-character.jpg)

### 3 этап – создание комикса…

После того, как история известна и главный персонаж готов, мы перешли к следующему ответственному этапу – созданию комикса. В нём изложена главная идея каждого отдельного предложения компании, краткое анимированное объяснение с целью сделать понятным предназначение того или иного продукта. Наш комикс получился кратким и очень ёмким.

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

![storyboard](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-storyboard.jpg)

### 4 этап – превращение главного персонажа в марионетку при помощи «костей» в специальной анимационной программе…

После того, как работа над комиксом закончена и сделаны все поправки, мы перешли к следующему этапу – превращению нашего персонажа в марионетку. Мы создали ему «скелет», помогающий управлять героем во время анимации. Наш персонаж может разговаривать, моргать и менять выражение глаз, может удивляться, быть грустным и смеяться. Как всякий мультипликационный герой, он очень пластичен и гибок.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-bones.JPG)


### 5 этап – создание всех объектов, которые будут использованы при анимации…

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

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-objects.JPG)

### 6 этап – анимирование…

В процессе анимирования мы попытались сделать наших персонажей живыми и обаятельными. В этом нам помогли некоторые правила анимации, которые были разработаны У. Диснеем. Вы можете ознакомиться с ними здесь:


[Главные приципы анимации](http://www.youtube.com/watch?v=bHfDEsNLg34 )


Каждый план мы рендерили и сохраняли в папку, как отдельный файл.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-story.jpg)

Вот что в результате у нас получилось:


### 7 этап – озвучивание анимации…

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

![character with bones](/assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-voice.jpg)

### 8 этап – подборка музыки для фона…

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

### 9 этап – объединение анимации, музыки и озвучки...

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

![character with bones](/assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-merge.jpg)

В итоге мы получили великолепный ролик для компании Bulutfon:

[Как создавалась анимация, посвященная "Bulutfon"](http://vimeo.com/102756655)

Вы можете найти нас на Dribbble

[Анимация, посвященная "Bulutfon" на dribbble](https://dribbble.com/shots/1676198-Bulutfon-Animation)

Благодарим за внимание.






Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
---
title: Como creamos la Animación 'Bulutfon'
date: 2014-11-14
author: kamilagareeva1
tags: animation, bulutfon, created, design, business, es
---

en este artículo trataré de realizar una corta explicación sobre el proceso de creacion de la animación.

1. paso es crear la historia…
2. paso es crear un personaje principal…
3. paso es crear un storyboard…
4. paso es crear un personaje principal que funcione a través de huesos en el programa de animación…
5. paso es crear todos los objetos que necesitaremos en la animación…
6. paso es realizar la animación…
7. paso es realizar los efectos de sonido…
8. paso es realizar la musica de fondo…
9. paso es aplicar el proceso de montaje...


### 1. paso es crear la historia…

Esta historia cuenta sobre los productos de Bulutfon, explicando todas las oportunidades que Bulutfon brinda a sus clientes, ofreciendo cómodos servicios, para hacer el emprendimiento de negocios mucho más facil.

### 2. paso es crear un personaje principal…

Despues de crear la historia lo siguiente mas importante es crear un personaje pricipal. creamos este personaje con la idea en la mente de un joven hombre de negocios, muy sincero, energético, con una sonrisa simpático y ojos amables. lo hicimos muy cercano a la realidad, con proporciones humanas.

![main character](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-character.jpg)

### 3. paso es crear un storyboard…

despues de tener la historia y el personaje principal listos, fuimos al siguiente paso, uno de los más importantes, crear el story board. el storyboard no tenia muchos detalles. solo plasmamos la idea principal de cada frase de la historia. lo realizamos como un pequeña descripción de la animación para cada escena, para hacer a las personas entender nuestro producto y la misión de nuestro producto, pusimos muchas notas en las márgenes (flechas que mostraban de donde a donde nuestro personaje debía moverse, asi como tambien muchos comentarios que nos ayudaran a no perder una sola idea), el resultado fue:

![storyboard](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-storyboard.jpg)

### 4. paso es crear un personaje principal que funcione a través de huesos en el programa de animación…

despues de que el storyboard esta completamente listo con todas las correcciones necesarias, continuamos al siguiente paso, que es crear los huesos del personaje principal. lo creamos con puntos con todas las funciones necesarias para animarlo. por ejemplo, dibujamos varios tipos de bocas y ojos, para darle la oportunidad de hablar, parpadear y cambiar la expresión de sus ojos, de normal a sorprendido o tristes, etc. tambien el caracter puedes estirar y aplastar, mover sus piernas, brazos, cabeza, cejas y la corbata.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-bones.JPG)


### 5. paso es crear todos los objetos que necesitaremos en la animación…

preparamos todos los elementos que vamos a usar en nuestra animación. para algunos objetos creamos también huesos para generar animación en ellos.escogimoss los colores principales muy abiertos como por ejemplo amarillo, verde, rojo, azul mezclado con un gris suave.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-objects.JPG)

### 6. paso es realizar la animación…

el paso más importante es realizar la animación de los personajes por la manipılacion de huesos. tratamos de hacerlo plástico y cómico, muy vivido y adorable. para hacer la animación más realista estuvimos usando las leyes de walt disney.
aqui un pequeño resumen con los principios básicos para realizar animación digital.

[Principios básicos de la animación](http://www.youtube.com/watch?v=bHfDEsNLg34 )

cada escena fue renderizada y guardada en carpetas diferentes.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-timeline.jpg)

este es nuestro resultado:

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-story.jpg)

### 7. paso es realizar los efectos de sonido…

estamos usando muchos efectos de sonido en la animación, es necesario. brinda acentos en cada movimiento, demuestra peso en los objetos que caen, demuestra peso en el caminar del personaje etc.

![character with bones](/assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-voice.jpg)

### 8. paso es realizar la musica de fondo…

la música de fondo es solo para el acompañamiento de la animación. todo el tono depende de la musicalización de fondo. el ritmo de la animación y el ritmo de la música deben trabajar sincronizados para finalizar una escena. escogimos una melodía energética y muy graciosa.

### 9. paso es aplicar el proceso de montaje...

cuando tenemos la música de fondo y tenemos todos los archivos de la animación completos y los efectos de sonido mezclados, solo necesitamos realizar un último paso, que es el montaje final uniendo todas la piezas en un solo video.

![character with bones](/assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-merge.jpg)

ahora depsues de todo el trabajo realizado podemos observar nuestro resultado final:

[Como creamos la animación de Bulutfon](http://vimeo.com/102756655)

...y tambien lo compartimos en dribbble

[Encuentra esta animación en Dribbble](https://dribbble.com/shots/1676198-Bulutfon-Animation)
Gracias por su atención.
93 changes: 93 additions & 0 deletions source/posts/2014-11-14-how-we-created-bulutfon-animation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
title: How we created Bulutfon animation
date: 2014-11-14
author: kamilagareeva1
tags: animation, bulutfon, created, design, business, en
---


In this article I will try to give a short explanation about creating an animation.

1. step is a creating a story…

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 19, 2014

Contributor

For these first 4 steps 'a' is unnecessary after is.

2. step is a creating a main character…
3. step is a creating a storyboard…
4. step is a creating main character as a marionette, with bones in an animation program…
5. step is creating all the objects that we will need in the animation…
6. step is making an animation…
7. step is making sound effects…
8. step is making a background music…
9. step is applying the merging process...



### 1. step is a creating a story…

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 19, 2014

Contributor

same here 'a' after is unnecessary

as in the title 2, 3, and 4


This story is telling us about Bulutfon products, explaining all the opportunities that Bulutfon gives to customers, offering very comfortable services, to make business foundation easier.

### 2. step is a creating a main character…

After creating the story the next important step is a creating a main character. We created this personage with the idea in mind, that we need a young businessman, very sincere, smart, energetic, with the nice smile and kind eyes. We made him very close to the reality, with human proportions.

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 21, 2014

Contributor

Extra 'a' removal is needed


![main character](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-character.jpg)

### 3. step is a creating a storyboard…

After knowing that the story and with main character ready, we went to the next, very important step, which is creating the storyboard. We made the storyboard not too much detailed. Just put the main idea of each sentence of the story. We made it like a short animated description to every single scene, to make people understand our product and the mission of our product. We put a lot of notes in the margins (arrows, which show us from where to where our character is moving and also a lot of comments for the each scene, to help us to not lose the idea of the scene). The result is:

![storyboard](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-storyboard.jpg)

### 4. step is a creating main character as a marionette, with a bones in an animation program…

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 21, 2014

Contributor

'a' is not needed in 'with a bones'
Also at 41th line


After storyboard is totally ready with all the corrections that were made, we went to the next step, which is creating the main character as a marionette. We created him with a bones and all functions, that we will need, to animate him. For example, we drew several types of mouth and eyes, to give him opportunity to speak and blink and change his eyes expression, from normal to surprised or from normal to sad etc. Also as a cartoon’s character he can be squashed and stretched. He can move his legs and hands, his head, his eyebrows, even his tie can be animated.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-bones.JPG)


### 5. step is creating all the objects that we will need in the animation…

We prepared all the elements, that we will use in our animation. For some elements we also created bones, because we will animate them also. We chose main colors very open, like yellow, green, red, blue, which are mixed with very soft grey.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-objects.JPG)

### 6. step is making an animation…
The most important step is making animation of characters by manipulating bones. We were trying to make them plastic and comic, very lifeful and adorable. For making animation more realistic we were using rules, that Walt Disney developed.
Here is a very short review with a main principles of making animation:

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 21, 2014

Contributor

'a' or 'the' at part 'with a main'


[Main principles of making animation ](http://www.youtube.com/watch?v=bHfDEsNLg34 )

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 21, 2014

Contributor

Video cannot be viewed. :(



Every single scene we rendered and saved in a folder as a separate file.

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-timeline.jpg)

This is what we got as a result:

![character with bones](../assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-story.jpg)

### 7. step is making sound effects…

We were using a lot of sound effects in the animation. It is necessary. It gives accents into a movement, it gives weight to a falling object, it gives weight to walking men etc.

![character with bones](/assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-voice.jpg)

### 8. step is making background music…

Background music is just like an accompaniment to the animation. The whole mood depends on the background music. The animation rhythm and music rhythm have to work synchronously to make all scene finished. We chose energetic and very funny music according the rhythm of the animation and the nature of the main character. So all together they work great as a system.

### 9. step is applying the merging process...

When we have background music and when we have all the animation files finished and all sound effects completed, we just need to make a final step, which is merge all of the files to one video file.

![character with bones](/assets/images/articles/2014-11-14-how-we-created-bulutfon-animation/2014-11-14-how-we-created-bulutfon-animation-merge.jpg)

Now after all of the work that have been made, we can see final animation:

[How we created Bulutfon animation](http://vimeo.com/102756655)

...and we have been shared to Dribbble

This comment has been minimized.

Copy link
@baygunm

baygunm Nov 21, 2014

Contributor

'been' must be removed



[Bulutfon animation on dribbble](https://dribbble.com/shots/1676198-Bulutfon-Animation)


Thank you for your attention.

0 comments on commit f24d036

Please sign in to comment.