PS新手设计网页：简单大方易上手

2016-03-19 02:06 18 1 收藏

下面图老师小编跟大家分享PS新手设计网页：简单大方易上手，一起来学习下过程究竟如何进行吧！喜欢就赶紧收藏起来哦~

【 tulaoshi.com - PS 】

PS新手设计网页：简单大方易上手图老师提供

最终效果

PS设计网页效果图

一个好的设计大多来源于在纸上的构思.所以我们要养成在一张纸上构图.你可以用铅笔,来自由的构造一个粗略的布局.

PS设计网页效果图

规画出一个线框也有助于我们了解一个网站的层次结构,并可以深入的了解最佳设计的位置.

PS设计网页效果图

1.在PS中新建一个文件,设置如图.在设置网站的尺寸时,看下主流的显示器是多大,这样可以让网站的整体设计更加的友好.

PS设计网页效果图

2.在文件中心部分添加辅助线,使其宽度为960px.然后再新建一个基本的网格tulaoShi.com让项目对准

PS设计网页效果图

3.新建一个图层来做网页的导航.给其一个宽度,然后填充白色. 双击这个图层打开图层样式表,先择颜色渐色为:灰色渐变为白色 ,点确定.

PS设计网页效果图

4.新建一个图层来做头部展示的部位.先矩形选区画出给定的宽度,然后填充渐变两个具有活力的颜色.再为其添加个内阴影让它看起来更有深度.

PS设计网页效果图

5.细腻的纹理质感,能给一个设计带来画龙点眼的效果.选择头部展区图层按crtl+J复制副本,选中副本滤镜--杂点--添中杂点,如图.混合模式:叠加,减小透明度得到效果.

PS设计网页效果图

6.在导航上增加公司的LOGO,然后添加图层样式,添加一个渐变, 颜色选择和头部相匹配的,然后再加一个内阴影的效果.

PS设计网页效果图

7.新建一个图层,选择文字工具,颜色先中灰色然后在导航上打上文字.给链接的颜色可以选择深一点.

PS设计网页效果图

8.在头部设一个地方,来介绍网站的特色.为标题选择一个合适的字体大小,最后给文字加上阴影.

PS设计网页效果图

9.继续完成内容,这次我们文字用arial或helvetice字体,这样可以使HTML识别,而不成图片来替换,这样可以增加网页的下载速度

PS设计网页效果图

10.在头部加一个笔记本电脑,这样正好服合一个虚构公司的性质 ,创建一个重点的区域来显示在网站在笔记本中的效果.

PS设计网页效果图

11.为了强调笔记本,可以做出一个渐变的效果来吸引浏览者的目光.

PS设计网页效果图

12.新建一个图层,渐变一个灰色到白色的效果.然后把图层放在笔记本的后面. 13.在展示头部的下面,新建一个图层,用矩形选框画一个距形,最后为其渐变一个由灰色到白色的效果.

PS设计网页效果图

12下一页

来源:http://www.tulaoshi.com/n/20160319/1901124.html

上一篇： PS网页设计:新手入门制作流行漂亮导航
下一篇： Photoshop给EVA美少女战士线稿上色教程

看过《PS新手设计网页：简单大方易上手》的人还看了以下文章更多>>

PS设计网页产品展示类蓝色系主页教程

标签： PS PS基础 ps平面设计教程 ps去水印教程

来源：优设作者：Joe译制作一个好的网页，需要花费大量的时间，包含的内容也是非常多的，其中有按钮、横幅、图标及其它素材等。制作的时候先规划好大致的框架，然后由上至下慢慢细化各部分的内容，注意好整体搭配。最终效果 1、在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一...

CSS设计网页头部的写法

标签： Web开发

在div+css布局中，一般都这样来整体构架的： div id="header"/div div id="center"/div div id="footer"/div 而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏： div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这样写...

PS设计网页的一些注意事项

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

David Everly 给出了在Photoshop设计网页过程中，一些有用的建议。 01 使用网格系统网格系统能够在网页设计的时候少了很多头痛。试试这些免费的资源吧，比如Cameron McEfee’s GuideGuide Photoshop extension 或者 Grid System Generator ，会让你使用网格的时候更方便和准确。 02 都摆上来实现成功的网页设计和时间管理，有...

Photoshop设计网页丝带样式教程

最终效果图 1.创建一个新文档(Ctrl + N)1000×450像素。丝带分为三个部分，边缘，褶皱，以及标题面。 2.选择以下设置中的钢笔工具(P)。 3.现在开始用钢笔工具绘制的丝带的边缘(1)左侧，边缘应该有弯曲褶边的边缘。 4.绘制主体部分的时候使用直线钢笔，会比较容易一点。 &...

CSS基础：设计网页常用规范详解

标签： Html CSS布局 Div+CSS XHTML

CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header 内容：content 容器：container 页脚：footer 版权：copyright 导 ...

查看更多精彩>>