10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

DerekLugarEditor
CasaportafolioAcercadeBlogCurrculumContacto

Blog

25trucossimplesparaunamejorMotion
Graphics
Publicadoel26abr,2014enBlog|4Comentarios
Soyeditordeprofesin,noundiseadordeanimacinquesignificaquemegustaranoeralaredaccin
deesteartculooelquehizoelvideo,porquesquehayartistasmscualificadosporah.Hagomejoras
gradualesenmiAfterEffectshabilidades,peronomesientocmodovendermeexclusivamentecomoun
artistadegrficosenmovimiento.
Dichoesto,creoquemslistascomoestadeberanexistirenespecialparalaspersonasqueacabande
empezarengrficosenmovimiento.Esteesunconjuntodetcnicasquehenotadosuperposicinenuna
grancantidaddetutorialesenvdeoquemehevistoenlosltimosaos.Estenoeselprincipioyelfin
detodogua,delejos,nisepretendeestocomountutorialcompleto.
Comoconcualquiercosa,cmoseutilizaartsticamenteestosesloquefinalmentehacequelosgrficos
sevenbien.Noesunllenoenlareceta,perosetratadeunalistadeingredientes.Tododependedela
artista(chef?)Paradecidirquingredientesservirmejoralapieza.
Estoyescribiendoestoparalosprincipiantesqueacabadeempezar,losveterinariosexperimentadosse
verenestoydecir"S,msomenos",peronohaynadaotrofueradel.
Paralamayoradeestastcnicasnohizousodeplugins3parte,peronoespecficamentehacenun
puntoparaevitarlos.Unavezms,noesuntutorialdevdeo.
Disfrutar

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

1/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

25SimpleTricksforBetterMotionGraphics
fromDerekLieu

03:43

25trucossimplesparaunamejorMotionGraphicsdeDerekLugarenVimeo.
Deacuerdo,loqueunossimplesobservacionesquehehechoacercadecmohacergrficosen
movimientosevenmejor.
Enprimerlugar,lacosaquehenotadoenbuenosgrficosenmovimientoesqueestnosloponer
juntostodoslosefectosqueramosono.Porlogeneral,setratadelaadicinde"defectos",yasea
haciendoquelosttulosmiradaastillasconunatexturaoasegurarsedequeelmovimientonoes
demasiadouniforme(porejemploanimacinquefacilitalaentrada/salida,rebotaetc).Porlogeneral,
cuandoseiniciaporprimeravez,losgrficossevendemasiado"limpia"oenelpeor,nosevencomo
antesdeAfterEffectsenabsoluto.
Ordenadoresporsmismoshacencosasmuyordenadoyunrobot,porloquetocaalartistaparahacerlas
cosasmsdinmico.Adems,paralasextremidadesdeanimacin,verestegranvideo:Los
fundamentosdelaMotionDesign.
Vamosapasarporcadaunodeellosunoporunoyvoyaexplicartodoloquesientoesnecesario.Novoy
aescribirtodaslasinstruccionesaqu,asquesiustedestconfundidoacontinuacin,obtenergooglear.
Creoquelaspersonasaprendenmejorcuandoaveriguarlosfundamentosdeloquetienenquehacery
despusdeGoogleentodo.Sialguientediceexactamentequbotonesapretaracontinuacin,amenudo
noabsorbeporqueestssiguiendolasinstrucciones.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

2/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

1.Losgradientes
alomsbsicaquehaceniveldefondosyeltextonoescompletamenteuniformeencoloraadeun
pocodeprofundidadyforma.Unarampadedegradadoradialesunamanerasimpledehaceresto.
Bsicamente,evitarcometerlosgrficosseven"plana"amenosqueseaunaeleccinestticaparaalgo
ascomounainfografa.

2.Vignette
Lasvietasseutilizanmalditacercadetodoelmundomiraparacentrarlaatencin,yaseaengrficosen
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

