用Ps怎么制作有质感毛玻璃效果

用Ps怎么制作有质感毛玻璃效果,第1张

用Ps制作有质感毛玻璃效果的方法是:

1、利用PS打开某张照片,然后再将背景层复制为“图层1”。

2、把前景色设置成白色,接着再按Shift+F5将背景层填充为白色。

3、接着请为图层1设置一个蒙版,接着再选择图案图章工具中的“星云”图案。

4、这时请利用星云图案在蒙版上绘图,即可得出最终效果

5、最后请把做好的毛玻璃效果另存为“PS蒙版制作毛玻璃效果.psd”保存。

如何通过 ToolBar 模拟出图片的毛玻璃效果。首先我们新建一个工程,工程模板切换到 iOS ,选择 Single View Application ,如下图所示:

点击 Next ,命名任意,Language 选择 Objective-C,如下图所示:

输入完工程名之后,继续点击 Next ,选择一个在你 Mac 上用于存储工程文件的目录完成即可,工程建立好之后开始我们今天的代码之旅。

既然需要模拟图片的毛玻璃效果,我们首先当然就需要一张图片,我这里用了一张周杰伦第一张专辑的封面作为本节内容的图片素材,图片如下:

接下来,将这张图片拖动到刚才建立好的工程文件的文件夹 Assets.xcassets 中,如下图所示:

现在点击左侧文件列表选择 ViewController.m 文件,这时候会在文件列表右侧代码区域显示相关代码,接下来我们书写代码,完成我们今天想要达到的效果。

需要注意的是,以下代码我们需要写在 viewDidLoad 方法中,OK,开始。

第一步,我们首先对图片进行处理,将图片添加进 iPhone 界面,并全屏显示。相关代码如下:

创建 UIImageView 对象用于存储图片,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">UIImageView *imageView = <span style="color:#999988font-style:italic">[<span style="">[UIImageView alloc]</span>init]</span></code></pre>

设置图片尺寸占据整个屏幕,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">imageView.frame = <span style="font-weight:700">self</span>.view.bounds</code></pre>

指定待显示图片资源,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">imageView.image = [UIImage <span style="color:#dd1144">imageNamed:</span>@<span style="color:#dd1144">"Jay.jpg"</span>]</code></pre>

设置图片显示模式,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">imageView.contentMode = UIViewContentModeScaleToFill<span style="color:#999988font-style:italic"></span></code></pre>

在 iPhone 上显示 image 图片,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal"><span style="color:#9900font-weight:700">[self.view addSubview:imageView]</span><span style="color:#999988font-style:italic"></span></code></pre>

先来看一下现在效果如何,运行模拟器,效果如下:

这样我们就将这张图片添加到了 iPhone ,并进行了全屏显示,由于图片比例和 iPhone 比例不一致,所以这里略显比例失衡,大家可以找一张比例一致的图片进行测试,接下来我们看下一步如何制作毛玻璃效果 。

第二步,制作毛玻璃效果,这里我们利用 ToolBar 覆盖在图片上来模拟毛玻璃的效果,具体 *** 作方法就是先建立一个 ToolBar 对象,然后设置它的尺寸和图片尺寸一致,即设置为屏幕尺寸,然后覆盖在图片上即可,相关 *** 作代码如下。

创建 ToolBar 对象,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">UIToolbar *toolBar = <span style="color:#999988font-style:italic">[<span style="">[UIToolbar alloc]</span>init]</span></code></pre>

设置 ToolBar 尺寸和图片尺寸一致,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">toolBar.frame = imageView.bounds<span style="color:#999988font-style:italic"></span></code></pre>

设置毛玻璃效果,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">toolBar.barStyle = UIBarStyleBlack<span style="color:#999988font-style:italic"></span></code></pre>

将 toolBar 添加到图片上覆盖图片,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal"><span style="color:#9900font-weight:700">[imageView addSubview:toolBar]</span><span style="color:#999988font-style:italic"></span></code></pre>

运行模拟器,效果如下:

这是黑色的毛玻璃效果,关于毛玻璃还有一种默认的白色效果,只需将毛玻璃效果设置代码修改为如下代码即可:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">toolBar.barStyle = UIBarStyleDefault<span style="color:#999988font-style:italic"></span></code></pre>

运行模拟器,效果如下:

但个人觉得黑色要更加好看一些,所以这里我使用黑色,我将设置代码还原为黑色效果。

现在,图片已经出现了毛玻璃效果,比较模糊,如果这时候我们在毛玻璃上写字,那么这个字一定会异常清晰,要不要试试看,OK,我们来继续在毛玻璃上面写点字看一下效果,我们就在图片下方写上这张专辑的名字吧。

第三步,添加文字,相关代码如下。

创建 Label 对象,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">UILabel *label = <span style="color:#999988font-style:italic">[<span style="">[UILabel alloc]</span>init]</span></code></pre>

设置文字显示位置,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">label.frame = CGRectMake(self.view.frame.size.width/<span style="color:teal">2</span>-<span style="color:teal">50</span>, self.view.frame.size.height/<span style="color:teal">2</span>+<span style="color:teal">150</span>, <span style="color:teal">100</span>, <span style="color:teal">100</span>)</code></pre>

