09/12/2016 TutorialPixelArteparte1|AbrindooJogo

Home
QuemSomos
Podcast
Tutoriais
CursosPresenciais
Busca...

TutorialPixelArteparte1

PixelArt:Inciandoaprtica
Autor:SamuelSalomo

Nvel:Bsico

Introduo
AgrandevantagemdaPixelArtquerealmentenoprecisamosdenenhumaferramentaespecficaparacriarumailustrao.Porexemplo,como
programapadrodeediodebitmaps(aquelequejveminstaladoemtodososcomputadores)tambmpossvelobterbonsresultados.
Lembrandoque,comovistonopostanterior,existemvriostiposdesoftwaresdiferentes,porisso,importanteressaltarqueemboranestetutorial
tenhasidoutilizadooFireworkscomoferramenta,oartistaquedeveescolherosoftwarecomquesesentirmaisconfortvelparaaexecuoda
tarefa.

Asferramentas
Ateno:noseesqueamqueoprogramaaquiusadooFireworks,nocasodeusodeoutroprograma,asteclasdeatalhopodemsofreralteraes.

Paraacriaodeumailustraofeitapixelapixel,seuprincipalaliadoseraferramentaPencilTool(atalhoB)queencontrasenaToolboxdo
programa.

importantequehajaatenonomomentodeselecionaraferramenta,poishpossibilidadedeescolheropesalternativasparaestaferramenta
comomesmoatalho.ParacertificarsequerealmenteestamosselecionandoaPencilTool,observeoconeselecionadonaToolbox.Ocorretoque
representaumlpis.

PencilTool:conerepresentadonaToolbox.

APencilToolutilizadaporpermitiramanipulaodepixelsindividuais,semqualquerantialiasing.Essedetalheextremamenteimportante
nessemomento,entofiqueatento.

AlmdaPencilTool,tambmseroteisoutrasferramentas:

*MarqueeTool(atalhoM)eMagicWandTool(atalhoW),queservemparacriarareasdeseleo.

MagicWandTool:tambmconhecidacomovarinhamgica.

importantelembrarque,segurandoShifteAltenquantofazsuaseleo,podeserespectivamenteadicionarousubtrairaseleoatual.Isto
auxiliamuitoquandofornecessriopegarreasquenosoperfeitamentequadradas.

*EyedropperTool(atalhoI)paracapturarascores.

EyedropperTool:facilitaareutilizaodeumtomdecorjaplicado.

Nestesoftware,outroatalhotiloX,poiselealternaentreasopesdecontornoepreenchimento,podendoassimutilizarouaPencilTooloua
PaintBucketTool(atalhoG)

PaintBucketTool:aplicapreenchimento.

importantelembrarque,assimcomoaPencilTool,outrasferramentasapresentadasnestepargrafotambmpossuemopesvariantes,assim,a 1/6
http://abrindoojogo.com.br/tutorialpixelarteparte1
09/12/2016 TutorialPixelArteparte1|AbrindooJogo
importantelembrarque,assimcomoaPencilTool,outrasferramentasapresentadasnestepargrafotambmpossuemopesvariantes,assim,a
atenodeveserconstanteparaquenohajaconfusonomomentodautilizaodasmesmas.

Linhasretas
Acriaodelinhasalgoqueparecefcil,porm,compixels,inclusivelinhasretaspodemapresentarproblemas.Oquedevemosevitarsoas
JaggiesouAliasing,ouseja,oexcessodecontrasteentreospixelsvizinhosdeumaimagem,issoocorrequandoumpedaodalinhamaiorou
menorqueaspeasvizinhas.

Linhascurvas
Muitaatenonacurvaturadaslinhas.Certifiquesequeainclinaosejaconsistentesempre.Nesteexemplo,acurvaabaixoapresentadade
formasuavecomaseguinteseqnciadepixels6>3>2>1,enquantoacurvacomoJaggy(serrilhada)apresentaaseqnciadepixel3>1<3.