3/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

movimiento,elcolordeclasificacin,videojuegos,etc.Unavietasepuedehacerfcilmentemediantela
creacindeunslidooscuroconunamscaracircularinvertido,acontinuacin,difuminarlamscaray
deajusteconlaopacidad.Tambinsepuedejugarconloscoloresymodosdetransferenciadeunaspecto
diferentetambin.

3.Texturas
Lastexturassonunadelasmanerasmsfcilesdehacerquesusttulosseveanmsinteresante.Una
formaessimplementeprecompsutexto,ponerlatexturapordebajodeellayfijarlamscaradepistade
latexturade"Matealfa."NoestamosTONELADASdetexturasgratuitasenlneasiustedacabade
Googleparaellos.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

4/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

4.CorreccindeColor
Lagradacindelcoloresunaindustriaensmisma,sinoelajustedelcoloralasensacinadecuadapara
susttulosvaunlargocamino.NosomosuntropecientosmanerasdehacerestoenAfterEffectssislo
haceralgunosefectoscurvas,laadicindeuntinteefecto,lasuperposicindealgunosslidosdecolor,o
elusodeplugins3parte.

5.Sombras
Unsimplesombragotaaadirunpocodeprofundidadasusttulos.Tomestatcnicaparticularde
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

5/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

Tutorialantiguosttulosdevdeodelcopiloto,dondesededicacopiareltexto,hechalacapadel
fondonegro,aadeundesenfoqueradialCCysetrasladelcentrodelafaltadedefinicinenaltopara
queseveacomolafuentedeluzestporencimadelttulo.

6.Contraste
Damncercadecadatutorialquehevistoparagrficosenmovimientoaadeuna"curvadecontraste"en
unmomentouotro.Slotienequeutilizarelefecto"Curvas",elevarlosaspectosmsdestacadosybajar
lassombrasparacrearuna"curvaS".

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

6/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

7.MovimientoAntecedentes
Selesconocecomo"motiongraphics"noestn?Cualquiertipodemovimientoenelfondogeneral,los
hacemsinteresantealavista.Usunpocoderuidofractalanimadaaqu.Esteaspectosemodelafuera
de30en30degrficosdevideodemovimientodeNawazAlamgir.Hayunmontndemanerasde
aadirelmovimientodefondo.Unmontndetrailersdepelculasutilizanunaescaladeunaimagen
borrosaquesetomapanormicahacialoslados.

8.Glow
Hayunmontndemanerasdeaadirbrillo.Notenemoselconstruidoenfiltrosdebrilloyunmontnde
los3partehaciafueraallcomoTrapcodeStarglowoalgunosenRedGiantUniverso.Latcnica
queseutilizaaquheaprendidodelaescueladetutorialdemovimiento,dondeseduplicalacosaque
ustedquierehacersombra,establezcaelmododetransferenciadelacapasuperiorde"Aadir",aplicar
unefectoborrosorpido,yluegoajustareldesenfoqueylaopacidad,necesario.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

7/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

9.Luzdebarrido
Ustedsabe,esacosaquehacequeeltextoveabrillante?HayconstruidoenunefectodebarridodeCC
LuzenAfterEffectsquehaceestoconbastantefacilidadenelqueslotienequemeterseconalgunos
ajustesyanimarsuposicin.Paraestoyohicedelamanera"dura"alhacermipropiabarridodeluzde
unslidoblanco,esteraaltexto,etc.

10.Rayosdeluz
queutilizanTrapcodebrilloaqu,perohayalgunosincorporadoenlosfiltrosderayosdeluzytambin
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

8/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

devdeocopilototieneuntutorialsobrelafabricacindelosrayosdeluzen3D.Adems,siustedva
autilizarTrapcodebrillo,hgaseunfavorycambiarlaconfiguracindecolorpordefecto,todoslosque
hanutilizadoTrapcodeShinereconocerloscolorespordefecto.

