?
当前位置:什么方法买平特肖最准 > PS教程 > 设计教程 >

PS制作一款科技感的立体插图

  • 2018-06-14 21:40
  • 来源/作者:UI中国/吧唧设计
  • 己被围观 次

什么方法买平特肖最准 www.2lw28.cn 本教程主要使用PS制作一款科技感的立体插图,教程主要通过分解的方式来告诉大家如何完成效果,推荐给PS家园的朋友学习,希望大家可以喜欢。

先把最后的效果图抛出来。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

本教程主要使用Photoshop绘制立体感的科技图形插画,教程主要通过分解的方式来告诉大家如何完成效果,推荐给PS家园的朋友学习,希望大家可以喜欢。

 

step1:那么,看见这张图,先分解,即它是由哪几个部分构成的呢?

大背景

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

透视的背景线

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

立体图

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

以及一些周边的按钮之类的。

step2:背景制作

直接选择矩形工具,拉渐变。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

接着选择椭圆工具,画一个填充白色的正圆,设置其羽化值。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

好了,背景完成了。
 

step3:背景透视的线了,这个地方我用的方法比较笨,所以画了好久好久好久好久~

先用矩形工具画一个矩形,填充去掉,描边2px

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

接着,根据需要的点配合钢笔工具的加减锚点以及小白(直接选择工具)进行锚点的一对一修改。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

然后用相同的方法拼出来一整个背景线条

画好后,ctrl+G进行编组,并复制一个组,命名背景-线,第一个组隐藏掉。(这个操作是备份,以防后续需要进行修改)。

接着,在复制的组 背景-线 右键 - 转为智能对象,并进行颜色叠加。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

接下来进行透视操作,先快捷键ctrl+T,将图旋转45度,如下图:

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

旋转45°后,再次右键,选择扭曲,并操作

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

那么,背景就完成了。

 

step4:立体的图了,这个我们需要先把层分出来,就跟刚刚对整个画面分层是一样的道理,先来看第一个。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

将元素组合起来,就是模型01的样式了。

接下来看一下有光的效果的是拆分。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

剩下的就是叠加上去,凹进去的可以创建剪切蒙版,快捷键ctrl+alt+G

等几个图形都制作完毕后,就进行一下整体的调节,添加一些周边的东西。剩下还有一个按钮,叠加了两层,原本考虑直接用内阴影,效果不理想,于是就分两层来做了。

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

最后,成品啦!

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网

附上一张应用立体感觉设计的图,放在网页上面,网站看起来就比较专业啦~

Photoshop绘制科技感十足的网页立体插画,PS教程,思缘教程网
好了,教程到这里就完了。



最后,给大家安利一个立体像素图片生成工具

神器种草01:10个有毒的设计神器
 

》开发者:@pissang

》工具地址:pissang.github.io/voxelize-image

你看,这比刚刷完的厕所地板还要亮丽的效果,居然是一个在线工具一键生成的,完爆那些打开都要半天的专业 3D 软件??!

神器种草01:10个有毒的设计神器

Voxelize Image 还提供超多参数配置,但个人用得比较多的是金属材质选项:

神器种草01:10个有毒的设计神器

如果你觉得金属感太强,可以试试把【roughness】参数调大,画风马上就突变了:

神器种草01:10个有毒的设计神器

比起 blingbling 的金属质感,这种画风在日常设计中更常用,比如,我把一张招聘海报拖拽进来,一秒钟就生成了一张3D立体字海报了:

神器种草01:10个有毒的设计神器

放大看看细节,少了金属反光的刺眼,多了几分朴实的像素感:

神器种草01:10个有毒的设计神器

即使放大到局部,细节也不会丢失,反而更加丰富:

神器种草01:10个有毒的设计神器

如果你导入的是一张色彩丰富的图片,层次感就更加鲜明了:

神器种草01:10个有毒的设计神器

放大让你们感受一下:

神器种草01:10个有毒的设计神器

再换个8倍镜,一张抽象的背景素材秒 get:

神器种草01:10个有毒的设计神器

》案例参考

现在你还担心自己的配图不够酷炫吗?我们都能冒充3D大神了:

神器种草01:10个有毒的设计神器
神器种草01:10个有毒的设计神器
神器种草01:10个有毒的设计神器

最后的最后,小编想说,我们站长大大还有一个3D相关的网站。www.cgahz.com  如果你对3D这块感兴趣就访问一下看,说不定有意外收获。

 


(责任编辑:极限)

*www.2lw28.cn 倾力出品,转载请注明来自PS家园网(什么方法买平特肖最准 www.2lw28.cn)

分享到:

更多精彩内容

  • 电商产品PS修图:金属质感 电商产品PS修图:金属质感
  • PS打造变换颜色中特效汽车 PS打造变换颜色中特效汽车
  • PS制作一款科技感的立体插 PS制作一款科技感的立体插
  • 图文排版设计的8大神奇法 图文排版设计的8大神奇法
?
  • 江西省“放管服”改革再出实招 2018-09-26
  • 車·晓 第28期 換帥救市立桿見影? 2018-09-26
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2018-08-29
  • 用双脚书写无悔的人生 2018-08-29
  • 德味手表了解一下 徕卡推出L1,L2机械表德味手表徕卡推出L1-手机行情 2018-08-13
  • 在学习中进步。[奋斗] 2018-08-13
  • 网上也能搜到各地的房价。北京还有十八万多一平米的房子。 2018-08-12
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2018-08-11
  • 南京整合科技园区构建4+4+1 主导产业体系 ——凤凰网房产北京 2018-08-11
  • 【我奋斗 我幸福】王静:努力寻找光明 2018-08-10
  • 空军首支歼20部队开展多型新机编队协同战术训练 2018-08-09
  • 西藏去年1705个贫困村实现脱贫 2018-08-08
  • 二手房办证5个工作日搞定 2018-08-08
  • 国务院关税税则委员会发布关于对原产于美国500亿美元进口商品加征关税的公告 2018-08-07
  • 山东前外援抹黑CBA后欲回归 网友 没职业素养别来 2018-08-07
  • 501| 295| 173| 481| 869| 401| 592| 732| 636| 835|