导航:首页 > 万维百科 > ps网页设计图片

ps网页设计图片

发布时间:2020-08-31 10:56:32

1、如何用PS做网页效果图



上次有空做了个。我用的是GIF的动态效果。你也可以直接做图片然后保存网页格式,尺寸什么的自己调。不要在意这些细节。。

2、用photoshop设计网页首页时,设置多少精度出来的网页图片精度高?

Photoshop制作网页效果图的几个注意点:
第一点:新建文件尺寸大小; 制作网页效果图,首先就是要新建文件,那么要建多大的合适呢?这可不是随便乱定的,一般我们是要根据目前绝大部分显示器的最佳分辨率来定。在比较早些时候,17英寸为主流显示器,最佳分辨率为1024*768,所以考虑到网页在显示器上能有最好的显示效果,一般都定在1003px以下(这个数据是由显示器最宽1024px减去浏览器右侧滚动条宽21px和到1003px)。如果你的网页超过这个尺寸,那当网页即使最大化显示的时候,内容也不能完全呈现,底部就会显示水平滚动条,这样会影响用户体验! 目前来说19英寸分辨率达到1280以上的宽屏显示器已经成为主流,因此现在很多网页都开始做得更宽,比如可以做成1200px宽的,但为了能让1024分辨率下都能有好显示,建议还是定为1003px以下,比如960,980都是合适的。如果不确定应该设置多少合适,可以打开参考网站,看看他们是设置多少。 如何查看别人的网页尺寸呢?很简单,使用截图工具把网页截下完整的宽度后使用Photoshop用选区工具框选宽度就能在信息面板里显示出来了!
第二点:字体与字号; 字体方面,在浏览器里显示的字体是调用操作系统里的,因为绝大部分操作系统都有宋体、黑体、微软雅黑、Arial、Tahoma这几种字体,所以在网页效果制作时,尽量使用这些字体,如果不使用这些字体,那到在把网页效果图做成网页的时候就没法做出这种字体效果了;如果非要使用其他字体,那么在做成网页的时候只能以图片的形式来显示出来,不过考虑到图片文件都偏大,会让网页打开速度降低,所以尽量不要以这种形式显示。
第三点:关于颜色; 不同的操作系统会有不一样的调色标准,因在Web上就有定义了一个安全色表,以期能让符合这个色表定义的颜色,在不同显示设备上都能有同样的显示效果。不过对于不是对色彩十分严谨的网页效果来说,不需要这么严格执行,所以关于颜色,我们直接使用Photoshop里默认的颜色就可以了,当然,如果你所设计的网页对于色彩十分看中,那请认真按照Web安全色标准设计。
第四点:网页效果图里填充的内容; 在制作网页效果的时候,很多地方要填充文字内容,这个时候有些初学者为了方便操作,直接把同样的内容复制使用,最后整个网页上看起来就会显得怪怪的。这里大家在填充内容的时候,最好是使用不一样的信息,或者干脆直接从其他网页上截取内容填充。
第五点:要注重细节处理; 因为你制作出来的效果图,最终是做为网页的制作依据,因此在效果图上,每个模块的间距都要精确到像素、文字摆放的位置等也要准确到位。
第六点:保存的图片格式; 效果图制作好后,建议保存成png格式。不要存jpg格式,因为这个格式对图片压缩比较大,会丢失细节。

3、用PS做好网页图片,怎么样快速变为网页

