Verleihen Sie Ihren Google Maps einen Hauch von Realismus

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

Die Verwendung der Google Maps-API ist eine der beliebtesten (wenn nicht sogar beliebtesten) Methoden, um Geostandorte auf heutigen Websites anzuzeigen. In diesem Tutorial werde ich zeigen, wie ich meinen Google Maps ein realistischeres Aussehen gebe und Ihnen einige Tipps geben, wie Sie Ihre eigenen Maps wirklich zum Leuchten bringen können!

Schritt 1: Aufwärmen

Unser Ziel ist es, der Karte ein realistisches Aussehen zu verleihen und dem Benutzer dennoch das Zoomen und Schwenken zu ermöglichen.

Wir werden diesen Effekt erzielen, indem wir ein halbtransparentes PNG-Bild erstellen, das die Karte maskiert. Anschließend verwenden wir CSS, um es über der Karte zu positionieren.

Bevor Sie Photoshop öffnen, empfehlen wir Ihnen, eine echte Karte oder ein Blatt Papier zu nehmen und es wie die Karte zu falten, die Sie rendern möchten. Dies hilft Ihnen wirklich zu verstehen, wie die Oberfläche auf die Lichtquelle reagiert. Nehmen Sie das als allgemeinen Vorschlag, da ich denke, dass es immer schön ist, mit einem Stück Papier zu spielen, bevor Sie die Maus greifen!

Dabei sollten Sie auch einen Screenshot einer Google-Karte Ihrer Wahl erstellen. Wir werden diesen Screenshot in Photoshop als Referenz verwenden.

Tipp: Wenn Sie auf einem Mac einen Screenshot eines bestimmten Bereichs Ihres Bildschirms erstellen möchten, drücken Sie einfach "Befehltaste + Umschalt + 4" und klicken und ziehen Sie, um eine rechteckige Auswahl der gewünschten Elemente zu zeichnen gefangen.

Schritt 2: Karte und Hintergrund

Sobald Sie den Screenshot aufgenommen haben, können Sie ihn in Photoshop öffnen und wir beginnen zu arbeiten!

Als erstes müssen Sie die Datei transparent machen. Doppelklicken Sie auf die Hintergrundebene, die die Karte enthält, und drücken Sie die Eingabetaste. Auf diese Weise verwandeln wir den Hintergrund in eine normale Ebene. Jetzt möchten wir uns etwas mehr Platz zum Spielen geben. Gehen Sie also zu Bild > Leinwandgröße (Alt + Umschalt + C) und vergrößern Sie Ihre Leinwand ein wenig. Ich habe auf jeder Seite 90 Pixel hinzugefügt, aber die Abmessungen liegen bei Ihnen und hängen vom endgültigen Aussehen ab, das Sie erhalten möchten. Keine Sorge, diese Größe kann jederzeit wieder geändert werden.

Jetzt ist es Zeit, ein Hintergrundbild hinzuzufügen. Wählen Sie einfach etwas, das unter einer Karte gut aussieht. Ich habe eine Holzstruktur ausgewählt, die ich auf CGtextures.com gefunden habe, aber Sie können alles verwenden, was Sie wollen, sei es ein Bild oder vielleicht nur ein schöner Farbverlauf.

Sobald Sie Ihren Hintergrund ausgewählt haben, legen Sie ihn auf eine neue Ebene am Ende der Hierarchie.

Schritt 3: Die Kante

An diesem Punkt ist es Zeit, der Karte eine Form zu geben, da dieses Rechteck nicht wirklich wie ein gefaltetes Stück Papier aussieht.

Dazu verwenden wir einfach das polygonale Lasso und zeichnen die Kanten. An dieser Stelle ist es wirklich hilfreich, einige Hilfslinien dort zu platzieren, wo Sie die Falten erstellen möchten. Daher habe ich ein grobes 3x2-Raster erstellt. Es muss nicht genau sein, aber wir werden es in den nächsten Schritten oft brauchen.

Sobald die Auswahl geschlossen ist, können Sie auf die Taste Ebenenmaske klicken. Dadurch wird automatisch eine Maske erstellt, die nur den ausgewählten Bereich anzeigt.

Schritt 4: Falten

Nachdem Sie die Kanten geschnitten haben, wird in den folgenden Schritten der Karte eine gewisse Tiefe verliehen. Das erste, was wir tun möchten, ist, die Karte so aussehen zu lassen, als wäre sie gefaltet.

Erstellen Sie zunächst eine neue transparente Ebene, greifen Sie dann zum rechteckigen Auswahlwerkzeug und wählen Sie nach dem zuvor eingerichteten Raster drei gegenüberliegende Rechtecke (größer als die Karte) aus und füllen Sie sie mit normalem Schwarz.

Wir werden jetzt eine Maske auf diese Ebene anwenden - sie muss dieselbe sein wie die, die wir auf die Karte angewendet haben. Der einfachste Weg, dies zu tun, besteht darin, bei gedrückter Alt-Taste auf die Maske der Karten-Ebene zu klicken und sie auf der Ebene abzulegen, an dem wir gerade arbeiten.