11.Lentebengalas
Quieresunpocodettulosrpidas?Acontinuacin,slohacerloqueungranporcentajedelosavances
depelculasdo,hacerunpocodetextodemetalaspectoyaadirunpequeodestellodelentepordebajo
deella.Talvezconunamsgrandeparpadeofueradecmaratambin.Creoquelamayoradelagente
usabengalaspticosdevdeocopilotoperotambinhayKnollLightFactory.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

9/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

12.Slams
slodelaanimacinmsbsicadelttulosepuedehacer.Cuandoempec,elanimescaladelttulode
grandea100%,peroahorapuedocambiareltextoenunacapa3DyanimarasuposicinZ.Laescalase
vemejorysepuedeobtenerque"volardesdedelantedelacmara"look.

13.desenfoquedemovimiento
Esunsimpleinterruptorjustoalladodecadacapa.Sloasegresedequeelmuestreoseestablecelo
suficientementealtocomoparaquenoseve"pasos"quebuscanbrutoseneldesenfoquedemovimiento.
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

10/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

Oestablecereldisparadorparaunngulodiferente.Cuantomenorseaelngulodeobturacin,menos
desenfoquedemovimiento(creoSalvaralsoldadoRyan).

14.escalonadaAnimacin
Engeneral,siloselementosindividualesanimadosenlapantallaunatrasotraseparecemsinteresante.
Puedoutilizarpt_ShiftLayersdeaescripts+aepluginssitengounmontndecapasdeanimacin,y
tengoqueescalonarellosporunciertonmerodetramas.TambinenestecasoutilicDecomposeText
parasepararlasletras.
EDIT:Variaspersonasfueronrpidosensealarqueestoesmsfcilhacerloconlosefectosdetextode
animacin.Enelmomentoquehiceestesabacmoutilizarlosanimadoresdetexto,peronosabacmo
aadirquebuenacurvademovimientoeditordeimagenesderetrocederalasletrasindividuales.Desde
entonces,hesidoenseadoacercadelasfuncionesdeaceleracindelaseccin"avanzada"dela
animacindetexto.Porfavorcomentesitienemsconsejos,porquequierodemasiadoconsejos

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

11/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

15.Editordegrficos
stemellevdemasiadotiempoparaempezarautilizar,peroesotraquecaeenelcampodehacerel
movimientonodemasiadouniforme.Bsicamente,unavezquehaanimadounapropiedadcomola
posicin,cambiarlosfotogramasclavealosfotogramasclave"fcilfacilidad""yentrareneleditor
grficoyluegomoverunodeloscontrolesdeCurvadelosfotogramasclavedetodoelcaminohastael
otrolado,estapodrhacerlaanimacinsperrpidoacontinuacin,lento,olentoyluegorpido.
Prcticamentetodoslospulidaestupendainfografaquebuscanmeterseconeleditordegrficospara
hacerelmovimientomsinteresanteymenosrobtica.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

12/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

16.Rebote
Hayalgunasmanerasdehacerestetipodereboteanimacin.UnadeellaseslafacilidadyWizzde
aescripts+aeplugins.
Laotraesestaexpresindeinerciamograph.netquesepuedeaadiralaspropiedadesdeanimacin
comolaposicin,escalaorotacin.
//
N=0
si(numKeys>0){
n=nearestKey.index(tiempo)
if(key(n).time>tiempo){
n
}
}
si(n==0){
t=0
}else{
t=tiempollave(n).time
}
si(n>0&&t<1){
v=velocityAtTime(llave(n).timethisComp.frameDuration/10)
amp=0,01
frec=2,0
disminucin=11,0
valor+v**ampMath.sin(frec*t*2*Math.PI)/Math.exp(decaimiento*t)
}else{
valor
}
//
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

13/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

