用Photoshop制作网页背景图
Photoshop制作一款漂亮的网页模板
在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到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会自动选择特色区域选区。
网页设计常用photoshop技巧
网页设计常用photoshop技巧网页设计常用photoshop技巧对于网页设计师来说，使用Photoshop的目的大多是进行网页排版，当然有时候需要制作一些效果，在更多的时候网页设计师使用PS 相比平面设计师要更简单一点，下面是店铺分享的网页设计常用photoshop技巧，一起来看一下吧。
1.改变图标的背景颜色作为一个网页开发员，我用Photoshop最常要做的是改变图标的背景颜色或者是把图标背景变透明。
就拿RSS(聚合内容)图标为例。
这种图标会有不同的形状和尺寸。
当你找到了最合适的图标，但你还需要做些修改。
最常见的问题是网站的背景和图标的背景可能是不同的，为了把他们搭配在一起，我们需要做一些工作。
如果图像是GIF格式的，建议先把它转换成PNG格式，他们是类似的，但是PNG格式文件比较小。
具体做的方法是：第一步：在Photoshop中打开图像，然后点击文件->存储为Web和设备所用格式(快捷键Ctrl/Cmd+Alt/Option+Shift+S),然后在预设右边的下拉框中选择PNG-8或者PNG-24格式。
你可以对比下哪种格式的`质量和尺寸更好一些。
接着关闭GIF文件打开你刚存储的图片。
打开图层面板(如果没显示，按F7键让它可见)，你可以看到有一个背景图层。
右击那个图层，从菜单里选择背景图层，点击确定。
第二步：使用魔术棒工具。
1.在工具面板中点击魔术棒工具。
2.确保容差设在20左右，消除锯齿和连续是勾选上的，如下图：然后点击环绕这个图标的白色(或其他颜色)背景。
确保选中的区域尽可能不要包含图标下的阴影部分。
如果阴影部分被包含住了，适当的调整容差(用魔术棒重新选择背景)。
去除背景颜色简单的点击Delete键我们就可以去除背景并把它变透明。
点击文件->存储为Web和设备所用格式，勾选透明选项。
改变背景颜色1.点击前景色在拾色器中选择你想要的颜色，点击确定。
2.点击油漆桶工具(快捷键G)。
photoshop怎样制作网页首页
photoshop怎样制作网页首页制作网页其实很简单，在中可以用到很多方法来制作，今天就举例制作网页首页。
很多刚学习的新手小伙伴可能还不知道，下面是店铺带来关于photoshop怎样制作网页首页的内容，希望可以让大家有所收获!photoshop制作网页首页的方法打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择“1024 x 768”，模式设计为“RGB颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。
新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。
首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”效果。
在背景图层的上方新建一新图层，并命名为“背景颜色”。
点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。
然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。
填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。
在“框架”图层之上再新建一图层，名称为“主体元素”。
打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白xx域内点击，选择白xx域后，按下DEL键删除白xx域。
然后拖放图片到图层“主体元素”上，位置如图所示。
然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。
对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。
选择“切片”工具，然后对内容进行切分。
切分的好处是有利于文件在网络上传输，同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。
纯色背景 打造简约的纯色背景效果
纯色背景：打造简约的纯色背景效果在图像处理软件中，纯色背景是一种非常普遍的背景效果，它能够给图片带来简约、干净的视觉效果。
无论是用于设计海报、网页、产品展示还是社交媒体，纯色背景都能为图片增添色彩和艺术感。
本教程将介绍如何使用PhotoShop软件来制作纯色背景。
步骤1：打开图片并选择画布首先，打开想要编辑的图片。
选择菜单栏中的“文件”选项，并点击“打开”来载入图片。
随后，点击“画布大小”选项，这将打开一个对话框，允许你调整图片的画布大小。
步骤2：选择纯色背景在PhotoShop软件的工具栏中选择“新建填充或调整图层”图标，即一个方形图标。
在弹出的选项中，选择“纯色”。
选择一个你喜欢的颜色，并点击“确定”。
步骤3：调整纯色图层在图层面板中，可以看到一个新的图层已被添加到你的工作区中。
点击该图层，然后使用“Ctrl+T”快捷键，或选择编辑菜单中的“自由变换”选项来调整纯色图层的大小和比例。
确保将图层拉伸至和原始图片一样大小。
步骤4：添加透明度在图层面板的顶部有一个透明度滑块。
通过移动滑块，你可以调整纯色图层的透明度。
调整透明度可以使纯色背景与原始图像融合得更好。
根据你的需要，可以选择不同的透明度值来实现不同的效果。
步骤5：保存图片完成上述步骤后，现在可以保存你的编辑工作了。
选择菜单栏中的“文件”选项，点击“保存为”来保存你的图片。
选择你喜欢的文件格式和保存路径，并点击“保存”。
步骤6：加入其他效果（可选）如果你想要给纯色背景加入其他效果，比如渐变或文本水印，可以在图层面板中再次点击纯色图层，然后选择工具栏上的相应工具来进一步编辑。
你可以使用渐变工具来创建渐变效果，或使用文本工具来添加文字水印。
总结：制作纯色背景是一项简单而实用的技巧，使你的图片看起来更加专业和引人注目。
通过使用PhotoShop软件，你可以轻松地改变背景颜色、透明度，并可以添加其他效果来增强图片的视觉效果。
希望这个教程能帮助你在设计中运用纯色背景，创造出简约而有吸引力的独特效果。
如何利用Photoshop制作网格图案背景
如何利用Photoshop制作网格图案背景在设计和排版中，网格图案背景常被用来添加一些视觉层次和增加内容的整齐感。
Photoshop作为一个强大的图像编辑软件，可以帮助我们快速制作出各种网格图案背景。
本教程将向您展示如何利用Photoshop制作网格图案背景。
步骤1：创建一个新文档首先，打开Photoshop并创建一个新文档。
您可以根据您的需求来调整文档的大小和分辨率。
比较常用的网格图案背景是正方形或矩形，您可以设置宽度和高度来满足您的设计需求。
步骤2：添加一个背景色在图层面板中，创建一个新的图层。
然后选择Paint Bucket工具，通过单击并填充背景颜色，为网格图案背景添加一个基本的背景色。
您可以选择相应的颜色来匹配您的设计主题，或者简单选择白色或黑色。
步骤3：创建网格图案现在，我们要使用Photoshop的“线”工具来创建网格线。
选择线工具，确保设置直线段并选择适当的像素大小。
开始绘制水平线和垂直线。
您可以使用参考线来确保线的正确对齐。
对于一个更复杂的网格图案，您可以添加更多的线。
步骤4：调整线的颜色和样式一旦您完成绘制网格线，您可以选择线的颜色和样式以适应您的设计需求。
打开线工具的属性面板，您可以更改线的颜色、粗细和样式。
您可以选择实线、虚线或点状线来创建不同的效果。
步骤5：删除多余的边界线（可选）在某些情况下，您可能希望在网格图案中删除多余的边界线。
您可以使用橡皮擦工具或矩形选框工具来删除不需要的线。
确保您选择正确的图层，并谨慎地删除多余的线，以保持图案的整洁和一致。
步骤6：应用效果（可选）如果您希望为网格图案背景添加一些特殊效果，Photoshop提供了许多内置的滤镜和特效。
您可以尝试应用模糊、颜色变换、颜色叠加等效果，从而为您的网格图案背景增添一些独特的风格和纹理。
步骤7：保存和使用您的网格图案背景完成网格图案背景设计后，您可以保存它为一个单独的图像文件。
选择“文件”菜单中的“另存为”，并选择适当的文件格式和路径来保存您的网格图案背景。
917996-图形图像处理实用教程-第5章 使用photoshop设计网页
图5-8 “填充路径”对话框
第5章 使用photoshop设计网页
5.1 任务描述
通过设计网页学习和掌握photoshop工具 的特点及使用。本任务需要使用 photoshop中的钢笔工具、路径面板、矢 量图形中的圆角矩形工具、使用 ImageReady制作动画效果果等，最终效 果如图5-1所示。
图5-1 网页设计的效果图
转换点工具：除可以用于路径的位置和形状外， 还可用于更改锚点的属性。锚点有两种类型，即 直线锚点和曲线锚点，两种锚点分别用于连接直 线和曲线。直线锚点和曲线锚点之间可以互相转 换，图5-6中的锚点A是曲线锚点，选择“转换 点工具”，将光标移至锚点A并单击，可以将该 锚点转换为直线锚点（图5-6中图所示）。反过 来，也可以将直线锚点转换为曲线锚点。
路径主要通过路径工具和“路径”面板操作。路 径工具包括钢笔、自由钢笔、添加锚点、删除锚 点、转换点等，前两个工具用于绘制路径，其它 工具用于选取和编辑路径。其中，钢笔工具用于 绘制由多个点连接而成的路径线段，自由钢笔工 具用于自由地绘制曲线路径；添加（删除）锚点 工具可以在现有的路径上添加或删除一个锚点， 用转换点工具可以将某一锚点由平滑曲线转折点 转换为直线转折点，如图5-2所示。
(2)路径的描边
路径的描边是沿路径轨迹画一定粗细的线条或边 框，可以用路径面板菜单中的“描边路径”选项 或路径面板工具栏中的“用画笔描边路径”按扭 进行路径的描边。
photoshop网页切图怎么用？ps网页切图图文教程
photoshop⽹页切图怎么⽤？ps⽹页切图图⽂教程
⽹页设计在技术层⾯上，第⼀步是美⼯做出⽹页效果图，第⼆步就是⽹页前端进⾏⽹页切图。
⽹页切图⼯具常⽤的有fireworks、PS，这⾥主要向各位介绍怎么使⽤PS进⾏⽹页切图。
1、⽤PS打开⽹页效果图PSD⽂件，根据⽹页效果图拉出参考线，同时为了⽅便切图可以右键点击把⾯板的颜⾊⾃定成对⽐鲜明的颜⾊。
2、在PS图层中找出主背景图层，如果背景图是渐变的话可以只切出⼀两像素，后⾯再代码中设置填充。
3、隐藏其他图层，把背景图切出来。
如果背景图很⼤，可以考虑分段切出，这样可以加速⽹页加载。
4、切出背景后，就从上到下，先把LOGO切出。
这⾥同样要隐藏其他图层，输出图⽚的时候保存⽂件类型选择png，因为这样可以使得图⽚背景透明。
5、导出图⽚可以选择⽂件——存储为web和设备所有格式
6、在保存切出图⽚的时候，选择保存HTML和图⽚，这样导出来的就会⾃动⽣成⼀个⽹页页⾯和切图图⽚
7、在切像尾部版权部分的背景时候，发现这个是渐变图层，这样就可以只切出⼀个像素的长度。
然后在代码中设置repeat-x 横轴填充。
学会使用Photoshop制作网页素材
学会使用Photoshop制作网页素材第一章：Photoshop制作网页素材的基础知识在学习使用Photoshop制作网页素材之前，我们首先要了解Photoshop的基础知识。
Photoshop是一款专业的图像处理软件，广泛应用于网页设计、平面设计等领域。
它具有强大的编辑和修饰功能，可以创建出精美的网页素材。
1.1 Photoshop的界面介绍Photoshop的界面主要由菜单栏、工具栏、选项栏、图层面板等组成。
菜单栏集中了常用的操作功能，工具栏提供了各种绘图和编辑工具，选项栏可以调整当前工具的属性，图层面板用于管理图层。
1.2 常用工具的使用Photoshop提供了大量的工具，这些工具可以帮助我们进行各种操作。
比如，移动工具可以用来移动和拖动图形元素，画笔工具可以绘制各种形状和图案。
熟练掌握这些工具的使用方法，可以提高我们的制作效率。
1.3 图层的使用图层是Photoshop中非常重要的一个概念，可以把它理解为透明薄片。
我们可以在不同的图层上绘制和编辑不同的元素，然后通过调整图层的顺序和透明度来实现复杂的效果。
熟练掌握图层的使用方法，可以让我们的作品更加生动和丰富。
第二章：制作网页背景素材网页的背景素材可以为整个页面增添视觉效果，提升用户的体验感。
下面介绍几种常用的网页背景素材的制作方法。
2.1 渐变背景的制作渐变背景是一种常见的网页背景效果。
在Photoshop中可以使用渐变工具来制作渐变背景。
首先选择渐变工具，在选项栏中选择渐变类型和颜色，然后在画布上拉出一个渐变的方向线即可。
2.2 图片背景的处理如果需要在网页中使用图片作为背景，可以使用Photoshop对图片进行处理。
比如可以调整图片的尺寸和清晰度，裁剪图片以适应网页的大小和比例。
2.3 纹理背景的制作纹理背景可以为网页增添一些质感和层次感。
在Photoshop中可以使用纹理工具和滤镜来制作纹理背景。
通过使用不同的纹理图案和调整纹理的透明度，可以达到不同的效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
用Photoshop制作网页背景图
网页背景图的制作
一、建立新文件1.建立一个250 X 150(72像素/英寸)的新文件，不要太大，因为背景图一般是平铺在底面上的。
然后把背景填充上浅浅的颜色如淡黄色：
（图txt5_step1）
二、输入文字1. 选择你喜欢的字体和颜色输入文字，我这里输入“我的酷站”，然后调整字的大小和位置。
这里有几个注意事项：
第一，字的大小和字型最好不要太死板，最好用另外的字体和不同的尺寸突出你想突出的一个或几个字，必要时可以拉长或压扁。
第二，字和背景的颜色搭配要得当，这没有什么规律可言，一般只要看着顺眼就行了。
如图:
（图txt5_step2）
2.然后选择“图层(Layer)->新建(New...)->图层(Lay er)”两次，建立两个新层，如图所示：
（图txt5_step3）
3.分别在两个层上随便选择一定形状(什么形状？你自己随意啦。
)的范围，填充合适的颜色后，将这两个层的透明度降到35%：
三、技术处理1. 下面的步骤很随意，你随便试几个滤镜，只要得到自己满意的效果就行了。
我这里的操作是这样的:
绿色方块第一次滤镜：“滤镜(Filter)->模糊(Blur)->动感模糊(Motion Blur)”(角度:0度，距离:20像素)
绿色方块第二次滤镜：“滤镜(Filter)->模糊(Blur)->径向模糊(Radiou Blur)”(数量:52，方法:转动)
紫色方块第一次滤镜：“滤镜->纹理->颗粒”(强度:77，对比度:50，颗粒类型:软化) 紫色方块第二次滤镜：“滤镜->模糊->径向模糊”(数量:60，方法:缩放)
这里的操作能真正体现出你个人的审美观点。
（图txt5_step5）
3.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后点击层面板右上方的小三角，选择“合并可见层”，如图：
（图txt5_step5）
4. 在层面板上点击背景层前面的空白区域，让小眼睛出现，重新显示背景层。
这样，这个图就算做完了。
顺便说一句，现在似乎很流行斜斜的文字，如果你也很喜欢的话，按下"Ctrl+T"(自由变换的快捷键)，把文字旋转一定的角度，然后在旋转框内双击鼠标确定就行了。
这时你可以选择“文件->保存副本”，将它保存为gif或者jpg格式的文件，就可以在制作网页的时候使用了。
（图txt5_final）
重要注意事项：背景图的颜色一定不能太深！否则就看不到前面的字了！切记！！。