Menambahkan Sentuhan Realisme ke Google Maps Anda

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

Menggunakan API Google Maps adalah salah satu cara yang paling populer (jika bukan yang paling populer) untuk menampilkan geo lokasi di situs web saat ini. Dalam tutorial ini saya akan menunjukkan bagaimana cara saya memberi peta google tampilan yang lebih realistis dan saya akan memberi Anda beberapa tip tentang cara membuat peta sendiri yang benar-benar bersinar!

Langkah 1: Pemanasan

Tujuan kami adalah memberi peta tampilan yang realistis, sambil tetap membiarkan pengguna memperbesar dan menggesernya.

Kita akan mendapatkan efek ini dengan membuat gambar semi transparan .png yang akan menutupi peta, kemudian kita akan menggunakan beberapa CSS untuk memposisikannya di atas peta.

Sebelum membuka Photoshop saya sarankan Anda mengambil peta yang sebenarnya, atau selembar kertas, dan lipat seperti peta yang ingin Anda render. Ini akan sangat membantu Anda memahami bagaimana permukaan bereaksi terhadap sumber cahaya. Ambillah itu sebagai saran umum, karena saya pikir selalu menyenangkan bermain dengan selembar kertas sebelum meraih mouse!

Saat melakukan ini, Anda juga harus mengambil tangkapan layar dari peta google pilihan Anda - kita akan menggunakan tangkapan layar ini di Photoshop sebagai referensi.

Tip: Jika Anda menggunakan Mac dan ingin mengambil tangkapan layar dari wilayah layar tertentu, Anda bisa menekan "command + shift + 4", lalu klik dan seret untuk menggambar pilihan persegi panjang dari apa yang Anda inginkan ditangkap.

Langkah 2: Peta dan Latar Belakang

Setelah Anda meraih tangkapan layar Anda dapat membukanya di Photoshop dan kita akan mulai bekerja!

Hal pertama yang harus dilakukan adalah membuat file transparan. Klik dua kali pada layer background yang berisi peta dan tekan enter, dengan melakukan ini kita mengubah background ke layer normal. Sekarang kita ingin memberi ruang ekstra untuk dimainkan, jadi pergi ke Image > Canvas Size (alt + shift + C) dan skala naik kanvas Anda sedikit. Saya menambahkan 90 piksel di setiap sisi namun dimensi terserah Anda dan bergantung pada tampilan terakhir yang ingin Anda dapatkan; tolong jangan khawatir, ukuran ini bisa diganti lagi kapan saja.

Sekarang saatnya menambahkan gambar latar belakang. Pilih saja sesuatu yang terlihat bagus di bawah peta, saya memilih tekstur kayu yang saya temukan di CGtextures.com, namun Anda dapat menggunakan apapun yang Anda inginkan, baik itu gambar atau mungkin hanya gradien yang bagus.

Setelah Anda memilih latar belakang Anda letakkan di layer baru di bagian bawah hierarki.

Langkah 3: Tepi

Pada titik ini saatnya memberi peta beberapa bentuk, karena persegi panjang ini tidak benar-benar terlihat seperti selembar kertas yang terlipat.

Untuk melakukan ini kita hanya menggunakan laso poligonal dan menggambar ujung-ujungnya. Pada titik ini, sangat membantu untuk menempatkan beberapa pemandu di mana Anda ingin membuat lipatannya, jadi saya membuat grid 3x2 yang kasar. Itu tidak harus akurat, tapi kita akan sering membutuhkannya pada langkah-langkah selanjutnya.

Setelah pemilihan ditutup Anda bisa menekan tombol layer mask, ini secara otomatis akan membuat mask yang hanya menampilkan area yang dipilih.

Langkah 4: Lipatan

Setelah memotong ujung-ujungnya, langkah-langkah berikut akan membantu memberikan peta beberapa kedalaman. Hal pertama yang ingin kita lakukan adalah membuat peta terlihat seperti dilipat.

Hal yang pertama-tama, buat layer transparan baru, lalu ambil alat seleksi persegi dan ikuti grid yang Anda set-up tadi, pilih 3 persegi panjang yang berlawanan (lebih besar dari pada peta) dan isi dengan warna hitam polos.

Kita sekarang akan menerapkan mask ke layer ini - itu harus sama dengan yang kita terapkan pada peta. Cara termudah untuk melakukannya adalah dengan meng-alt-klik dan menyeret mask dari layer peta dan menjatuhkannya pada layer yang sedang kita kerjakan.

