1、ps网页设计教程
PS软件应用十分的广泛,修改图像,运用图层蒙版设计简单网页,文字排版,网页优化,包括导航图,网页底端的页脚,网页主题内容,特效文字的制作,动作按钮的设计等。今天一起来学习如何用PS来设计简单的网页这篇文章吧。
如何用PS来设计简单的网页
新建一个800X600像素的空白背景,颜色模式设置为RGB模式。RGB模式颜色是由红色,绿色,蓝色三种颜色相交构成,可以更好的显示网页中的色彩内容。
新建文件,点击确定,空白文件会自动显示在软件中。对于新建空白文件来说,图像的宽度和高度的大小要按照等比例进行设计,也可以不勾选重新定义新像素来实现。
打开一张车的图片,移动到白色背景画布中,选择圆角矩形工具,选择路径为了方便转换为选区,设置为5个像素,像素越大,圆角矩形的四个圆角就是更加的明显,然后选择渐变工具,选中系统自带的黑白渐变,修改黑白渐变的颜色,改为灰白,也可以设置前景色为灰色,背景色为白色进行渐变的填充,然后点击确定。
然后选择工作路径,鼠标CRL点击工作路径,设置为选区,选中线性渐变类型,然后画出渐变的颜色。渐变的方向是从上到下为白色到浅灰色的渐变效果图。
然后选择修改收缩2个像素,就是将选区收缩小2个像素,变小一些,然后再次从下向上渐变,然后alt快捷键复制2个,如图所示,然后找到车的一个的图标按钮,然后用磁性套索工具勾勒好,然后鼠标左键拉动到合适位置,然后选择3个图层,然后水平分布,和居中分布对齐。然后选择左对齐分布,分布均匀。分布按钮是在选择工具上方的工具栏中,有平均分布对齐等多个按钮。
然后再次用钢笔工具勾画另外一个车的图标,然后再用自由变换调整到合适位置,然后点击2个图层之后,进行左对齐分布。分布到形状中的最左边位置即可。
再次选择一个不同的车的图标设计图片,然后用钢笔工具进行勾画图标,或者为了方便,可以直接用魔棒工具来选择,选中其需要图形的一部分。
然后再次选中图形,形状图形,全部选中相应图层,调整水平分布和左对齐分布。当分布不均匀,可以按住鼠标左键自动进行调整。
所有的图标都自由变换,调整到合适位置,如图。按住crl+t来实现图形的自由变换的内容。如图
输入相应的文字,文字的颜色设置为黑色,将其三个文字图层,按住shift键和左右方向键进行移动调整来改变。之后将车的图片进行调整,便于观看,文字进行排版即可。
2、如何用ps设计网页?
?
3、如何用photoshop进行网页设计
你是想要在原来的设计下面加上一块空白,那可以选择“图象”-“画布大小”,在弹出的对话框中,先设置定位,如果在下面加长就点击向上的键头,这样就会在原图的下方加入空白,现在再输入设定高度数字就OK了!
4、如何用Photoshop做网页设计
如果是给个人做,怎么做都无所谓。如果是在公司里给客户做。这一步不可少,出了效果图后,要给客户看。等客户确定不再修改时再做网页,目的就在于防止客户反复修改,动布局!
另外会做网页效果图,代表你的设计能力。用dreamweaver直接做的后果是边想边做,容易把设计思路搞混了!
据我所知,这样的教程基本没有。因为做网页效果图只要基本的操作,有时从别的网页截一块下来处理一下,直接用到自己的效果图上。
一般显示器分辨率 宽:1024 高: 768 宽减去滚动条的宽度, 一般为1003-1004 不会有横拉条 高度 根据页而定
网页设计需要的PS操作技术并不是很多,只要掌握基础就行了。
但是你想要做好一个稿子就不是那么简单了。
这当中有一些天赋的因素,但是更多的是学习。
你可以从模仿别人的稿子开始,渐渐的融入自己的东西。
http://www.68design.net/
这个站每天都会有新的酷站收藏,也有设计欣赏。
http://www.zcool.com.cn/
这个站素材丰富而且也有酷站收藏。
要做好网页设计,一定要多看,拼命的看并且吸收里面的东西,看看高手们是怎么处理细节的,这样慢慢自然会有提高。
是否可以解决您的问题?
5、用PS做的网页设计如何做成动态网站效果
用PS做的是效果图,需要前端开发人员编写代码才可以在网站上展示出来。
简单来说,在PS里做好之后,需要切图。把图片切割成适合在网站上浏览。
切图时需要把文字分离出图片的要处理好。
切好图片之后,需要用html结合JavaScript等知识编写代码。
这样写出的页面还只是静态的网站。
如果想要做成动态的效果,还需要搭建后台,连接数据库等。
6、怎么使用PS制作一个网页
你好!
准确的说,ps是制作网页的其中一个软件之一,制作网页有专用的“网页三剑客”:PS、DW、flash。
想要做网页的话,你起码要会前两个,其中
ps在网页制作里面的作用主要就是:划分切片+图片处理。
划分切片:就是将你在ps里面做好的网页版面进行合理的划分,划分为一个个小的切片,然后用DW对这些切片进行布局。
图片处理:这个很好理解,就是对网页图片进行优化+处理,以节省空间和达到你想要的图片效果。
最终的网页文件是在DW这个软件里面完成的,单靠ps做不出来一个完整的网页。
7、用PS做一个网页设计图
挺简单的,现在fireworks中做下PSD图,然后在DW中处理一下就行了
我也有现成的,加些分留个邮箱可以发给你。。。。
网站分为好多类型,像个人主页、门户、论坛等,你可以选择其中的一个来做。。如果你是新手的话,那就做个个人主页吧,比较自由,做成什么样的都可以。。。。
如果你的程序搞的比较好的话,那就做个论坛吧、
8、如何在Photoshop中设计网页的网格
设计网页的网格方法1
第一种方法使用GuideGuide 卡梅伦McEfee建立垂直列。这Photoshop插件被认为是处于测试阶段,但是从我与它的经验的一切工作得很好,甚至有谈GuideGuide 2的发布,其中将包括更多的功能。GuideGuide页面上可以找到安装说明。还有一个使用它的视频教程是由罗素布朗一起在Adobe 。
成立于5秒您的网格
确定利润率列和排水沟宽度,数量。然后点击“创建指南”。
如果你设计样稿的画布宽,做快速的数学运算,使保证金长度要限制你的960像素的网格允许。例如,如果在画布是1200像素宽,然后左,右边缘将每个120像素。
例如12列设置为120像素的20万像素的排水沟和利润率。
您还可以设置基线网格这样,但你最终很多导游。一个更好的选择可能是方法上的一个有特色的的迈克贵金属的方法及工艺视频 ...
方法和工艺的可扩展的基线网格
这里是一个步骤的简要介绍设立一个可扩展的基线网格。
建立网格的基准值,然后创建您的图案模板。基线网格是由领先的正文中(或行高)。例如,如果您的设计的主体副本是在13点Helvetica,在18分的领先,那么你将成立一个18像素的基线网格。
创建一个Photoshop文件,该文件是您的基线网格的高度,填补了底部的像素,并留下其余的像素透明。在这种情况下,画布的尺寸将1个像素宽和18像素高。
“全选”,然后保存为一个新的模式。您可以通过编辑→定义图案...
转到调整图层→模式,并选择新创建的网格图案。
根据需要,调整不透明度。
列和基线网格1的方法的一个例子。
优点
你会得到一个可选的基线网格,您可以使用独立的垂直的柱网。基线网格,可以创建视觉上的混乱,当在顶部的设计样稿奠定。使用这种方法,它可以只在需要时进行切换。
如果你喜欢使用您的网格指南,这是更好的解决方案。
您可以隐藏和显示网格通过一个简单的快捷方式。
缺点
使用垂直参考线来标记文档中的其他元素,可很难,因为你可能会混淆他们与电网。
方法2相比,网格你的选择是不具体或全面(如设置的横向模块的高度)。
数学网格线的确定,不一定会配合像素网格。这意味着你的导游,可以在某些情况下,下降不均,并最终被定位实际像素的中间。
这种方法需要两个独立的进程相比只是一种方法,即将来创建一个垂直和基线网格,。
设计网页的网格方法2
模块化网格模式是所有功能于一身的的网格解决方案 。该工具创建一个垂直的柱状网格和基线网格所有作为一个模式 。采用模块化的网格模式有两种方法 :
除了对Photoshop 的应用程序面板,这也适用于烟花,GIMP和微软Expression设计 。请注意,您必须有最新的软件(Adobe CS5或等值的其他应用程序之一中)和本小组的互联网连接工作。话虽这么说,如果您已经创建了一个模式,并将其保存在资料库中,然后你就可以访问它,而无需任何其他 。
Web应用程序
浏览器,Firefox,Safari和Opera。Web应用程序使您可以创建一个网格模式和所有格式的浏览器直接下载 。
无论你选择,随便挑一个模块的宽度,排水沟宽度和基线数量,以及模块化的网格模式,没有休息。您也可以指定一个水平模块的高度。
9、教您怎样用Photoshop制作一个漂亮的网页
第一步 首先新建一个文档。我创建的是宽1100px高1100px的文档。这个文档可以用于宽为1024px的站点,仍然还有空间去决定在可视区域之外如何布置,这样在更大屏幕下也很好的适应。
现在第一步先创建一个美观抽象背景。我们使用从#1b204c到#472373这两种颜色按照线性递减绘制背景。
第二步 现在我们要一个吸引眼球的背景,足够抽象到不会干扰人阅读文字。很走运,在GoMedia’s Arsenal站点里有一张很棒的免费水彩图片,点击“freebie(免费赠品)”区,你就能找到两张水彩图片;我们要的是绿色那张。
现在这样很开心了,你按下CTRL+I将图片反置,会在黑色为底的背景上呈现漂亮的粉紫色,这样就更酷了!
第三步 现在把处理过的水彩图片拷贝到主画布上,按下CTRL+T键,将其调整到适当大小。这里我们要将右边淡化为黑色(这样在后面我们可以更方便地编辑我们的 HTML代码)。另外,我们也不想在竖直方向过长,因此最好擦掉一些超出的地方。选取一个画刷,选用黑色擦去底下部分。
注意最好选取带有一些纹理的画刷,这样擦去部分不会显得很明显。如果你向下滚动画刷列表,有一个Photoshop自带的像图例中的画刷。这个画刷也能用,当然你可能有其他更漂亮的画刷,用起来更加自如。
你选中以后,在右边和底下区域黑色填充,这样这层就覆盖在整个画布上了。