Eine verbleibende Aufgabe besteht darin, die Deckkraft der Ebene auf etwa 6-10% zu verringern.

Schritt 5: Weißer Rand (es ist das neue Schwarz)

An dieser Stelle möchte ich einen weißen Rand um die Karte hinzufügen. Erstellen Sie dazu eine neue Ebene, füllen Sie sie mit einer beliebigen Farbe, drehen Sie die Füllung auf 0% und wenden Sie dieselbe Ebenenmaske an, die Sie auf die Kartenebene angewendet haben.

Im Moment gibt es nicht viel zu sehen, aber das wird sich in einer Sekunde ändern: Doppelklicken Sie auf die Ebene und wenden Sie eine weiße innere Kontur von 8-10 Pixel an. Es ist sehr wichtig, dass Sie einen inneren Strich anwenden, da die äußere Kontur runde Ecken haben würde, die in unserem Fall nicht gut aussehen.

Schritt 6: Ausweichen und Brennen

Lassen Sie uns die Beleuchtung verbessern. Wir machen das mit etwas ähnlichem wie dem Ausweichen/Brennen-Effekt. Was wir hier tun können, ist, 2 verschiedene Ebenen zu erstellen und erneut die übliche Ebenenmaske anzuwenden. Eine Ebene hellt einige Falten auf und eine verdunkelt die anderen.

Wählen Sie die helle Ebene aus, nehmen Sie einen großen weichen weißen Pinsel mit geringer Deckkraft und geringem Fluss und malen Sie dann in der Nähe der Falten auf den hellen Rechtecken aus Papier (die keine schwarzen transparenten Rechtecke oben haben).

Dieser Teil ist schwer mit Worten zu erklären, aber die Bilder werden viel besser.

Ich stelle meinen Pinsel auf 20% Deckkraft und 20% Fluss ein und zeichne dann einige Striche nach dem Raster. Dies muss nicht genau sein, da wir wieder Ebenenmasken verwenden werden.

Anfangs ist es schwierig, diese leichten Konture oben auf der Karte zu sehen. Aus Gründen der Klarheit habe ich einen 50% grauen Hintergrund unter der Ebene angebracht. Natürlich müssen Sie das nicht tun.

Sobald ich mit den weißen Konturen zufrieden bin, wähle ich die Ebenenmaske auf dieser Ebene aus, greife zum rechteckigen Auswahlwerkzeug und wähle mithilfe des Rasters die Quadrate aus, in denen ich diesen Effekt ausblenden möchte. Sobald ich die richtige Auswahl habe, fülle ich sie mit Schwarz.

Jetzt können Sie die Deckkraft dieser Ebene verringern, je nachdem, wie undurchsichtig Ihre Konture sind.

Tipp: Denken Sie daran, dass wir ein PNG-Overlay für die Karte erstellen. Daher ist "normal" der einzige Mischmodus, den wir verwenden können. Dies bedeutet auch, dass das Endergebnis unangenehm aussehen kann, wenn Sie diese weißen oder schwarzen Striche übertreiben und sie zu undurchsichtig machen.

Schritt 7: Ausweichen und Brennen neu geladen

Jetzt ist es an der Zeit, dasselbe für die dunkleren Seiten zu tun. Wählen Sie also die zuvor erstellte leere Ebene aus und wiederholen Sie Schritt 6. Dieses Mal verwenden Sie einen schwarzen oder dunkelgrauen Pinsel und wählen die Quadrate aus, die Sie zuvor nicht ausgewählt haben .

Schritt 8: Lassen Sie etwas Schatten fallen

Zeit, den Schatten zu zeichnen.

Um es schön und realistisch zu machen, erstellen Sie eine neue Ebene und zeichnen Sie mit dem polygonalen Lasso-Werkzeug eine Form, die ungefähr dem Schatten ähnelt, und füllen Sie sie dann mit Schwarz.

Es ist ziemlich schwierig, den Schatten realistisch erscheinen zu lassen, aber denken Sie daran: Je weiter die Karte vom Tisch entfernt ist, desto weicher wird der Rand des Schattens.

Das Wischwerkzeug kann Ihnen sehr helfen. Ich greife danach und trage viel auf die Ecken auf. Die Intensität des Rotes zeigt an, wo ich mich mehr mit dem Wisch konzentriert habe.

Das Endergebnis sollte ungefähr so aussehen:

Schritt 9: Schneiden Sie ein Loch

An dieser Stelle sollten Sie etwas Ähnliches haben. Wir sind fast fertig mit Photoshop.

Sie müssen lediglich die übliche Ebenenmaske auf die Schatten- und Hintergrundebene anwenden. Klicken Sie also erneut bei gedrückter Alt-Taste und ziehen Sie die Ebenenmaske von der Kartenebene auf die HintergrundLayer. Gleiches gilt für die Schattenebene. Wenn Sie dies getan haben, kehren Sie diese beiden Masken um, wählen Sie die Ebenenmaske aus und drücken Sie den Befehltaste + I (Strg + I auf einem PC).