Salah satu tugas yang tersisa adalah mengubah opacity layer menjadi sekitar 6-10%.

Langkah 5: Perbatasan Putih (ini adalah Hitam yang Baru)

Pada titik ini saya ingin menambahkan border putih di sekitar peta. Untuk melakukannya, buat layer baru, isi dengan warna yang Anda suka, ubah fill-nya sampai 0% dan terapkan layer mask yang sama dengan yang Anda terapkan pada layer peta.

Saat ini tidak banyak yang bisa dilihat, tapi itu akan berubah dalam sekejap: klik dua kali layer-nya dan terapkan inner stroke putih 8-10 piksel. Sangat penting bahwa Anda menerapkan inner stroke karena outter stroke akan memiliki sudut membulat yang tidak terlihat bagus dalam kasus kita.

Langkah 6: Dodge dan Burn

Mari kita memperbaiki pencahayaannya. Kita akan melakukannya dengan sesuatu yang mirip dengan efek dodge/burn. Yang bisa kita lakukan di sini adalah membuat 2 layer yang berbeda dan sekali lagi menerapkan layer mask biasanya, satu layer akan menerangkan beberapa lipatan dan satu lagi akan membuat gelap yang lainnya.

Pilih layer terang, ambil brush putih lembut yang besar dengan opacity dan flow rendah, lalu mulailah melukis di dekat lipatan pada kotak cahaya dari kertas (yang tidak memiliki persegi panjang transparan hitam di bagian atas).

Bagian ini sulit dijelaskan dengan kata-kata, tapi gambarnya akan menjelaskannya jauh lebih baik.

Saya mengatur brush saya menjadi 20% opacity dan 20% flow, lalu saya menggambar beberapa goresan yang mengikuti grid. Ini tidak harus akurat karena kita akan menggunakan layer mask sekali lagi.

Pada awalnya sulit untuk melihat goresan ringan di atas peta, jadi, demi kejelasannya, saya menerapkan latar belakang abu-abu 50% di bawah layer. Jelas Anda tidak perlu melakukannya.

Setelah saya senang dengan stroke putih saya memilih layer mask pada layer ini, ambil alat seleksi persegi panjang, dan dengan bantuan grid saya memilih kotak di mana saya ingin menyembunyikan efek ini. Setelah saya memiliki pilihan yang benar saya mengisinya dengan warna hitam.

Sekarang Anda bisa mengubah opacity layer ini tergantung pada seberapa buramnya goresan Anda.

Tip: ingat kita membuat overlay .png untuk peta, jadi "normal" adalah satu-satunya blending mode yang bisa kita gunakan. Ini juga berarti bahwa jika Anda membesar-besarkan goresan putih atau hitam ini dan membuat terlalu buram, hasilnya mungkin terlihat aneh.

Langkah 7: Dodge dan Burn Reloaded

Sekarang saatnya untuk melakukan hal yang sama untuk sisi yang lebih gelap, jadi pilih layer kosong yang Anda buat tadi dan ulangi Langkah 6. Kali ini Anda akan menggunakan brush abu-abu gelap atau hitam dan Anda akan memilih kotak yang belum Anda pilih sebelumnya.

Langkah 8: Menjatuhkan Beberapa Bayangan

Waktunya menggambar bayangan.

Untuk membuatnya bagus dan realistis, buat layer baru dan gunakan alat laso poligonal untuk menggambar bentuk yang kira-kira akan menyerupai bayangan, lalu isi dengan warna hitam.

Ini cukup sulit untuk membuat bayangan terlihat realistis, tapi ingat ini: semakin jauh petanya dari meja, semakin lembut tepi bayangannya.

Alat smudge bisa banyak membantu Anda, saya meraihnya dan menerapkan banyak hal ke sudut, intensitas warna merah mewakili tempat saya berkonsentrasi lebih banyak dengan smudge itu.

Hasil akhir akan terlihat seperti ini:

Langkah 9: Membuat Lubang

Pada titik ini Anda harus memiliki sesuatu yang mirip dengan ini. Kita hampir selesai dengan Photoshop.

