Categoría: Diseño

Cómo importar modelos de Sketchup en Unity 3D (con texturas)

Para todas aquellas personas que no sean muy duchas en este tipo de entornos y conocimientos, de ahí la misión de este blog 2.5D, unir al usuario amateur con el profesional, voy a darle una solución para lo que uno aunque entienda por dónde se mueve, se considera desconocido y que puede enervar en demasía porque a veces hay cosas que no podemos controlar dentro de nuestro ámbito, y eso nos da coraje, al menos a mí muchísimo coraje!

Como bien os digo, voy a poner los pasos que hay que seguir para importar un modelo 3D con texturas a Unity desde Sketchup y que por supuesto  todas ellas sean visibles (este es el punto más importante para mí y de máxima dificultad, o lo que más coraje da no saber hacer).

0.5 Proceso en Sketchup

  • Primero vamos a crear o abrir un modelo con Google Sketchup.
  • Tenemos que alinear las caras del modelo. Esto es definir qué caras son visibles y cuáles no (View-> Faces Style – >Monochrome mode)*.
  • Exportar en formato .dae (Default Settings).               Nota: si usamos el Sketchup Pro, exportamos directamente a .fbx

1.5 Proceso en Blender (si hemos usado el Sketchup Pro, este paso se obvia porque ya tenemos el .fbx)

  • Abrir archivo .dae generado en el paso anterior ( si quieres ver las texturas tienes que seleccionar texture redering mode).
  • Exportar a .fbx.

2.5 Proceso en Unity

  • Creamos una carpeta para los modelos dentro de la carpeta Assets del proyecto (esto es lo que recomiendo).
  • Creamos una carpeta llamada “Texturas” dentro de la nueva carpeta.
  • Arrastra o importa las texturas del modelo dentro de la carpeta “Texturas” (con el fbx se ha creado una carpeta adjunta con las texturas usadas en el mismo en el paso 0.5 ó 1.5).
  • Arrastra o importa el modelo .fbx dentro de la primera carpeta, que está al mimos nivel que la de las “Texturas”.

También lo podemos hacer a lo bruto y arrastrar el modelo y la carpeta de texturas que nos crea Sketchup a Unity si no queremos hacer todo lo anterior.

Si lo has hecho todo correctamente, podrás ver en el proyecto el asset del modelo y podrás arrastrarlo a tu escena, con todas las texturas. Si ves que alguna es invisible, es que no has hecho bien el alineamiento de las caras en Google Sketchup y tendrás que volver a realizar todo a partir de ese paso. Pero no te preocupes que también te explico ahora como funciona el alineamiento de caras.

*Monochrome mode

Cuando estás en este modo, para realizar un alineamiento correcto de las caras, tendrás que tener en blanco las caras que quieres que se vean cuando exportes el modelo, y en negro las caras que se vuelvan invisibles. Es un proceso intuitivo, si hay alguna a la que quieras dar la vuelta en la visibilidad, simplemente selecciónala y con el botón derecho del ratón “Reverse Face” y cambiará de color. 

No te asustes porque ahí sólo se ve el color blanco o negro para determinar la visibilidad de cada cara, pero tus texturas siguen vivas ;), vuelve a View – > Face Style – >Shaded with textures, y tendrás de nuevo tu modelo con las texturas pero esta vez alineadas a tu gusto y sabiendo lo que haces (ya se te quita el coraje – RAE acepción 2).

Espero que os guste este post.

Ya sabéis como funcionan los agradecimientos en este blog, seguidme en mi cuenta de @JaviLSanchez.

 

 

Cómo saber qué tema y plugins usa un blog de wordpress

Una pregunta, ¿Os ha pasado que habéis visto un blog o página web, powered by WordPress, y os encantaría saber qué theme usa?

Y yendo mucho más lejos, si visitando dicha página os quedáis prendado de cualquiera de sus plugins ¿No os gustaría saber cuál es? Para así poder agregar más funcionalidad a vuestro sitio web.

¡Maravilloso! Porque buceando por las entrañas de la red, he podido conocer una herramienta web que hace todo esto, y GRATIS, que buena gente hay en este mundo 2.5D de los desarrolladores web. El sitio en cuestión es http://whatwpthemeisthat.com/ y si accedemos a él, vemos un cuadro de texto, en el cual tenemos que copiar la dirección web de la página creada con wordpress que hayáis visitado, e inmediatamente os aparece la información del tema que usa el blog y de todos sus plugins.

Muchas gracias, espero que os parezca súper interesante esta herramienta al igual que a mí.

Y me sigáis en @JaviLSanchez ¡Saludos amigos blogueros!

Ejemplo de diseño. Logomarca “Noches en la Luna”.

Una de las primeras logomarcas que tuve que crear fue para el programa de radio “Noches en la Luna”, aunque mi inexperiencia  aún es grande en el mundo del diseño gráfico, dado que en ese momento sólo había hecho empezar. Tuve una gran responsabilidad, puesto que además pertenezco al equipo del programa. Aun así lo abordé, pero con este post no quiero tratar la dificultad sino que quiero ilustrar, para los más iniciados por supuesto, la forma de proceder que tuve en mi cabeza para llegar al resultado final, también quiero que veáis el proceso de construcción del logo y los entresijos del mismo.

Paso 0.5 ¿Qué hacer en primera instancia?

