您的位置：首页 > 百科管理 > 详情

毛玻璃素材图片-如何在 iPhone 中实现图片的毛玻璃效果

原创：找图网 2023-06-26 18:32:43

PS做毛玻璃效果？

可以的

第一步:打开PS,Ctrl+O打开一张自己喜欢的素材,Ctrl+J复制一层,得到图层1,回到菜单栏,执行【滤镜】-【模糊】-【

高斯模糊

】,参数设置及效果如下图▼

第二步:回到图层面板,给图层1添加

图层蒙版

,添加完蒙版是白色的,按Ctrl+I反相,把蒙版变成黑色,这时照片里面的人物变清晰,效果如下图▼

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

第四步:

毛玻璃

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

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

第六步:回到图层面板,双击图层2,弹出图层样式框,对混合选项及

斜面

和浮雕进行参数调整,增强质感,效果如下图▼

混合选项▼

斜面和浮雕▼

我们再看下效果图▼

如何在 iPhone 中实现图片的毛玻璃效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

创建 ToolBar 对象,代码如下:

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

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

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

运行模拟器,效果如下:

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

运行模拟器,效果如下:

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

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

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

创建 Label 对象,代码如下:

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

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

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

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

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

运行模拟器,效果如下:

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

<pre style="font-size:11.899999618530273px; line-height:1.45; font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace; word-wrap:normal; padding:16px; overflow:auto; background-color:rgb(247,247,247); color:rgb(51,51,51); margin-top:0px!important; margin-bottom:0px!important"><code style="display:inline; overflow:visible; background-color:transparent; font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace; word-break:normal; border:0px; line-height:inherit; word-wrap:normal">- (void)viewDidLoad {    [super viewDidLoad];        // 第一步:对图片进行处理    UIImageView *imageView = [[UIImageView alloc]init];    imageView.frame = self.view.bounds;    imageView.image = [UIImage imageNamed:@""];    imageView.contentMode = UIViewContentModeScaleToFill;        // 第二步:制作毛玻璃    UIToolbar *toolBar = [[UIToolbar alloc]init];    toolBar.frame = imageView.bounds;    toolBar.barStyle = UIBarStyleBlack;    [imageView addSubview:toolBar];        // 第三步:添加文字    UILabel *label = [[UILabel alloc]init];    label.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2+150, 100, 100);    label.textColor = [UIColor whiteColor];    label.textAlignment = NSTextAlignmentCenter;    label.text = @"Jay";    [toolBar addSubview:label];        [self.view addSubview:imageView]; }</code></pre>