教你用PS打造网页效果图全过程

2016-01-29 22:40 892 1 收藏

教你用PS打造网页效果图全过程,教你用PS打造网页效果图全过程

【 tulaoshi.com - PS 】

  平面广告和网站页面设计的宗旨就是吸引眼球,符合平面视觉冲击特点,如何设计一款有特色、另类能吸引眼球的作品是摆在平面设计人员和photoshop爱好者面前的难题

  现在以一款网页平面设计效果图为实例,讲解网页设计方面的创意知识,从网页效果图布局创意、颜色选择,裁减效果图和制作网页特效等方面来学习。下面我们就一起来学习吧。

  首先声明一下,这款网页效果图在得到朋友许可后拿来制作教程实例,切勿抄袭和用做其他用途。先看效果图0。

photoshop打造极富创意网页效果图
(图1)

一、 创意设计思路

  一个网站在制作前需要确定网站风格、网站主题、和主色调,在没有确切的方案之前,最好不要贸然动手制作,不然最后的结果很可能是以失败而告终。
  
  笔者决定从关键字"路行""独自行走"加上是暗色系的要求上下手,敲定颜色采用沙漠黄,沙漠很容易让人联想到孤单;板式确定为户外广告的样式沙漠黄配合生锈的广告牌。符合"颓废""艰辛路途"主题。

  二、 网站效果图及LOGO的制作。

  1、LOGO的样式采用的是图形和字符的组合。汉字LOGO的字体不是下载的字体,是笔者用钢笔工具画出来的字体。如图1和1-1。

photoshop打造极富创意网页效果图
(图2)

  钢笔工具勾勒出图1的行走的人样式,填充红色,然后调整混合模式"斜面和浮雕"选择浮雕效果、雕刻清晰、深度1、方向上、大小2,其他默认。这LOGO 的创意是,一个人在崎岖不平的路上坚持自己的方向,配合网站的英文加中文名字,构成一个形象LOGO,刚好"路"字和"行"字采用红色,突出了路行。
  

photoshop打造极富创意网页效果图
(图3)


  文字LOGO笔者用钢笔工具勾画出字的各个部件,然后拼接在一起,这里只给出"路"字的方法,"行"字方法如同。[next]  

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

  2、制作布局参考图。如图2。

photoshop打造极富创意网页效果图
(图4)

  3、根据布局效果图,新建文件大小1000X765,填充黑色。布局中的"显示区域"为广告牌是要挂到墙上的,使用"石头材质"放置在页面最上方来制作石板墙;使用"锈迹皮革材质"制作"显示区域""LOGO"区域的边框(注:一些材质的制作方法省略,平时可自行制作也可去图片站下载保存,用的时候方便),将LOGO区域的边框复制一层,调整不透明度为60%放置到LOGO曾下方,这样大体的框架就完成了。如图3和3-1。
  

photoshop打造极富创意网页效果图
(图5)

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

photoshop打造极富创意网页效果图
(图6)

  4、找来一张沙漠公路的图片,把这张图片进行聚焦处理。点图4示例的按扭进入"以快速蒙版编辑模式",选择渐变,渐变模式为"径向渐变"在图中间向两边拉,屏幕会出现一团红色;然后再点"以标准模式编辑"画面会出现一个圆圈选择区域,按"DELETE"删除即可。如图4和图4-1。

photoshop打造极富创意网页效果图
(图7)

photoshop打造极富创意网页效果图
(图8)[next]
  

  5、在"路"图片上方新建一层,按住CTRL+"路"图层,单击新建的图层,填充颜色4E341B,调整为暗系沙漠黄。如图5。

photoshop打造极富创意网页效果图
(图9)

  制作文字LOGO牌。找来图5-1中的灰色材质,在"LOGO边框"下面新建一层,然后在其之上新建一层,放置沙漠图片,将其混合模式修改为"颜色"然后打开一开始制

来源:http://www.tulaoshi.com/n/20160129/1513893.html

延伸阅读
标签: 淡妆 彩妆 化妆
韩式淡妆的打造全过程 韩式淡妆打造全过程 1、脸部彻底清洗干净,然后如图一样全部大面积垫上隔离霜,然后使用手掌心的温度全部按压脸部。 2、使用粉刷上轻轻的挤上少量的bb霜,从脸颊的从内到外的慢慢晕染开来。 3、这一步就是针对那些脸部有瑕疵,眼角下方有黑眼圈的女士们比较实用,直接使用遮瑕膏轻轻的点在需要...
效果图  操作步骤 1 先画一个圆形的路径。 (调整图形,以便使它看起来更像个在下降水滴状) 。 设置填充颜色 Fill Color to #CCCCCC  线条颜色Stroke Color to #B1B1B1 2 仍然选择目标,改变填充类别,使用放射性渐变|径向填充,改变填充颜色如图所示。(Color1 = #FFFFFF, Color2 = #CCCCCC) 3 现在我们需要添加...
标签: FLASH flash教程
本文由 妖妖灵 原创,转载请保留此信息! 先看下效果图: [1] 200806/13014_2.html'>[2] 200806/13014_3.html'>[3] 200806/13014_4.html'>[4] 200806/13014_5.html'>[5] 200806/13014_6.html'>[6] 200806/13014_2.html'>下一页 这是我自己拼凑出来的一个效果!! 非常的简单! 不知道以前是不是...
原图 效果图 1 效果图 2 1、在PS打开素材图,修图的第一步是找到图片存在哪些问题,然后采取某手段来纠正,观察图片除了用肉眼处,我们更准确的应该借助于PS自带的工具来观察,比如直方图,信息面板等,这就是所谓数字化调整。从直方图上我们看到像素大量集中在中间调区和暗调区,高光区几乎没有,所以照片偏暗。 ...
标签: 怀孕
胎儿发育1 - 子宫 胎儿发育2 - 从卵巢释放的卵子 胎儿发育3 - 受精 胎儿发育4 - 着床 胎儿发育Week 5 -形成胚胎 胎儿发育Week 6 -心脏跳动 胎儿发育Week 7 胎儿发育Week 8 - 脑部发育 胎儿发育Week 9 - 五官发育 ...

经验教程

86

收藏

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