PS设计网页:视觉效果系的网页(含PSD源码)

2016-03-19 02:04 24 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐PS设计网页:视觉效果系的网页(含PSD源码),无聊中的都看过来。

【 tulaoshi.com - PS 】

提示:效果很漂亮,布骤也很细腻,一步一步的操作。

先看下效果吧!

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

素材----右键另存为





    第1步:创建一个新文件(按Ctrl + N   )大小为1200px,750px 。然后背景颜色选择渐变工具( G   )从#792700到#000000从顶部向底部的文件。



第2步:创建一个新层,选择画笔工具(B组),选择一个软刷直径300px和添加一些颜色您布局。我用红色,橙色和蓝色命名此层"color"。


第3步:添加一个纹理的背景。右键单击该层,并选择转换为智能对象。然后进入过滤器艺术胶片颗粒和使用的设置以下的形象,然后进入过滤器“ Pixelate ”马赛克,并再次使用设置以下设置混合模式为这层差异,不透明度为30 %   ,并将其命名为"texture"


第4步:创建一个黑色的背景,创建一个新层,选择圆角矩形工具( ü )   ,设置半径为3像素,并创建一个圆形黑色矩形。然后双击在此层,打开图层样式窗口的设置和使用的下列图像阴影。设置这一层不透明为70 % ,并将其命名为"black   shape"


步骤5:使用组编制织您层按住Ctrl键并选择所有图层您创建到现在,然后将它们组合(或Control + G )   。名称为"background."
   

第6步:创建更多的组。创建一个新组,并将其命名为"home" 。   然后创建另一个组,并将其命名为logo。



第7步:添加一个标志和口号创建一个新的层内的“标识”组。然后选择文字工具(T)和写的名称布局使用颜色#f4f4f4   。双击该层,打开图层样式窗口的设置和使用的下列形象。然后创建一个新层和写标语用的颜色#eeeeee   。



第8步:“注册”和“登录”按钮现在我们要建立两个按钮在右上角。创建一个新组并将其命名为“Sign up |   Login”。然后选择圆角矩形工具( u   )和创建一个圆角矩形。双击形成的层,打开图层样式窗口的设置和使用的下列形象。设置前景颜色为白色,使用文字工具( T )的输入 “Sign   up | Login”的按钮。设置不透明的文字层至75 % 。




    第9步:创建一个新组并将其命名为“Navigation”   。创建一个新层,选择单列选框工具,然后单击您的文件后,创建一个高度1px 。填补这一选择颜色# 406f94   。设置这一层不透明的40 % ,并将其命名为“Line” 。


第10步:创建一个新层,选择矩形选框工具( M   )和创建一个选择,辅助线。然后选择渐变工具( G )从# 35423e到透明,从底部到顶部拉。然后按Ctrl +   D键取消。然后进入过滤器 “噪音 ”添加噪音和使用的设置下面的图片。命名此层“gradient”   ,并留下一个距离1像素。

步骤11:写你的名字布局的网页选择文字工具( T   )和写的名字,你的布局的页面在导航栏中。然后双击文字层,打开图层样式窗口的设置和图老师使用从明年形象。字体我用被称为灰度基本法。



    步骤12:现在我们要创建一个分隔符。创建一个新层,选择单柱选框工具,然后点击一次您的布局。然后选择矩形选框工具(m) ,点击“   ,它们与选择”按钮,选择律师,并建立一个选择,如从明年形象。填补选择白色,然后按Ctrl + D键取消。



第13步: 打开图层样式窗口的设置和使用的下列形象。命名此层的“line 1”


    步骤14:重复“ 1号线”层(按Ctrl + J   )条和命名新的层“line 2 ”选择移动工具( V )一次右箭头,然后双击在“line 2”层,打开图层样式窗口设置。

  

第15步:按住Ctrl键并选择“line 1”和“line   2”层。然后右键单击其中之一,并选择转换为智能对象。姓名智能物体“separator ”
   

第16步:在“separator”层下方创建一个新层。选择矩形选框工具(M)   ,创建一个选择就是这样从以下图片和填补它的颜色#35423e 。右键单击该层,并选择转换为智能对象。进入过滤器“模糊”高斯模糊。然后进入过滤器   “噪音 ”添加噪音,并再次使用的设置以下的形象。设置这一层不透明的60 %   ,并将其命名为“highlight”

  
  
  
  
  第17步:层单击“separator”层在图层调色板以选中它,然后转到图层“图层蒙版”显示所有。选择渐变工具(   G )从黑色到透明梯,从顶部到中东的拉渐变。


步骤18:按住Ctrl键并单击“separator”和“highlight”层的图层调色板选取它们。然后选择移动工具(V)   ,按住Alt和Shift键,然后单击您的文件并拖动鼠标。现在你已选定复制图层。使用移动工具V)   ,重复此步骤,创造尽可能多的分隔。

  

步骤19:选择所有的“separator”和“highlight”层的图层调色板和然后按Ctrl + G 组名   “separators”

  

步骤20:现在我们要创建一个背景下的积极菜单页面以区别于其他人。选择矩形工具( u   )和创建一个矩形。将此层放在文字层的下方,双击这一层的设置。然后将其命名为“active menu” ,并设置其不透明度为50 %   。

  

步骤21:创建一个新组,将它命名为“search”并把它放在 “navigation”组的上面。选择圆角矩形工具( ü   ) ,设置半径为3 PX和创造一个圆角矩形,我没有使用颜色# 104f59 。 命名此层“text field”   ,并设置其不透明度为80 % 。

  

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)12下一页

来源:https://www.tulaoshi.com/n/20160319/1901093.html

延伸阅读
标签: 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 很多人一般都这样写...
最终效果 下载原文件 Demo 在这个设计教程中,我们将要使用Adobe Photoshop创建一个简洁、优雅的个人概要的网站界面,适合在手机或者ipad中浏览。在这个教程中,我们将要接触到以下元素:简单形状(矩形、线条、箭头等等),图层样式(很多)、字符、段落样式以及许多你可以应用于你的界面设计中的设计技巧和Photoshop技巧。完整...
本教程用到了渐变,自定义形状等,并不是很复杂,细心按步骤操作,应没什么难度. 最终效果图: 首先,新建一个800× 800px的画布,用渐变工具拉出垂直渐变,颜色系数在图内给出。 www.Tulaoshi.com 画布将成为这样(水印效果为小Y翻译时加上,作者原图无): 新建图层,用圆角矩形工具在中间拉出一个矩形,填充任意颜色,在图层面板里...
有问题论坛讨论 先看效果图 第一步 — 下载960网格模板 我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前,先下载这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的,一个是按12栏分布一个按16栏. 更详细...
最终效果 1) 利用圆角矩形工具建立一条路径;使用转换点工具移动左上角路径节点,使其产生卷页的形状; 2) 用任意一种色彩填充工作路径;再复制下半部分;对其添加图层样式,如图所示. 3) 用任意一种色彩绘制一个圆角矩形;将其图www.tulaoshi.com层移至红色矩形之后;添加图层样式,如图所示. 4) 再新建一层,绘制圆色矩形,颜色为黑...

经验教程

48

收藏

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