导航:首页 > 万维百科 > ps网页布局设计

ps网页布局设计

发布时间:2021-03-14 12:13:39

1、网页设计中页面的尺寸怎么定?用PS设计的时候有哪些注意事项?才能在切图的时候符合网页布局?

宽度大概在960~1000px; 但是有的时候你需要考虑网页中1000以外的东西怎么延伸和扩展问题。因为目前为止,最小的分辨率是1024的,所以符合最小分辨率的就可以。

2、如何用ps制作网页首页

首先要看行业,行业领域的区分,再加上本身公司的logo主题色是什么
其次是对网站的大小,现在一般都是1920px的宽主体1100px,特殊行业有特殊的尺寸
功能的设想,布局框架,哪个位置需要布局什么板块
再就是相关的图片设计与文字的排版,还有比较多的细节等等一系列。
还有问题欢迎私我

3、如何用Photoshop做网页设计

如果是给个人做,怎么做都无所谓。如果是在公司里给客户做。这一步不可少,出了效果图后,要给客户看。等客户确定不再修改时再做网页,目的就在于防止客户反复修改,动布局!
另外会做网页效果图,代表你的设计能力。用dreamweaver直接做的后果是边想边做,容易把设计思路搞混了!
据我所知,这样的教程基本没有。因为做网页效果图只要基本的操作,有时从别的网页截一块下来处理一下,直接用到自己的效果图上。

一般显示器分辨率 宽:1024 高: 768 宽减去滚动条的宽度, 一般为1003-1004 不会有横拉条 高度 根据页而定
网页设计需要的PS操作技术并不是很多,只要掌握基础就行了。
但是你想要做好一个稿子就不是那么简单了。
这当中有一些天赋的因素,但是更多的是学习。
你可以从模仿别人的稿子开始,渐渐的融入自己的东西。

http://www.68design.net/
这个站每天都会有新的酷站收藏,也有设计欣赏。
http://www.zcool.com.cn/
这个站素材丰富而且也有酷站收藏。

要做好网页设计,一定要多看,拼命的看并且吸收里面的东西,看看高手们是怎么处理细节的,这样慢慢自然会有提高。
是否可以解决您的问题?

4、PS中制作网页页面大小具体是怎样设置?

新建画布时就可以设置长宽的参数了,默认单位一般是厘米,你要以选择像素版,一种办法就是根据显权示的大小设置,以前多用800*600,现在是1024*768,当然你也可以设置其他大小,以适合不同的人群看。实际设置大小比显示器小一点就好了,比如适合1024*768,实际大概设为1002*600,可以自己先,做好打开网页试试就知道了。

5、网页设计右边怎么布局布局

1、严格意义来说dw并不能用来设计网页,设计网页都是在平面设计工具里完成的,比如在ps里面设计好网站的效果图,在ps里面切图。

2、dw只是个网站代码编写工具,使用dw编写代码会比较方面,因为有很多的快捷功能。但是对于高手来说,是用记事本都可以编辑网站的。

3、dw的编辑面板主要有三种视图,分为 “代码”“拆分”“设计”,如下图

在制作网站的时候,能够用到的主要是“代码”视图功能。“设计”和“拆分”视图很少用到,只有当网站代码出现问题的的时候用来查找错误,对于有一年多代码编写经验的人来说,就已经用不到了。

4、在dw中编写制作网站的代码主要是div+css,也是就是html。网站布局也是通过html代码来实现的,比如maigin 与padding position 都是来控制div的布局和位置的。

所以,在dw里面设计网页布局网站并不是dw的功能,还是通过代码实现的。

6、简述ps制作网页布局的优缺点

综合各种设计方法的优缺点,可以得出利用Photoshop设计网页通常可以达到意想不到的效果,这不只是取决于他可以随意布局图片,更得意于其专业的图像处理能力。下面小编就给大家展示一下Photoshop设计网页的独特之处。 开始制作: 1、打开PS,新建空白文档,名称设置为“feifei工作室”,从预设大小下拉列表中选择“1024 x 768”,模式设计为“RGB颜色”,内容设置为“白色”,点击“好”按钮完成文档的创建工作。 2、新建一名称为“框架”的图层,利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”,然后将矩形的宽度设置为1024,高度设置为80,在文档的上下两侧各框选一部分内容并填充为黑色,从而使整个网页呈现“宽屏幕”效果。 3、在背景图层的上方新建一新图层,并命名为“背景颜色”。点击“矩形选择工具”,设置“宽度为400,高度为768,然后在窗口的左侧框选一部分内容,填充一种深绿色。然后点击“矩形选择工具”,设置“宽度为624,高度为768,然后在窗口的右侧框选一部分内容,填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色,目地是产生较为明显的对比。 4、在“框架”图层之上再新建一图层,名称为“主体元素”。打开一张事先准备好的百合花图片,双击“背景”图层将其转换为“图层0”,点击“魔术棒”工具,在图片白色区域内点击,选择白色区域后,按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上,位置如图所示。 5、然后选择“矩形选择工具”,设置“宽度为624,高度为768,然后在窗口中选择花朵右侧的一部分内容,并调整其亮度和对比度,使花朵的左右两侧呈现明显的对比。 6、对该页面进行细节的调整,增加一些导航栏,信息提示内容和版权信息等内容,最终制作完成的页面如图所示。 7、选择“切片”工具,然后对内容进行切分。切分的好处是有利于文件在网络上传输,同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果如图所示。 8、找到保存文件的位置,打开"feifei工作室.html"文件,然后在内容区域内点击鼠标右键,选择“查看源文件”,就会发现对应的网页内容已经生成。至此,利用PS设计网页内容完成。