Cambiarelnmerode"amplificador"parahacerquelaamplituddeladespedidamsgrandeoms
pequea.
Cambieelnmerode"Freq"paraqueelnmeroderebotessuperioroinferior
cambiarelnmerode"desintegracin"paracambiarlarapidezconquesedetieneelrebote(losnmeros
msaltoshacenqueseapararmsrpido,msbajoqueseamslargo)

18.Mattes
hayunmontndemanerasdehacermatesperoengeneralsereduceahacerunacapaquedealguna
maneravadenegroablanco(oviceversa)enunaespeciedeestiloanimado.Yaseaqueestusando
stockmetrajedealgunacosacorrimientodelatinta,ohacersupropioespecialdetransicinconformas
animadas.Conocelosmatesdeseguimientoymscarasmsprontoquetarde,seusanentodaspartes.
Estosehizomedianteelusodeunvdeocopilotoantidisturbiosmatecorrimientodelatinta.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

14/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

17.transicionesdecolor
Unmontndeinfografafrescoshacenestetipodetoallitascolorutilizandopistamates,etc.Mehicieron
variasversionesdeltextocondiferentesorgenes.Entonceshicematesdeseguimientodevariasclases
haciendocosascomolaanimacindeunslidonegrodelgadaysureduccinhastalatransicindel
blancoalnegro.LaprimeratransicineselmodelodelacaravanadeKertGartnerparaloscientos
dejuegos.Lasegundatransicinesunaanimacinescalonadadealgunosrectngulosampliacin.

19.Contracciones
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

15/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

Unmontndettulosutilizanalgntipodeintervaloaleatorioespasmosespecialmenteparalaciencia
ficcindeterroryesascosas.ParaestosutilicEvanAbrams'Twitchexpresionestutoriales.Hicela
escalaylaposicindecontraccinalazaryluegohizounacapadeajusteparahacercosasdistorsionada
ehizoquelaopacidaddecontraccincapadeajustedemodoquelasdistorsionesquesucederaalazar.
Tambinhayplugindelacontraccinnerviosadevdeocopiloto.ParalaseparacinRGByla
distorsindeTVutilicpluginsdelpaquetedetelevisindedistorsin.

20.Laspartculas
noesrealmenteunatcnicade"simple",perolaspartculassonmalditosportodaspartesenlosgrficos
enmovimiento.YaseaqueestusandoMundialdelaCCdepartculasqueestintegradoenAfter
EffectsocomprarTrapcodeparticular,aprenderatrabajarconpartculas.Todavanomuuuuuuuuuuy
muchosajustesaestosefectosquecuantoantesseempiece,msprontosumateriapuedeversemejor.S
quenisiquierahearaadolasuperficiedemmismo.Paraelloheutilizadoenparticularytambin
TrapcodeShineconlalongitudderayosvolviaceroconelfindeaadirelcolorante.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

16/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

21.Composicin
Avecesslotienequeponerunpocodelavidareallascosasmetrajesconsusgrficosparaquesevean
mejoroms"real".Yasetratedeunincendiooalgunosdelosxitosdehumoparaqueseveacomosu
ttulotuvounimpacto.Estoesunacosaenlaquemsomenostienequecomprarstockmetrajedealgn
tipo,yaqueprobablementevaasermsbaratoquevolarcosasporsucuentayluegolacreacindesus
propioselementos.LamayoradelaspersonastienenpaquetedeAccinEsencialdevdeocopiloto.
PorestaAcabodeaadiralgunoselementosdepolvoyunelementodefuego.Acontinuacin,elanim
unamscaraparalatransicindeltextoenblancoalrojo.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

17/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

22.Movimientodecmara
Avecesunsimplegolpettulonoeslosuficientementeinteresante,talvezustedquierequelacmara
gireunpocoolotienenoestarperfectamentecentrada.Unmontndemanerasdeaadirmovimientode
lacmaraparadarlevidaalosgrficos(paramsinformacinacercadelascmaras3DHayestevideo
tutorialcopiloto).

