ps网页设计教程 精 ps网页设计教程

ps网页设计教程 精——简介
ps网页设计教程 精 ps网页设计教程

设计网页的方法很多,常见的有直接编写代码方法,利用可视化软件设计(例如DreamWeaver)法,利用中间软件实现格式转换法(例如Word生成HTML代码),还有就是PS设计网页法。综合各种设计方法的优缺点,可以得出利用PS设计网页通常可以达到意想不到的效果,这不只是取决于他可以随意布局图片,更得意于其专业的图像处理能力。下面小编就给大家展示一下PS设计网页的独特之处。

ps网页设计教程 精——工具/原料

Adobo PhotoShop 7.0

IE浏览器

ps网页设计教程 精——方法/步骤

ps网页设计教程 精 1、

打开PS,新建空白文档,名称设置为“feifei工作室”,从预设大小下拉列表中选择 “1024 x 768”,模式设计为“RGB颜色”,内容设置为“白色”,点击“好”按钮完成文档的创建工作。


ps网页设计教程 精 2、

新建一名称为“框架”的图层,利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”,然后将矩形的宽度设置为1024,高度设置为80,在文档的上下两侧各框选一部分内容并填充为黑色,从而使整个网页呈现“宽屏幕”效果。


ps网页设计教程 精 3、

在背景图层的上方新建一新图层,并命名为“背景颜色”。点击“矩形选择工具”,设置“宽度为400,高度为768,然后在窗口的左侧框选一部分内容,填充一种深绿色。然后点击“矩形选择工具”,设置“宽度为624,高度为768,然后在窗口的右侧框选一部分内容,填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色,目地是产生较为明显的对比。

ps网页设计教程 精_网页设计教程


ps网页设计教程 精 4、

在“框架”图层之上再新建一图层,名称为“主体元素”。打开一张事先准备好的百合花图片,双击“背景”图层将其转换为“图层0”,点击“魔术棒”工具,在图片白色区域内点击,选择白色区域后,按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上,位置如图所示。

ps网页设计教程 精_网页设计教程


ps网页设计教程 精 5、

然后选择“矩形选择工具”,设置“宽度为624,高度为768,然后在窗口中选择花朵右侧的一部分内容,并调整其亮度和对比度,使花朵的左右两侧呈现明显的对比。

ps网页设计教程 精_网页设计教程


ps网页设计教程 精 6、

对该页面进行细节的调整,增加一些导航栏,信息提示内容和版权信息等内容,最终制作完成的页面如图所示。


ps网页设计教程 精 7、

选择“切片”工具,然后对内容进行切分。切分的好处是有利于文件在网络上传输,同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果如图所示。

ps网页设计教程 精_网页设计教程


ps网页设计教程 精 8、

找到保存文件的位置,打开"feifei工作室.html"文件,然后在内容区域内点击鼠标右键,选择“查看源文件”,就会发现对应的网页内容已经生成。至此,利用PS设计网页内容完成。

  

爱华网本文地址 » http://www.413yy.cn/a/25101010/42130.html

更多阅读

PS文字特效教程:设计超酷的火焰效果金属字

本教程详细介绍超酷金属字效果的制作方法,思路:作者巧妙的把金属字跟火焰字效果结合起来,金属的高贵加上背景火焰的衬托,感觉非常壮观。PS文字特效教程:设计超酷的火焰效果金属字——工具/原料photoshop软件PS文字特效教程:设计超酷的火焰

图文教您轻松学会用PS设计制作名片 学会估值 轻松投资

图文教您轻松学会用PS设计制作名片——简介 在工作交际中、会见客户、接待客户等场合,呈上自己的名片,给人留下一个好印象,争取保持联系,个人感觉,名片的设计要已简约大方为主,雅而不俗,才能给人留下不错的印象。今天咱们就学学如何用Photo

怎么用PS网页切图 网页开发程序员招聘

怎么用PS网页切图——简介 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS,这里主要向各位介绍怎么使用PS进行网页切图。怎么用PS网页切图——工具/原料PS CS5

如何网页设计 网页设计需要学什么

如何网页设计——简介在你浏览互联网时,有没有一种冲动想要自己做一个精美的互联网页面?在你听到淘宝,京东等著名厂商每年近似疯狂的交易额时,会不会也想要做网上商店?在你听到互联网上日益增多的职位需求时,是不是也想要将自己的个人信

PS字体 photoshop字体设计教程转~编 photoshop字体教程

photoshop字体设计教程:字体需要设计设计印刷物,要面对大量的字体排版工作。如何使文字内容更加吸引读者,这就需要运行字体设计。由此可见,字体设计是十分重要的。1. 熟识文字文字是一民族,文化的象征。文字是记录信息符号,起着传达信息的

声明:《ps网页设计教程 精 ps网页设计教程》为网友给我关心和宠爱分享!如侵犯到您的合法权益请联系我们删除