Agregue un toque de realismo a su Google Maps

() translation by (you can also view the original English article)

Usar la API de Google Maps es una de las formas más populares (si no la más popular) de mostrar ubicaciones geográficas en los sitios web de hoy. En este tutorial, demostraré cómo le doy a mis mapas de Google un aspecto más realista y te daré algunos consejos sobre cómo hacer que tus propios mapas realmente brillen.

Paso 1: Calentamiento

Nuestro objetivo es darle al mapa un aspecto realista, al mismo tiempo que le permitimos al usuario hacer zoom y desplazarlo.

Vamos a obtener este efecto mediante la creación de una imagen .png semitransparente que enmascarará el mapa, luego usaremos algo de CSS para colocarlo en la parte superior del mapa.

Antes de abrir Photoshop, le sugiero que tome un mapa real o una hoja de papel y lo doble como el mapa que está tratando de representar. Esto realmente te ayudará a entender cómo reacciona la superficie a la fuente de luz. ¡Tómalo como una sugerencia general, ya que creo que siempre es bueno jugar con un pedazo de papel antes de agarrar el mouse!

Al hacer esto, también debe tomar una captura de pantalla de un mapa de Google de su elección. Vamos a utilizar esta captura de pantalla en Photoshop como referencia.

Consejo: si está en una Mac y desea capturar una captura de pantalla de una región específica de su pantalla, simplemente presione "comando + mayús +4", luego haga clic y arrastre para dibujar una selección rectangular de lo que desea ser capturado

Paso 2: Mapa y fondo

Una vez que haya capturado la captura de pantalla, puede abrirla en Photoshop y comenzaremos a trabajar.

Lo primero que debes hacer es hacer el archivo transparente. Haga doble clic en la capa de fondo que contiene el mapa y presione Intro. Al hacer esto, transformamos el fondo en una capa normal. Ahora queremos darnos algo de espacio extra para jugar, así que vaya a Imagen> Tamaño del lienzo (alt + shift + C) y aumente un poco su lienzo. Agregué 90 píxeles en cada lado, pero las dimensiones dependen de usted y dependen del aspecto final que desee obtener; De todos modos, no te preocupes, este tamaño se puede cambiar de nuevo en cualquier momento.

Ahora es el momento de agregar una imagen de fondo. Simplemente elija algo que se vea bien debajo de un mapa, elegí una textura de madera que encontré en CGtextures.com, pero puede usar lo que quiera, ya sea una imagen o tal vez un buen gradiente.

Una vez que haya elegido su fondo, póngalo en una nueva capa en la parte inferior de la jerarquía.

Paso 3: The Edge

En este punto, es hora de darle alguna forma al mapa, ya que este rectángulo no parece realmente un pedazo de papel doblado.

Para hacer esto solo usamos el lazo poligonal y dibujamos los bordes. En este punto, es realmente útil colocar algunas guías donde desee crear los pliegues, así que creé una cuadrícula de 3x2 en bruto. No tiene que ser preciso, pero lo necesitaremos a menudo en los próximos pasos.

Una vez que se cierra la selección, puede presionar el botón de máscara de capa, esto creará automáticamente una máscara que solo muestra el área seleccionada.

Paso 4: Pliegues

Una vez que haya cortado los bordes, los siguientes pasos tratarán de darle cierta profundidad al mapa. Lo primero que queremos hacer es hacer que el mapa se vea como si estuviera doblado.

Lo primero es lo primero, cree una nueva capa transparente, luego tome la herramienta de selección rectangular y, siguiendo la cuadrícula que configuró anteriormente, seleccione 3 rectángulos opuestos (más grandes que el mapa) y rellénelos con negro liso.

Ahora vamos a aplicar una máscara a esta capa, tiene que ser la misma que la que aplicamos al mapa. La forma más sencilla de hacerlo es hacer clic con el botón secundario y arrastrar la máscara de la capa del mapa y soltarla en la capa en la que estamos trabajando actualmente.

Una tarea restante es reducir la opacidad de la capa hasta alrededor del 6-10%.

Paso 5: Borde Blanco (es el Nuevo Negro)

En este punto, me gusta agregar un borde blanco alrededor del mapa. Para ello, cree una nueva capa, rellénela con el color que desee, gire su relleno al 0% y aplique la misma máscara de capa que aplicó a la capa del mapa.

Por el momento no hay mucho que ver, pero eso cambiará en un segundo: haga doble clic en la capa y aplique un trazo interior blanco de 8-10 píxeles. Es muy importante que aplique un trazo interno porque el trazo exterior tendría esquinas redondas que no se ven muy bien en nuestro caso.

