Udemy PS Chris Barin 87-92

87.00-9.1 

Introduction 

本章简介

• 如何有效的用形状图层 剪切蒙版 如何从草稿定制图层 网站的按钮。in the upcoming lectures, i'll teach you how to work with shape layers effectively. how you can create and modify them, what's their main purpose it. in this section, i'll show you a thing or two about clipping masks. you'll also learn how to create custom shapes from scratch with help of pen tool. together we'll design buttons for a website design as well as generate automatic guides that will help us position our layers precisely. 

88.07-9.2 

Create Shapes 

创建形状

1.  探讨图层形状在项目中如何应用，目前在图层面板创建的形状，矢量的，意味着调节大小的时候不失去质量。可以用Ctrl+T热键，可以调节点，看左纵列创建图形的工具，let's discuss shape layers in photoshop and see how they can help you in your projects. we're established that shape by this symbol in the layers panel. there're also vectors. and this means they can be resized to your heart's content without losing quality. this means one of your go to hotkeys is going to be Ctrl+T. through it. you can modify them on the spot. we'll focus on these tools from the left panel, because these create shapes. 

2. 两个主要的选择，第一点击拖拽，最好的选择。拖拽的时候看到大小是非常有帮助的。第二个方法是用特殊测量方案的时候，打开对话窗口输入500像素✖️200像素。you have two main options. one, we can click and drag, and that's my preferred method. as i'm dragging, i also get its size, which is very helpful because it keeps me focused on my work. the second method is great when you want specific measurements. you click and you get this window. let's put it somthing like 500 pixels by 200 pixels. 

3. 看上面的选项栏，确保设置正确，第一下拉菜单选择形状；填充决定矩形颜色。从前景样本中获得，选择新颜色，比如我们选择红色用于前景，按X几次交换前景背景颜色，注意预览框的变化。let's move on focus up top for a bit. in the options bar, make sure you have these settings. first, we need to have shapes selected in dropdown. the fill will determine the rectangle color and this is taken from your foreground swatch. let me choose two new colors. so you can see how this works. we have a nice red shade and for the background. 但是我建议越过该步骤，用任意颜色，如果想改变颜色，直接双击形状缩略图。颜色的变化实时展示出来。这就是为什么我喜欢这样工作。i can also click on it, and i'll have several swatches. my advice is you skip the step, use any color, then if you want to change it, just double click the shapes thumbnail. the change is immediately shown on the canvas. and this is how i prefer to work. 

4. 笔画是另外一回事，另外一个方式设置2像素，但是白色矩形上红线斜过，意味笔画不能用。不管如何写入区域，写入的笔画就是展示不出来。the stroke is another one, i believe as is, as you can see, its way to set 2 pixels, but we also have this white rectangle that has a diagonal red line going through it. that means the stroke is diabled. so no matter what i have written in the field. no stroke is going to show upon canvas, that's totally fine by me. 选项栏的右侧“模糊边界”，早在2017版本的时候几乎不可能得到模糊的图层。然而，这就是“对齐边界”特征功能。确保形状边缘清楚的。back to the right side, we have another setting back in days of ps cs5. when you add shape layers to your canvas, you sometimes get blurry edges. long gone are those days. and in CC 2017. it's nearly impossible to get fuzzy shape layers by mistake. nevertheless, this is what this align edges feather does. it ensure your shapes will be crisp. 

5. 移动到工具栏，两个矩形工具的不同，从选项栏设定半径。决定矩形边缘的圆角。如果输入20像素，就是画布圆角的矩形。moving to the toolbox, the only difference between these 2 rectangle tools is this radius setting from the options bar. this will determine roundness of rectangles edges. so if i put in value of 20 pixels, this is what i'm going to end up with on canvas. 但问题是如果每次添加新形状，属性面板会弹出来。这是我第一个选择，当涉及到调节矩形的时候，这是在第一个CC版本最重要的特征，通过此设置，可以改变拐角半径。but here's the ting, you've probably noticed these properties panel pops up everytime i add a new shape. this is my number one choice when it comes down to adjusting my rectangles. the most important feature introduced in the first CC version was this area here. you can change the corner radius on fly. 比如设置到20像素，可以从选项栏键入，可以键入0敲回车。图层转化到常规矩形。两个工具都在一个面板里，调节拐角半径，可以调整不同角的半径。i have it set at 20 pixels because that's what i typed in that field from option bar. but i can change it to 0 and press enter. now our layer is just transformed into a regular rectangle. so this separation is no longer relevant in CC versions of ps. not only can you adjust the corner radius. you can do that for each individual corner. 

