利用PS设计网页

在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到Photoshop软件里的一些基本的工具，比如：笔刷和图层等。

而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材，你可以下载用作学习或使用都可以。

下面先预览一下本教程的最终效果：教程开始：第一步：新建文件打开PS软件，点击文件-新建命令或Ctrl+N键新建文件，设置宽度1020px，高度1180px，背景默认为白色，点击确定即可;第二步：创建导航背景我们将从header开始我们的设计，所以我们先用矩形选框工具，在画布上新建一个矩形选框，如图所示，填充颜色#393939;然后设置图层的混合模式为叠加，不透明度设为23%;第四步：创建网页logo和name对于教程中的logo，我使用了Georgia字体并设计为粗体并倾斜，设置‘SIX’的颜色为#FFFFFF，‘STUDIOS’的颜色为#F7E5C4，logo旁边的图片用的是素材中的boxupload32图片。

样式如图所示：第五步：加入导航链接活动链接的颜色我用的是#DBD1BE，普通链接用的颜色为：#ABAAAA。

为了使活动链接显示的更突出，在其后便添加一个矩形框。

选择圆角矩形工具，设置半径为5px，前景色为#464646,然后在活动链接处添加矩形背景，样式如图：给矩形背景图层添加内阴影和描边效果，具体设置参数如图：第六步：给特色区域添加背景在我们网页布局的顶部，需要有一块特色区域，这块区域通过播放幻灯片将网站的特色内容展示给来访者。

这块区域也可以同时包括对网站的介绍等，第一步我们需要做的就是利用矩形选框工具选中这块区域，然后在此矩形选区中填充颜色#D3CAB8。

然后你需要下载纹理图片，并把它放在特色区域图层的上方;第七步：去掉那些不需要的背景纹理第六步中的图放到PS中后，我们发现尺寸要大于特色区域图层，所以我们需要遮盖住不需要的区域，按住Ctrl键并单击特色背景区域图层，PS会自动选择特色区域选区。

网页PS设计教学介绍随着互联网的快速发展，网页设计成为了一个非常热门的职业。

在网页设计中，PS（Photoshop）是一个极其重要的工具，它被广泛用于网页元素的设计与处理。

本文将为您介绍如何利用PS进行网页设计。

第一部分：PS基础知识在进行网页设计之前，我们首先需要掌握一些PS的基础知识。

下面是一些基本的PS操作技巧：1. 工具栏：了解各种常用工具的功能和用途，如画笔工具、橡皮擦工具、剪切工具等。

2. 图层面板：学习如何创建、管理和操作图层，掌握图层的不透明度调节、图层样式设置等功能。

3. 选择工具：了解如何选择特定区域或对象，如矩形选框工具、套索工具、魔术棒工具等。

4. 色彩和调整：学会运用调整图像色彩和亮度的功能，如曲线调整、色阶调整、色彩平衡等。

5. 滤镜：掌握PS中各种滤镜的使用方法，如模糊、锐化、扭曲等。

这些基础知识将为您更好地进行网页设计提供基础。

第二部分：网页元素设计在进行网页设计时，我们常常需要设计各种各样的网页元素，如Logo、导航栏、按钮等。

下面是一些常见的网页元素设计技巧：1. Logo设计：Logo是网页的重要标识，设计一个简洁、易识别的Logo对于网页的整体感十分重要。

使用PS来设计Logo时，可以运用各种形状、字体和效果来实现独特的设计。

2. 导航栏设计：导航栏是网页中的核心组成部分之一，设计一个易于导航、美观大气的导航栏至关重要。

使用PS可以制作矢量图形、添加渐变效果、应用阴影等来增强导航栏的可视效果。

3. 按钮设计：网页上的按钮通常用于触发各种操作，如提交表单、跳转页面等。

设计一个醒目、易于点击的按钮可以提高用户的体验。

在PS中，我们可以运用形状工具和图层样式来制作漂亮的按钮效果。

第三部分：网页布局设计网页布局是网页设计中重要的一环。

良好的网页布局可以让用户更好地浏览网页内容。

下面是一些网页布局设计的技巧：1. 栅格系统：栅格系统是网页布局中常用的一种设计方法，通过将网页分割为多个网格，可以更好地组织和调整网页内容。

网页制作教程——使用PS和DW制作拼图游戏
使用Photoshop和Dreamweaver制作拼图游戏：
第一步：选择图片，调整图片大小。

注：图片大小最好调整到小一些，便于拼图的制作。

启动photoshop，打开图片，'图像’菜单——图像大小，调整宽度和高度像素值。

第二步：图片切片。

第三步：保存切片后的图片。

文件——存储为web和设备所用格式——存储，存储后文件夹中有一个网页文件和一个images文件夹。

第四步：制作拼图游戏网页。

A、启动dreamweaver，新建网页。

B、插入——布局对象——层，设置层大小与图像大小一致。