Lo primero que hice fue reunirme con el cliente, en este caso mi gran amigo Jose Luis Sánchez, y conocer el proyecto de cabo a rabo para tener las herramientas con las que empezar a trabajar. En principio, todo eran palabras, que por supuesto hay que plasmar en un concepto. Para ayudarme a crear ese concepto he necesitado conocimientos, ideas, bocetos, para concluir con lo que se conoce como idea feliz. La idea feliz, que no es un chasquido de dedos, si no que tras un trabajo previo, estudio previo, se alcanza, para posteriormente poder perfeccionarla.

En este punto tratamos, tamaños, necesidades, colores…

El cliente determinó que la logomarca tendría que tener un diseño elegante más que contar con fuerza o juventud, los colores negros y azules fríos de la noche, las letras ‘N’ y ‘L’ mayúsculas,  y alusiones al medio de la radio.

Paso 1.5 Después de la idea del cliente ¿Qué hacer?

Hay que ponerse a trabajar y además de evaluar los requisitos de diseño del cliente, permitirme a mí como diseñador realizar bocetos que cumplan con lo anterior… Aquí mi amigo, y ex-compañero de trabajo Jose Alberto Medina (su web), me guio un poco hacía la idea final. Gracias. Hay que fomentar la creatividad, realizando dibujos en un papel sobre objetos, ideas referentes al mundo de la radio, la noche, el nombre, etc. A partir de aquí, se irán formando y conjuntando de forma creativa todos estos distintivos.

Después de evaluar y fomentar la creatividad, creé varios bocetos, de los cuales algunos muestro a continuación,

pruebas-logos-4---programa---por-Javi

Como podéis apreciar la logomarca en su inicio, la creo para fondo blanco, pero también sobre fondo negro, puesto que si funciona así, siempre o casi siempre puede ser adaptada para otros colores, pero no a la inversa. Es necesario a veces, para faxs, copias, cartas u otros formatos. También podéis apreciar que utilicé una línea de equilibrio para el logo con el nombre del programa. y siempre haciendo alusiones al mundo de la radio, la noche, y también a un punto importante el directo en los bares, restaurantes, pubs en los que se iba a grabar el programa, como se puede apreciar en el logo 9 en la forma de la antena de radio con la luna que identifica una copa.

También desde primera hora decidí que debía cumplir las proporciones de un rectángulo áureo. Y las letras NL mayúsculas a la izquierda del logo. Ahora solo faltaba buscar el equilibrio y la creatividad en el imagotipo.

El cliente eligió otro boceto más elegante y menos robusto en la tipografía que las apreciadas en los bocetos anteriores..

Paso 2.5 Perfeccionamiento y arquitectura gráfica.

Después de elegir el cliente el boceto sobre el que trabajar. Me tocó elegir los colores, usé de la librería de muestras, el libro de color PANTONE Solid Coated. Los elegidos fueron Reflex Blue C y Process Black C junto al color blanco. Cuadré el logo ofreciéndole equilibrio en ambos lados del mismo, además de posicionar la línea base como ya he comentado. La tipografía se volvió elegante, una tipografía con serifa para ofrecer base y continuación en el borde bajo.

Ahora tocaba entrar en la arquitectura gráfica de la logomarca: los espacios, los tamaños del logo, y la construcción del imagotipo. A continuación, muestro las imágenes de todo el proceso.

Espaciado de la logomarca, como podéis ver es mejorable en este aspecto, viéndolo ahora desde la perspectiva del tiempo,

Espaciado de logomarca

Construcción geométrica,

construccion geometrica

La acotación,

Acotación de logomarca

Las líneas de representación de la arquitectura gráfica tienen el color identificativo morado, salvo contraindicación del propio logo que pueda confundirse entre las líneas auxiliares de cotas o líneas de cotas y las propias líneas de la logomarca. Y nunca hacen referencia a medidas absolutas, sino referentes a una constante.

Después del trabajo de construcción geométrica hay ciertos aspectos a tener en cuenta, como el espacio de reserva, el test de reducción, la creación de indianas, trama modular, escala de grises, fondos oscuros y claros, blanco y negro. Todo está totalmente pensado y debe estar a disposición del cliente, después de ser corroborado por el propio diseñador. Aquí os dejo el trabajo realizado sobre el logo en este aspecto.

Trama modular, trabajo necesario para posterior trabajo de rotulación manual, por ejemplo para determinar bien los espacios. En realidad, se ha de atenuar un poco la imagen para que se vea bien contrastada la rejilla modular.

Trama modular

Espacio de reserva, en este caso opté por la ‘N’ del logotipo para establecer las distancias del espacio de reserva,

Espacio de reserva

El test de reducción, ofrecío un resultado visible hasta el 30% de la misma. Aún así, pudiera ser que el 40% fuese el adecuado para esta logomarca.

test de reducción - mínimo visible 30%

Como podéis ver también la logomarca sobre la que se está trabajando es la utilizada para fondos blancos. por último vamos a ver la indiana con su espacio de reserva respetado, como quedaría para papel de regalo por ejemplo,

Indiana imagotipo sin espacio de reserva

Espero que os haya aportado algo de luz, en como de completo es el trabajo de creación de una logomarca y los pasos que hay que seguir, aun de forma sencilla sin entrar en muchos detalles. Si alguien necesita cualquier ayuda, a traves de los comentarios o por las redes sociales puede ponerse en contacto conmigo.

Paso 3.5 Presentación al cliente

Para finalizar, os dejo el resultado de la logomarca, aceptada y tras el visto bueno por el cliente.

Logo alta calidad 1181x1181px