Paraauxiliarnavisualizaopodemosconferirumgabaritodelinhas,logoabaixo:

GabaritodelinhasparaPixelArt.

Exerccio
Primeiramente,abraumarquivonovo(atalho,Crtl+N),comnomedeCarrodotamanhode18080pixelscom72dpideresoluo,emmodo
RBG.Escolhatransparenteparaacordefundo(Background).

importanterealizaralgunsajustesdeconfiguraonoprogramaparafacilitaracriaodailustrao:

1PrecisamosusaraferramentaPencilTooledevemosconfigurlasemaopoAntialiased,AutoeraseePreservetransparency,conformea
imagemabaixo:

http://abrindoojogo.com.br/tutorialpixelarteparte1 2/6
09/12/2016 TutorialPixelArteparte1|AbrindooJogo

2APaintBucketToolcomtolerncia0eAntialiaseddesligado:

3Seguindoocaminhoabaixocriaremosumasegundavisualizaododocumentoqueserusadamaisadiante,duranteacriao.

AcesseomenuWindoweacioneaopoDuplicateWindow

Deixeajanelaprincipalcom1600%dezoom(atalhoCrtl+,oquantofornecessrioparaatingirozoomqueacharnecessrio)easecundriacom
100%(atalhoCrtl+1).Assim,serpossvelvisualizarcomoestoresultadoobtidoemseutamanhoreal.

Comasdevidasconfiguraesajustadas,podemoscomearacriao.

Seesteforseuprimeirocontatocomestetipodearte,aconselhoescolherumdesenhodigitalizadoouumaimagemdereferncia,nestecaso,para
ilustrar,escolhiafotodeumcarroDelorean,oobjetivotransformloemumaversodofilmeDevoltaparaofuturo.

Versodocarrosemocapacitordefluxo

Antesdemaisnada,adoteumpadrodeorganizaodelayers(tambmconhecidasporcamadas).Estedetalheajudamuitocasosejanecessrio
realizarfuturosajustes.

Utilizeaimagemderefernciacomobackground,crieaslayersacimadobackgroundeasrenomeiedeacordocomocontedodecadauma.

Alayerondeestoostraosprincipaisdailustrao,foichamadaaquinoexemplode:Carrocontorno.

Crieumalayercomumfundobrancoentreosdesenhoseaimagemdereferncia,assimpossvelconferircomoodesenhoestficandosem
precisarexcluiraimagemdebackground.Paraisso,bastadesabilitaravisualizaodalayerdefundobrancoclicandonoconedoolho.

Feitoisso,comearemosatraarocontornododesenho.Parafacilitar,podemosutilizarogabaritodelinhascomoauxilio.

Muitaatenonaslinhas.Verifiqueogabaritodelinhassemprequehouverdvidas.

Emseguida,criemaisumacamadaparaaplicaropreenchimentodecor.Bloqueieascamadasdecontornoebackgroundparaevitarpixelsemlayers
erradas.

Agora,definaacoraserutilizadanailustraoparacriarumefeitodevolumetria.Aquinoexemplo,crieiumdegradesimples,emtonsdecinza.

Odegradfeitocomlinhascompoucadiferenadetonsdeumamesmacor.

http://abrindoojogo.com.br/tutorialpixelarteparte1 3/6
09/12/2016 TutorialPixelArteparte1|AbrindooJogo
Criaseposteriormenteumacamadadiferenteparaosdetalhesdocarro,adicionandopequenosdetalhescomojanelas,prachoqueselanternas.

Noteaimportnciadaposiodecadaponto,observeadiferenaqueelefaz,comparandoaimagemcomvisualizao
em100%(atalhoCrtl+1,imagemacima)comzoom600%(imagemabaixo).

Zoom600%

Paraasrodas,precisoatenononmerodepixelsparacadaumdoslados,noexemplonarodatraseira,utilizei9pixelsnaslinhashorizontais,5
nasdiagonaise8nasverticais.Estesnmerosnosoregra,masforamamelhoropoparaestailustrao.

