ps设计网页效果图，ps网页设计教程

对于ps设计网页效果图，ps网页设计教程，很多网友还不是很明白，今天艾巴小编收集了这方面的知识，就将其分享出来。

操作方法：

1.创建新的Photoshop文档。

2.单击单位和标尺进行设置。

3.激活photoshop的标尺，从标尺查看。按“Ctrl/Cmd R”来固定标尺的可见性。按M键，选择矩形选择工具，在画布左上角画一个宽度为120px的小方框。

4.将选区移动到画布的右边缘，并将另一条参考线分配到选区的左侧。

5.创建logo新建一个组(图层新建组)，命名为logo。进入字符面板，设置字体为Arial，样式为粗体，大小为42pt。将抗锯齿选项设置为锐色#101112。

6.双击打开图层面板对话框。选择图层渐变，然后单击渐变设置。

7.选择横向排版工具在logo下添加标语。

8.登录效果。

9.创建一个导航栏，并创建一个名为navigation的新组，它位于徽标组的上方。从顶部标尺拖动一条参考线，直到它距离画布顶部150像素。选择矩形工具(U)，画一条宽度为4px的横线，颜色为#e3ab27，贯穿画布。添加导航链接文本，距离水平线12px，距离左参考线20px。选择椭圆形工具绘制一个宽度为72px *35px的矩形。将该层移动到“悬停”下方。使用变换点工具拉直底部圆角。

双击“悬停”图层按钮，打开图层样式对话框，增加渐变颜色(左：#e5ad27，右：#b27625)。选择水平排版工具(T)，选择文本，“主页”并更改颜色#ffffff(白色)。

10.“创建联系我们”选项将电话图标放置在右侧参考线附近。该层被命名为电话图标。选择水平排版工具，在图标左侧添加一个电话号码字体Arial，大小为20pt，颜色为#292929。

11.创建一个新标题，并创建一个名为标题的新组。选择矩形工具(U)创建一个新的矩形，宽度和高度分别为1200像素* 440像素。将这一行移动到矩形，导航栏1px命名为header bg。双击表头bg图层，选择渐变图层样式增加渐变颜色(左：#2e2226，右：#7a7556)。

12.使用矩形工具创建一个新的矩形(U ),大小为960px * 360px。移动到距离标题bg层顶部40px和左侧参考线0px的位置。将图层标题容器命名为。

13.创建特色项目选择区。在标题组中创建一个新组，并将其命名为fp。选择矩形工具(u)创建一个大小为630像素乘340像素，10像素的页眉容器。将图层颜色指定为#000000，命名为fp container。

14.从您的ps导入一张图片，并将其放置在特色区域。按全选(Ctrl/Cmd A)，然后编辑和复制(Ctrl/Cmd C)。回到网页设计。在fp容器层上面新建一层，点击Ctrl/Cmd V粘贴你的专题图片。重命名为fp image，右键单击fp image图层，选择剪切蒙版。现在图片只在矩形区域可见。

15.输入编辑变形角度(Ctrl/Cmd T)。从选项栏中，单击旋转框，键入-4并按两次以调整图层。继续选择图层。设置图层样式为亮度。

16.选择矩形工具(U)创建一个矩形，大小为630像素乘以90像素，颜色为#161718。改变图层的不透明度为90%，命名为标题bg。17、标题设置字体：Arial，颜色：#ffffff，大小：25pt自动反走样选项：锐利描述设置：字体：Arial，颜色：#a4a4a4，大小：12pt自动反走样选项：无。

18、创建快速参考部分。在标题组中创建另一个组，并将其命名为快速报价。选择椭圆形工具创建一个300像素乘340像素的新矩形。这个矩形在特色项目选择区10px放置的地方，命名为qq容器。复制之前制作的另一层的样式。进入导航组，右键单击悬停层，选择复制图层样式，返回到qq容器层，右键单击并选择粘贴图层样式。

19、选择水平排版工具，在距离qq容器左上角20px处键入Quick Quote。将字体设置为Trebuchet MS颜色设置为白色(#ffffff)，抗锯齿选项设置为锐利。使用椭圆工具创建一个表单。选择椭圆工具，设置半径为3px。然后创建两个新的矩形，大小为260像素乘35像素，颜色为白色(#ffffff)。

分别命名为field1和field2，创建第三个大小为260px乘以75px的矩形，命名为field3，颜色为白色(#ffffff)，使用文本工具编写自己的标签。

20.选择椭圆工具创建一个80px乘以35px的正方形，并将其命名为submit btn。双击图层打开图层样式对话框，选中左侧的渐变叠加对话框，然后单击渐变编辑更改颜色，如下所示。21、选择文本工具并键入“提交”。使用Arial字体，粗体字号为13pt。选择提交按钮和提交文本。在工具面板中选择移动工具，并在选项栏中设置水平居中和垂直居中。

22、创建一个名为content的新组，并选择椭圆形工具(U)。新的300px乘以175px命名为c01。将该层放置在头部下方30px处，距离左侧参考线0px处。双击图层，设置如下样式。23、选择文字工具添加文字，关于SmashingDzine，使用文章工具选择关于文字，将颜色改为#b47825。选择Smashing文本，将颜色更改为#2f2f2f，并添加简短描述和文本连接。请参考以下设置。

24、额外添加一个正方形，选择颜色为#ffffff的矩形工具，按住Shift键，绘制一个88px乘以88px大小的矩形。将矩形移动到距离左侧矩形c01 10px的位置。将其命名为border，并设置如下笔画。25、创建另一个大小为82px乘以82px的框，并将其放置在边界层的中心。名为box的颜色已更改为# #d5d5d5。选择内容组中的所有图层，进入新图层创建组(Ctrl/Cmd G)并将其命名为about。

26、复制名为services的about组，然后再次复制名为portfopo的组，并将最后一个组portfopo移动到右侧的参考线。27、在面板中选择三个组，然后单击“层分布”“水平居中分布”。28、服务组和portfopo组的变更如下。29、创建一个名为页脚选择矩形工具(U)的新组，然后在布局底部创建一个大小为1200像素乘以100像素的矩形。命名页脚bg，复制页眉bg图层样式并应用。

30.选择文字工具，书写版权声明和链接的文字，样式为Arial，大小为12pt，为灰色(#dddddd)。31、在页脚层创建一个新组，并将其命名为subscribe。选择圆角椭圆工具(u)创建一个85px 35px的矩形。该层被命名为subscribe btn。选择文本工具，拼写订阅风格Arial，粗体大小13pt，并选择所有层。选择椭圆矩形工具(U)并将半径设置为3px。创建一个210像素乘以35像素的椭圆矩形。使用白色作为主色(#ffffff)将此图层命名为email field。完成了。

以上知识分享到此为止，希望能够帮助到大家！