设置文字显示颜色为白色,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">label.textColor = <span style="color:#dd1144">[UIColor whiteColor]</span></code></pre>

设置文字居中对齐,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal"><span style="font-weight:700">label</span>.textAlignment = NSTextAlignmentCenter</code></pre>

设置文字显示内容,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">label.<span style="color:#445588font-weight:700">text</span>= @<span style="color:#dd1144">"Jay"</span></code></pre>

将文字添加到 toolBar 上进行显示,代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal"><span style="color:#9900font-weight:700">[toolBar addSubview:label]</span><span style="color:#999988font-style:italic"></span></code></pre>

运行模拟器,效果如下:

至此,全部代码写完,完成今天毛玻璃效果图片的效果演示,完整代码如下:

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">- (<span style="font-weight:700">void</span>)viewDidLoad { &nbsp&nbsp[<span style="font-weight:700">super</span>viewDidLoad]&nbsp&nbsp&nbsp&nbsp<span style="color:#999988font-style:italic">// 第一步:对图片进行处理</span>&nbsp&nbsp<span style="color:#086b3">UIImageView</span>*imageView = [[<span style="color:#086b3">UIImageView</span>alloc]init]&nbsp&nbspimageView<span style="color:teal">.frame</span>= <span style="font-weight:700">self</span><span style="color:teal">.view</span><span style="color:teal">.bounds</span>&nbsp&nbspimageView<span style="color:teal">.image</span>= [<span style="color:#086b3">UIImage</span>imageNamed:<span style="color:#dd1144">@"Jay.jpg"</span>]&nbsp&nbspimageView<span style="color:teal">.contentMode</span>= <span style="color:#086b3">UIViewContentModeScaleToFill</span>&nbsp&nbsp&nbsp&nbsp<span style="color:#999988font-style:italic">// 第二步:制作毛玻璃</span>&nbsp&nbsp<span style="color:#086b3">UIToolbar</span>*toolBar = [[<span style="color:#086b3">UIToolbar</span>alloc]init]&nbsp&nbsptoolBar<span style="color:teal">.frame</span>= imageView<span style="color:teal">.bounds</span>&nbsp&nbsptoolBar<span style="color:teal">.barStyle</span>= <span style="color:#086b3">UIBarStyleBlack</span>&nbsp&nbsp[imageView addSubview:toolBar]&nbsp&nbsp&nbsp&nbsp<span style="color:#999988font-style:italic">// 第三步:添加文字</span>&nbsp&nbsp<span style="color:#086b3">UILabel</span>*label = [[<span style="color:#086b3">UILabel</span>alloc]init]&nbsp&nbsplabel<span style="color:teal">.frame</span>= <span style="color:#086b3">CGRectMake</span>(<span style="font-weight:700">self</span><span style="color:teal">.view</span><span style="color:teal">.frame</span><span style="color:teal">.size</span><span style="color:teal">.width</span>/<span style="color:teal">2</span>-<span style="color:teal">50</span>, <span style="font-weight:700">self</span><span style="color:teal">.view</span><span style="color:teal">.frame</span><span style="color:teal">.size</span><span style="color:teal">.height</span>/<span style="color:teal">2</span>+<span style="color:teal">150</span>, <span style="color:teal">100</span>, <span style="color:teal">100</span>)&nbsp&nbsplabel<span style="color:teal">.textColor</span>= [<span style="color:#086b3">UIColor</span>whiteColor]&nbsp&nbsplabel<span style="color:teal">.textAlignment</span>= <span style="color:#086b3">NSTextAlignmentCenter</span>&nbsp&nbsplabel<span style="color:teal">.text</span>= <span style="color:#dd1144">@"Jay"</span>&nbsp&nbsp[toolBar addSubview:label]&nbsp&nbsp&nbsp&nbsp[<span style="font-weight:700">self</span><span style="color:teal">.view</span>addSubview:imageView]}</code></pre>

可以的

第一步:打开PS,Ctrl+O打开一张自己喜欢的素材,Ctrl+J复制一层,得到图层1,回到菜单栏,执行【滤镜】-【模糊】-【高斯模糊】,参数设置及效果如下图▼

第二步:回到图层面板,给图层1添加图层蒙版,添加完蒙版是白色的,按Ctrl+I反相,把蒙版变成黑色,这时照片里面的人物变清晰,效果如下图▼

第三步:回到工具栏,打开矩形选框工具,鼠标在画面中画出一个矩形选区,鼠标不要松开,左手按空格键移动到合适的位置,再按Ctrl+I反选一下,效果如下图▼

第四步:毛玻璃的效果虽然出来了,但还可以添加下青颜色,载入选区,新建空白图层,得到图层2,前景色设置为青颜色(#4bf4ff),按Alt+Delete填充,效果如下图▼

第五步:回到菜单栏,执行【滤镜】-【杂色】-【添加杂色】,增加颗粒感,参数设置及效果如下图▼

第六步:回到图层面板,双击图层2,d出图层样式框,对混合选项及斜面和浮雕进行参数调整,增强质感,效果如下图▼

混合选项▼

斜面和浮雕▼

我们再看下效果图▼


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11816647.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存