1、先打开photoshop设计好你的网页背景,如图所示,如何设计这样的页面我就不讲了,不属于该经验的内容,下面就是要介绍如何将这样的图片转换问网页。
2、在工具栏选择【切片工具】,大部分人的工具栏只显示裁剪工具,右键单击裁剪工具就能看到切换工具,选择它即可。
3、属性栏进行设置,先来设置样式,有三种样式可供选择,正常样式、固定长宽比、固定大小。
4、正常模式下,鼠标拖动可以绘制一个矩形的切片,切片的大小和长宽比都是任意的,点击切片就会使切片的边框变成棕褐色(如下面第二幅图),并出现八个控制点(如下面第三幅图,拖动控制袋可以任意的改变切片的大小),另外,直接拖动切片也可以改变切片的位置。
5、固定长宽比模式下,拖动鼠标可以绘制切片,切片的大小是任意的,但是切片的长宽比是固定不变的。为了方便,一般长宽比和图像的的长宽比是相同的。怎样知道图像的长宽比呢,参考下面第二幅图,在图像--图像大小下,打开图像大小对话框,这里你可以找到图像的宽度和高度。
6、固定大小模式下,切片的长和宽都是你设定的,不会改变,如图所示,点击一下鼠标就可以绘制一个切片,我绘制的这些切片都是一样大小的。选中一个切片,切片变成棕色的边框,并出现了八个控制点,拖动控制点也可以改变切片的大小。
7、一般将图片切割成网页的时候,我们可以使用一种简便的方法,切换到任意一种模式下,右键单击图像,然后在打开的右键菜单中,选择【划分切片】,打开划分切片的对话框。
8、设置将图片切分为水平4个切片,垂直5个切片,点击确定按钮,下面第二幅图就是我们建立这个切片。这是建立切片最快的速度了。
9、拖动控制点可以改变整行或者整列的宽度和高度。
10、除此之外,我们还可以对某个切片进行进一步的切割,右键单击某个切片,然后选择【划分切片】,打开划分切片对话框,设置横向和纵向的切片个数,如图所示
11、最后,一个关键的设置就是,右键单击某个切片,然后在打开的右键菜单中选择【编辑切片选项】,打开切片选项对话框。
12、在这里你要设置的有切片的名称,这个名称也就是网页图片的名称,默认系统给出的名称即可。设置url,也就是图片的链接,在网页上点击图片就能打开这个链接;目标在动态图片中需要设置,即加载URL时的桢,在静态的图片中不需要设置;信息文本也就是鼠表放在网页上的图片上的时候,出现在浏览器底部状态栏的文字信息;Alt标记就是鼠标放在图片上,自动出现在图片周围的文字。设置好这些参数以后点击确定按钮。
13、最后就是要保存html文件了,在菜单栏上执行:文件--存储为web和设备所用格式
14、在打开的对话框中,点击【双联】你会看到两个图片,上面这个是处理前的原图,下面这个是处理后的图片,你可以对比两个效果以后再保存图片。
15、设置格式为jpeg,其他参数参考下面的这幅图,一般默认系统给出的参数即可。点击储存按钮。
16、最关键的步骤就是在这里,设置格式为【html和图像】,然后点击保存按钮。
17、你会看到保存后有两个文件,一个是图片文件夹,一个是html文件,双击打开html就可以看到一个网页了。
18、用dreamweaver打开网页文件可以对齐进行进一步的编辑。

4、如何用PS制作网页首页的效果图?

ps、fireworks都可以用来做效果图的,用这些工具做效果图的时候只要注意一下栏目的排版以及用色的协调性,ps做网页效果图常用的效果不多,所要只要掌握几种常用的工具用法就可以了:选取、剪切、填色、渐变、蒙版、切图等。
刚开始初学的可以网上找一些好点的模版下来自己尝试着按自己的想法进行修改,等熟练掌握以后再完全自己构思、设计!

5、PS制作网页图片

先制作一个纯色。使用蒙版设置半透明。

裁切成你想要的那种形状。

然后下面放上深底色。

然后复制几层,排列一下

 

最后把需要的区域裁切出来就好。。  大体原理就是这样。实际操作的时候可以不同裁切,直接调整需要的大小就好。

6、用Photoshop做网页设计图的教程有哪些

photoshop是处理图片的软件,并非做网页的。
网页需要格局,代码等。如果只是拿PS做一张图,再用firework去隔,会很简单,很枯燥的。
再学学dreamweaver

7、怎么将PS的图片制作成网页

这要牵扯三个软件:
1.photoshop(网页图片制作)
2.imageReady(PS图片放进去,导出“将优化结果存储为..”--保存类型选择--html)
3.Dreamweaver(打开HTML文件,你就可以看见代码了)

8、用PS做一个网页设计图

挺简单的,现在fireworks中做下PSD图,然后在DW中处理一下就行了

我也有现成的,加些分留个邮箱可以发给你。。。。

网站分为好多类型,像个人主页、门户、论坛等,你可以选择其中的一个来做。。如果你是新手的话,那就做个个人主页吧,比较自由,做成什么样的都可以。。。。
如果你的程序搞的比较好的话,那就做个论坛吧、

9、用PS制作网页要存什么格式的图片

存储为web格式 也可以直接存储为png格式即可。

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

与ps网页设计图片相关的知识