Alex教程翻译---交通流线分析图解

本文由E拓建筑网www.eeeetop.com业梅姐翻译自Alex Hogerefe博客，转载必须保留以上信息！
DIAGRAMS:PEDESTRIANPATHS                                                                                                     ALEX HOGREFE

交通流线分析图解

I received a lot of emails asking if I could explain how I created the pedestrian paths diagram in the previous post. To generate the line work, there are many ways this could be done. In the past, I probably would have used the spline tool in CAD. The line work could also easily be created in Illustrator. However, not many people know about or use the pen tool in Photoshop. It's similar to the pen tool in Illustrator but with some minor differences. In this case, I will be using the pen tool to create a path that I can tell the brush tool to follow.

很多人发邮件来问我上篇博文中交通流线的分析图是怎么做的。交通流线图有很多种画法，以前我大概会直接用CAD里的多段线画，在AI中也很好画。但是很多人没想过或者是不会用PS中的钢笔工具。它和ai中的钢笔工具差不多但又有些微不同。这个案子中，我会使用钢笔工具来画线，并讲解笔刷工具。

1. Setup the Brush settings

I need to first set the brush settings because this is what I am going to use to add a stroke to the path created in the next step. The settings in this step will determine the thickness of the line as well as the color, hardness, and opacity. I chose a hard brush, 6 pixels big, at 100% opacity, and with black paint. You may need to draw a few lines to determine if you have the correct size.

1：设置笔刷

首先要设置笔刷，因为需要用笔刷描我下一个步骤中画的线。这一步的设置决定了线宽、颜色、硬度和透明度。我选择了一个硬笔刷，6像素，不透明度100%，黑色。设置后可以画一段线看看尺寸是否合适。

2. Setup the pen tool and begin creating paths

Before choosing the pen tool, first create a new layer. The paths will not show up in the layers palette but the stroke that is applied to the paths will be drawn on this layer. Now, choose the pen tool and be sure the "Path" option is selected in the pen tool settings tool bar at the top.

With the pen tool activated, begin drawing the paths. To create the curved paths, click and drag when choosing the points on the path. This will create handles that can be used to control the size and shape of the curve at that point.

2.设置钢笔工具 开始画线

在选择钢笔工具之前，先新建一个图层。路径不会显示在图层面板，但是描边的线会画在这个图层。然后选择钢笔工具，确定路径是从顶部的钢笔工具设置栏中选中的。

工笔工具就绪，开始画路径。创建曲线路径，选中路径上的点单击并拖动，通过操纵杆控制曲线的形状和尺度。

3. Stroke Path

Once you get the path where you want it, right click near the path and choose "Stroke Path". If this option is grayed out, double check that you have the new layer selected that was created in the previous step.

3.描边路径

调整好曲线后，单击右键选择“描边路径”，如果无法选择“描边路径”（文字呈现灰色），双击上一步中新建的图层即可。

A second dialogue box will appear asking what tool to use for the stroke. We want the "Brush" tool since this is what we set up in the first step. Then choose "OK".

To finish the path, hit the enter. Repeat these steps to create each path.

然后单击“回车”~一条路径就搞定啦~~~然后每条路径都重复上述操作~

4. Generate many paths at different levels of opacities

I want to create a hierarchy of paths revealing different levels of traffic intensity. This is shown through both a density of lines and levels of opacity. For this image, I created three different path layers. The first layer was set to 100% opacity, the second to 50%, and the third to 15%.

4.在不同透明度的图层画许多不同的流线

我想用不同类别的曲线表示交通强度的不同，主要通过线的密度和透明度来表示。这张图中，我建了三个流线图层，第一个图层不透明度是100%，第二个是50%，第三个是15%。

5. Add line work glow

I want the line work to have more of a presence in the illustration, so a slight glow will be added. This is done simply with the brush tool. I used a soft brush, 90 pixels big, and set the opacity to 12%. Where the lines are dense or converge together, I layered in some black paint.