Semua yang tersisa untuk dilakukan adalah menerapkan layer mask biasanya ke layer bayangan dan latar belakang, jadi sekali lagi alt klik dan seret layer mask dari layer peta ke layer latar belakang, sama berlaku untuk layer bayangan. Setelah Anda selesai melakukannya, balikkan dua topeng ini lalu pilih layer mask dan tekan command + I (control + I pada PC).

Hal terakhir yang harus dilakukan adalah mematikan visibilitas layer peta. Dengan cara ini kita memotong lubang melalui semua lapisan dan sebagian besar gambar transparan.

Sekarang bagian bawah tumpukan layer Anda akan terlihat seperti ini:

Langkah 10: Png

Ekspor untuk Web dalam png-24 transparan, beri nama file "mask.png" dan tutup Photoshop!

Langkah 11: HTML dan JS

Bagian tersulit sudah selesai, sekarang rileks dan buka editor teks favorit Anda.

Sekarang Anda hanya perlu membuat file HTML baru yang menggunakan API google maps dan file CSS untuk menatanya sedikit.

Banyak dokumentasi tentang API ini hadir di Google, Anda akan melihat langkah selanjutnya Anda tidak perlu menjadi ahli pengkode, Anda hanya perlu menulis beberapa baris:

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

Seperti yang Anda lihat, kodenya sangat mudah, saya hanya memutuskan untuk mengganti beberapa opsi:

	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
	}

Saya menonaktifkan kemampuan untuk beralih ke tampilan Satelit karena menurut saya ini tidak sesuai dengan perasaan realistis ini. Saya menonaktifkan pan controller, streetView dan tingkatan zoom untuk alasan yang sama, namun Anda bebas melakukan apapun yang Anda inginkan di sini.

Langkah 12: CSS

Berikut ini adalah yang minimal untuk ditulis dalam file CSS yang terkait, dan karena Anda akan melihat tidak ada yang terlalu rumit.

#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 baris kode ini hanya untuk membuat tampilannya terlihat benar dan Anda dapat mengubahnya sesuai keinginan Anda, satu-satunya baris yang perlu Anda pedulikan adalah pointer-events: none; terakhir.

pointer-events: none; mencegah mouse berinteraksi dengan div #mask, sehingga kursor akan dapat berinteraksi dengan apapun yang ada di bawahnya. Dengan cara ini peta terus bekerja, bahkan jika itu dikaburkan oleh topeng atau sesuatu yang lain.

Jika Anda mencari pointer-events di antara dokumentasi favorit Anda, Anda akan melihatnya terutama digunakan dengan file SVG. Saya pikir penggunaannya dengan nilai "none" diremehkan dan belum dieksplorasi!

Sisa dari CSS tidak terlalu menarik; itu hanya menempatkan peta dan topeng pada posisi yang tepat. map_canvas diatur menjadi lebar 1202px dan tinggi 622px karena itu adalah ukuran grid dimana peta terkandung (kotak merah pada gambar), top: 97px dan left: 97px adalah offset grid tersebut dari pojok atas kiri (kotak biru di gambar).

Aplikasi yang Mungkin

Sekarang setelah Anda memahami dasar-dasar, Anda dapat menerapkan teknik ini dengan berbagai cara.

Ketika saya mendesain peta ini, itu adalah bukti konsep dan saya tidak memikirkan aplikasi tertentu, tapi setelah saya mulai menulis tutorialnya, saya pikir akan menarik untuk memberi tahu Anda cara praktis untuk menggunakannya. Jadi saya meletakkan sebuah halaman kontak sederhana dan saya pikir akan lebih baik jika memberi peta beberapa perspektif.

Untuk melakukan ini saya hanya memilih semua layer dan menggunakan Edit > transform > perspective untuk memberi peta distorsi yang tepat.

Dengan cara yang sama, saya mengubah tekstur kayu untuk membuat papan dan menambahkan sedikit bayangan di bawahnya.

Ini adalah hasil yang efektif dan dapat digunakan dengan ukuran yang umum, tapi file mask png-24 bisa menjadi berat dengan sangat cepat, jadi ini adalah kompromi ukuran/berat yang bagus.

Unduh file sumber dan periksa tambahan .psd untuk Anda sendiri.

Kesimpulan

Saya harap saya sudah cukup jelas dan Anda telah berhasil membuat peta keren untuk situs web Anda.

Jika Anda bisa menyarankan cara alternatif untuk melakukan ini, atau perbaikan alur kerja, catatlah pikiran Anda di bagian komentar. Terima kasih telah membaca!