6. 维持横宽比的激活，依据任何变化都可以调节。如果键入10按回车，所有的都更新。但是如果按徽标，从底部键入25，给很多调节的灵活性。四角可以替换成0，因为面板从设置好第一个矩形可以弹跳出来。this chain icon is enabled, which means all 4 will adjust based on any change, i make in any field. so if i write 10 and hit enter, all of them are going to update. but i can hit this icon, and non i'll write 25 for the bottom ones, this gives me a lot ot flexibility. i can also square them off by replacing these value with 0. and it's easy to get started with it. because this panel pops up immediately after you've placed your first rectangle. 

7. 接下来了解宽度高度XY轴。W宽度H高度。或者Ctrl+T调节大小。从顶部左上角，X决定水平位置，距离左侧的水平位置。Y数值决定距离顶部的垂直距离和位置。moving up we have our width and height values here. this means you don't have to use Ctrl T to resize it. that still a valid option. but this is a good alternative, we also have this shape position on the canvas starting from the top left corner. X determines the shape position horizontally, starting from left side, if i change to 0, my rectangle is going to touch the left edge of canvas. change that to 100 and it's going to move 100 pixels to right. 

8. 移动面板，建议关闭笔画，因为图层风格做了非常好的功课。按住Shift拖拽完美的比例。不按shift图形随意一些。可以用于椭圆形，按住Shift拖拽完美的圆弧，椭圆形没有很多设置属性面板。moving down in this panel. we also have controls for its stroke. but again, i suggest you don't enable it because we have a layer style that does a much better job. when you create a new shape by dragging on canvas, hold Shift. and this will constrain your proportions. this means if you're a rectangle tool, you'll get a perfect square. shift prevents me from reshaping it as i drag. of course, i can always let go and this will give me full control over it. 因为椭圆没有四角需要控制。此外多边形工具，可以创建星星和多边形状，可以看到从选项栏的设置。this applies to ellipse tool as well. hold shift while you drag and you'll get a circle. ellipses don't have as many settings in this life shaped properties panel. because they don't have any corners to control. other than that, everything we've talked about is exactly the same, the polygon tool is great, when you want to create triangle, stars and all sorts of other shapes that have lots of sides, to control that amount, you can use this field from options bar. 

9. 我的建议是点击画布任意地方，可以得到新窗口，问到大小和边界和平滑度，比如100像素大小3边，得到期待的三角形。my advice is to click anywhere on the canvas, you'll get a new window. that asks you the size, how many sides. but more importantly if you want to have smooth corners, if i set it at 100 by 100 pixels with 3 sides and leave this unchecked, i'll get a triangle as you'd expect. 当再点击，如你意料的，我的大小是100像素✖️100像素。不是因为那是输入最后的数值，是我上一个形状设定的数据。when i click again there's something i want you to be aware of, my size is 100 by 100. and that's not because that was the last value that i wrote in. this is taken from the last shape i clicked on. 如果选择该图层，一旦选择创建新图层，不限于多边形工具。回到提到的开启平滑拐角，用100像素✖️100像素的设置，可以创建各种形状，自行探索。 so if i select this layer, as long as its shape, once i click to create, a new one, i'll get its measurements in these fields this isn't limited to polygon tool. all these other tools work in same way. anyway, back to what i was saying if i enable smooth corners with the same 100 by 100 settings, i'll get all sorts of stars with various looks.

10. 看线条工具，经常被忽略价值，不能点击直接看大小，比如选项栏设置的1像素，可以用 shift完美平直。不用也可以得到矩形工具。切换到，输入1像素高度，另外可以用Ctrl+T调整厚度。let's move over to line tool, which is seriously underused. you can't click on canvas to input any measurements. instead, you have to click and drag you set its thickness from up top. but i suggest you keep it 1 pixels. besides using shift to make it perfectly straight. there's little to say about it. 总结下，线条无用的。最后回到工具栏，选择定制形状，开始，面板有很多工具，但是需要用的就一两个。to sump it up, the line tool is pretty much worthless. finally going back to tool box, we have custom shapes, but there's topic for another lecture. but in everyday projects, you'll most likely use any one or two. 

89.04-9.3 

Modify Shapes 

调节图形