5.给线条加光晕

我想让这些线条更有体积感，所以给线条加了一点光晕。笔刷很容易做到这个效果。我用了一个软笔刷，90像素，不透明度12%。在线条密集或者相交处，就在新建的图层上用黑色笔刷画一笔。

I also duplicated the dark paths layer and applied a Gaussian Blur filter. I removed the background so that this step could be seen a little more clearly.

我还复制了上面新建的那个图层，并且用了高斯模糊滤镜。下图我去掉了背景图，以便看清楚这个操作

6. Add Color

To further punch up the paths, I'm going to add color. To make things easier, first merge all of the path layers together. It may be best to first duplicate these layers and turn off visibility so that you will still have the original individual layers available to edit if needed later on down the road. To merge, select all of the path layers, right-click on one of the layers, and choose "Merge Layers".

6.上色

为了让流线图看起来更加高大上，下面我们来给它上色。为了简化操作，先把流线图层合并，最好是先把这些子流线图层复制一份，关掉图层可见性，以备不时之需。选择流线图层，右键选择“合并图层”。

Once the layers are merged, right-click on the new single layer and choose "Duplicate Layer".

图层合并好后。右键合并后的新图层，选择“复制图层”。

With the duplicated layer selected, choose "Image>Adjustments>Hue Saturation" at the top. In the dialogue box, first check the "Colorize" box. Then move the "Lightness" slider to the right to lighten the line work. Also move the "Saturation" slider to the right to increase the color. Finally, adjust the "Hue" slider to the color tone you prefer.

选择该副本图层，在顶部状态栏选择“图像”、“调整”、“色相饱和度”。在弹出的对话框中，先选中右下角的“着色”，然后调节明度，让线条变亮，然后调节“饱和度”到最右，加深颜色，最后调整“色相”到你喜欢的色调。（如下图）

7. Set Layer to Overlay

Finally, set the blend mode of the colorized layer to "Overlay". This will help blend the color into the image and let the darker line work underneath show through.

7.设置图层为叠加

最后将彩色图层的混合选项设置为叠加，这样能够更好地将颜色与底图相融合，并且让下面的黑色流线图层可以显现出来。

The final result is a series of smooth curvy lines created without the need to jump into another program such as Illustrator or CAD.

最终的结果是得到一系列的曲线，而不需要借助其他软件，比如CAD或者AI。


原文链接：http://www.alexhogrefe.com/blog/2014/4/5/diagrams-pedestrian-paths.html

沙发

板凳

业梅姐，这个是PS的一个插件吗

y122737276 发表于 2014-4-14 18:26

                               
登录/注册后可看大图

业梅姐，这个是PS的一个插件吗

PS的笔刷工具。

太棒了太棒了

好贴！学习了，不仅学习了具体操作，也学习了表达方式！！！

tangshanwangyi 发表于 2014-4-14 20:15

                               
登录/注册后可看大图

好贴！学习了，不仅学习了具体操作，也学习了表达方式！！！

嗯哪，学习原博主的思路很重要~一招鲜吃遍天~

fei chang you yong

这尼玛，很（diao）有（zha）用（tian）的技能！！！！

好贴！学习了，不仅学习了具体操作，也学习了表达方式！！！

很不错啊~~学会这一招就稳妥了~~

看起来比较复杂

qwemnz 发表于 2014-4-14 22:32

                               
登录/注册后可看大图

看起来比较复杂

每次的图都是蒙着弄，看来要学习一下了

"I want to create a hierarchy of paths revealing different levels of traffic intensity. This is shown through both a density of lines and levels of opacity.
我想用不同类别的曲线表示交通强度的不同，主要通过线的密度和透明度来表示。"

这种方式我很少见，
交通分析图以线的密度和透明度来表示 能不能表达清楚
或者说看图的人会知道曲线表示交通强度的不同，主要通过线的密度和透明度来表示 这个表示方式吗？