做漂亮卡片吧
用swiftUI做梗圖
雖然斷斷續續,但是課還是有在上的,只是很慢很慢
總之先來張成果鎮樓
這次的作業是用addSubview的方式來做漂亮卡片
想也知道要做漂亮卡片不難,有了AI一切好說
不過既然是作業就不能偷懶,所以在補課的時候就跟著一面聽一面做了
說好要找張去背的圖片換顏色,所以就找了心中男神安娜蘇來試試,jojo在使用替身的時候大家顏色都會變,拿jojo來改最適合了!
結果這張光是去背就弄了好久…
因為我蠢到忘記有買繪圖軟體(看看我多久沒畫圖了)
網上找免費去背工具弄了半天才想起來我有CSP
接著因為自己龜毛所以又把圖片放到最大想要把頭髮去背弄乾淨
不知不覺兩個小時就過去了…
早知道就跟上課的範例圖一樣用多拉A夢就好…
看來要做出範例中的效果沒有想像中的難嘛~
既然這次要做的是漂亮卡片,那就來試試看梗圖以外的圖吧!
首先從Pinterest找靈感
這張窗框圖看起來很適合挖空中間放點什麼進去,就用這張當作參考吧!
首先用常用的Figma做個窗框,順便放隻可愛黑貓~
也加上文字,到時候用figma的Dev mode可以看到文字的資訊,還有和周圍物件的距離
接著要放在後面的圖就交給AI吧!
推薦一下這個網站Clipdrop,可以線上用AI繪圖之後直接用網站內的其他功能修改,不用切換到其他工具或是網站,需要的圖一次就能搞定,讚啦!
再來就是按照課堂上的內容實際操作了!
//加入窗邊貓貓圖片
let windowCat = UIImage(named: "windowCat")
let windowCatView = UIImageView(image: UIImage(named: "windowCat"))
//加入煙火圖片
let firework01 = UIImage(named: "firework01")
let firework01Viwe = UIImageView(image: firework01)
firework01Viwe.frame = CGRect(x: 0, y: 0, width: 428, height: 926)
firework01Viwe.contentMode = .scaleAspectFill
//將窗邊貓貓圖片疊在煙火圖片上
firework01Viwe.addSubview(windowCatView)
幫自己加上註解,避免以後癡呆了看不懂
之後再加上文字,不過這邊還是找了Peter給的參考資料,加入文字並且調整文字的尺寸、顏色
之後就會變成這樣啦!
給自己memo一下,加上文字的時候如果沒有調整文字尺寸的話,預覽圖上的文字會歪一邊
除了這張之外,也想試試看不同的底圖,增加練習量
最後再補上自己這次作業的內容,證明我有好好的練習!
//加入窗邊貓貓圖片
let windowCat = UIImage(named: "windowCat")
let windowCatView = UIImageView(image: UIImage(named: "windowCat"))
//加入煙火圖片
let firework01 = UIImage(named: "firework01")
let firework01Viwe = UIImageView(image: firework01)
firework01Viwe.frame = CGRect(x: 0, y: 0, width: 428, height: 926)
firework01Viwe.contentMode = .scaleAspectFill
//將窗邊貓貓圖片疊在煙火圖片上
firework01Viwe.addSubview(windowCatView)
//參考https://medium.com/彼得潘的試煉-勇者的-100-道-swift-ios-app-謎題/142-使用圖片-文字-emoji-邊框-圓角製作漂亮卡片-401741bf23f7
//依照上面的內容加入文字,製作文字的時候用figma的Dev mode輕鬆取得了資訊嘿嘿
let textLabel = UILabel(frame: CGRect(x: 165, y: 64, width: 99, height: 17))
textLabel.text = "Firework"
textLabel.textColor = UIColor(white: 1, alpha: 1)
textLabel.font = UIFont.systemFont(ofSize: 24)
//再把做好的textLabel加到原本的煙火圖上
firework01Viwe.addSubview(textLabel)
let textLabel02 = UILabel(frame: CGRect(x: 138, y: 840, width: 153, height: 15))
textLabel02.text = "I Love Black Cat!!"
textLabel02.textColor = UIColor(red: 152/266, green: 142/266 , blue: 169/266, alpha: 1)
textLabel02.font = UIFont.systemFont(ofSize: 20)
firework01Viwe.addSubview(textLabel02)
// 再來直接替換底圖看看
let flyingCat = UIImage(named: "blackcat")
let flyingCatView = UIImageView(image: UIImage(named: "blackcat"))
flyingCatView.addSubview(windowCatView)
flyingCatView.addSubview(textLabel)
flyingCatView.addSubview(textLabel02)
//加碼一下
let meme = UIImage(named: "meme01")
let memeView = UIImageView(image: UIImage(named: "meme01"))
let textLabel3 = UILabel(frame: CGRect(x: 80, y: 15, width: 192, height: 17))
textLabel3.text = "說好的颱風假呢?"
textLabel3.textColor = UIColor(white: 1, alpha: 1)
textLabel3.font = UIFont.systemFont(ofSize: 24)
//讓寬度剛好等於文字長度,不加這個文字會被切斷哭哭
textLabel3.sizeToFit()
let textLabel4 = UILabel(frame: CGRect(x: 258, y: 200, width: 192, height: 17))
textLabel4.text = "只有台北沒有啦!"
textLabel4.textColor = UIColor(white: 1, alpha: 1)
textLabel4.font = UIFont.systemFont(ofSize: 24)
textLabel4.sizeToFit()
memeView.addSubview(textLabel3)
memeView.addSubview(textLabel4)
至於最後加碼的圖就是最前面的梗圖
不能放颱風假的颱風還好意思自稱是颱風嗎!羞羞臉啦!!