谷歌地图谷歌地图
使用谷歌地图API是最流行的（如果不是最流行的）的方式来展现当今网站地理地点之一。 在本教程中，我将演示如何使Google地图更具真实感，并为您提供一些有关如何使自己的地图真正发光的提示！
步骤1：热身
我们的目标是使地图具有逼真的外观，同时仍允许用户缩放和平移地图。
我们将通过创建将遮盖地图的半透明.png图像来获得此效果，然后使用一些CSS将其放置在地图顶部。
在打开Photoshop之前，我建议您先拍摄一张真实的地图或一张纸，然后将其像要渲染的地图一样折叠。 这确实可以帮助您了解表面对光源的React。 以此为一般建议，因为我认为在抓住鼠标之前玩纸总是很不错的！
在执行此操作时，您还应该获取您选择的Google地图的屏幕截图-我们将在Photoshop中使用此屏幕截图作为参考。
提示：如果您使用的是Mac，并且想获取屏幕上特定区域的屏幕截图，则只需按“ command + shift + 4”，然后单击并拖动以绘制要选择的矩形选择被抓
步骤2：地图和背景
抓取屏幕截图后，可以在Photoshop中将其打开，我们将开始工作！
首先要做的是使文件透明。 双击包含地图的背景层，然后按Enter键，将背景转变为普通层。 现在，我们想给自己一些额外的空间来玩，所以转到“图像”>“画布大小”（alt + shift + C），然后将画布放大一点。 我在每侧增加了90像素，但是尺寸取决于您，并取决于您要获得的最终外观。 无论如何，请随时更改此大小。
现在是时候添加背景图像了。 只要选择在地图下看起来不错的东西，我就选择了在上找到的木材纹理，但是您可以使用任何想要的东西，无论是图片还是漂亮的渐变色。
选择背景后，将其放在层次结构底部的新层上。
第三步：边缘
现在是时候给地图一些形状了，因为这个矩形看上去并不像一张折叠的纸。
为此，我们仅使用多边形套索并绘制边缘。 此时，将一些辅助线放置在要创建折痕的位置确实有帮助，因此我创建了一个粗糙的3x2网格。 它不一定是准确的，但是在接下来的步骤中我们经常会需要它。
关闭选择后，您可以单击图层蒙版按钮，这将自动创建仅显示所选区域的蒙版。
步骤4：折页
切割边缘后，以下步骤将处理地图的某些深度。 我们要做的第一件事是使地图看起来像已折叠。
首先，创建一个新的透明层，然后使用矩形选择工具，并按照您之前设置的网格，选择3个相对的矩形（大于地图）并用纯黑色填充。
现在，我们要在此图层上应用蒙版-它必须与我们在地图上应用的蒙版相同。 最简单的方法是按住Alt键并拖动并拖动地图图层的遮罩，然后将其放置在我们当前正在处理的图层上。
剩下的一项任务是将图层的不透明度降低到大约6-10％。
步骤5：白色边框（是新黑色）
此时，我想在地图周围添加白色边框。 为此，请创建一个新图层，用您喜欢的任何颜色填充它，将其填充设置为0％，然后应用与应用于地图图层相同的图层蒙版。
目前没有什么可看的，但是很快就会改变：双击图层并应用8-10像素的白色内部笔触。 应用和内部笔触非常重要，因为外部笔触会具有圆角，在我们的情况下看起来不太好。
第6步：闪避和燃烧
让我们改善照明。 我们将使用类似于减淡/加深效果的方法进行处理。 我们在这里可以做的是创建2个不同的图层，然后再次应用常规的图层蒙版，一层将使某些折叠变亮，而另一层将使其他折叠变暗。
选择浅色层，抓住具有低不透明度和流动性的大的白色软笔刷，然后开始在浅色矩形纸上的折叠处开始绘画（上面没有黑色透明矩形的纸）。
这部分很难用文字来解释，但是图片会做得更好。
我将笔刷设置为20％的不透明度和20％的流量，然后按照网格绘制一些笔触。 这不一定是准确的，因为我们将再次使用图层蒙版。
首先，很难在地图顶部看到这些笔触，因此，为清楚起见，我在图层下方应用了50％的灰色背景。 显然，您不需要这样做。
当我对白色笔触感到满意后，就可以在该图层上选择图层蒙版，抓住矩形选择工具，并在网格的帮助下选择要隐藏此效果的正方形。 一旦选择正确，就用黑色填充。
现在，您可以根据笔触的不透明度降低此层的不透明度。
提示：请记住，我们正在为地图创建.png叠加层，因此“正常”是我们可以使用的唯一混合模式。 这也意味着，如果夸大这些白色或黑色笔触并使它们变得不透明，则最终结果可能看起来很尴尬。
步骤7：道奇和加深重装
现在是时候对较暗的面进行相同的操作了，因此选择您先前创建的空层并重复步骤6。这次您将使用黑色或深灰色的画笔，并且将选择之前未选择的正方形。
步骤8：投下阴影
是时候画阴影了。
为了使其美观和逼真，请创建一个新层，然后使用多边形套索工具绘制一个大致类似于阴影的形状，然后将其填充为黑色。
使阴影看起来逼真是非常棘手的，但是请记住这一点：地图离桌子越远，阴影的边缘越柔和。
涂抹工具可以为您提供很多帮助，我经常会抓住它并将其涂抹在角落上，红色的强度代表着我更集中涂抹的地方。
最终结果应如下所示：
第9步：开Kong
在这一点上，你应该有类似的东西。 Photoshop差不多完成了。
剩下要做的就是将通常的图层蒙版应用到阴影和背景图层，因此再次按住Alt单击并将图层蒙版从地图图层拖到背景图层，阴影图层也是如此。 完成此操作后，将这两个蒙版反转，因此选择图层蒙版并单击命令+ I（在PC上为控制+ I）。
最后要做的是关闭地图图层的可见性。 这样，我们在所有图层上都切了一个洞，并且图像的很大一部分是透明的。
现在，图层堆栈的底部应如下所示：
步骤10：Png
以透明的png-24导出为Web，将文件命名为“ mask.png”并关闭Photoshop！
步骤11：HTML和JS
最难的部分已经完成，现在放松并打开您喜欢的文本编辑器。
现在，您只需要创建一个新HTML文件即可，该文件使用google maps API和CSS文件对样式进行一些样式设置。
无论如何，Google上都会有很多关于此API的文档，您将在接下来的步骤中看到您不需要成为专家编码者，您只需要写几行即可：
<!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="/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>
如您所见，代码非常简单，我决定更改一些选项：
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}
我禁用了切换到“卫星视图”的功能，因为我认为它不符合这种逼真的感觉。 由于相同的原因，我禁用了平移控制器，streetView和缩放级别，但是您可以在此处随意执行任何操作。
步骤12：CSS
接下来是要在链接CSS文件中编写的最低要求，并且您将看到没有什么太复杂的。
#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行代码只是为了使事情看起来正确，您可以按自己喜欢的方式对其进行更改，您唯一需要关心的是最后一个pointer-events: none;。
pointer-events: none;防止鼠标与#mask div进行交互，因此光标将能够与其下方的任何内容进行交互。 这样，即使被蒙版或其他东西遮盖了，地图也可以继续工作。
如果您在喜欢的文档中寻找指针事件 ，您会发现它主要与SVG文件一起使用。 我认为它与“ none”值的使用被低估了，并且尚未开发！
其余CSS并不是特别令人兴奋。 它只是将地图和遮罩放置在正确的位置。 map_canvas设置为1202px宽和622px高，因为它恰好是包含地图的网格的大小（图片中的红色矩形），top：97px和left：97px是该网格距顶部的偏移量左上角（图片中的蓝色矩形）。
可能的应用
现在，您已经了解了基础知识，可以通过多种不同方式来应用此技术。
当我设计这张地图时，这只是概念上的证明，我并没有考虑过特定的应用程序，但是当我开始编写教程之后，我发现向大家展示一种实用的使用方法很有趣。 因此，我布置了一个简单的联系页面，我认为为地图提供一些角度会很好。
为此，我只选择了所有图层，并使用“编辑”>“变换”>“透视”为地图赋予了正确的变形。
以相同的方式，我扭曲了木材的纹理以创建木板，并在其下方添加了一些阴影。
这是一个有效的结果，并且可以在很大的尺寸下使用，但是蒙版的png-24文件会很快变得很重，因此这是一个很好的尺寸/重量折衷方案。
下载源文件，然后自己检查其他.psd。
结论
希望我已经足够清楚，并且您已经为网站成功制作了精美的地图。
如果您可以建议其他方法或改善工作流程，请在评论部分中记下您的想法。 谢谢阅读！
翻译自: /tutorials/add-a-touch-of-realism-to-your-google-maps--webdesign-5304
谷歌地图谷歌地图