1. 调节图形面板和框选工具面板类似之处，对比两个看到类似的。操作功能类似的。开始拖拽后Shift，开始缩短横宽比。若是拖拽前选Shift，在形状图层选中的情况下，鼠标变成加号了。how you can modify the shape layers, when you add a rectangle or an ellipse to canvas, you'll get the panel. you have recognized these icons from marquee tools. you can compare the two, these icons look almost the same. and if we try to use our modifier keys. you'll see these tools behave the same way. if i hold shift after i start dragging, i'll constrain my aspect ratio. that's will end up with a perfect square. 如果加入存在的图形，图形变了，但是还是一个图层。说明这是图层叠加。按住Alt拖拽减去部分选区，另外拖拽后按Alt对称拓展图形。this means i'll add to my existing shape, check the layers panel to confirm this is case as you can see, no new layers shown up. instead, it got merged with the initial one that was selected. hold Alt and you can remove parts of shape minus symbol. but if you click and drag, then you hold Alt, it will expand layer on both sides as an equal right. 按住Alt+Shift给到交叉图形。接下来看椭圆形框选工具，基于原点创建和拓展。按住 Shift完美的圆形，Alt从原点开始拓展。what Shift and Alt together, they give us the intersection between the selections, here's the same effect, and it targets the old shape and the new one. we could create and expand the selection based on the point of origin, here with ellipse, we have the same thing. i'll click and drag from this top left corner of canvas. if i hold Shift, i'll get a perfect circle. but if i hold Alt, this will expand shape from where i initially clicked. 

2. 两个图层融合Ctrl+E热键。合二为一成为新图层，比如红色矩形，上面绿色矩形。选择二者融合新图层，你发现新图层颜色随上面的图层。比如红的矩形在上面，新图层红色的，绿矩形在上面，新图层绿色的。the merge command Ctrl E does rasterize shape layer. you'll get one layer, but it'll still retain its shape properties. i'll add a rectangle on canvas, i'll make it red, above it. i have another one, this tunnel those a green color, i'll now use Ctrl E. and they'll combine into a new layer. the new shape is green. if we undo and swap their positions in layers' panel. you'll find out how this works. merged them again, the one that's higher in the layers panel will determine the new shapes color.

3. 路径选择工具黑箭头，圆角半径被激活了，输入数值，按回车。目前是单一图层，锁定单个拐角的半径，按Shift点击第二个，会发现两个都被选中了。there still live shapes, i'll get the path selection tool, meaning the black arrow and i'll click this one, we can see the corner radius is activated. input any values and hit enter. if you hold Shift, and click on the second one, now you have both selected. go to the options bar, and click this icon. 到选项栏点击徽标，覆盖所有徽标，shift结合，Alt裁剪，Shift+Alt创建交叉，点击图层融合，提示错误对话框，选择确定，不再对待活生生的形状。now we have all the commands we've covered. as we covered, shift combined shapes, Alt subtracts, Shift and Alt create the intersection. we'll click on this merge shaped components, and we'll act the error, by hitting okay. we're saying we no longer want them to be treated as live shapes. 

4. 转化到常规形状图层，意味仍旧有矢量属性，属性面板选项受限制的。创建另一个矩形，比如白色箭头直接选择工具，拖拽锚定点，得到警告对话框，转化到常规路径。问，如果你失去所有的设置，为什么这样做呢，当你创建所有不规则形状的时候可以用。instead, they'll be converted to regular shape layers, that means they'll still have vector properties. but you won't have nearly as many options in properties panel. as you can see, this is much more restrictive. let me create another rectangle on the canvas, i'll show you another thing. if you get the white arrow, so the direct selection tool. and you drag anchor point, you'll get the same warning. you'll transform it into a regular path, meaning you'll lose all those great settings. this is useful when you want to create all sorts of irregular shapes that ps doesn't offer by default. 

90.11-9.4 

Activity Design Web Buttons 

创建网站按钮

1. 第一按钮让用户执行特定的任务，比如填写名字，每个网站有自己特定目标，下载文件，建立成员名单，命名为“CTA”，看看如何创作按钮。Call To Action buttons are the most important, ask user to perform a certain action, like hence their names. let's how to make CTA button. 

1. 第一，用醒目的颜色。每浏览两秒博人眼球的颜色，需要在各种图表中具备吸引力，醒目突出。我们不能依赖大小，因为太多的摇摆空间，需要选择吸引力的颜色，拾色器。频率高饱和度高的颜色。we can't rely on its size, since there's only so much wiggle room, so we focus on choosing a striking color. you should rely on these area of color picker. 