Rodatraseira.

ComoDeloreanjpronto,faltasomentecriarasturbinasutilizandoomesmoesquemadecamadasseparadasparaesteelemento.

AgrandevantagemquepodesegerarimagensdocarrosimplesouemsuaversonofilmeDevoltaparaoFuturo.

Concluso
CriarPixelArtnotodifcilquantopodeaparentar,comopodesenotarporestetutorial.Estarconfiantecomacriaodequalquerlinhaem
pixelscrucialparafazerPixelArt,terumpoucodecriatividadeeseatentarsteclasdeatalhosodicasimportantesparanofazerconfuso
quandoutilizarasferramentasadequadas.

ComtreinooprocessodecriaodePixelArtsetornafciledivertidoparaoartista,incitandoparaquemaisemaisdesenhossejamproduzidos.

Maisadiante,vamosapresentaraaplicaodoantialiasingparaaperfeioaraaparnciadaslinhas,fazendoqueestaspareammaissuaves.Por
enquantoisso,ataprxima!

Referncia:

Textoadaptadoeimagensdeestilosdelinhas:

http://www.derekyu.com/

http://imasters.uol.com.br/artigo/1681

PodAbrir

http://abrindoojogo.com.br/tutorialpixelarteparte1 4/6
09/12/2016 TutorialPixelArteparte1|AbrindooJogo

AssineNossosFeeds

CurtanoFacebook

AbrindooJogo
1.524curtidas

CurtirPgina Saibamais

Sejaoprimeirodeseusamigosacurtirisso.

ltimosComentrios

EvertonVieirasays:

Ol,Beatriz!Tudobem?Claro!Aminhasugestovocprimeiroidentificarqualdasreasbsicasnaprodu...

EvertonVieirasays:

Ol,Wesllen!Tudobem?Meuconselhovocprocurarcursostcnicosdeprogramaoegamesnasuaregio.Ser...

EvertonVieirasays:

Ol,Walter!Eudiriaqueumcursotcnicoseriajsuficienteparavoccomearafazerseusprimeirosjogos....

EvertonVieirasays:

Ol,Rafael!Comcertezaumcursodegamesajudarvocaidentificarmelhorcadaumadasfunesemumaequip...

Categorias

3D
AbrindooJogo
ActionScript3.0
Cursos

http://abrindoojogo.com.br/tutorialpixelarteparte1 5/6
09/12/2016 TutorialPixelArteparte1|AbrindooJogo
Entrevistas
GameArt
GameArte
howto
HTML5
IntelignciaArtificial
Java
JogoAberto
LeitornoControle
LiesAprendidas
Matemtica
MercadodeJogos
Negcios
Notcias
PadrodeProjeto
Palestra
Pesquisa
PodAbrir
Programao
ProjetodeJogo
ProjetodeSoftware
Roteiro
Som
Tcnico
Terico
Tutorial

Home
QuemSomos
Podcast
CursoseTutoriais
Busca...

Sobre
Maisqueumsite,oAbrindooJogoumainiciativaonde,atravsdeartigos,notcias,debatesecursos,vamosapoiaracapacitaono
desenvolvimentodejogosnopas.

Seguindoodesejodosleitores,estaremosdividindoospostsemartigossobreprojetoeartigossobredesenvolvimento.Duascategorias
principaisorganizamocontedodeumaformabemamigvel,edentrodecadaumateremossubdivisescomoartigostericos,prticos,
orientadoaumalinguagemdeprogramaoespecfica.

LEITORNOCONTROLE
Nestacolunadosite,oleitor,ousejavoc,podeenviarartigostcnicosousobreomercadoparaserempublicadosaquinosite.

Sevoctiverinteresse,cliquenaimagemabaixoemandeumemailparagentecontandoasuaideia!

FALECONOSCO
Nome
Email
Mensagem

PodcastpoweredbypodPressv8.8.10.13

http://abrindoojogo.com.br/tutorialpixelarteparte1 6/6