7、如何用PHOTOSHOP做网页的布局

首先要看布局需要多大 。然后新建一个网页大小的背景;在根据导航条,logo,栏版目的大小各自新建图层。权在编辑完成后将其合并。 可用ctrl+u 综合调整整体颜色;ctrl+m调整综合对比度。最后用切片导出。

8、浅析关于photoshop与网页布局设计的关系

一、Photoshop在网页布局设计中的作用
1、 Photoshop在网页布局计划中的作用
①布局灵活:Photoshop的灵魂是图层,每层可以放置不同的元素,图层之间可以相互链接,也可单独存放,每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置,每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能,完全可以让设计者随心所欲设计而不受任何约束,而Dreamweaver等软件给设计者提供出自由度降低很多,其效果也会大打折扣。
②修改方便:网站建设前期首先要与客户签定合同,签定合同时客户最关心的是自己的网站是什么样子,这时设计者不可能拿出建好的网站给客户演示,这样一是成本太高,合同能否签定还不一定;二是保护知识产权,有的客户拿走设计方案交给别的公司去做,自己岂不成了给别人做嫁衣裳。最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下,客户一次满意率非常低,总会提出修改意见,而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化,直到客户满意为止。如果在Dreamweaver下,每做一次大的修改,几乎跟重新设计一样费时费力,而且还不一定能达到客户要求。
③加快浏览进度。一个设计不美观不规范的网站是没有生命力,同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究表明,选择性越多,人的忍耐性越差;可选择性越大,人的忍耐性越低。在互联网高度发展的今天,同类网站多如牛毛,人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。一般情况下,下载速度一旦超过10秒,人们会自动转向其它网站。决定下载速度的因素很多,如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。但是在这些条件相同时,网页大小及网页元素的优化和配置就是唯一的因素。使用Photoshop设计的网页经过裁切后体积相对要小得多,相同的元素因为其格式变化也会大大提高下载速度,因此Photoshop就成了提高速度,提高点击率的制胜法宝。
二、用Photoshop设计网页布局应注意的几个问题
1、 网页文档尺寸与分辨率。网页文档一般为1007*600和708*800像素,分辨率为72像素,这是屏幕分辨率,太高的分辨率并不能增强效果,反而会降低下载速度。一般情况下,大型网站不要超过3屏。
2、 颜色:网站背景颜色与文件颜色要统一协调,一般不要超过两种,一些网站被批评为脏、乱、差,其要害是颜色搭配不合理,或者太多,给人一种不舒服的感觉。
3、 字体,标题。导航字体一般用黑体,正文一般用宋体,其它字体浏览器不兼容,可能造成调试时出错,给工作带来麻烦。如果为增强页面效果用到其它字体,则最好在用Dreamweaver前在Photoshop切分及图片,字体的颜色设置要考虑到整个页面效果。
4、 布局格式:虽然效果图是用Photoshop设计的,但一定要兼顾到Dreamweaver对页面布局的要求,Dreamweaver下网页布局是使用‘国’字形,还是其他模式,是否使用框架,使用框架的类型是哪一种,都是在设计前要考虑到的。否则会造成效果图与最后的网站布局出现出入,给客户和自身带来麻烦和损失。
5、 图文搭配:一个好的网站是图片多好还是文字多好,这要视网站的功能、行业、目的而定,但有个原则就是图文合理配置,而图片则要按一定的空间分布进行和谐分布。另外,图片大小要合乎美学原则,不能太大,一般用缩略图较好,如果要显示更多的图片细节,不妨给缩略图链接一个大的图片。
6、科学使用参考线。参考线是设计页面布局的有效辅助工具,我们可以先用横参考线将网页布局分成几大版块,然后用竖参考线将每个板块按我们的思路分为几个小板块,最后再整体观察一下。要精确定位网页元素,可用对齐参考线的方法来实现:“视图”—“对齐到”—“参考线”,而参考线的精确定位可以借助标尺和网格来实现,这里要注意的是网站的Logo和Banner或者导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入DreamWeaver整合时,则可能出现空边或撑开表格的现象。
三、“切片”工具是Photoshop通向DreamWeaver的桥梁。
利用Photoshop效果图最终与客户签合同后,还不是Photoshop设计网页布局的终结,而还有关键的一步,就是“切片”,只有正确地切片后,DreamWeaver才能对效果图进行有效的整合,Photoshop在网页布局中的积极作用才发挥到了极致。要完成“切片”这关键的一步,应遵循以下原则:
1、必须依靠参考线。设计时用到参考线,切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调,有效避免“留白”和“爆边”。
2、 Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分,主要是为预先设计的Logo和Banner留下空间,在DreamWeaver整合时最好不用Logo和Banner的切片,而是直接用Logo和Banner原文档,这是提高Logo和Banner效果的需要。
3、虚线和转角形状必切。虚线和转角形状在DreamWeaver 不能实现,只能使用Photoshop切片。
4、渐变必切。这也是Dream Weaver实现不了的。
5、大图必切。大的图像必须切分成均匀图,这样可以提高网页下载速度。
6、特殊文字效果必切。除黑体和宋体外,其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体,其它字体浏览器也要能不兼容。
7、导航条必切。一般情况下导航条都是特别设计的,其效果在Dream Weaver下不能实现,因此必须形成切片供后期使用。
8、有效存储切片。存储切片的文件夹必须位于站点的根目录下,文件夹名必须是英文名字。存储切片时用“文件—存储为web所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式,JPG格式显示更多的图片细节。
当然,网页布局的设计软件的使用依设计者习惯、爱好、风格不同而不一样。笔者在此只是谈一下一般的规律,以供广大网页设计初学者参考。

与ps网页布局设计相关的知识