如何在photoshop中创建一个光质感网页设计

《如何在photoshop中创建一个光质感网页设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、如何在Photoshop中创建一个光质感网页设计作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。约定：1、本文的软件是PhotoshopCS5版本2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显

2、示正确的参数例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。Inthiswebdesigntutorial,we’llbecreatingalighttexturedwebpagelayout.Iwillshowyouhowapplysubtletexturesinweblayouts,howtocreateaseamlessdiagonalmosaicpat

3、ternandhowtocreateatabbedcontentareadesignforthe“Services”section. 在本网页设计教程中，我们将创建一个光质感的网页布局。我会告诉你如何在网页布局中添加微妙的纹理，如何创建一个无缝的对角拼接模式，以及如何创建一个“服务”部分的选项卡的内容区。Inthistutorial,wewillusethe960GridSystemtoorganizeandarrangetheelementsofourweblayout.Beforewebegin,downloadittoyourcomputer.在本教程中，

4、我们将使用960网格系统，来组织和安排我们的网页布局的元素。在开始之前，将其下载到您的计算机。Unzipthearchivedfileyoudownloaded,gotothe“templates”folderandthengotothe“photoshop”folder.Youwillfindthree.PSDfiles.Eachofthesefilescontainsagridwith12,16and24columns.Inthistutorialwewillbeusingthe12columnsgrid.解压下载好的文件，点到templates文件夹下的p

5、hotoshop文件夹。你会发现有3个.PSD文件。它们分别包含了12列、16列、24列网格。在本教程中，我们使用12列网格The.PSDfileshavesomeguidesalreadysetup,whichwillbeveryuseful.Toactivatetheguides,gotoView>Show>Guides,orusetheshortcutCtrl/Cmd+;..PSD文件已经包含了一些设置好的网格，这会是非常有用。为了激活网格点击：视图>显示>网格，或者用快捷键，Ctrl/Cmd+;Duringthistutorialyouwillneedt

6、ocreateshapeswithspecificdimensions.Toseetheexactsizeofashapeorselectionwhileyouarecreatingit,opentheInfoPanelbygoingtoWindow>Info.Thewidthandtheheightofyourshapesandselectionswillbedisplayedinthispanel.在本教程中，您将需要创建具有特定尺寸的形状。当你在创建过程中要查看确切的大小，点击：窗口>信息，打开信息面板。你的形状或选择的宽度和高度的将被显示在此面板中。No

7、wthatwecoveredthebasicsofusingthe960GridSystem,wecanmoveontocreatingtheweblayout.Let’sgetstarted!现在，我们讨论了使用960网格系统的基础知识，我们可以继续创建的网络布局。让我们开始吧！Step1:CreatingtheBackgroundoftheWebLayout步骤1：创建网页布局的背景Openthe"960_grid_12_col.psd"fileinPhotoshop.ThengotoEdit>CanvasSizeandsetthewidthto1200px

8、andtheheight