2. 用圆角矩形，半径5像素，大小设定200像素✖️60像素。比如用醒目红色，没有固定的规矩，给你看看效果，字体是Novas半粗体，选择后居中。目前设计简单主流风格。通过用颜色，吸引用户的注意。with a radius set a 5 pixels, regarding size will go with 200 by 60 pixels. for the color, i'll go with a powerful red. i'll write check out in proximal Novus a semibold for the size. i'll go with 15 pixels, select them both and center them. i appreciate this significant simplicity. 

2. 第二圆角矩形，大小199像素✖️60像素，用25像素的圆角，输入文本“开始吧”。对于字体家族用Railway半粗体，颜色暗绿色。该流行按钮不依赖于梯度，投射阴影，样式，额外的装饰。该风格近期出现的，网站设计流行元素随处可见。并不是说方角不好。针对圆角，推荐25，而不是中角15，或小角4-10像素。let's duplicate this conner button, we'll go with a corner radius of 25 pixels and also resize it 199 by 60. i'll go with railway semibold. again this is a popular buttons, that doesn't rely on gredient, drop shadows, patterns, any other additional decoration. that's not to say square corners aren't good. in general, i recommend you stick with rounded corner. you go with something significant like 25 pixels, going in the middle of round with 15 or so. 

3. 第三用炫酷字体。收藏几种喜欢的字体，记住从谷歌字库中探索喜欢的选项。use gorgeous fonts, you'll soon enough have a mental database of 5-10 fonts that are your personal favorites. remember touch Google fonts to browse quickly and see what's in at the moment. 

1. 我们创建另一按钮，用10像素圆角，输入200像素✖️600像素，字体Montscrat常规大小15像素，纯白色，可以用最大对比度。let's create another button, this time with a few layers style, start with a rounded rectangle with 10 pixel, corner raidus, let's click and input the numbers manually 200 pixels by 600. let's add text. i'll go with start trail in Montscrat regular size 15 pixels pure white. it goes without saying you should aim for maximum contrast. 

2. 图层风格窗口，从梯度开始设置，角度90度，这是标准，左侧是预设定的，这就是我在左侧寻找给底部按钮找颜色，用暗蓝色，可以随时调整的。let's open the layer style window, and start with a gradient, we'll leave our angle at 90 degrees, because that's the standard approach, click on this area, and let's customize it. i'll start with the basic gradient from one color to another, if you click on any of these preinstalled ones, you'll get some funcky options. that's why i'm constantly resorting to first few options. the left side is for the bottom of botton. it's not written in stone, we can always go back and adjust it. 

3. 右侧是顶部按钮颜色，如果从顶部选区样本，不能奏效，那是没有按确定，目前预览也是按照梯度颜色走的。按确定后，可以改为纯蓝色。now fot the right part, which controls the top of button notice something interesting here. if you try to sample a color from the button, you'd expect that if i clicked, we get blue, that's not what happens. instead, i'm getting green. that's because our gradient hasn't been applied yet. if you really want to sample from that color, you must first commit to this gradient. 

4. 设置投射阴影，设置不透明度100%，混合模式正常，颜色从底部按钮取样。保持角度90度，用4像素距离组合，0像素大小，实体阴影，按钮是3D立体度有深度的。从距离滑块控制的。let's add drop shadow, but it won't be what you expect, i'll change the blend mode to normal with an opacity of 100%. for the color, i'll sample this from the bottom region and go down a little more. i'll keep the angle at 90 degrees, but i'll use a distance of 4 pixels in combination with a size of 0 pixels. that's going to make our shadow solid, now you can see its looking like the button is 3D. like it has depth. this is controlled from the distance slider. 

5. 设置内部阴影，不是标准的，用纯白，不饱和度100%，混合模式正常，剩下参数设置为0，注意到底部高亮。i'll add an inner shadow, which again won't be standard, i'll use pure white with opacity set at 100% on normal, next i'll go with 1 pixels for its size, and that's it. the rest will be set at 0. notice how we have a highlight of sorts at the bottom.

6. 需要几个技术，确实不如前两个流行。依据个人喜好。没有独特衡量标准。如果专注梯度，颜色影响微乎其微了。that requires several techniques, i woundn't say its as mordern as the first two, it's a question of personal taste, but also a matter of circumstance, you should focus on semi flat gradient, so the difference between your colors should be minimal. 