Paso 6: Esquiva y Quema

Mejoremos la iluminación. Lo haremos con algo similar al efecto de esquivar / quemar. Lo que podemos hacer aquí es crear 2 capas diferentes y, una vez más, aplicar la máscara de capa habitual, una capa aclarará algunos pliegues y una oscurecerá las otras.

Seleccione la capa de luz, tome un pincel blanco grande y suave con baja opacidad y fluya, luego comience a pintar cerca de los pliegues en los rectángulos claros del papel (los que no tienen los rectángulos transparentes negros en la parte superior).

Esta parte es difícil de explicar con palabras, pero las imágenes lo harán mucho mejor.

Puse mi pincel a 20% de opacidad y 20% de flujo, luego dibujé algunos trazos siguiendo la cuadrícula. Esto no tiene que ser preciso porque vamos a usar máscaras de capa una vez más.

Al principio es difícil ver estos trazos ligeros en la parte superior del mapa, por lo que, para mayor claridad, apliqué un fondo gris al 50% debajo de la capa. Obviamente no necesitas hacerlo.

Una vez que estoy satisfecho con los trazos blancos, selecciono la máscara de capa en esta capa, tomo la herramienta de selección rectangular y, con la ayuda de la cuadrícula, selecciono los cuadrados donde quiero ocultar este efecto. Una vez que tengo la selección correcta la lleno con negro.

Ahora puede bajar la opacidad de esta capa dependiendo de cuán opacos sean sus trazos.

Consejo: recuerde que estamos creando una superposición .png para el mapa, por lo que "normal" es el único modo de fusión que podemos usar. Esto también significa que si exagera estos trazos blancos o negros y los hace demasiado opacos, el resultado final puede parecer incómodo.

Paso 7: Esquiva y quema recargado

Ahora es el momento de hacer lo mismo con los lados más oscuros, así que selecciona la capa vacía que creaste anteriormente y repite el Paso 6. Esta vez usarás un pincel negro o gris oscuro y seleccionarás los cuadrados que no seleccionaste previamente .

Paso 8: Deja caer alguna sombra

Es hora de dibujar la sombra.

Para hacerlo agradable y realista, cree una nueva capa y use la herramienta de lazo poligonal para dibujar una forma que se asemejará más o menos a la sombra, luego rellénela con negro.

Es bastante complicado hacer que la sombra parezca realista, pero recuerda esto: cuanto más lejos esté el mapa de la tabla, más suave será el borde de la sombra.

La herramienta de manchas puede ayudarte mucho, la utilizo para agarrarla y aplicar mucho en las esquinas, la intensidad del rojo representa donde me concentré más con la mancha.

El resultado final debería ser algo como esto:

Paso 9: Cortar un agujero

En este punto deberías tener algo similar a esto. Ya casi hemos terminado con Photoshop.

Todo lo que queda por hacer es aplicar la máscara de capa habitual a las capas de sombra y fondo, así que, una vez más, haga clic y arrastre la máscara de capa desde la capa de mapa a la capa de fondo, lo mismo ocurre con la capa de sombra. Una vez que haya hecho eso, invierta estas dos máscaras, así que seleccione la máscara de capa y presione el comando + I (control + I en una PC).

Lo último que debe hacer es desactivar la visibilidad de la capa del mapa. De esta manera, cortamos un agujero a través de todas las capas y una buena parte de la imagen es transparente.

Ahora la parte inferior de tu pila de capas debería verse así:

Paso 10: Png

¡Exporte para la Web en un png-24 transparente, nombre el archivo "mask.png" y cierre Photoshop!

Paso 11: HTML y JS

La parte más difícil está hecha, ahora relájate y abre tu editor de texto favorito.

Ahora solo necesita crear un nuevo archivo HTML que use la API de Google Maps y un archivo CSS para darle un toque de estilo.

Una gran cantidad de documentación sobre esta API está presente en Google de todos modos, verá que en los próximos pasos no necesita ser un experto en codificación, solo necesita escribir algunas líneas:

<!DOCTYPE html>
<html>
  <head>
		<title>Webdesign.tutsplus - Google Maps realistic look</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
		
		<!-- src and initialize the google maps api -->
		
		<script type="text/javascript"
		    src="http://maps.googleapis.com/maps/api/js?sensor=false">
		</script>
		
		<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(45.466, 9.186); /* latitude and longitude for the center of the map*/
				var myOptions = {
					zoom: 14, /* zoom level of the map */
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					mapTypeControl: false, 		/* disable the Satelite-Roadmap switch */
					panControl: false, 			/* disable the pan controller */
					streetViewControl: false, 	/* disable the streetView option */
					zoomControl: false, 		/* disable the zoom level buttons, the user will still be able to control the zoom by scrolling  */

					scaleControl: true, 		/* optional: shows the scale of the map */
					scaleControlOptions: {
						/* since we decided to show the scale, we tell the script to show it in the corner we like, in this case Bottom Left */
					    position: google.maps.ControlPosition.BOTTOM_LEFT
					}
				};
			    var map = new google.maps.Map(document.getElementById("map_canvas"),
			        myOptions); /* show the map in the element with the id: map_canvas */
			}
		</script>
	</head>
	<body onload="initialize()">
		<div id="map_container">
			<div id="map_canvas"></div>
			<div id="mask"></div>
		</div>
	</body>
</html>

Como ves, el código es bastante sencillo, simplemente decidí cambiar algunas opciones:

	mapTypeControl: false, 		/* disable the Satelite-Roadmap switch */
	panControl: false, 			/* disable the pan controller */
	streetViewControl: false, 	/* disable the streetView option */
	zoomControl: false, 		/* disable the zoom level buttons, the user will still be able to control the zoom by scrolling  */

	scaleControl: true, 		/* optional: shows the scale of the map */
	scaleControlOptions: {
		/* since we decided to show the scale, we tell the script to show it in the corner we like, in this case Bottom Left */
	    position: google.maps.ControlPosition.BOTTOM_LEFT
	}

Desactivo la capacidad de cambiar a la vista Satélite ya que no creo que coincida con este sentimiento realista. Deshabilité el control de paneo, el StreetView y el nivel de zoom por la misma razón, pero puedes hacer lo que quieras aquí.

Paso 12: CSS

Lo que sigue es lo mínimo que debe escribirse en el archivo CSS vinculado, y como verá, no hay nada demasiado complicado.

#map_container {
	width: 1000px;
	position: relative;
	
	margin-left: auto;
	margin-right: auto;
}

#map_canvas {
	position: absolute;
	top: 70px;
	left: 85px;
	height: 445px;
	width: 845px;
}

#mask {
	position: absolute;
	top: 0;
	left: 0;
	
	height: 586px;
	width: 1000px;
	
	background: url('mask.png') no-repeat;
	background-size: 100%;

	pointer-events:none;
}

27 líneas de este código son solo para hacer que la cosa se vea bien y usted puede cambiarlas de la forma que desee, la única línea que necesita cuidar es el último pointer-events: none;.

pointer-events: none; evita que el mouse interactúe con la #mask div, por lo que el cursor podrá interactuar con lo que esté debajo de él. De esta manera, el mapa continúa funcionando, incluso si está oculto por una máscara o alguna otra cosa.

Si busca pointer-events en su documentación favorita, verá que se utiliza principalmente con archivos SVG. Creo que su uso con el valor "ninguno" está subestimado y aún no se ha explorado.

El resto de la CSS no es particularmente emocionante; simplemente coloca el mapa y la máscara en la posición correcta. El map_canvas está configurado para ser 1202px de ancho y 622px de alto porque es el tamaño de la cuadrícula donde se encuentra el mapa (rectángulo rojo en la imagen), arriba: 97px y a la izquierda: 97px son el desplazamiento de esa cuadrícula desde la parte superior Esquina izquierda (rectángulo azul en la imagen).

Posibles aplicaciones

Ahora que comprende los conceptos básicos, puede aplicar esta técnica de muchas maneras diferentes.

Cuando diseñé este mapa fue una prueba de concepto y no estaba pensando en una aplicación en particular, pero después de comenzar a escribir el tutorial, pensé que sería interesante mostrarles una forma práctica de usarlo. Así que puse una página de contacto simple y pensé que sería bueno darle una perspectiva al mapa.

Para hacer esto, simplemente seleccioné todas las capas y usé Editar> transformar> perspectiva para darle al mapa la distorsión correcta.

De la misma manera, distorsioné una textura de madera para crear el tablero y añadí un poco de sombra debajo.

Es un resultado efectivo y se puede usar en un tamaño generoso, pero el archivo png-24 de la máscara puede llegar a ser muy pesado rápidamente, por lo que este fue un buen compromiso de tamaño / peso.

Descarga los archivos de origen y revisa el .psd adicional por ti mismo.

Conclusión

Espero haber sido lo suficientemente claro y que haya logrado hacer un mapa genial para sus sitios web.

Si puede sugerir formas alternativas de hacerlo o mejoras en el flujo de trabajo, anote sus pensamientos en la sección de comentarios. ¡Gracias por leer!