PS网页设计教程VII在Photoshop中设计卡通店面布局.doc

 HYPERLINK /grenet/archive/2012/07/14/2581219.html PS网页设计教程VII——在Photoshop中设计卡通店面布局 作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。 本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。 约定： 1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数 例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77 例如：（90，22），表示??形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定 4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。 1. Firstly download the grid system, unzip the archive file you downloaded, go to the templates folder and then go to the Photoshop folder. Choose the 12 Grid file. The psd file will come with a premade grid guide to help you arrange the website. To activate the guides, go to View Show Guides. Will need to make the canvas bigger, go to Image Canvas Size and put in the new width and height below: 1、首先下载网格系统，解压你下载的文件，到templates文件夹，到Photoshop子文件夹。选择12 Grid文件。该PSD文件预制了网格参考线帮助你对齐网页布局。激活参考线，点击：视图 显示 参考线 我们需要使画布变大，点击：图像 画布大小，按照下图设置新的宽度与高度。 由于本翻译教程不使用网格系统。故此步改为新建文档，文档大小：1200px*1480px，如下图所示： 2. To unlock the background layer click on the layer and press the lock icon to unlock. 2、双击背景图层上的锁定图标，去解锁背景图层 3. Using the Rectangle Tool draw a rectangle shape like below using the blue lines as a guide. Press ctrl+t to make the shape transformable and drag each top corner to in while holding down the alt key. Double click on the layer to bring up Blending Options and put in the settings below: 3、用矩形工具画一个矩形（132，200，936，135），和下图一样参照蓝色的参考线。按Ctrl+T进入变形模式，然后按住Alt键按下图拖动顶部的两个控制点（应该是Ctrl+T后，右键选择透视，拖动左上角控制点向内侧移动70px）。双击该图层打开图层混合选项，按照下图设置样式。命名该图层为roof 渐变叠加的颜色： #7e1416，#ee2a28 4. Using the circle draw a shape like below while holding down the shift key. Double click into Blending Options and make a stroke of 1px. Duplicate the circle by dragging it to the new layer icon. Make the circles alternate from dark red to white. If the circles dont fit hold down the ctrl key and select all the circle layers and dra