4. 第四个规则，如果多个按钮设计，同样设计重复多次，还是如何做出区别？don't clash with other buttons, you might need several buttons in your design, watch the approach there. should we use the same design multiple times.

1. 圆角矩形半径5像素，大小275像素✖️60像素。针对颜色范围。打开亮色15像素大小，字体opensans，按钮内文本居中，如果不确定字体，形状工具选择T，从左侧改为居中调节文本排列。let's start with a rounded rectangle with a corner radius of 5 pixels, size 275 by 60. for the color range, go with something fairly decent rated, take course as my text. let's open sands light 15 pixels for its OpenSans size. center it, inside the button. if you're unsure about the font do this, select T for type tool and change your text alignment from left to center. 

2. 用对齐工具，如果调整字体家族，一个按钮居中，甚至如果调节大小，有字体居中时候调节设置。now use alignment tools. to put it back in the middle of button. now if we quickly adjust the font family. you'll see our button will remain centered even if we adjust its size, this will allow you to make swift decisions while having the text in the correct position.

3.  如果第一个按钮完成了。复制后，选择填充，可以看到内部笔画，2像素大小，同样阴影的颜色，改变字体。so our first button is done, but say you need another one, here's what we'll do. we'll duplicated and take down the fill. now we add stroke on inside, 2 pixels for the size. for the color, will use the exact same shade, change font as well. 

4. 普通的问题简单的解决方案。建议考虑用户的行为，最好的场景，哪种设计更有信服力，哪种设计预览可以说服客户购买。a simple solution to fairly common problem. so i suggest you think about the priority of users' actions. what's the best case scenario. here it would be to buy the course, but if he isn't convinced, he can watch a preview first then come back and purchase it. 

5. 第五个规则，需要时候加入文本，从圆角矩形开始的。用275像素✖️17像素大小，10像素的圆角半径，颜色选择紫色石头。用博人眼球文本“不需要信用卡”。add more context when needed, start with a rounded rectangle as per usual. 275 pixels by 17 pixels. 10 pixel corner radius. for the color will go with a purpletone. so still something striking. for the text we use to get started and no credit card required. 

1. 顶部线条，写入优选的Nova粗体23像素，用所有大小转化，创建路径AKA，字体空隙10像素，居中水平。底部一行，首选Nova常规14像素，没有轨迹，没有大写，单纯更换颜色黄色，再次居中。the top line will be written in proximal. nova bold 23 pixels, use all the caps transformation and increase tracking AKA the letter spacing to 10 center horizontally. from the bottom row. go with proximal Nova regular 11 pixels. no tracking, no caps, just change its color to a nice yellow, center this one again. 

2. 如你所看的，同样的宽度，如果不能做到宽度相同，第二条线垂直线，两个毗邻的点，其中一个建议帮助调节字体间距。两组可以融合成一组。as you can see, they all occupy the same width, which is the ideal situation. if you can't do that, make sure your second line is a lot wider you don't want a little bit outside, these two imaginary vertical lines. you want a lot besides that point. one piece of advice that can help you is this, adjust the vertical space between the two lines until you're happy then to center them inside the button market them group first. 

3. 现在选择底部和对齐顶部，右键确定两条线居中。最好匹配字体，不仅仅是粗细，优选Nova字体，手写的或者带衬心的字体，空间受限的。now select the group and button and use alignment tools. up top, when you're done. right click and ungroup. this is how you make sure these two lines are perfectly centered. 

4. 给用户信息按该按钮会发生什么，不需要付费确实吸引人。it's also a great ideal to mix and match fonts, not only weights, here we used proxima Nova in both cases. but you could go with a handwritten font or a serif font. 

6. 第六最后的建议。如果按钮是混合的，首先按钮大小200像素✖️60像素，超级圆角28像素，用同样的绿色阴影，第二选择节省时间，文本下载文件，用Oswald粗体16像素大小，全大写，从平面按钮选择的设计资源选择的下载徽标。my last advice icon in the mix, whenever you feel they add value first the button 200 by 60. super rounded 28 pixels. i'll use the same shade of green as in my second button to save time, the text download file. i'll go with Oswald Bold 16 pixels, make it all Caps, i already have an icon prepared in another tab. this is taken from a flat icon dot com, a great source for these types of icons, let me drag it in. 

