怎样在ps中制作网页设计稿

2017-11-13 17:04 81 1 收藏

一个网页一般为上中下三级结构,上部为网站的标题及导航区,所谓导航也就是常见的栏目菜单。中部是网站内容的正文。底部则是网站的版权声明及其他说明。怎样在ps中做呢?

【 tulaoshi.com - 网页设计 】

    现在我们来制作一个简单的网页设计稿。设计稿如下图。

1.PNG

    新建一个640×480的白底图像,然后使用形状工具的矢量方式13-4 实战网页设计稿,画出一个长方形。这个长方形本身具有4个锚点,我们使用锚点添加工具,在长方形的上边和下边分别各增加两个锚点,这样矩形就有了8个锚点。现在使用直接选择工具选中位于右侧的上下4个锚点,将它们整体向上方移动些许。形成一个带拐角的S形。

过程如下左图所示。完成后使用直接选择工具将两条垂直边分别向左右端移动达到画面边缘,如下右图所示。

2.PNG

    再将我们之前做好的文字和徽标放进来,排列在左端的位置,大致如下右图。下方的小文字使用的是“准圆”,大家也可使用其它的字体。只是注意在字号比较小的时候,要尝试各种文字抗锯齿方式,找到最合适的。图示中是采用了“犀利”。但依据字体的不同,这个设定也许也会不同。

3.PNG

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/wysj/)

    在组织了一些物体之后,设计稿的整体性就逐渐突出了,此时有必要将各元素进行一次协调修改,以达到最好的配合。现在我们就来进行第一次的协调修改。如下左图,将大师之路用自由变换工具压扁一些;将徽标缩小一些;增大小文字的间距;所有文字和徽标整体略微向下移动一些;将遮挡了栏目菜单拐角的人物往左移动些许。当然这些修改都并不是必须的,大家完全可以按照自己的想法去修改。创意是没有正确与否的区别的。不必过分在乎别人的评价,只要你做出来的作品表达了你目前想要表达的效果,那就是成功的。

4.PNG

    现在图层的数量也逐渐多了起来,此时就要注意加强管理,否则越到后面数量越多。如下图,将除背景层外所有图层组成一个“Top”组,Top表示顶部的意思,然后再将所有的栏目文字组成一个组。从层次上来看,栏目文字组只要不是位于“栏目背景”层之下,在任何层次都可以正常显示。但出于相关性原则,我们还是将其与在“栏目背景”层相邻。这样也有利于今后的快速查找。图示中因为我们采用了无缩览图的方式,因此为了让大家看图方便,给每一个图层改了名字。实际操作中不必如此。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/wysj/)

5.PNG

来源:http://www.tulaoshi.com/n/20171113/2765660.html

延伸阅读
标签: Web开发
在做项目开发时遇到了一个怪异现象整段内容被重影的问题,一般来说这类问题在IE6中表现的比较多,但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题,但此时的页面却是没有任何注释~,持续地测试分析问题变得越来越有趣了 测试结果为当不适当地使用float:left/right; width:100%; displa...
标签: PS PS基础
先看看效果图 首先呢,把你做好的UI界面盖印(ctrl+alt+shift+e) 然后选中图层1,3D从所选图层新建3D,然后你就会进入PS的3D界面。进去之后你会发现,有很多的参数,就这个问题而言,要用到的参数很少。 首先,点击图层一,然后在凸出深度这个参数里面修改成5(根据情况自定) 然后再选择无限光,把投影前面的勾去掉 以上...
标签: Web开发
在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”,网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制...
标签: Web开发
1、灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样...
不同的网站规模决定了网站的制作流程,对于规模复杂或细节较多的网页或界面设计来说,用户使用的流程体验可能要在设计之初就考虑进去,而作为一个团队来完成的项目,必须让每位团队成员都了解整个设计产品的流程关系,所以就出现了流程图设计,虽然并不是每个网页与界面设计都需要流程图,不过作为一个网页设计师是有必要了解这一环节的,以下...

经验教程

790

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部