2# TALENT CHALLENGE ENTRY - @catwomanteresa Study with Catwoman Teresa #8:Making Steemit Logo animation 跟著貓女這樣做#8:製作Steemit Logo 動畫到底有多複雜?

in #talentchallenge7 years ago (edited)

T-Shirt front.jpg

Dear Steemit friends, I made a Steemit Logo animation recently which I also used to design the Steemit T-shirt.

When @kid4life invites me to attend 2# TALENT🌟CHALLENGE: 😎 - NEW SteemPowers for GRABS! Let's DOUBLE the PRIZE, I decide to write a post of making the Steemit logo animation for this challenge.

Hi03.gif 親愛的Steemit朋友們,之前在我設計Steemit T恤文章中提到,我為了設計這個Steem Logo做了一段動畫。

最近 @kid4life 邀請我參加他舉辦的 2# TALENT🌟CHALLENGE: 😎 - NEW SteemPowers for GRABS! Let's DOUBLE the PRIZE競賽,所以我決定用這段動畫去參賽。接下來就跟大家分享一下這段動畫的製作過程。continue.gif

💝 LOGO 及標準字 Corporate Identity System 💝

scissor.gif

I search google for Steemit logo and use it as the basic shape of my animation.

我在google上搜尋了Steemit的Logo及標準字,做為我製作Steemit Logo動畫的基本原型。

Steemit-big.png

scissor.gif

Add CC Light Sweep Effect on Logo

加上 CC Light Sweep 效果來增加Logo的掃光

Logo_light sweep.png

💝 粒子運動特效 Particle Effect 💝

scissor.gif

Use Particular Effect to add fire and wipe out the logo. It's the most complex part of this animation. There are more than hundred functions you can adjust. You must have a clear brain to decide what is the result you are pursuing.

Particular Effect 加上火的效果來將Logo wipe出來。粒子運動是這段動畫裡面最複雜最難做的部分,光這個功能,有上百的細項可以調整,頭腦真的要很清晰才會搞得清楚自己到底想要調出什麼效果,真的很累啊!

Logo particle.png

scissor.gif

Let's see the animation

看一下動畫效果

Logo particle.gif

scissor.gif

Use Particular effect from left to wipe out the word. It's a totally different result although I use the same effect as the logo.

加上 Particular effect 把標準字wipe出來. 跟Logo雖然用的是同一個功能,可是呈現出來的是完全不同的效果。

word particle.png

scissor.gif

Here is the GIF

看一下動畫效果

word particle.gif

scissor.gif

Create the ID animation

利用亂數出現文字的效果來製作ID出現的動畫

ID.gif

💝 構圖 Layout 💝

scissor.gif

Composite the layout and setup the timeline.

把構圖排好,設定每個物件出現的時間

Layout.png

Make sure the speed and layout is fine.

確認速度和構圖都滿意great02.gif

layout.gif

💝 光暈和背景 More details 💝

scissor.gif

Add Optical Flare effect to make it more gorgeous.

Optical Flare effect 增加光暈的效果,讓畫面看起來更絢麗 cute05.gif

Optical Flare.png

Use Optical Flare effect to create background

同樣用Optical Flare effect 來增加背景的豐富度

BG.png

💝 Final animation 💝

scissor.gif

So, Here is the final work with sound effect. Hope that you will enjoy it!

加上音效就完成最後的成品啦!happy05.gif

© Copyright 所有照片與文字皆为原創 All photos taken by author. All rights reserved.

小狗.gif

Thanks for reading.

If you would like to learn more about me, please read my self-intro.

intro02.png

Welcome to leave comment, upvote, resteem, and follow me. See you next time~

歡迎留言跟我聊天,我們下次見! bye01.gif

如果你想要更了解我,請看我的自我介紹

intro.png

Sort:  

太厲害了!!!

呵呵!謝謝

好棒棒哦!

那個光好漂亮.

你是專業的PS大師

哈哈!謝謝你的稱讚。不過除了Photoshop之外,動畫的部分是用After Effect做的喔

也来这抱一下大腿^^

哈哈!我的大腿不夠粗,不過大家可以互相照顧。

太讚了!整個好有質感很專業呀!
改天也來研究研究!

You've just given me a business idea:
I'll manufacture Steemit T-shirts!

这效果太惊艳了!

你總是這麼捧場,呵呵

我这是崇拜,我好喜欢你的设计!

謝謝你喔,可愛妹妹