1. 和字体之间距离10像素，把下载按钮和下载文本归组。最后，解除归组，确保持续性调节设置，目标帮助用户视觉化线索，不是装饰目标，而是服务目标导航的。leave 10 pixels i usually like to leave 10 pixels between my icons and my text. looking good so far, here will repeat the process from previous button. we'll group the icon and text. we'll select button and align them. the idea is to help the user with a visual cue, the downwards arrow, hence this is a download button. this is the place where icon come in handy, don't use them for decorative purpose. 

2. 最后建议文本不需要很大，不用调大字号，短小精悍是好的，用户不是半盲人。never to make your text too big for your button, for example, in the first couple of options, smaller is always better, your user aren't half blind. 

91.04-9.5 

Use Custom Shapes 

定制形状

1. 激活工具，按U选择工具，还可以用Shift+U循环的显示工具，取而代之，专注选项，关键性的一步，看下拉菜单选择你要创建什么，默认的需要用右下角箭头展开。custom shapes, which are probably going to be your favorite shape layers in photoshop, that's because they're so easy to use. you can hit U to select this category tools, then Shift U to cycle through them, as you can see, the active tool changes as i constantly tap that hotkey, when you want to add a new layer. by default, this list isn't going to be that big, but let's use this arrow. 

2. 建议是，按住Shift你并不知道原始比率，所以不建议选择手动输入。但是大部分的时间，不知道需要输入数据是什么。开始探索面板可以定义大小，到任意角落，看到信号，拖拽出来，因为你目前不需要空间。my advice is you click and drag. and as you do that, always hold Shift, and that's because you never know their original aspect ratio, instead of guessing, your best bet is to ust shift, because you have no idea what sort of values you need to write in. 

3. 到右上方，点击齿轮徽标，展示了选项列表。类似于图层面板，可以定制缩略图大小。如果你足够勇敢，可以选择文本，但是我建议你用缩略图可以直观的看不用猜测。建议你选择小或大的缩略图。大缩略图非常有帮助，允许你看到细节。尤其是不能设置难懂的形状。go to the top right and click on this tiny gear icon. this will reveal a long list of options. similar to layers' panel. you can customize your thumbnail size, if you are brave, you can use the text only setting. if you do that, you'll have to rely on description, which doesn't always tell you the whole story. my advice to you is stick to large thumbnail. because they allow you to see all sorts of tiny details. 

4. 接下来可以下载各种图形包，点击箭头，展示出来的要不要替代当前设置，看似困惑，但是意思是要不要新图形加入当前图形，当你下载打包图的时候，大部分案例，这是你想做的。我建议再次点击从列表中，选择替换存在的图书馆，否则得到的仅仅是复制。现在你下载定制的形状，从中选择，加入到画布，还可以从网站下载有趣的形状。比如喜欢的打包下载，文件夹CSH格式，这是PS识别的格式，双击后PS自动的添加到图库里。而且可以添加到画布，好事情是定制你想要的大小，如果下载是个问题，可以直接拖拽到画布。没有错误或者成功的提示，需要到图书馆看有没有添加成功。如果选择失败的，到齿轮按钮，点击下载形状。underneath is where you can load up additional packs. i'll click on arrows on this pop up is going to show up, asking me if i want to replace the current set or append. from this list, choose the first one, which is all this time, i'll choose to replace my existing library, otherwise i'll end up with duplicates. so let's get some better looking ones, my go to site is shapes for free dot com. this has a fairly large collection of custom shapes that are much more interesting to look.inside it you will find a file with a dot CSH extension. it won't let you what happened. if you click on that dropdown, you'll see that the new set has been added. check the library because you won't get a notice either an error or a success message. 

5. 用Ctrl J复制，从路径中选择单独的锚定点，还可以创建新图形。这是下节课的内容。in any other position. or better yet, i can duplicate it with Ctrl J, now i'm free to select any individual anchor point, from the path and create a new shape from it. 

92.07-9.6 

Activity Design Shapes With Pen Tool 

用钢笔工具设计形状

