guía de recursos gráficos para layar
DESCRIPTION
[ESP] La "Guía de recursos gráficos para Layar" explica en detalle y con ilustraciones a través de un proyecto real, todo el proceso de creación de imágenes 2D y modelos 3D para nuestras capas de Realidad Aumentada en 'Layar'. Todo el "know how" acumulado lo hemos plasmado en este documento: Recomendaciones, trucos, consejos... Esperamos que os sea útil!!! Puedes seguirnos vía Twitter desde @davidcontrerasm [ENG] The "Graphics Resource Guide for Layar" explains in detail and illustrated, through a real project, the entire process of creating 2D and 3D models for our Augmented Reality layers in 'Layar'. All the "know how" we've accumulated embodied in this document: Recommendations, tips, tricks ... We hope that you find it useful! You can follow us via Twitter from @davidcontrerasmTRANSCRIPT
// Guía de recursos gráfi cos
Para Layar //
// Guía de recursos gráfi cos
Para Layar //
//Gu
ía de
recu
rsos
gráfi
cos
para
Laya
r//0 _[ ÍNDICE ]
2 _[ Descargar el modelo ]2 _[ Descargar el modelo ] 5
/ Eliminar luces y cámaras/ Comprimir texturas/ Eliminar ‘Phong’/ Guardar proyecto I/ Eliminar detalles/ Simplifi car polígonos/ Rehacer formas sencillas/ Rehacer formas sencillas/ Añadir objetos básicos/ Añadir objetos básicos/ Herramientas/ Herramientas/ Guardar proyecto II/ Guardar proyecto II/ Exportar a 3DS/ Exportar a 3DS
910111213141516182829
/ Comprobar y corregir el modelo/ Exportar a .OBJ
3233
/ Menús/ Preview/ Materials/ Save as
/ Icono de la aplicación/ Banner Icon/ Iconos POI/ Banner de la portada/ Imagen de cada POI/ Cómo renderizar imágenes
37383940
43434445464748
3 _[ Cinema 4D ]3 _[ Cinema 4D ] 7
4 _[ 3D Studio ] 30
5 _[ Layar 3D model converter ]
6 _[ Creación de recursos para la aplicación ]
35
41
41 _[ Ìndice de fi guras ]1 _[ Ìndice de fi guras ]
4//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/1 _[ Indice de fi guras ]
2 _[ Descargar modelo ]2 _[ Descargar modelo ]/ fi g. 1/ fi g. 2
/ fi g. 3/ fi g. 4/ fi g. 5/ fi g. 6/ fi g. 7/ fi g. 8/ fi g. 9/ fi g. 10/ fi g. 11/ fi g. 12/ fi g. 13 a 17/ fi g. 18 a 20/ fi g. 21/ fi g. 22/ fi g. 23/ fi g. 24 a 26/ fi g. 27/ fi g. 28/ fi g. 29 a 32/ fi g. 33 / fi g. 34/ fi g. 35/ fi g. 36 a 39/ fi g. 40/ fi g. 41/ fi g. 42/ fi g. 43/ fi g. 44/ fi g. 45 a 47/ fi g. 48 a 50/ fi g. 51 a 53
/ fi g. 64/ fi g. 65/ fi g. 66/ fi g. 67/ fi g. 68/ fi g. 69/ fi g. 70
/ fi g. 71/ fi g. 72 a 75/ fi g. 76 a 78/ fi g. 79 a 86/ fi g. 79 a 86/ fi g. 87/ fi g. 87/ fi g. 88
/ fi g. 89 a 91/ fi g. 92/ fi g. 93/ fi g. 94/ fi g. 95/ fi g. 96/ fi g. 97/ fi g. 98/ fi g. 99/ fi g. 100/ fi g. 101/ fi g. 102 a 111
Descarga modelo desde internetGuardar el modelo en el ordenador
Comparar y seleccionar modelosComparar y seleccionar modelosComparar y seleccionar modelos
Eliminar cámaras y lucesVista sin Cámaras ni LucesVista sin Cámaras ni Luces
Comprimir texturas con PhotoshopComprimir texturas con PhotoshopVincular texturas en el modeloVincular texturas en el modelo
Eliminar los PhongEliminar los PhongVista sin los PhongVista sin los Phong
Guardar proyectoGuardar proyectoCómo guardar el proyecto
Eliminar detalles innecesariosSimplifi car polígonos
Sustituir formas sencillasNúmero de polígonos de la fi gura nueva
Crear fi guras nuevasMover, rotar y escalar fi guras
Vistas auxiliaresCrear un boleano
Restar una fi gura a otraCrear un cubo
Crear una HypernurbsMeter una fi gura en una Hypernurbs
Crear un Nurbs de TornoCrear una Spline
Crer un Nurbs ExtrusiónExtruir una Spline
Duplicar objetosDuplicar objetos
Selección múltiple de polígonosReemplazar partes sencillas del modelo
Editar un objeto
Importar archivo a 3DSComprobar el archivo rotando la cámara
Mover, girar y escalar piezasExportar archivo como Wavefront
Opciones de exportadoAdvertencias posibles
Comprobar el peso del archivo exportado
Importar el archivo a Layar 3D Los menús del programa
Menú vista previaAsignar texturas
Guardar el archivo como .l3dComprobar el peso del archvio
Recursos modifi cables en la capa LayarCreación del icono de la aplicación
Icono de la aplicaciónCreación del icono de los banners
Icono de los bannersCreación de los iconos de los POICreación de los iconos de los POI
Icono de los POI iluminadoIcono de los POI iluminadoCreación del banner de la portadaCreación del banner de la portada
Banner de la portadaBanner de la portadaCreación de las imágenes de cada POICreación de las imágenes de cada POI
Imágenen de uno de los POIImágenen de uno de los POICrear renders de los modelosCrear renders de los modelos
Conectar más eliminar objetosCentrar ejes de rotación
Guardar proyecto editadoExportar archivo a 3DS
Comprobar el peso del archivo exportado
3 _[ Cinema 4D ]
/ fi g. 54 a 57/ fi g. 58 a 60/ fi g. 61/ fi g. 62/ fi g. 63
4 _[ 3D Studio ]
5 _[ Layar 3D model converter ]
6 _[ Creación de recursos para la aplicación ]6 _[ Creación de recursos para la aplicación ]
_[ DESCARGAR EL MODELO ]
6//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/2 _[ DESCARGAR EL MODELO ]
Guardar Cómo:
Recomendación:
Recomendamos guardar todos los
archivos descargados en una capeta
llamada ‘Originales’, y cada modelo
en una subcarpeta con su nombre.
A lo largo de este documento usamos
una estructura de carpetas que nos ha
funcionado. Hazlo como quieras, pero
¡sé ordenado!
Cuando sea posible, es mejor descar-
gar un modelo que tenga extensión
‘.C4D’, ‘.3DS’, o en su defecto ‘.LW’.
Normalmente se escogerá el modelo
que menos pese, pero en Sci-Fi 3D
puedes descargar todos y realizar una
comparativa de peso y calidad.
fi g. 1
fi g. 2
En este tutorial partiremos del supuesto de que queremos usar un modelo 3D ya existente, en Layar. Tenemos en internet multitud de páginas con modelos gratuitos. Elige la que más te guste, revisa el tipo de
licencia de uso y ¡a trabajar! Nosotros vamos a usar una nave “B Wing” descargada desde h� p://www.scifi 3d.com/. Puedes saltarte este paso si ya dispones de un modelo hecho por ti mismo.
_[ CINEMA 4D ]
8//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/3 _[ CINEMA 4D ]
Abrir el archivo:
Escoger el modelo:
Abre los archivos con Cinema 4D y
valora la “complejidad” de los modelos
comparándolos.
Elige el de menor número de piezas
o el mejor texturizado en caso de que
valga la pena.
En este caso utilizaremos la segunda
opción puesto que parece más sencilla
en principio.
Esto podría cambiar más adelante si
durante el proceso se valorara que la
decisión no ha sido la idónea.
fi g. 3
fi g. 4
Usaremos Cinema 4D a lo largo de todo el ejemplo porque es el programa que mejores resultados nos ha dado y con el que nos sentimos más cómodos trabajando. Si usas otro programa no pasa nada:
intenta aplicar las ideas de este pequeño manual con él.
9//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
//Eliminar luces y cámaras:
Si las hubiera, se deben elminar todas
las cámaras que tenga el modelo origi-
nal, así como las luces, simplemente
seleccionándolas y pulsando suprimir.
Eliminar cámaras y luces:
Éste debería ser aproximadamente el
aspecto fi nal del modelo tras hacer
ese paso.
fi g. 5
fi g. 6
10//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
//Comprimir texturas:
En caso de que el objeto tuviera tex-
turas originalmente, se deberán con-
vertir todas a ‘.JPG’, por ejemplo con
Photoshop, y a mínima calidad si esto
no perjudica en exceso al resultado.
Una vez hecho, se guardarán en una
carpeta llamada ‘JPGs’.
Comprimidas las imágenes, se reenla-
zarán en el modelo de Cinema 4D.
Haremos doble ‘Click’ sobre cada una
de las texturas (1), y en el apartado de
‘Color’ (2), le indicaremos la ruta que
tiene la nueva textura, ayudándonos del
nombre que ya viene especifi cado.
Cuando nos pregunte si queremos hacer
una copia en el directorio del docu-
mento, pulsaremos ‘No’, puesto que lo
haremos más adelante.
Comprimir las imágenes:
Reenlazar las texturas:
1
2
fi g. 7
fi g. 8
11//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
//Eliminar Phong:
Los ‘Phong’ son propiedades que nor-
malmente tendrán asignadas cada una
de las piezas del objeto que hacen que
el aspecto de este sea más suavizado,
sin marcar los vértices.
Aumentan mucho el peso del modelo,
y no nos interesa puesto que más
adelante Layar hará algo parecido .
Eliminar los Phong
Consejo:Para desplegar todas las piezas
haremos ‘Click’ derecho en el
panel de objetos y pincharemos sobre
‘Expandir todo’.
De esta forma nos será más fácil se-
leccionar los ‘Phong’ de una sola vez.
Este será el aspecto del modelo tras
eliminar los Phong.fi g. 10
fi g. 9
12//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
//Guardar Proyecto I:
Al proyecto le daremos el nombre
del modelo más la etiqueta “cinema
4D”, para saber cual es el archivo ‘sin
modifi car’ del que partimos en caso
de que tuviéramos que volver a ésta
fase en algún momento.
fi g. 11
fi g. 12
Una vez hecho, guardaremos el
archivo del modelo en este estado.
Para que nos enlace las texturas sin
que más adelante nos de problemas,
deberemos hacer ‘Click’ en ‘Guardar
proyecto’, y no en ‘Guardar cómo’,
dado que así nos creará una carpeta
con todas las imágenes de las tex-
turas utilizadas.
13//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
//Eliminar detalles:
En ocasiones nos encontraremos
con que los objetos originales tienen
detalles que en el modelo fi nal no se
van a apreciar.
Esto incrementa mucho el peso del
archivo (en especial si hay fi guras
de personas), por lo que deberemos
eliminarlos, así como los detalles que
no sean importantes.
En este caso primero seleccionare-
mos la cabina (1), y después, con los
tiradores de dirección (flechas roja,
verde y azúl) la moveremos hacia
uno de los tres lados (2).
Después seleccionaremos al piloto en
sí (o a los de talles del interior que
no sean importantes), y pulsaremos
la tecla “borrar”.
Así será el aspecto del modelo tras
eliminar al piloto.
Por último, volveremos a colocar la
cabina en la posición que tenía origi-
nalmente, simplemente volviendo a
ayudarnos de los tiradores anterior-
mente utilizados.
1
2
3
4
5
fi g. 13 a 17
14//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
//Simplifi car polígonos:
En ocasiones las naves tendrán más
polígonos de los que a priori serían
necesarios.
Para simplifi carlos primero seleccion-
aremos la pieza en cuestión.
Después daremos a la opción “des-
triangular” (u+u), y nos saldrá una
ventana de opciones.
Los valores pueden rondar entre el
0.1º y los 90º.
Lo aconsejable es moverese en torno
a los 20º para no dañar en exceso la
pieza.
Después pulsamos ‘Intro’ y ya podre-
mos observar que todos los vértices
innecesarios han sido suprimidos.
fi g. 18 a 20
15//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Rehacer fomas sencillas
Por lo general, las formas que vienen
establecidas por defecto el a nave son
demasiado “pesadas”, y lo que nos
interesa es reducir este peso.
Para ello, la opción más útil es la de
sustituir todas las formas sencillas de
la nave (las formadas por cilindros,
cubos, conos, etc) por formas básicas
creadas por nosotros mismos.
Cuando creemos formas básicas es
importante reducir el número de
polígonos que traen por defecto me-
diante el panel de objeto de la parte
inferior derecha del programa.
fi g. 21
fi g. 22
16//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/(AÑADIR OBJETOS BÁSICOS)
Desplazar: Rotar: Escalar:Con los tiradores podremos mover
el objeto en cualquier dirección en el
espacio.
Desde el menú de formas básicas
podemos crear cubos, cilindros, etc.
Pinchando en cualquiera de los tres
círculos y arrastrando giraremos el
objeto hacia donde nos convenga.
Con la herramienta ‘Escalar’ prodre-
mos redimensionar las piezas para
darles la forma que nos interese.
fi g. 23
fi g. 24 a 26
17//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Los paneles de vistas auxiliares
Para situar las formas creadas en
la posición que más nos interese,
podemos ayudarnos de las vistas
auxiliares (alzado, planta y perfi l), que
nos facilitarán el proceso.
Estos paneles se despliegan pulsando
sobre el símbolo cuadrado de la parte
superior derecha de la previsualización.
fi g. 27
18//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/[ BOOLEANO]
Primero crearemos la
forma a la que le quere-
mos “restar” algo.
Después, colocare-
mos la forma que le
queremos restar en su
posición.
Colocamos la forma
primera por encima de
la segunda.
Creamos un Booleano,
y arrastramos ambas
formas dentro de él.
El resultado será algo
similar a ésto.
El booleano es una herramienta que
se utiliza para “restar” unos objetos a
otros que en determinados casos nos
puede ser de gran ayuda
fi g. 28 fi g. 29 a 32
19//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/[ HYPERNURBS ]
La herramienta ‘Hypernurbs’ sirve
para ‘redondear’ las formas angulosas
de los objetos.
Cuantos más polígonos tenga el
objeto, menos acusada será la trans-
formación.
Una vez creada la forma que que-
remos ‘redondear’, crearemos un
‘Hypernurbs’ desde el menú superior.
Finalmente, meteremos esta forma
básica dentro de él y el resultado será
algo similar a lo que podemos ver en
este ejemplo.
fi g. 35
fi g. 34
fi g. 33
20//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/[ NURBS TORNO ]
La herramienta ‘Nurbs Torno’ sirve
para modelar objetos partiendo de un
eje y haciendo la envoltura alrededor
de él como si de un alfarero se tratara.
Para utilizar esta herramienta primero
debemos crear una forma vectorial.
El Cinema 4D nos permite crearlas
desde el mismo programa o importar-
las como Illustrator 8.
Para crearlas desde Cinema seleccion-
aremos la herramienta ‘Spline’.
Podremos dar la forma que deseemos
a nuestro ‘Spline’ con ayuda de las
vistas auxiliares.
Una vez defi nido el ‘Spline’, lo meter-
emos dentro del ‘Nurbs Torno’, y nos
creará una forma similar a esta.
Para crear un ‘Nurbs’ clicaremos so-
bre esta opción en el menú superior.
fi g. 36 a 39
21//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/[ NURBS EXTRUSION ]
La herramienta ‘Nurbs Extrusion’
sirve para dar volumen a formas
vectoriales diseñadas con Cinema 4D
o importadas como Illustrator 8.
Una vez creado el ‘spline’ con la
forma que deseemos, sacaremos un
‘Nurbs Extrusión’ del menú superior.
Y después, meteremos esta forma
básica dentro de él y el resultado será
algo similar a lo que podemos ver en
este ejemplo.
fi g. 40
fi g. 41
fi g. 42
22//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/[ DUPLICAR OBJETOS ]
Duplicar objetos nos será muy útil
a la hora de ahorrar tiempo cuando
estemos modelando alguna pieza.
Basta con seleccionar el objeto a duplicar
en el menú de ‘Objetos’ y pulsar la tecla
‘Control’, arrastrándolo hacia arriba o
hacia abajo.
Al soltarlo se habrá creado automática-
mente un clon de ese objeto en el mismo
lugar y posición.
fi g. 43 fi g. 44
23//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/[ SELECCIÓN MÚLTIPLE DE POLÍGONOS]
Después seleccionaremos también la
herramienta de selección de polígonos
de la parte izquierda del programa.
Finalmente, pasaremos el cursor pin-
chando por las zonas que queramos
seleccionar y si queremos añadir
alguna otra, mantendremos pulsado el
‘shift’ (o mayúsculas).
La selección múltiple será muy útil a la
hora de seleccionar muchos polígonos a
la vez, para eliminarlos, modifi carlos, etc,
en lugar de tener que seleccionarlos uno
a uno.
Para ello, trabajaremos con la herramienta
que se indica en la imagen.
fi g. 45 a 47
24//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Rehacer fomas sencillas
/ Cuando se dé por terminado, guardaremos / Cuando se dé por terminado, guardaremos el archivo como “nombre del modelo el archivo como “nombre del modelo simplifi cado”
Mediante estas herramientas seremos
capaces de susitutuir gran parte de
las piezas originales del modelo por
fi guras sencillas que reducirán mucho
el peso del modelo.
En este ejemplo sustituimos uno de
los cañones láser de la nave origi-
nal, por cilindros creados mediante
Cinema 4D.
Por último debemos asignar de nuevo
las texturas que antes tenía la pieza, a
las nuevas piezas diseñadas, y estará
terminado.
fi g. 48 a 50
25//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Hacer Editable
Hacer editable un objeto nos ayudará
a poder conectarlo, cambiarle el cen-
tro de rotación y reducir el peso del
archivo, pero no podremos realizar
modifi caciones sobre su número de
polígonos de nuevo.
Para hacerlo basta con seleccionar
las piezas que hayamos creado desde
cero, y hacer ‘Click’ sobre la opción
de ‘Hacer editable’ de la parte supe-
rior izquierda del programa.
fi g. 51 a 53
26//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Conectar + Eliminar
Conectar los objetos nos servirá para
evitar que al pasar a otros programas,
estos den problemas o descoloquen
las piezas, las giren o las cambien
de lugar, además de para unifi car las
texturas.
Para hacerlo, seleccionaremos todas
las piezas que lleven la misma textura,
y mediante el botón derecho haremos
‘Click’ sobre la opción ‘Conectar más
eliminar’ que nos aparecerá.
Tras esto, se habrá creado un objeto
nuevo que englobará a todos los
anteriores con el nombre del primero
que hubiera.
Debemos seleccionar y eliminar todas
las texturas que se hayan asignado a
este nuevo obejto, dado que normal-
mente el propio programa las duplica
sin necesidad.
Por último le asignaremos de nuevo
la textura que contenía en prin-
cipio, quedando todo uniformado y
ordenado.
fi g. 54 a 57
27//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Centrar los ejes
Centrar los ejes de rotación nos servirá
para evitar que al pasar a otros progra-
mas, estos den problemas o descoloquen
las piezas, las giren o las cambien de
lugar.
Para ello, seleccionaremos la herramienta
de “Mover ejes de rotación”.
Después, a mano o ayudándonos
del panel de coordenadas de los ejes,
situaremos los mismos en el centro de
la nave o en el centro del documento
(punto 0,0,0)
fi g. 58 a 60
28//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Guardar Proyecto II
Una vez hechas estas modifi caciones y unifi cadas
todas las texturas y los ejes, guardaremos de nuevo
el proyecto, pero esta vez lo llamaremos ‘nombre
del modelo editado’, para que en caso de necesi-
dad, podamos volver a un estado anterior a realizar
modifi caciones.
fi g. 61
29//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Exportar a 3DS
Ahora nos dispondremos a exportar
el archivo a ‘.3DS’ para después poder
hacer el ‘.OBJ’ desde 3D stutio Max.
Para ello símplemente seleccionaremos
la opción desde Archivo/Exportar/3DS.
Después, lo idóneo sería comprobar
que el archivo tuviera un peso inferior
a los 700 Kb, o incluso menos, ya que
Layar presenta problemas con fi cheros
de peso superior.
Si no es así, deberemos volver al ar-
chivo ‘nombre del proyecto simplifi ca-
do’ y reducir el número de polígonos,
o sustituir más formas del modelo por
formas básicas.
fi g. 63
fi g. 62
_[ 3D STUDIO ]
31//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/4 _[ 3D Studio ]
Una vez tenemos el archivo con el
peso adecuado, conectado y texturi-
zado, abriremos 3D Studio Max y el
archivo ‘.3DS’ creado desde Cinema
4D.
fi g. 64
32//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Comprobar el modelo
Comprobaremos que todas las piezas
del modelo están en su sitio con la
ayuda de la herramienta aquí mostra-
da, que nos permite girar en cuaquier
dirección alrededor del modelo.
En caso de que hubiera alguna irregu-
laridad en el modelo, normalmente
basta con seleccionar la pieza, y
mediante unas herramientas similares
a las de Cinema 4D de movimiento,
rotación y escala, colocarlas todas en
el lugar que les corresponda.
fi g. 65
fi g. 66
33//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Exportar como .OBJ
Una vez esté todo en su sitio debemos
exportar de nuevo el archivo como
‘.OBJ’, para lo cual iremos a ‘Archivo
/ Exportar’, y seleccionaremos dicha
compresión. Lo denominaremos como
‘nombre del modelo.obj’
Nos aparecerá un menú de opciones
para exportar el ‘Wavefront’.
Seleccionaremos únicamente las
opciones de “Texture Coordinates”,
“Export materials”, “Create Mat-library”
y “Optimize Texture-Coord”.
Cuando nos aparezca el panel de
advertencia de enlaces de texturas,
lo más útil es pulsar sobre “don’t
bother me again” y “skip”, porque
las texturas las enlazaremos después
mediante Layar.
fi g. 67
fi g. 68
fi g. 69
34//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Comprobar el peso del archivo
De nuevo comprobaremos que el
peso del archivo no supere los 700 Kb
(aproximadamente), aunque en este
caso tenemos algo más de margen (no
es aconsejable superar los 900Kb),
puesto que Layar lo comprimirá más
fi g. 70
_[ LAYAR 3D MODEL CONVERTER ]
36//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/5 _[ Layar 3D model converter ]
Una vez comprobados los pesos, nos
disponemos a abrir ‘Layar 3D Model
Converter’, e importar el archivo
‘.OBJ’ que acabamos de crear.
fi g. 71
37//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Menús Layar
Layar 3D Model Converter tiene
4 menús importantes con los que
controlar el modelo.
El primero es ‘Overview’, que nos
da información del modelo que
acabamos de importar.
En el menú ‘Materials’ podemos ver
las zonas de color que hemos creado.
Desde aquí asignaremos los materi-
ales que sean necesarios.
Con el menú ‘Preview’ podemos ver
una previsualización del modelo 3D
que hemos abierto, y comprobar así
que todas las piezas estén en su lugar.
Y con el menú ‘Placement’, podemos
situar el objeto en cualquier parte
del mundo para hacernos a la idea
del tamaño relativo del mismo, o
escalarlo en caso de necesidad.
fi g. 72 a 75
38//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Preview
Volviendo al menú ‘Preview’, el
modelo que hemos traido por norma
general estará rotado.
Para colocarlo en su posición sim-
plemente debemos entrar en ‘Edit /
Rotate/ 90 x’.
Y este será el aspecto del modelo una
vez que lo giremos.
Además, mediante los ‘scrolls’ de los
laterales, podemos girar el punto de
vista y la distancia para ver mejor
todos los ángulos del modelo.
fi g. 76 a 78
39//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Materials
En el menú de materiales, nos dispondremos a
asignar a cada zona su textura correspondiente.
De nuevo en el de materiales, asignaremos las
texturas estáticas o dinámicas según convenga.
Para ello, un método rápido sería asignar a
cada zona un color diferente, dado que Layar
no las nombra de ninguna manera que nos
permita reconocerlas de otro modo.
Y después le quitaremos los colores anterior-
mente asignados para sustituirlos por grises
más claros o más oscuros para que no afecte a
los colores originales de la textura.
Volviendo a la previsualización, sabremos qué
zona es cada color, y sabremos qué textura
debe ir en cada zona.
En caso de que queramos hacer una textura
animada, tendremos dos opciones: hacerla con
transparencias o sin ellas.
Si queremos una textura sin
transparencias bastará con
realizar una secuencia de
‘JPGs’ de muy poco peso y
enlazarlos uno por uno en la
opción de ‘animated’.
Si por el contrario necesitamos
una textura con ‘alfa’ (un disparo,
por ejemplo) crearemos unos
PNGs de 24 bits con transpar-
encia y con el menor número de
colores posible.
Después lo enlazaremos como en
el caso anterior.fi g. 79 a 86
40//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Save as
Una vez terminado, iremos a ‘Ar-
chivo / Guardar como’, y le asignare-
mos el nombre del modelo.
Comprobaremos por última vez el
peso fi nal del archivo, el cual no
deberá superar (idealmente) los 700
Kb.
fi g. 88
fi g. 87
_[ CREACIÓN DE RECURSOS PARA LA APLICACIÓN ]
42//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
/6 _[ Creación de recursos para la aplicación ]
Layar nos permite sustituir algunos
de los elementos de su interfaz por
elementos diseñados por nosotros
mismos, lo cual hace posible una
mayor personalización de la capa en
cuestión.
Estos elementos los dividiremos en:
Iconos de la aplicación, Iconos de
los banners, Iconos POI (point of
interest), Banner de la portada e
Imágenes de cada POI.
Además, Layar también nos permite
cambiar los textos que irán en cada
apartado, así como las descripciones
de cada modelo, el color de fondo
del banner, el color de los textos, etc.
Iconos de la aplicación
Banners Icon
Baner de la portada
Iconos POIs
Imagen de cada POI
fi g. 89 a 91
43//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Icono de la aplicación
Photoshop
Icono fi nal
Éste será el icono que aparecerá
representando la capa que se quiera
hacer.
Hemos usado photoshop (imagen
de la izquierda). Es cuadrado: Layar
redondeará las esquinas después.
Deberá hacerse en tres tamaños
diferentes:
- 64x64
- 96x96
- 128x128
Aquí se muestra el resultado del
icono en 96x96 pixels.
fi g. 92
fi g. 93
44//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Iconos de los Banners
Photoshop
Icono fi nal
El icono de los banners aparecerá
en la barra inferior de la pantalla
del movil una vez se haya lanzado la
capa, en el modo cámara.
El icono no podrá llevar transpar-
encias y deberá ser rectangular, por
lo que para simularlas, podremos
utilizar el mismo color de fondo que
valla a llevar el banner, simulando de
este modo una transparencia de alfa.
Deberá ir en tres tamaños diferentes:
- 60x26
- 90x39
- 120x52
Aquí se muestra el resultado del
icono en 120x52.
fi g. 94
fi g. 95
45//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Iconos de los POI
Photoshop
Icono fi nal
Este icono aparecerá en el lugar en el
que haya algún punto de interés, en
el caso de que el modelo 3D no se
esté renderizando en ese momento.
Deberá ir en 3 tamaños distintos, y
además el más grande deberá ir en
dos variantes, apagado e iluminado,
que aparecerá cuando el icono esté
seleccionado por la aplicación. (‘On
focus‘)
Su forma puede ser libre, ya que
el programa acepta transparencias,
siluetas, etc.
Los tamaños deberán ser:
- 56x56
- 76x76
- 110x110 on focus
- 110x110 off focus
Aquí se muestra el resultado del
icono en 110x110 e iluminado.
fi g. 96
fi g. 97
46//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Banner de la portada
Photoshop
Banner fi nal
Este banner aparecerá en la página
de inicio de la capa Layar cuando la
iniciemos.
Sólo es necesario realizarlo en un
tamaño, puesto que en caso de que
la pantalla sea más pequeña, el
propio programa lo corta, por lo que
también deberemos tener en cuenta
que la composición de dicho banner
deberá ser reconocible solamente con
el centro del mismo.
- 700x100
Resultado del banner en 700x100.
fi g. 98
fi g. 99
47//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Imagen de cada POI
Photoshop
Icono fi nal
Esta será la imagen que aparecerá
representando cada modelo en el
‘Modo lista’ de Layar y en la fi cha
propia del objeto.
Deberá ir en dos tamaños diferentes,
teniendo en cuenta que Layar los
redimensiona según las necesidades
del propio movil:
- 152x103
- 240x240
Aquí se muestra el resultado del
icono en 152x103.
fi g. 100
fi g. 101
48//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Cómo renderizar imágenesCinema 4D
En caso de que necesitemos alguna
imagen para los recursos gráfi cos
de la aplicación podemos realizarla
directamente con el modelo que
hallamos creado o modifi cado desde
Cinema 4D.
Para ello, abriremos de nuevo el
modelo con el que estábamos tra-
bajando, a ser posible la versión sin
modifi car, para evitar perder calidad.
Después, procederemos a la creación
de la ‘escena’ que renderizaremos
más adelante.
Primero situaremos el modelo en el
centro de la escena.
Luego, para dar más realismo al
conjunto, procederemos a colocar
un suelo, un cielo y unas luces que
nos ayudarán a dar más volumen al
conjunto.
49//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Creación del entornoSuelo y cielo
Luces y sombras
Para crear un suelo y un cielo
bastará con pulsar en las opciones
indicadas de la barra superior.
Automaticamente se creará un suelo
en el centro de la escena y un cielo
en el fondo.
Asignaremos un color (blanco por
ejemplo) a ambos y además les
añadiremos la etiqueta de “com-
posición”, pulsando a su vez dentro
de esta la opción “composición de
fondo”.
Una vez creado el suelo y el cielo,
las luces nos ayudarán a dar más
profundidad al conjunto.
Crearemos una o dos luces, y
les variaremos la intensidad y la
disposición en el entorno hasta
conseguir el efecto deseado.
Después les añadiremos la propiedad
de “sombra de area” para que los
objetos proyecten sombra sobre el
suelo.
50//
Guía
de re
curs
os gr
áfi c
ospa
ra La
yar/
// Cámaras y renderizadoCámaras
Renderizado
Después de crear el entorno, el-
egiremos el ángulo desde el cual nos
interesa renderizar la imagen (algo
así como el encuadre en fotografía).
Una vez conseguido, crearemos
una cámara para poder volver a ese
punto cuantas veces queramos sin
que se mueva.
Para ellos simplemente crearemos
una cámara desde la opción indicada.
Conformes con la escena creada,
iremos a las propiedades de renderi-
zado pulsando en la pestaña indicada
en la imagen.
Dentro de estas opciones iremos a
‘salida’ e indicaremos el tamaño y la
resolución del render que queramos
hacer.
Desde ‘guardar’ indicaremos la ruta
y el formato en que queremos que
nos guarde la imagen.
Finalmente pulsaremos sobre la
opción de ‘crear render’ y veremos
cómo el programa crea poco a poco
la imagen que se guardará automat-
icamente en la ruta que le hallamos
indicado.
pág 41 a actual.
fi g. 102 a 111
// (GUÍA DE RECURSOS GRÁFICOS PARA LAYAR) //
Empresa: Esidea Grupo Tecnológico. Síguenos en Twi� er vía @davidcontrerasm
Daniel Portal Gil (Modelado 3D)
Cristina Munilla Miguel (2D)
Jesús Mª Eraso Lerena (Desarrollo)
David Contreras Magaña (Jefe de equipo)