ps做手机计算机界面,【炼真金】PS如何做出这种有厚度的手机APP 界面图

news/2025/3/5 1:03:12/

原标题:【炼真金】PS如何做出这种有厚度的手机APP 界面图

一个效果有千万种实现的办法,在这里只提供一个最简单的思路,教大家用PS做出这种有厚度的手机App界面效果。

最终效果图:

e8597f4ce0ed4a9680737c8ad0ccbc80.png

以苹果5S的尺寸为例。

步骤1、新建一个画布尺寸为:640*1136,然后保存,命名如:5S效果图模板

dcedf5d0f96ffd2b915d07eca1b96e81.png

6817ba7168ed43acc1277eb9d4dde072.png

步骤2、再新建一个画布,命名为效果图展现

99db3aac276c8d7321760999c4609fec.png

尺寸随意,可以大点,自己看情况吧。

步骤3、将刚才保存的那个5S效果图模板.psd拖到这个画布中。

bf5e1d1fef281f7d7ef795d0b97650e1.png

Ctrl+T变换到合适的尺寸,倾斜到合适的透视效果。

8206c1287edac1638a9cc457abccf288.png

步骤4、然后双击”5S效果图模板”这个图层。

a3c567b369dc306709369fa7f33b3157.png

这就是智能对象的好处。

跳到这个画面后

29ab8b66df4a712fecd0c154d9f77ca1.png

拖入你想要做的界面:

43426d0a1038797d4a3713a9e0c4ad9c.png

图片来自Dribbble:Dribbble – GIF for the Timeline App by Sergey Valiukh

然后保存:Command(Ctrl)+ S,关闭:Command(Ctrl)+ W

步骤5、回到这个展示页面

注:这儿忽略了一步,把刚才保存的图层拖过来。同学们应该都懂吧 – -

3fbbf55b8c73ea69c24aa9efa5db278e.png

复制一个图层:

9a451cad669363cd7067db9d8fe44ac7.png

按住Option(Alt)+ 鼠标左键拖动图层往下拽,或者Command(Ctrl)+J,选下面的一个图层,双击图层进入图层样式,选择斜面和浮雕,设置一下参数:

1220aee8326c63209d40cae7672d908a.png

参数自行调整,其中,阴影角度45°可随大环境光线可根据情况自行调整,阴影模式透明度随意,自己看情况调整。

步骤6、然后,从第二个图层开始连续复制多个该图层,每复制的一个图层都在上一个图层的下方,每复制一个图层都往下移一个像素,按住option(Alt)+鼠标左键拖动图层往下拽,可使用键盘上的下方向键来控制。

然后,在最后一个图层上设置一个投影

93357f1d74f02fd6c268a05001883ff9.png

然后,在最后一个图层上设置一个投影,参数自行解决。

e7f5aa240c1d27b0eff1fd7a57331b3c.png

最后调整下整体环境。

40af47692a992c30ac68af4967872590.png

完工!

以上的好处便是使用了智能对象,它可以让你想展示的界面可以随意替换。

如需展示多个界面的效果,只要多拖进几次那个PSD,然后平面排好后,统一调整透视效果。

当然表现的手法很多,以上只是一种。

比如,也可以再建好的大画布上,画一个矩形的尺寸为640×1136,然后转成智能对象,再双击智能对象,进入调整。

附上@正越升 同学的方法,原理相同,细节上处理更加丰富。

一个效果有千万种实现的办法,在这里只提供一个最简单的思路,用PS纯做。

一、扭曲&旋转

导入界面图,然后编辑-扭曲,再旋转,做到如下效果:

274e7cd57892b5b2e1c720bd0bec9b64.png

二、制作厚度

这一步最关键,选中界面图层,[Ctrl+Alt+T],然后按一下方向键[↑],再按回车。这样就复制了一个图层,并且新的图层在原来基础上往上移动一个像素。

来了,狂按[Ctrl+Alt+Shift+T],这是重复之前的变换操作,这样就会复制出很多个图层,每一个都在之前基础上往上移动一个像素。从而做出厚度效果。