1. 画布上绘制长方形，按Shift拖拽，大小不重要，Ctrl J，旋转45度，按住Shift旋转三次。用Ctrl T缩小大小，两个分开图层，用Ctrl E融合到一个，白箭头选择，看到两条分开路径，用原始形状的锚定点，否则很难直接选择点本身。用路径选择工具，目前这就是活生生的形状属性面板。增加拐角的半径变得更圆。这就是边界按钮，下滑到菜单中部，找到定制的形状，双击，命名。　we have a square on our canvas, grab rectangle tool, hold Shift and drag one out, the size doesn't really matter, how i duplicated with Ctrl J, and i want to rotate it 45 degrees, so well and up with a new shape. use Ctrl T for that, as you rotate, hold Shift to constrain this moment to 15 degree increments. this means you'll have to there through 3 stages. it's on a 2 separate layers, so let's merge them together with Ctrl E. if you switch to white arrow, you'll see your 2 separate paths, use it to grab the original shapes anchor points, click and drag is my go to option. an alternative is to use the path selection tool which gets the job done in one action. now this live shape properties panel should be lit up. increase the corner radius to something really rounded. top menu, you have to scroll down somewhere around the middle, here you can find define custom shape click it, and you'll be asked for a name. 

1. 切换属性，创建副本，ps指引找到水平和垂直中点，Ctrl R热键，左侧顶部带出标尺。因为都是设置像素的，作为偏好设置面板，拖拽出指引线。随着选择形状，接触到中点，感觉指引线像是吸附到位置，不用附属的技能可以找到中间点，如果切换到移动工具，保存光标。可移动指引线，锁定到特殊位置，用Ctrl Alt 分号，锁定到形状。如你所见，在上面移动，什么都没发生。用Ctrl Alt分号重复热键，解锁。但是这不是我们想要的，我们是要固定到位置。从顶部菜单，浏览锁定指引线，切换到直接选择工具，选择锚定点。接下来，钢笔工具告诉我们哪里放置鼠标。create a dulicate, so we can have a before and after shot, move it to side. we use PS guides to help us find its horizontal and verticle centers. the hotkey is Ctrl R. and this will bring up your rulers. at the left and top side of PS. i'll click and drag out a guide, this is what we are looking for. we can find its middle point without any additional techniques. if you switch to the move tool, you might save the cursor. we want them fixed to this specific position, to do that, use Ctrl Alt semicolon, this will lock them into space. i use the command from top menu, go to view lock guides. in case you forget its hotkey. you can find it there. switch back to the direct selection tool and select all your anchor points. 

2. 如果看到星号，意味着没有选择路径，抓住黑白箭头，确保选择在先存到路径上。对交叉加入点，确保精准到1像素。现在加入4新锚定点到形状。创建两个副本，放置在画布不同位置。对于第一个形状，选择4个锚定点还删除掉为什么，形状如何变化的。切换到背景图层，激活移动工具，Ctrl点击到形状来选择。we'll add few more with pen tool and these guys will tell us where to position our mouse cursor. if you see this asterisk, that means you don't have your path selected. i'll switch to the background layer and activate the move tool. i'll control click on the shape to select.

3. 切换到白箭头，选择左侧锚定点选择并删除，点击Ctrl看新形状，选择所有锚定点，下拉菜单，选择突出重叠区域，用转化点工具，用白箭头抓取锚定点，现在切换到钢笔工具， 按住Alt，同时按Shift，缩小运动，做完交叉后，选择突出重叠形状。i'll switch to the white arrow, i'll click and drag to the select left anchor point and for the other shapes, i'll select all anchor points, so you can see its a perfect replica, next i'll click on this drop down, and i'll choose exclude overlapping shapes, and here is another custom shape. with the final copy, i'll use my convert point tool. first i use the white arrow to grab all these anchor points, now i'll switch to the pen tool and i'll hold Alt, that's what i'm looking for. 

2. 当下的形状，也是钢笔工具的用武之地，基于轮廓创建定制的形状，从选择条设定形状，用蓝色的，点击一次，按Shift，双击左侧，第一个曲线，形状开始下移，按Shift拖线条。另一个曲线区域，用Alt转化重心点，下次点击时，得到圆线，是因为调节柄并没有匹配形状。两个选择，可以继续用Alt，最后关闭形状。因为是形状，可以反复回去调节。grab pen tool and make sure you set it to shape from the options bar, i'll start with this blue one. click once, then hold Shift and click again on the left side, now we have our first curve, now we have another curved area but there's no problem with it, i'm still holding Shift, i want my lines to be perfect, this is where i want to arrive, if i try to continue my shape, notice how it's going to be out of order. to fix this issue, you'll need to convert this point through Alt key, click once and you're good. the next time you click, you might get a rounded line. that's because this handle isn't aligned to your shape.