如何在Photoshop中创建一个光质感网页设计.docVIP

如何在Photoshop中创建一个光质感网页设计 作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。 本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。 约定： 1、本文的软件是Photoshop CS5版本 2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图 3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数 例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77 例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定 4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。 In this web design tutorial, we’ll be creating a light textured web page layout. I will show you how apply subtle textures in web layouts, how to create a seamless diagonal mosaic pattern and how to create a tabbed content area design for the “Services” section.?在本网页设计教程中，我们将创建一个光质感的网页布局。我会告诉你如何在网页布局中添加微妙的纹理，如何创建一个无缝的对角拼接模式，以及如何创建一个“服务”部分的选项卡的内容区。 In this tutorial, we will use the 960 Grid System to organize and arrange the elements of our web layout. Before we begin, download it to your computer. 在本教程中，我们将使用960网格系统，来组织和安排我们的网页布局的元素。在开始之前，将其下载到您的计算机。 Unzip the archived file you downloaded, go to the “templates” folder and then go to the “photoshop” folder. You will find three .PSD files. Each of these files contains a grid with 12, 16 and 24 columns. In this tutorial we will be using the 12 columns grid. 解压下载好的文件，点到templates文件夹下的photoshop文件夹。你会发现有3个.PSD文件。它们分别包含了12列、16列、24列网格。在本教程中，我们使用12列网格 The .PSD files have some guides already set up, which will be very useful. To activate the guides, go to View Show Guides, or use the shortcut Ctrl/Cmd + ;. .PSD文件已经包含了一些设置好的网格，这会是非常有用。为了激活网格点击：视图 显示 网格，或者用快捷键，Ctrl/Cmd + ; During this tutorial you will need to create shapes with specific dimensions. To see the exact size of a shape or selection while you are creating it, open the Info Panel by going to Window Info. The width and the height of your shapes and selections will be displayed in this panel. 在本教程中，您将需要创建具有特定尺寸的形状。当你在创建过程中要查看确切的大小，点击：窗口 信息，打开信息面板。你的形状或选择的宽度和高度的将被显示在此面板中。 Now that we covered the basics of using the 960 Grid System, we can move