23.Profundidaddecampo
Mientrassetrabajaconcmaras3Dporqunoseenciendelaprofundidaddecampoafindequenotodo
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

18/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

esuniformeenelfoco?Olapistadevolverdeunttuloaotroytienenelsegundoentraenelfoco?Tan
solohayquecompensarsusobjetos3D,activelaprofundidaddecampodelacmarayluegoajustarsu
abertura.Recuerde,laspequeasaberturassignificamsprofundidaddecampoygrandesaberturas
significamenosprofundidaddecampo.

24.Movimientodelacmara
steentraenlacategoradeaadir"defectos"dondehacerelmovimientodelacmaraparaaadir
impactoasusttulos.Paraestotengotodosloselementoscomocapas3Dyunacapadecmaracriarona
unacapadeobjetonulo.Acontinuacin,unaexpresindeondulacinatadoauncontroldeslizanteenel
objetonulodemaneraquecuandoelttulogolpeatodoloquesemeneayluegosedetiene.

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

19/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

25.Textoen3D
Bienotravez,noesunatcnicasimpleperoatodoslesgustaeltexto3D.Slotienesqueelegirla
tcnicaquedeseeutilizar,porquehayunmontndemanerasalofalsoolohacendeverdadenAfter
Effectssobretodoahoraqueelcine4DLiteseincluyeconAfterEffectsyAfterEffectstienesupropio
modo3Ddetrazadoderayos.ParasteutilicElemento3Ddevdeocopiloto,queeslasuciedad
fcildeusar.
Esoestodo!Algunastcnicas"simples"paralosprincipiantesqueconsiguenengrficosen
movimiento.Siestoleayudenabsolutoporfavordejaruncomentario!Esperoquepuedaayudara
algunosprincipiantesAEporah.Squemegustaratenerunartculocomoeste,cuandoempeca
aprenderAE.Sitienealgunapreguntaningncomentario,delocontrario,sugerimosquecomience
buscandoenGoogleyencontrarlamaneradeutilizarestetipodecosasensusproyectos!

4Comentarios
1.25trucossimplesparamejoresgrficosdemovimiento|LESTERBANKS
28dedeabrilde,2014
[...]Parasuexamenlaprximavezqueestndiseandounapieza.Derektieneunpostdelas25
cosassimplesparahacermejorsusgrficosenmovimiento,yendounpocomsenprofundidad
concadauna[...]
Respuesta
2.25ConsejosParaHacersimplesMejorarlaONUMotionGraphicsCICE
28dedeabrilde,2014
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

20/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

[...]|DerekLugar|MsterenMotionGraphics:Creacin,DireccinyRealizacin.[...]
Respuesta
3.GoProdegrficosdevdeo|EstudiodeDiseoIV:GrficosWebypantallas
1deabrilde,elao2015
[...]8consejosparalacreacindegrandesMotionGraphics25Consejosparaobtenermejores
grficosenmovimientoBehanceMotionGraphics[...]
Respuesta
4.25trucossimplesparamejoresgrficosdemovimiento|Motionhouse
15dedeagostode,elao2015
[]fuente[]
Respuesta

DejaunaRespuesta
Nombre(requerido)
Email(requerido)
Sitioweb

enviarcomentario

Notifiquemedeseguimientodeloscomentariosporcorreoelectrnico.
Notifcamedenuevasentradasporemail.
Cmosepuedeacabarconun
dadejugarjuegosdevideo?
http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

21/22

10/4/2016

DerekLugarEditor25trucossimplesparaunamejorMotionGraphics

Cerveza,duh.Ift.tt/1QnOSHA
pic.twitter.com/0ApU...
Follow@derek_lieu

2015DerekLugarEditorTodoslosderechosreservados.
TemaporConfianzatema

http://www.dereklieu.com/2014/04/26/25simpletricksforbettermotiongraphics/

22/22