Archivos por Etiqueta: mapa

Crear Mapa 3D en Photoshop: con la herramienta pluma, pinceles y Menu 3D de Photoshop Cs5

En este tutorial de photoshop aprenderemos a crear un Mapa 3D. La herramienta pluma la utilizamos para dibujar en photoshop, Illustrator, Corel, no importa el programa que utilicemos para diseño, la herramienta pluma está siempre presente para ayudarnos a dibujar y contornear. No omito manifestar que estoy utilizando la version CS5 de Photoshop para este tutorial.

En este tutorial vamos a ver como crear desde cero un mapa, y con la ayuda de las opciones 3D de Photoshop CS5 lo vamos a pasar a mapa 3D, es muy divertido y sencillo, solo sigue los pasos del tutorial.

Crear Mapa 3D en Photoshop CS5 con la herramienta pluma

Comenzamos creando un documento de 800 px * 800px, resolución de 72 dpi.

Lo primero que haremos es seleccionar la herramienta pluma, con la variante que en esta ocasión y para efecto de dibujar el mapa tendremos que seleccionar Trazados, apóyate en la imagen inferior:

Acto seguido empieza a dibujar las calles principales, solo las principales, si hay calles secundarias o aledañas las dibujaremos después.

Cuando lo estés haciendo verás como al finalizar una línea, ésta no se corta impidiéndote continuar con la siguiente calle, para romper la secuencia presiona CTRL + CLIC en cualquier parte del documento y ya con esto la herramienta quedará libre para que puedas continuar dibujando tranquilamente en Photoshop CS5.

Solamente con las lineas no hacemos nada, por lo que hay que rellenarlas de color, para ello nos vamos a apoyar de la herramienta pincel,  y lo vamos a configurar con un tamaño de 15px.

Para redimensionar el pincel de Photoshop CS5, basta con que selecciones la herramienta pincel y luego des clic con el botón derecho del mouse sobre cualquier parte de la pantalla, así lograrás que aparezca el menú de la imagen de arriba.

Ahora regresamos a la caja de herramientas de Photoshop y seleccionamos la herramienta pluma, hacemos clic con el botón derecho del mouse sobre cualquier parte del documento y seleccionamos Contornear Trazado.

En el siguiente menú emergente selecciona Pincel:

Presiona OK y tus lineas deberian ya tener aplicado el relleno, ahora haz clic derecho sobre cualquier parte del documento y selecciona “Eliminar Trazado”

El color que tengo configurado de primer plano es negro, supongo que tú también, como no queremos que las calles principales queden de color negro, sino un tono amarillo (por eso de que Google Maps lo utiliza amarillo suave), entonces vamos a aplicar una superposición de color en nuestra capa, yo utilicé el color #FFA800 (haz clic en la imagen para ampliar).

Me faltan los contornos de esas calles, para darle un toque más realista, para ello selecciona el contenido de la capa (CTRL + CLIC en minuatura de capa [ventana Capas]), luego dirígete al Menú / Selección / Expandir y 2 como valor.

El color de primer plano en Photoshop Cs5 debe tener el siguiente valor #841a1a porque ese es el color que yo voy a utilizar, pero sientete en la libertad de utilizar un color de tu preferencia, pude hacer aplicado un trazo en las opciones de capa pero nos podría haber ocasionado mas inconvenientes en el transcurso del tutorial, básicamente porque el trazo se aplica a toda la parte rellena de la capa, de la forma en que lo vamos a hacer se aplica a determinadas secciones de una capa.

El relleno de color lo debes hacer en una capa nueva, recuerda utilidzar el color #841a1a, CTRL + D para deseleccionar y ahora esa capa pasala debajo de la capa donde insertaste el mapa amarillo.

Tu documento debería tener el siguiente aspecto:

Ahora con las calles principales terminadas procederemos a dibujar todas las calles aledañas, recuerda que entre más exacto y detallado quede tu mapa mejor, ya que será la referencia para tus clientes, sigue los siguientes pasos.

  1. Dibujar las calles con la herramienta pluma (opción trazados)
  2. “Contornear Trazado”, utiliza un color gris (puedes aplicar superposición de color).
  3. Boton derecho en cualquier parte del documento y selecciona “Eliminar Trazado”
  4. Selecciona el contenido de la capa y Expande la selección.
  5. Inserta una capa nueva y rellena lo que tienes seleccionado con un color gris más oscuro.
  6. CTRL + D para deseleccionar.
  7. Mueve la capa debajo de la capa gris mas claro.

Tu documento debería verse así (haz clic en la imagen para ampliar):

Algunas de las lineas grises invaden las lineas anaranjadas, esto es un defecto que deberemos corregir manualmente, para ello utiliza la herramienta borrador o la herramienta lazo poligonal, com oen mi caso:

Para pdoer aplicar el efecto 3D necesitamos que todo se encuentre en una misma capa, y para que no pierda mucha definición seleccionamos todas las capas (menos el fondo) y lo convertimos en objeto inteligente.

Ahora si podemos hacer nuestro mapa 3D, gracias al Menú 3D de Photoshop CS5,

Si te aparece un mensaje de Error, algo asi como “Tu tarjeta de Video no permite aceleración 3D” solo haz clic en el botón OK y continúa.

Ahora tu documento ya es 3D y puedes aplicar perspectiva, que practicamente es lo único que necesitamos para nuestro mapa, ubica en la caja de herramientas de photoshop cs5 la herramienta rotación de cámara 3D y selecciónala:

Ahora, de regreso al documento haz clic y muévelo, verás como se aplica la perspectiva, aplica la herramienta hasta que tu mapa se vea asi:

Agregando detalles al Mapa

Lo primero que hice fue buscar en internet un icono de casa, para representar la ubicación que interesa conocer, en mi caso utilicé esta tu puedes utilizar el logotipo de tu cliente.

Luego una forma básica para escribir la direccion y Teléfonos si lo deseas.

Resultado Final:

mapa 3D photoshop CS5

Espero que el tutorial de photoshop haya sido de tu agrado, anímate haz el tuyo, recuerda que la Opción 3D está disponible también en la versión CS4 de Photoshop no solo en la version CS5.

Incluir mapa de ubicacion en tu web con plugins Jquery

googlemap

En Diseño Web la página de contactos es obligatoria, lo que se acostumbra es configurar un formulario para que el visitante de la página web  se comunique con nosotros, hay quiénes inclusive agregan otro tipo de información en la pagina … ver más