68c47b86b326d6516ae2c3a5fda4ed97.png

三、改变亮度

保留最上面那个图层,将其他所有界面的图层,合并成一个图层,命名为[厚度]。

eef77a3ac3d44c6065f4da8c59781369.png

然后选中[厚度]图层,使用矩形选框工具+[图像-调整-亮度对比度],对厚度的左边面和右边面分别进行降低亮度20和50处理。

46d61bf8860c8a57941fb601b562dd6e.png

902963a8c2e2c88843021d112294b0ad.png

四、阴影

复制[app]图层,改变图层顺序到[厚度]下面,然后使用[高斯模糊]+颜色叠加为黑色+改变不透明度为30%。完工!

cadd28c9c4067a3ef8f0d201b8533693.png

总结:希望本教程对您有所帮助,非常感谢您的阅读,祝您学习愉快!!

内容来自:知乎,作者:郑越升。返回搜狐,查看更多

责任编辑:


http://www.ppmy.cn/news/812488.html

相关文章

文字烫金效果html,ps如何制作烫金效果 PS制作logo烫黄金效果教程

版权申明:本文原创作者"艳阳天的星星",感谢"艳阳天的星星"的原创经验分享! 效果图: 主要过程: 1:下载好一个面板素材、或者要做烫金效果的包装稿件,和要用到的logo或设计好…

CDR中实现浮雕效果的两种方法

斜面和浮雕效果只在PS中才有的么?当然不是,CorelDRAW中也可以做出浮雕效果的,不仅能应用在位图中,矢量图形和文字中也可以实现,文本为用户提供在CDR中两种实现浮雕效果的操作方法,很基础实用的教程&#xf…

基于FPGA的图像浮雕效果实现

基于FPGA的图像浮雕效果实现 项目简述算法原理及MATLAB实现浮雕效果的FPGA实现FPGA工程代码下板效果参考文献总结 项目简述 为什么要做这个小项目,因为最近正在在学习FPGA开源工作室中的FPGA图像处理的文章。发现这个小例子非常容易实现。就把这个小算法给复现了。…

html 透明玻璃效果,PS教程:制作透明玻璃效果(一)

今天给大家带来的是制作透明玻璃的教程,这个教程对于光的效果制作有难度,但是只要你有好的分析方法,我想这个PS教程对你不会有什么难度。让我们开始吧。 最终效果图: 素材下载: 第一步: 把“木纹”下载下来…

android 画笔压痕效果,【自制样机教程】如何用Ps做一个压痕效果的Logo样机

小编又来啦 不知道上次的游记大家看的怎么样 今天再给你们介绍一个logo的样机 这次的教程主要用到了图层样式 来看看怎么做吧 ———————————— 通过本次的教程学习,你会锻炼到Ps的波纹滤镜以及图层样式的综合应用。 1、绘制过程详解 图层样式的效果很多&am…

计算机ps相框怎么做,如何在PS中制作相框?在PS中制作相框的具体方法

软件大小: 151MB 软件版本: 6.4.3.0 软件类型: 图片处理 查看详情 直接下载 有的用户还不熟悉photoshop中的一些操作,例如如何在PS中制作相框?下文就是小编给大家分享的在PS中制作相框的具体方法。 photoshop制作简约的相片相框的…

ps切图怎么做成html,PS切图怎么导出网页 PS切图怎么生成源代码

PS切片工具切出来的切图可怎么导出网页?PS切图怎么生成源代码?PS切片的网址和源代码功能在PS切片的编辑功能里,添加URL地址,切片存储为WEB所有格式,优化存储结果保存成“HTML和图像”或者“仅HTML”。这样保存出来的切片就是网页的图片,带有源代码功能。下面来看看PS切图…

图像处理——简单浮雕效果和倒影效果实战

一、浮雕效果 【原理:】每个像素的RGB值都设置为该位置的初始值减去其右下方第二的像素的差,最后统一加上128用于控制灰度,显示出类似浮雕的灰色。这样处理的思路是,将图像上的每个点与它的对角线的像素点形成差值,这…