[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 @davidcontrerasm

1. // Guía de recursos gráficos
Para Layar //

3. 0 _[ ÍNDICE ]
//Guía de recursos gráficos
para Layar//
1 _[ Ìndice de figuras ] 4
2 _[ Descargar el modelo ] 5
3 _[ Cinema 4D ] 7
/ Eliminar luces y cámaras 9
/ Comprimir texturas 10
/ Eliminar ‘Phong’ 11
/ Guardar proyecto I 12
/ Eliminar detalles 13
/ Simplificar polígonos 14
/ Rehacer formas sencillas 15
/ Añadir objetos básicos 16
/ Herramientas 18
/ Guardar proyecto II 28
/ Exportar a 3DS 29
4 _[ 3D Studio ] 30
/ Comprobar y corregir el modelo 32
/ Exportar a .OBJ 33
5 _[ Layar 3D model converter ] 35
/ Menús 37
/ Preview 38
/ Materials 39
/ Save as 40
6 _[ Creación de recursos para la aplicación ] 41
/ Icono de la aplicación 43
/ Banner Icon 44
/ Iconos POI 45
/ Banner de la portada 46
/ Imagen de cada POI 47
/ Cómo renderizar imágenes 48

4. 1 _[ Indice de figuras ]
//Guía de recursos gráficos
para Layar//
2 _[ Descargar modelo ] / fig. 54 a 57
/ fig. 58 a 60
Conectar más eliminar objetos
Centrar ejes de rotación
/ fig. 61 Guardar proyecto editado
/ fig. 1 Descarga modelo desde internet
/ fig. 62 Exportar archivo a 3DS
/ fig. 2 Guardar el modelo en el ordenador
/ fig. 63 Comprobar el peso del archivo exportado
3 _[ Cinema 4D ] 4 _[ 3D Studio ]
/ fig. 3 Comparar y seleccionar modelos / fig. 64 Importar archivo a 3DS
/ fig. 4 Comparar y seleccionar modelos / fig. 65 Comprobar el archivo rotando la cámara
/ fig. 5 Eliminar cámaras y luces / fig. 66 Mover, girar y escalar piezas
/ fig. 6 Vista sin Cámaras ni Luces / fig. 67 Exportar archivo como Wavefront
/ fig. 7 Comprimir texturas con Photoshop / fig. 68 Opciones de exportado
/ fig. 8 Vincular texturas en el modelo / fig. 69 Advertencias posibles
/ fig. 9 Eliminar los Phong / fig. 70 Comprobar el peso del archivo exportado
/ fig. 10 Vista sin los Phong
/ fig. 11
/ fig. 12
Guardar proyecto
Cómo guardar el proyecto
5 _[ Layar 3D model converter ]
/ fig. 13 a 17 Eliminar detalles innecesarios / fig. 71 Importar el archivo a Layar 3D
/ fig. 18 a 20 Simplificar polígonos / fig. 72 a 75 Los menús del programa
/ fig. 21 Sustituir formas sencillas / fig. 76 a 78 Menú vista previa
/ fig. 22 Número de polígonos de la figura nueva / fig. 79 a 86 Asignar texturas
/ fig. 23 Crear figuras nuevas / fig. 87 Guardar el archivo como .l3d
/ fig. 24 a 26 Mover, rotar y escalar figuras / fig. 88 Comprobar el peso del archvio
/ fig. 27 Vistas auxiliares
/ fig. 28
/ fig. 29 a 32
Crear un boleano
Restar una figura a otra
6 _[ Creación de recursos para la aplicación ]
/ fig. 33 Crear un cubo / fig. 89 a 91 Recursos modificables en la capa Layar
/ fig. 34 Crear una Hypernurbs / fig. 92 Creación del icono de la aplicación
/ fig. 35 Meter una figura en una Hypernurbs / fig. 93 Icono de la aplicación
/ fig. 36 a 39 Crear un Nurbs de Torno / fig. 94 Creación del icono de los banners
/ fig. 40 Crear una Spline / fig. 95 Icono de los banners
/ fig. 41 Crer un Nurbs Extrusión / fig. 96 Creación de los iconos de los POI
/ fig. 42 Extruir una Spline / fig. 97 Icono de los POI iluminado
/ fig. 43 Duplicar objetos / fig. 98 Creación del banner de la portada
/ fig. 44 Duplicar objetos / fig. 99 Banner de la portada
/ fig. 45 a 47 Selección múltiple de polígonos / fig. 100 Creación de las imágenes de cada POI
/ fig. 48 a 50 Reemplazar partes sencillas del modelo / fig. 101 Imágenen de uno de los POI
/ fig. 51 a 53 Editar un objeto / fig. 102 a 111 Crear renders de los modelos
4

5. _[ DESCARGAR EL MODELO ]

6. 2 _[ DESCARGAR EL MODELO ]
//Guía de recursos gráficos
para Layar//
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.scifi3d.com/. Puedes saltarte este paso si ya dispones de un modelo hecho por ti mismo.
fig. 2
Recomendación:
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.
Guardar Cómo:
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
fig. 1 una estructura de carpetas que nos ha
funcionado. Hazlo como quieras, pero
¡sé ordenado!
6

7. _[ CINEMA 4D ]

8. 3 _[ CINEMA 4D ]
//Guía de recursos gráficos
para Layar//
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.
Abrir el archivo:
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. fig. 3
Escoger el modelo:
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.
fig. 4
8

9. /Eliminar luces y cámaras:
//Guía de recursos gráficos
para Layar//
Eliminar cámaras y luces:
Si las hubiera, se deben elminar todas
las cámaras que tenga el modelo origi-
nal, así como las luces, simplemente
fig. 5
seleccionándolas y pulsando suprimir.
Éste debería ser aproximadamente el
aspecto final del modelo tras hacer
ese paso.
fig. 6
9

10. /Comprimir texturas:
//Guía de recursos gráficos
para Layar//
Comprimir las imágenes:
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’. fig. 7
Reenlazar las texturas:
Comprimidas las imágenes, se reenla-
zarán en el modelo de Cinema 4D.
2
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 especificado.
Cuando nos pregunte si queremos hacer
1 una copia en el directorio del docu-
mento, pulsaremos ‘No’, puesto que lo
haremos más adelante.
fig. 8
10

11. /Eliminar Phong:
//Guía de recursos gráficos
para Layar//
Eliminar los 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
fig. 9
adelante Layar hará algo parecido .
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.
fig. 10
11

12. /Guardar Proyecto I:
//Guía de recursos gráficos
para Layar//
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.
fig. 11
Al proyecto le daremos el nombre
del modelo más la etiqueta “cinema
4D”, para saber cual es el archivo ‘sin
modificar’ del que partimos en caso
de que tuviéramos que volver a ésta
fase en algún momento.
fig. 12
12

13. /Eliminar detalles:
//Guía de recursos gráficos
para Layar//
1 4
En ocasiones nos encontraremos
con que los objetos originales tienen
detalles que en el modelo final no se
van a apreciar.
Esto incrementa mucho el peso del
archivo (en especial si hay figuras
de personas), por lo que deberemos Así será el aspecto del modelo tras
eliminarlos, así como los detalles que eliminar al piloto.
no sean importantes.
2 5
En este caso primero seleccionare- Por último, volveremos a colocar la
mos la cabina (1), y después, con los cabina en la posición que tenía origi-
tiradores de dirección (flechas roja, nalmente, simplemente volviendo a
verde y azúl) la moveremos hacia ayudarnos de los tiradores anterior-
uno de los tres lados (2). mente utilizados.
3
Después seleccionaremos al piloto en
sí (o a los de talles del interior que
no sean importantes), y pulsaremos
fig. 13 a 17
13
la tecla “borrar”.

14. /Simplificar polígonos:
//Guía de recursos gráficos
para Layar//
En ocasiones las naves tendrán más Después daremos a la opción “des- Después pulsamos ‘Intro’ y ya podre- fig. 18 a 20
polígonos de los que a priori serían triangular” (u+u), y nos saldrá una mos observar que todos los vértices
necesarios. ventana de opciones. innecesarios han sido suprimidos.
Para simplificarlos primero seleccion- Los valores pueden rondar entre el
aremos la pieza en cuestión. 0.1º y los 90º.
Lo aconsejable es moverese en torno
a los 20º para no dañar en exceso la
pieza.
14

15. / Rehacer fomas sencillas
//Guía de recursos gráficos
para Layar//
fig. 21
Por lo general, las formas que vienen Para ello, la opción más útil es la de
establecidas por defecto el a nave son sustituir todas las formas sencillas de
fig. 22
demasiado “pesadas”, y lo que nos la nave (las formadas por cilindros,
interesa es reducir este peso. 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.
15

16. (AÑADIR OBJETOS BÁSICOS)
//Guía de recursos gráficos
para Layar//
Desde el menú de formas básicas fig. 23
podemos crear cubos, cilindros, etc.
fig. 24 a 26
Desplazar: Rotar: Escalar:
Con los tiradores podremos mover Pinchando en cualquiera de los tres Con la herramienta ‘Escalar’ prodre-
el objeto en cualquier dirección en el círculos y arrastrando giraremos el mos redimensionar las piezas para
espacio. objeto hacia donde nos convenga. darles la forma que nos interese.
16

17. / Los paneles de vistas auxiliares
//Guía de recursos gráficos
para Layar//
fig. 27
Para situar las formas creadas en Estos paneles se despliegan pulsando
la posición que más nos interese, sobre el símbolo cuadrado de la parte
podemos ayudarnos de las vistas superior derecha de la previsualización.
auxiliares (alzado, planta y perfil), que
nos facilitarán el proceso.
17

18. [ BOOLEANO] El booleano es una herramienta que
//Guía de recursos gráficos
para Layar//
se utiliza para “restar” unos objetos a
otros que en determinados casos nos
puede ser de gran ayuda
fig. 28 fig. 29 a 32
Primero crearemos la Después, colocare-
forma a la que le quere- mos la forma que le
mos “restar” algo. queremos restar en su
posición.
Creamos un Booleano,
y arrastramos ambas
formas dentro de él.
Colocamos la forma El resultado será algo
primera por encima de similar a ésto.
la segunda.
18

19. [ HYPERNURBS ]
//Guía de recursos gráficos
para Layar//
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-
fig. 33 formación.
Una vez creada la forma que que-
remos ‘redondear’, crearemos un
fig. 34 ‘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.
fig. 35
19

20. [ NURBS TORNO ]
//Guía de recursos gráficos
para Layar//
Para utilizar esta herramienta primero La herramienta ‘Nurbs Torno’ sirve
debemos crear una forma vectorial. para modelar objetos partiendo de un
El Cinema 4D nos permite crearlas eje y haciendo la envoltura alrededor
desde el mismo programa o importar- de él como si de un alfarero se tratara.
las como Illustrator 8.
Para crearlas desde Cinema seleccion-
aremos la herramienta ‘Spline’. Para crear un ‘Nurbs’ clicaremos so-
bre esta opción en el menú superior.
fig. 36 a 39
Podremos dar la forma que deseemos Una vez definido el ‘Spline’, lo meter-
a nuestro ‘Spline’ con ayuda de las emos dentro del ‘Nurbs Torno’, y nos
vistas auxiliares. creará una forma similar a esta.
20

21. [ NURBS EXTRUSION ]
//Guía de recursos gráficos
para Layar//
La herramienta ‘Nurbs Extrusion’
sirve para dar volumen a formas
vectoriales diseñadas con Cinema 4D
fig. 40
o importadas como Illustrator 8.
Una vez creado el ‘spline’ con la
fig. 41
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.
fig. 42
21

22. [ DUPLICAR OBJETOS ]
//Guía de recursos gráficos
para Layar//
Duplicar objetos nos será muy útil fig. 43 Basta con seleccionar el objeto a duplicar fig. 44
a la hora de ahorrar tiempo cuando en el menú de ‘Objetos’ y pulsar la tecla
estemos modelando alguna pieza. ‘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.
22

23. [ SELECCIÓN MÚLTIPLE DE POLÍGONOS]
//Guía de recursos gráficos
para Layar//
La selección múltiple será muy útil a la
hora de seleccionar muchos polígonos a
la vez, para eliminarlos, modificarlos, etc,
en lugar de tener que seleccionarlos uno
a uno.
Para ello, trabajaremos con la herramienta
que se indica en la imagen.
Después seleccionaremos también la
herramienta de selección de polígonos
de la parte izquierda del programa.
fig. 45 a 47
Finalmente, pasaremos el cursor pin-
chando por las zonas que queramos
seleccionar y si queremos añadir
alguna otra, mantendremos pulsado el
23
‘shift’ (o mayúsculas).

24. / Rehacer fomas sencillas
//Guía de recursos gráficos
para Layar//
Mediante estas herramientas seremos
capaces de susitutuir gran parte de
las piezas originales del modelo por
figuras 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.
/ Cuando se dé por terminado, guardaremos
el archivo como “nombre del modelo
fig. 48 a 50 simplificado”
24

25. / Hacer Editable
//Guía de recursos gráficos
para Layar//
fig. 51 a 53
Hacer editable un objeto nos ayudará Para hacerlo basta con seleccionar
a poder conectarlo, cambiarle el cen- las piezas que hayamos creado desde
tro de rotación y reducir el peso del cero, y hacer ‘Click’ sobre la opción
archivo, pero no podremos realizar de ‘Hacer editable’ de la parte supe-
modificaciones sobre su número de rior izquierda del programa.
polígonos de nuevo.
25

26. / Conectar + Eliminar
//Guía de recursos gráficos
para Layar//
fig. 54 a 57
Conectar los objetos nos servirá para Tras esto, se habrá creado un objeto Debemos seleccionar y eliminar todas Por último le asignaremos de nuevo
evitar que al pasar a otros programas, nuevo que englobará a todos los las texturas que se hayan asignado a la textura que contenía en prin-
estos den problemas o descoloquen anteriores con el nombre del primero este nuevo obejto, dado que normal- cipio, quedando todo uniformado y
las piezas, las giren o las cambien que hubiera. mente el propio programa las duplica ordenado.
de lugar, además de para unificar las sin necesidad.
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á.
26

27. / Centrar los ejes
//Guía de recursos gráficos
para Layar//
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)
fig. 58 a 60
27

28. / Guardar Proyecto II
//Guía de recursos gráficos
para Layar//
fig. 61
Una vez hechas estas modificaciones y unificadas
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
modificaciones.
28

29. / Exportar a 3DS
//Guía de recursos gráficos
para Layar//
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
fig. 62
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 ficheros
de peso superior.
Si no es así, deberemos volver al ar-
chivo ‘nombre del proyecto simplifica-
do’ y reducir el número de polígonos,
o sustituir más formas del modelo por
formas básicas.
fig. 63
29

30. _[ 3D STUDIO ]

31. 4 _[ 3D Studio ]
//Guía de recursos gráficos
para Layar//
fig. 64
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.
31

32. / Comprobar el modelo
//Guía de recursos gráficos
para Layar//
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
fig. 65 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.
fig. 66
32

33. / Exportar como .OBJ
//Guía de recursos gráficos
para Layar//
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
fig. 67
‘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”
fig. 68 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
fig. 69
mediante Layar.
33

34. / Comprobar el peso del archivo
//Guía de recursos gráficos
para Layar//
fig. 70
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
34

35. _[ LAYAR 3D MODEL CONVERTER ]

36. 5 _[ Layar 3D model converter ]
//Guía de recursos gráficos
para Layar//
fig. 71
Una vez comprobados los pesos, nos
disponemos a abrir ‘Layar 3D Model
Converter’, e importar el archivo
‘.OBJ’ que acabamos de crear.
36

37. / Menús Layar
//Guía de recursos gráficos
para Layar//
Layar 3D Model Converter tiene
4 menús importantes con los que
controlar el modelo.
En el menú ‘Materials’ podemos ver
El primero es ‘Overview’, que nos las zonas de color que hemos creado.
da información del modelo que Desde aquí asignaremos los materi-
acabamos de importar. ales que sean necesarios.
Con el menú ‘Preview’ podemos ver Y con el menú ‘Placement’, podemos
una previsualización del modelo 3D situar el objeto en cualquier parte
que hemos abierto, y comprobar así del mundo para hacernos a la idea
que todas las piezas estén en su lugar. del tamaño relativo del mismo, o
escalarlo en caso de necesidad.
fig. 72 a 75
37

38. / Preview
//Guía de recursos gráficos
para Layar//
Volviendo al menú ‘Preview’, el Para colocarlo en su posición sim- Y este será el aspecto del modelo una Además, mediante los ‘scrolls’ de los fig. 76 a 78
modelo que hemos traido por norma plemente debemos entrar en ‘Edit / vez que lo giremos. laterales, podemos girar el punto de
general estará rotado. Rotate/ 90 x’. vista y la distancia para ver mejor
todos los ángulos del modelo.
38

39. / Materials
//Guía de recursos gráficos
para Layar//
En el menú de materiales, nos dispondremos a Para ello, un método rápido sería asignar a Volviendo a la previsualización, sabremos qué
asignar a cada zona su textura correspondiente. cada zona un color diferente, dado que Layar zona es cada color, y sabremos qué textura
no las nombra de ninguna manera que nos debe ir en cada zona.
permita reconocerlas de otro modo.
De nuevo en el de materiales, asignaremos las Y después le quitaremos los colores anterior- En caso de que queramos hacer una textura
texturas estáticas o dinámicas según convenga. mente asignados para sustituirlos por grises animada, tendremos dos opciones: hacerla con
más claros o más oscuros para que no afecte a transparencias o sin ellas.
los colores originales de la textura.
Si por el contrario necesitamos
una textura con ‘alfa’ (un disparo,
por ejemplo) crearemos unos
Si queremos una textura sin PNGs de 24 bits con transpar-
transparencias bastará con encia y con el menor número de
realizar una secuencia de colores posible.
‘JPGs’ de muy poco peso y Después lo enlazaremos como en
enlazarlos uno por uno en la el caso anterior.
opción de ‘animated’. fig. 79 a 86
39

40. / Save as
//Guía de recursos gráficos
para Layar//
Una vez terminado, iremos a ‘Ar-
chivo / Guardar como’, y le asignare-
fig. 87
mos el nombre del modelo.
Comprobaremos por última vez el
peso final del archivo, el cual no
deberá superar (idealmente) los 700
Kb.
fig. 88
40

41. _[ CREACIÓN DE RECURSOS PARA LA APLICACIÓN ]

42. 6 _[ Creación de recursos para la aplicación ]
//Guía de recursos gráficos
para Layar//
Layar nos permite sustituir algunos
de los elementos de su interfaz por
elementos diseñados por nosotros
Iconos de la aplicación mismos, lo cual hace posible una
mayor personalización de la capa en
cuestión.
Imagen de cada POI
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.
Baner de la portada
Banners Icon Iconos POIs
fig. 89 a 91
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
42
del banner, el color de los textos, etc.

43. / Icono de la aplicación
//Guía de recursos gráficos
para Layar//
Photoshop
É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
fig. 92 - 128x128
Icono final
Aquí se muestra el resultado del
fig. 93
icono en 96x96 pixels.
43

44. / Iconos de los Banners
//Guía de recursos gráficos
para Layar//
Photoshop
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:
fig. 94 - 60x26
- 90x39
- 120x52
Icono final
Aquí se muestra el resultado del
fig. 95
icono en 120x52.
44

45. / Iconos de los POI
//Guía de recursos gráficos
para Layar//
Photoshop
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,
fig. 96 siluetas, etc.
Los tamaños deberán ser:
Icono final - 56x56
- 76x76
- 110x110 on focus
- 110x110 off focus
Aquí se muestra el resultado del
fig. 97
icono en 110x110 e iluminado.
45

46. / Banner de la portada
//Guía de recursos gráficos
para Layar//
Photoshop
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.
fig. 98 - 700x100
Banner final
fig. 99 Resultado del banner en 700x100.
46

47. / Imagen de cada POI
//Guía de recursos gráficos
para Layar//
Photoshop
Esta será la imagen que aparecerá
representando cada modelo en el
‘Modo lista’ de Layar y en la ficha
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
fig. 100 - 240x240
Icono final
Aquí se muestra el resultado del
fig. 101
icono en 152x103.
47

48. / Cómo renderizar imágenes
//Guía de recursos gráficos
para Layar//
Cinema 4D
En caso de que necesitemos alguna
imagen para los recursos gráficos
de la aplicación podemos realizarla
directamente con el modelo que
hallamos creado o modificado desde
Cinema 4D.
Para ello, abriremos de nuevo el
modelo con el que estábamos tra-
bajando, a ser posible la versión sin
modificar, 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.
48

49. / Creación del entorno
//Guía de recursos gráficos
para Layar//
Suelo y cielo
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”.
Luces y sombras
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.
49

50. / Cámaras y renderizado
//Guía de recursos gráficos
para Layar//
Cámaras
pág 41 a actual.
fig. 102 a 111
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.
Renderizado
Conformes con la escena creada, Dentro de estas opciones iremos a Desde ‘guardar’ indicaremos la ruta Finalmente pulsaremos sobre la
iremos a las propiedades de renderi- ‘salida’ e indicaremos el tamaño y la y el formato en que queremos que opción de ‘crear render’ y veremos
zado pulsando en la pestaña indicada resolución del render que queramos nos guarde la imagen. cómo el programa crea poco a poco
en la imagen. hacer. la imagen que se guardará automat-
icamente en la ruta que le hallamos
indicado.
50

51. // (GUÍA DE RECURSOS GRÁFICOS
PARA LAYAR) //
Daniel Portal Gil (Modelado 3D)
Cristina Munilla Miguel (2D)
Jesús Mª Eraso Lerena (Desarrollo)
David Contreras Magaña (Jefe de equipo)
Empresa: Esidea Grupo Tecnológico. Síguenos en Twi�er vía @davidcontrerasm