导航:首页 > 万维百科 > 用photoshop做一个网页设计

用photoshop做一个网页设计

发布时间:2020-09-21 03:52:19

1、教您怎样用Photoshop制作一个漂亮的网页

第一步 首先新建一个文档。我创建的是宽1100px高1100px的文档。这个文档可以用于宽为1024px的站点,仍然还有空间去决定在可视区域之外如何布置,这样在更大屏幕下也很好的适应。

现在第一步先创建一个美观抽象背景。我们使用从#1b204c到#472373这两种颜色按照线性递减绘制背景。

第二步 现在我们要一个吸引眼球的背景,足够抽象到不会干扰人阅读文字。很走运,在GoMedia’s Arsenal站点里有一张很棒的免费水彩图片,点击“freebie(免费赠品)”区,你就能找到两张水彩图片;我们要的是绿色那张。

现在这样很开心了,你按下CTRL+I将图片反置,会在黑色为底的背景上呈现漂亮的粉紫色,这样就更酷了!

第三步 现在把处理过的水彩图片拷贝到主画布上,按下CTRL+T键,将其调整到适当大小。这里我们要将右边淡化为黑色(这样在后面我们可以更方便地编辑我们的 HTML代码)。另外,我们也不想在竖直方向过长,因此最好擦掉一些超出的地方。选取一个画刷,选用黑色擦去底下部分。

注意最好选取带有一些纹理的画刷,这样擦去部分不会显得很明显。如果你向下滚动画刷列表,有一个Photoshop自带的像图例中的画刷。这个画刷也能用,当然你可能有其他更漂亮的画刷,用起来更加自如。

你选中以后,在右边和底下区域黑色填充,这样这层就覆盖在整个画布上了。

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、用photoshop制作的网页要怎么用dreamweaver制作二级页面 至少要有两个链接!

你想在dreamweaver制作二级页面,就在dw中新建一个页面制作。具体步骤是dw菜单中的文件,新建,页面类型选html,点击创建按钮就创建了一个空白页面。在这个空白页面上做你要得二级页面效果。
给你举个例子:一级页面是网站首页,导航中有一个“联系我们”,你现在要做的二级页面就是“联系我们”这个页面。在dw中新建一个页面,做成你需要的效果,然后在dw中打开一级页面(网站首页),在导航“联系我们”这几个字或者图片加个超链接,链接到你刚刚做好的二级页面即可。

4、photoshop在网页制作的作用

首先,做网页设计为什么要使用photoshop,photoshop是一个图形图像处理软件,而且是可视化的操作,可以让设计师更方便的进行操作。那有人会说Firworks可以设计网页吗,答案肯定是有的,因为Firworks也是图形图像软件,只是根据个人的操作习惯了,另外一般Firworks给人的印象是一个只会做GIF动画的软件,可能是对软件的偏见吧,现在绝大部分做网页设计都使用PS。从软件的角度来说,PS的功能会比FIR要强大许多!

从软件的界面的设计,到软件的实用性,以及特效的制作上,都有着不可超越的特性,而且photoshop还在不断的升级过程中,现在最高的版本是CS6,它不仅仅可以实现网页设计的制作以及平面设计效果图的制作,还可以制作GIF动画以及3D效果图!

做为做网页设计的平台,photoshop起着至关重要的作用,做网页设计,首先必须要有一个自己足够熟悉的平台,而且在操作上要有效率,后期做网页设计,效率是一个非常值得关注的问题。

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

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

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

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

6、怎么使用PS制作一个网页

你好!
准确的说,ps是制作网页的其中一个软件之一,制作网页有专用的“网页三剑客”:PS、DW、flash。
想要做网页的话,你起码要会前两个,其中
ps在网页制作里面的作用主要就是:划分切片+图片处理。

划分切片:就是将你在ps里面做好的网页版面进行合理的划分,划分为一个个小的切片,然后用DW对这些切片进行布局。

图片处理:这个很好理解,就是对网页图片进行优化+处理,以节省空间和达到你想要的图片效果。

最终的网页文件是在DW这个软件里面完成的,单靠ps做不出来一个完整的网页。

7、如何用Photoshop做网页设计

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

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

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

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

8、如何用Photoshop制作网页模板

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

9、用ps做网页尺寸一般是多大

网页分为主区和背景区,主区一般是950px~980px的宽度,高度没限制。背景区你可以按到1920px的宽度来做,适合适应不同的显示器。
这方面你要和写CSS的人沟通一下,他会告诉你什么叫主区什么叫背景区。

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

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

与用photoshop做一个网页设计相关的知识