此
层为背景层。

C、再依次插入4个层，并分别将4张图片插入到每个层中，调整层大小与图像大小相等。

D、将插入图片的4个层拖动到背景层上将4张图片拼成一张，调整好每个层的位置。

第五步：为层添加行为特效，实现拼图效果。

A、单击”窗口”菜单——行为，打开”行为”面板。

B、选中拼图层上的第一张图片（一定注意是选中图片）（确定所在层的层编号），单击行为面板的“加号”，选择“拖动层”行为。

C、在弹出的“拖动层”对话框中进行如下设置。

D、如下图，在行为面板上单击刚刚添加的行为的事件下拉菜单，选择onload事件。

E、（其他3个层上的图片也分别进行C,D两步操作）。

完成以上操作后，再将四个图片所在层，移动到相应位置（即拼图游戏的初始位置）。

最后一步，保存网页，在浏览器中预览，拼图游戏就做好了！试
试吧！。

ps课程设计网页设计一、教学目标本课程旨在通过学习网页设计的基本原理和Photoshop软件的使用技巧，让学生掌握网页设计的基本流程，能够独立完成简单的网页设计项目。

知识目标：使学生了解网页设计的基本原理和概念，熟悉Photoshop软件的基本界面和功能。

技能目标：培养学生使用Photoshop进行网页设计的实际操作能力，能够运用所学知识独立完成网页设计项目。

情感态度价值观目标：培养学生对网页设计的兴趣，提高学生对美的感知和创造能力，使学生在完成项目的过程中，增强自信心，培养团队协作精神。

二、教学内容本课程的教学内容主要包括网页设计的基本原理、Photoshop软件的基本操作和网页设计实例讲解。

1.网页设计的基本原理：包括网页设计的基本原则、色彩搭配、布局等。

2.Photoshop软件的基本操作：包括图像的基本编辑、图层的使用、选择工具、路径工具等。

3.网页设计实例讲解：通过实际案例，讲解如何使用Photoshop进行网页设计，包括网页的整体设计、图片处理、文字排版等。

三、教学方法本课程将采用讲授法、实践法和讨论法进行教学。

1.讲授法：用于讲解网页设计的基本原理和Photoshop软件的基本操作。

2.实践法：通过实际操作，使学生掌握Photoshop软件的使用技巧，并能够独立完成网页设计项目。

3.讨论法：通过分组讨论，培养学生的团队协作精神，提高学生解决问题的能力。

四、教学资源教学资源包括教材、多媒体资料和实验设备。

1.教材：主要包括《网页设计基础》、《Photoshop教程》等。

2.多媒体资料：包括教学PPT、网页设计案例视频等。

3.实验设备：包括计算机、投影仪等。

五、教学评估本课程的评估方式包括平时表现、作业和考试三个部分，每个部分所占的比重分别为30%、30%和40%。

1.平时表现：主要评估学生在课堂上的参与程度、提问回答等情况，通过观察学生的表现来评价他们的学习态度和理解程度。

2.作业：主要评估学生的实际操作能力，通过布置课后练习，让学生运用所学知识独立完成网页设计项目，以此评价他们的掌握程度。

UI设计网页美工设计师的Photoshop CC 生成器切片全攻略在很多的设计项目中都会用到PS软件，PS功能强大功能中有一个切片工具，这是UI设计师和网页美工设计人员需要的掌握的使用方法。

来自非凡学院UI设计培训的武老师为同学们带来了PS 切片工具的教程的全攻略。

在非凡学院学习UI设计培训、网页设计培训、网页美工培训等课程的同学使用的都是学院默认版本CS6进行练习，虽然老师们在课堂上都会强调PS的版本再高，但使用得最多最实用的功能仍然是那几个，事实也确实如此。

但对于切片功能，CC版本以后确实发生了重大变化，使得原来的切片输入工具失去了意义。

以下仅针对需要经常使用Photoshop进行切片的同学，请安装至少Photoshop CC2014以上版本才能使用生成器。

打开编辑菜单——首选项，在增效工具下勾选启用生成器，然后关闭软件重开。

一、单个形状切片输出值得注意的是，生成器并不支持像素对象的输出，所以首选的是形状图层，请同学们注意。

1，首先我创建一个“切图示范”的文件，保存在指定位置，格式是psd。

2，接下来使用形状层绘制两个图标，比较常见的填充色和描边色图标，分别按要求进行命名，然后在图层名称的后缀加上 . png3，保存。

选择文件菜单——生成——图像资源。

4，在保存psd文件的位置会自动生成一个同名assets文件夹，然后在里面就可以找到刚刚命名为.png 的图标文件，它们被自动切片输出，怎么样？很方便吧？5，但大家仔细看一下，发现由于图标锁定宽高比的关系，变成了39*40。

按照设计规范，这显然是不合格的，图标尺寸出现奇数，并且不是我们规范中的44*44的尺寸。