Als letztes müssen Sie die Sichtbarkeit der Kartenebene deaktivieren. Auf diese Weise schneiden wir ein Loch durch alle Ebenen und ein guter Teil des Bildes ist transparent.

Jetzt sollte der Boden Ihres Ebenenstapels folgendermaßen aussehen:

Schritt 10: Png

Exportieren Sie für das Web in einem transparenten PNG-24, benennen Sie die Datei "mask.png" und schließen Sie Photoshop!

Schritt 11: HTML und JS

Der schwierigste Teil ist erledigt. Entspannen Sie sich jetzt und öffnen Sie Ihren bevorzugten Texteditor.

Jetzt müssen Sie nur noch eine neue HTML-Datei erstellen, die die Google Maps-API und eine CSS-Datei verwendet, um das Ding ein wenig zu stylen.

In Google ist ohnehin eine Menge Dokumentation zu dieser API vorhanden. In den nächsten Schritten werden Sie feststellen, dass Sie kein erfahrener Programmierer sein müssen. Sie müssen nur ein paar Zeilen schreiben:

<!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>

Wie Sie sehen, ist der Code ziemlich einfach. Ich habe gerade beschlossen, einige Optionen zu ändern:

	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
	}

Ich deaktiviere die Möglichkeit, zur Satellitenansicht zu wechseln, da ich nicht denke, dass dies mit diesem realistischen Gefühl übereinstimmt. Ich habe den Pan-Controller, StreetView und die Zoomstufe aus demselben Grund deaktiviert, aber Sie können hier tun, was Sie wollen.

Schritt 12: CSS

Was folgt, ist das absolute Minimum, das in die verknüpfte CSS-Datei geschrieben werden muss, und wie Sie sehen werden, ist nichts zu kompliziert.

#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 Zeilen dieses Codes dienen nur dazu, das Ding richtig aussehen zu lassen, und Sie können sie nach Belieben ändern. Die einzige Zeile, die Sie beachten müssen, sind die letzten pointer-events: none;.

pointer-events: none; verhindert, dass die Maus mit dem #mask div interagiert, sodass der Cursor mit dem, was sich darunter befindet, interagieren kann. Auf diese Weise funktioniert die Karte weiterhin, auch wenn sie durch eine Maske oder etwas anderes verdeckt wird.

Wenn Sie in Ihrer Lieblingsdokumentation nach pointer-events suchen, werden Sie feststellen, dass diese hauptsächlich mit SVG-Dateien verwendet werden. Ich denke, seine Verwendung mit dem Wert "none" wird unterschätzt und ist noch nicht erforscht!

Der Rest des CSS ist nicht besonders aufregend. Es platziert nur die Karte und die Maske an der richtigen Position. Die map_canvas sind 1202 Pixel breit und 622 Pixel hoch, da dies zufällig die Größe des Rasters ist, in dem sich die Karte befindet (rotes Rechteck im Bild). Oben: 97 Pixel und links: 97 Pixel sind der Versatz dieses Rasters von oben linke Ecke (blaues Rechteck im Bild).

Mögliche Anwendungen

Nachdem Sie die Grundlagen verstanden haben, können Sie diese Technik auf viele verschiedene Arten anwenden.

Als ich diese Karte entwarf, war sie ein konzeptionelles Beweiß und ich dachte nicht an eine bestimmte Anwendung, aber nachdem ich mit dem Schreiben des Tutorials begonnen hatte, dachte ich, es wäre interessant, euch eine praktische Möglichkeit zu zeigen, sie zu verwenden. Also habe ich eine einfache Kontaktseite angelegt und dachte, es wäre schön, der Karte eine Perspektive zu geben.

Dazu habe ich einfach alle Ebenen ausgewählt und Bearbeiten > Transformieren > Perspektive verwendet, um der Karte die richtige Verzerrung zu verleihen.

Auf die gleiche Weise habe ich eine Holzstruktur verzerrt, um das Brett zu erstellen, und etwas Schatten darunter hinzugefügt.

Es ist ein effektives Ergebnis und kann in einer großzügigen Größe verwendet werden, aber die PNG-24-Datei der Maske kann sehr schnell schwer werden, daher war dies ein guter Kompromiss zwischen Größe und Gewicht.

Laden Sie die Quelldateien herunter und überzeugen Sie sich selbst von der zusätzlichen .psd-Datei.

Abschluss

Ich hoffe, ich war klar genug und es ist Ihnen gelungen, eine coole Karte für Ihre Websites zu erstellen.

Wenn Sie alternative Möglichkeiten oder Verbesserungen des Workflows vorschlagen können, notieren Sie sich Ihre Gedanken im Kommentarbereich. Danke fürs Lesen!