iOS HW5–2 利用 UIView 的 mask 設計特別形狀的圖片

學習用mask製作出如同雜誌般的設計

原始素材如下：

a.秋天照片

b.黑影背景照-願得一心人

1.照片-原版

import UIKit

let heartImage = UIImage(named: "heart.png")
let heartImageView = UIImageView(image: heartImage)
//heartImageView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)

let fallImage = UIImage(named: "fall.png")
let fallImageView = UIImageView(image: fallImage)

//照片原版
fallImageView.mask = heartImageView

2.照片-秋意濃加強版

import UIKit

let heartImage = UIImage(named: "heart.png")
let heartImageView = UIImageView(image: heartImage)
//heartImageView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)

let fallImage = UIImage(named: "fall.png")
let fallImageView = UIImageView(image: fallImage)

//照片原版
fallImageView.mask = heartImageView


let colorView = UIView(frame: fallImageView.frame)
colorView.backgroundColor = UIColor(red: 0.4, green: 0.2, blue: 0, alpha: 0.5)

let heartImage2 = UIImageView(image: heartImage)
//照片秋意濃加強版
colorView.mask = heartImage2
fallImageView.addSubview(colorView)

3.照片大合成版

結合addsubview，再加上煙火效果

原始素材：

合成後的效果：

import UIKit

let heartImage = UIImage(named: "heart.png")
let heartImageView = UIImageView(image: heartImage)
//heartImageView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)


let springImage = UIImage(named: "spring.png")
let springImageView = UIImageView(image: springImage)

let fallImage = UIImage(named: "fall.png")
let fallImageView = UIImageView(image: fallImage)

//照片原版
fallImageView.mask = heartImageView


let colorView = UIView(frame: fallImageView.frame)
colorView.backgroundColor = UIColor(red: 0.4, green: 0.2, blue: 0, alpha: 0.5)

let heartImage2 = UIImageView(image: heartImage)
//照片秋意濃加強版
colorView.mask = heartImage2
fallImageView.addSubview(colorView)


let fireImage = UIImage(named: "fire.png")
let fireIamgeView = UIImageView(image: fireImage)
fireIamgeView.alpha = 0.3
fallImageView.addSubview(fireIamgeView)
//照片大合成版

為了這個煙火的效果做了很久也改了n次，有點畫虎不成反類犬，心中想的煙火的效果，但是合成後變成鹽水蜂炮一樣XD，恩….我盡力了，美感的設計可能還要再多加培養。

因為原本這張圖有點偏右，變成不太好配合位置的部分做疊合的效果，下次選照片還是以置中為考量。

4.照片-漸層mask

因為上面的素材再合成下去變得很難看，大雜燴一樣，於是覺得不要傷害自己的眼睛，改素材比較快

原始素材(感覺很像黃昏的景色)

使用漸層後的效果(加入漸層後的效果，感覺變成有點像是清晨時太陽剛升起，霧還沒散開的效果)

//以下是做圖片漸層
let skyImage = UIImage(named: "sky.png")
let skyImageView = UIImageView(image: skyImage)


let layer = CAGradientLayer()
layer.frame = skyImageView.bounds
layer.colors = [CGColor(red: 1, green: 1, blue: 1, alpha: 0),
                CGColor(red: 1, green: 1, blue: 1, alpha: 1)]


layer.startPoint = CGPoint(x: 0, y: 0)
layer.endPoint = CGPoint(x: 0, y: 1)
skyImageView.layer.mask = layer
skyImageView

最後提供GitHub：

GitHub - Billagood/0822

心得：

1. GitHub很久沒用都快忘了怎麼上傳檔案。
2. 黑影的照片強力建議選擇"置中"的圖案，不然偏左偏右的圖案要做合成，合成後很難變好看。
3. 前幾周學過的東西還是會忘記，真的要每天每周找時間練習，這也是寫作業的目的，不然真的忘得很快，學新的，舊的還沒有記熟，感覺基礎不夠穩，只能藉由每次的複習來強化印象與熟練度。
4. 多看其他同學的作品，有的做的真的很好，有點自嘆不如。
5. 有些程式雖然都教過，但是自己寫還是會遇到問題，此時多想過一遍再看解答會比較有幫助，如果都直接看解答，真的下次遇到同樣的問題又會忘記怎麼做，變成還是沒有解決自己之前的疑惑，問題還是留在那邊，所以還是要花點時間多了解程式的涵義，搞懂之後把他記起來，這樣才是真的學到腦袋裡。