Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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