如何用Photoshop制作网页模板

如题所述

网页中的元素有很多,像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑。 不过图层一多,就显得很凌乱,可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮,从弹出菜单中选择“新建组”,在随后出现的对话框中为新建组取一个名称(如:“网页顶部”),确定即可。这时图层面板中多出一个文件夹图标,即图层组。把相关联的图层都拖放到同一组中,比如网页顶部的所有元素,标题、菜单、Logo等都放到“网页顶部”组中(见图1)。同样方法可以建立多个组,在组的下面还可以建立子组。 点击图层组前面的小三角,就可以像文件夹一样展开或折叠它,这样图层面板就显示干净利落得多,要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作,如整体复制、删除、隐藏、合并等。 小提示: ★如果你想借鉴某个网页的设计,不妨把它截成图片放在最下面的图层中,再拉出多个参考线划出网页的大致版式,再在此基础之上边参考边制作自己的网页。 从Photoshop到Dreamweaver的转换 在Photoshop中设计好之后,下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层,其实没有必要,合不合并图层对最终生成的网页没有多大影响,反而会妨碍以后的编辑修改。 第1步:我们最终需要的,只是Photoshop中制作的图形和框架。选择切片工具(快捷键为K),把需要的每个图形独立切分出来。每切分出一个图形,在它的左上角会显示出切片编号(见图2)。 第2步:在工具箱右击切片工具,从弹出菜单中选择“切片选择工具”,用它可以选取、移动切片,并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。
温馨提示:内容为网友见解,仅供参考
第1个回答  2019-11-30
网页背景设计好之后,使用切片工具划分,然后使用dreamweaver制作表格,之后将图片逐个加入单元格,或作为背景,或作为图片显示.简单的就是这样啦.

Photoshop设计电脑网站WEB模板教程
2.添加LOGO,在左上角,并给它新建一个图层.3.新建一个图层.并使用图层样式为其添加一个渐变效果.4.使用减淡工具,并设置10%的不透明度,给图像加个高光.如图:5.现在加入菜单文字.使用文字工具并设置如图,颜色#444b44.6.在文字下面加入下划线.也在菜单上面加入一条线,来做区分用.7.在头部加个产品...

Photoshop设计淡雅风格的博客网页模板
接下来加入两边的虚线效果。如果只需要在css中使用dashed边框,那么这个虚线效果在PS中是没有必要制作的。一个聪明的办法是使用图形变换 工具;首先创建一个新图层,然后按Ctrl+T,然后把这个蓝色矩形稍微下移一些,然后连续按Ctrl+Shift+Alt+T。如果你感觉这个方法复杂 了,可以手动的创建每个蓝色矩形。然...

ps怎么做详情页模板?怎么制作详情页
制作详情页主要有三种方式:1) 使用Photoshop制作设计稿,并保存为模板,每次在此基础上进行修改。修改完成后,使用切片工具将设计稿切片,然后点击"文件"-"保存为Web和设备所用格式",选择导出图片和网页。将切好的图片上传到图片空间,然后在宝贝描述编辑器中上传并插入图片。2) 下载或购买代码模板,然...

千图网的详情模板怎么用ps编辑千图网的详情模板怎么用ps编辑出来
1. 打开Photoshop软件,点击菜单栏的“文件”选项,选择“打开”,选中需要编辑的千图网详情模板文件并打开。2. 在图层面板中,可以看到模板文件的各个图层,根据需要进行编辑,比如修改文字内容、更换图片、调整图层位置等。3. 若要更换图片,可以在图层面板中选中需要替换的图片图层,然后点击菜单栏的“文...

用ps制作网页怎么上传用ps制作网页怎么上传图片
1.先用Photoshop做一个网页图片;2.Ctrl+R调出标尺,在图片上绘制表格,框选出要做链接的部分;3.使用切片工具,按照绘制的表格划分切片 4.以上步骤完成后,进行操作“文件”>“储存为Web和设备所用格式”,在打开的窗口中按照自己的需要为网页图片作设置,设置完成后,“储存”,保存类型“html和图片...

psd模板怎么用?PSD的模板文件,怎么用PS转化成网页模板
1、首先打开ps,然后点击左上角的文件→打开,打开psd模板文件。2、接下来对这个模板分析一下,确定如何作图,决定把照片放在哪里。感觉把照片放在框中空白的地方比效好。3、图层2是白色的背景层,其它是文字和图片层,比如文字、日期、画框、图片等等。4、在电脑里选一张照片,选择背景简单的照片,如果...

如何用Photoshop制作网页模板?
你可以在一张图像上任意添加按钮、图片、文字等内容,做成网页最关键的一步就是切片,用切片工具托拉,就能拉出一块块的区域(这些区域后来在网页软件中可以设置链接),然后把这个文件存储为WEB所用格式,这样存储的文件是一个HTML和一个装有切成块的图。把这个HTML文件用DREAMWAVER打开,对这些切成块的...

网页photoshop-ps网页设计教程
如何用photoshop制作网页界面 photoshop制作网页界面的一般流程为新建文档 文档尺寸为浏览器全屏后减去下拉条等元素的宽度,一般为1000px。高度一般为三到四屏。高度设置成五屏、六屏的也有。一般考虑的用户的阅读耐受力,太多屏的高度会影响用户阅读。多了建议做跳转。 设计好文档尺寸,然后就是网页设计工作了。在网络...

网页设计模板ps-用Photoshop设计漂亮的网页页脚模板
如何用PS制作网页模版 设计一个尺寸后,就直接设计内容就可以,注意不要合并任何图层,文字可以拿一些常用的字代替。都做完后,保存成PSD和JPEG两种格式。前者就是模板,后者就是网上的预览!用Photoshop设计漂亮的网页页脚模板 本文介绍一篇制作网页页脚的PS教程,这个页脚的设计很有层次感,同时用网格空格背景纹理...

用photoshop与DW配合做网页,怎样做比较规范
9.页面准备1 1 )新建站点所在文件夹,在D盘根目录下新建文件夹ind0605。2 )在ind0605中再新建css、images、js等3个文件夹 。3 )回到Dreamweaver中,在左上角有个文件菜单,点击新建,新建ind.html 。4) 用同样地方式,新建style.css文件,然后存储到css文件夹中。5) 选择本地站点文件夹为...

相似回答