接下来我们在原来图标图层的下方，分别创建两个44*44的正方形形状层。

6，分别各自选中上方图标，按住Ctrl载入选区的方式载入下方正方形选区并添加图层蒙版。

原有的两个正方形最后可以删除或隐藏。

7，再次保存刷新，在输出位置可以看到输出的png尺寸，变成了规范要求的44*44，同时周围保持透明边距。

ps网页设计教程PS（Photoshop）是一款功能强大的图像处理软件，广泛应用于网页设计中。

在网页设计过程中，PS可以用来创建网页布局、设计网页元素、进行图像处理、添加特效等。

本篇文章将向读者介绍一些常用的PS网页设计教程，帮助读者了解如何使用PS来设计网页。

一、创建网页布局在使用PS进行网页设计之前，首先需要创建一个合适的网页布局。

在新建文档时，选择合适的页面尺寸和分辨率，并设定网页的栅格系统，以便于对齐设计元素。

在新建文档后，可以使用PS中的“矩形工具”和“文本工具”来创建网页的基本结构，如导航栏、内容区、侧边栏等。

可以使用图层面板来管理各个元素，并使用对齐工具来调整它们的位置和尺寸。

二、设计网页元素网页设计需要各种各样的元素来展示内容和增加用户体验。

在PS中，可以使用各种形状工具、画笔工具、路径工具等来设计这些元素。

1.导航栏设计导航栏是网页设计中非常重要的部分，需要设计出易于使用和吸引人的导航栏。

可以使用矩形工具创建导航栏的背景，使用文本工具添加导航链接并进行样式调整，可以使用形状工具来设计菜单图标。

2.按钮设计网页设计中常常需要设计各种按钮，如提交按钮、下载按钮等。

可以使用矩形工具创建按钮的形状，使用样式调整来增加按钮的立体感。

还可以使用文本工具添加按钮上的文字，并使用特效来增加按钮的吸引力。

3.图片处理在网页设计中，经常需要使用图片来展示产品、文章或其他信息。

PS中可以使用各种工具和滤镜来处理图片，如裁剪、调整亮度和对比度、应用滤镜等。

可以使用图层面板来管理图片的叠放顺序，并使用剪贴蒙版来控制图片的显示区域。

三、添加特效在网页设计中，特效可以帮助增加页面的吸引力和互动性。

PS提供了各种工具和特效功能，可以帮助我们添加特效效果。

1.阴影和发光效果可以使用“外发光”和“内发光”等特效来为图像或文本添加发光效果，使其在页面中更加突出。

2.颜色渐变可以使用渐变工具为页面元素添加颜色渐变效果，使其更加鲜明。

ps应用场景PS（Photoshop）的应用场景非常广泛，以下是一些常见的应用场景：1.平面设计：PS在平面设计领域的应用非常广泛，包括标志设计、广告设计、海报设计、品牌形象设计等。

利用PS的各种绘图工具和调色板，设计师可以创建出各种精美的平面设计作品。

2.图片编辑：PS具有强大的图片编辑功能，可以用于调整图片颜色、修复图片瑕疵、去除背景等。

此外，利用PS的滤镜和效果，还可以将图片转换成各种风格的艺术作品。

3.数码绘画：PS的绘画工具和调色板特别适合进行数字绘画创作。

利用PS的画笔工具和图层功能，可以创建出各种风格的数字绘画作品，包括油画、水彩画、素描等。

4.修复照片：PS具有强大的照片修复功能，可以用于修复老照片的瑕疵、调整照片颜色和亮度等。

此外，还可以利用PS的抠图功能将照片中的某一部分抠出来，进行合成或替换背景。

5.3D设计：PS可以与3D软件结合使用，进行3D设计。

通过PS的3D工具和材质编辑器，可以创建出各种逼真的3D场景和对象，并对其进行渲染和编辑。

6.网页设计：PS可以用于网页设计，制作网页背景、按钮、图标等。

利用PS的切片工具和图像优化功能，还可以将网页设计稿转换成网页代码。

7.动画制作：PS可以用于制作GIF动画、Flash动画等。

利用PS的图层和时间轴功能，可以将多个图像组合在一起，创建出各种动态效果。

8.影像合成：PS可以用于将多个影像素材进行合成，制作出各种特效和场景。

例如电影海报、广告片头、特效电影等。

9.后期处理：PS可以用于后期处理照片、海报、影像等。

利用PS的各种滤镜和效果，可以对图像进行美化、增强和优化，使其更具表现力和观赏性。

10.插画设计：PS的绘图工具和丰富的插画资源库可以帮助插画师快速创作出各种风格的插画作品，包括人物、场景、道具等。

总之，PS是一款功能强大的图像处理软件，其应用场景非常广泛，不仅限于以上列举的领域。

无论是平面设计、数字绘画、修复照片还是动画制作等领域，PS都能发挥出其强大的作用。