しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

Photoshopで写真の色相を調整する

色相調整を試してみました。
バージョンはCS3、画像はぱくたそ様のものを使っています。

www.pakutaso.com

色相を変えるのは「イメージ → 色調補正 → 色相・彩度」から行います。

f:id:llcc:20171030133257p:plain

ポップアップの色相を移動すれば色を変更する事ができます。

f:id:llcc:20171030133355p:plain

特定の色だけ変更したい時は「編集」プルダウンを使います。

f:id:llcc:20171030133500p:plain

対象色を細かく調整したい時は、一番下のスライドバーで調整します。

f:id:llcc:20171030133607p:plain

選択範囲の指定をすれば、そこだけ色相などの変更をする事もできます。

f:id:llcc:20171030133716p:plain

Photoshopで写真を切り抜き

Photoshopを使った写真の切り抜きを試してみました。
PhotoshopはCS3、写真はぱくたそ様のものを使っています。

www.pakutaso.com

今回はこの写真のひまわり部分を切り抜いてみます。

f:id:llcc:20171029172643p:plain

まずはペンツールを選択します。

f:id:llcc:20171029174502p:plain

ペンツールで、切り抜きたい箇所を囲みます。

f:id:llcc:20171029175413p:plain

第3カラムのパスで選択範囲を作成を選びます。

f:id:llcc:20171029175450p:plain

f:id:llcc:20171029175501p:plain

選択範囲を作成すると次のようになります。

f:id:llcc:20171029175530p:plain

次に選択範囲の反転をします。

f:id:llcc:20171029175600p:plain

最後にメニューから消去を選べば切り抜きができます。

f:id:llcc:20171029175808p:plain

pngへの書き出しは「WEBおよびデバイス用に保存」から行います。

f:id:llcc:20171029175838p:plain

Sketchでヒヨコを描いてみる

Sketchを使ってヒヨコを描いてみました。
バージョンはv43.2を使っています。

まずは黄色い楕円を描きます。
RGBは#FFF572です。
色相を色々調整したところ、ややオレンジよりの方がヒヨコっぽくなった気がします。

f:id:llcc:20171027125155p:plain

続けて三角形(Triangle)を追加して、角度調整して設置します。
RGBは#F29D17です。

f:id:llcc:20171027125318p:plain

続けて目を追加します。

f:id:llcc:20171027125425p:plain

次に足を作ります。
色はくちばしと同じです。

「足の上側を少し長めにする」「下側の真ん中の線は短くする」というところを意識したら良くなりました。

f:id:llcc:20171027125525p:plain

最後に尻尾を追加します。
まずは円を2つ描きます。

f:id:llcc:20171027125706p:plain

それをSubtractでグループ化すると下のような三日月型ができます。

f:id:llcc:20171027125748p:plain

あとはそれをサイズ調整しつつ配置してあげれば完成です。

f:id:llcc:20171027125829p:plain

f:id:llcc:20171028144428p:plain

Sketchでの画像切り抜きと画像加工

Sketchを使って画像加工をしてみました。
Sketchはv43.2、元画像はぱくたそ様の物を利用しています。

f:id:llcc:20171027121748j:plain

www.pakutaso.com

画像の切り抜き

まずは画像をダブルクリックします。

f:id:llcc:20171027122222p:plain

ダブルクリックすると、第3カラムに「Selection」というメニューが表示されます。

f:id:llcc:20171027122235p:plain

最後に「Selection」を選んで画像の部分選択、Cropボタン押下で切り抜き完了です。

f:id:llcc:20171027122355p:plain

複雑な形の切り抜き

MagicWandを複雑な形の切り抜きをする事ができます。

f:id:llcc:20171027122549p:plain

少し範囲の調整が難しいので、複数回に分けて実施すると良いかもしれません。

f:id:llcc:20171027122714p:plain

画像の色相/彩度/明度の変更とぼかし

色相/彩度/明度の変更とぼかしは第3カラムの下のメニューを調整する事でできます。

f:id:llcc:20171027123010p:plain

Sketchでハートを描いてみる

こちらのイラストレータ記事を参考にハートを描いてみました。
Sketchはv43.2を使っています。

magnets.jp

文字からハートを作る

まずはテキストでハートをセットします。

f:id:llcc:20171026130308p:plain

それを右クリックして「Convert to Outlines」を選びます。

f:id:llcc:20171026130435p:plain

以上でアウトライン化は完了です。
パスを自由に変形できるようになりました。

f:id:llcc:20171026130603p:plain

線からハートを作る

まずは四角形を描きます。

f:id:llcc:20171026131854p:plain

次に右上のパスをDeleteボタンで削除します。

f:id:llcc:20171026131921p:plain

三角形ができるので、一番長い辺の真ん中にパスを追加します。

f:id:llcc:20171026131957p:plain

作ったパスを左下に移動して、線の太さも大きくします。

f:id:llcc:20171026132048p:plain

次は線を丸くします。

f:id:llcc:20171026132158p:plain

最後に角度と高さを調整すれば完成です。

f:id:llcc:20171026132306p:plain

こちらはメニューのLayerからアウトライン化できます。

f:id:llcc:20171026132331p:plain

ペンツールでハートを作る

まずはVectorを使って半分のハートを描きます。

f:id:llcc:20171026132750p:plain

あとはそれをコピーして反転すれば完成です。

f:id:llcc:20171026132849p:plain

【Swift4】SpringIndicatorでおしゃれローディング

ローディング表示をオシャレにしたくて、SpringIndicatorというライブラリを試してみました。

github.com

f:id:llcc:20171025153537g:plain

インストール

いつものようにCocoaPodsでインストールします。

target 'MyApp' do
  use_frameworks!

  pod "SpringIndicator"
end

実装

実装はとても簡単で、SpringIndicatorを初期化してviewに貼り付けるだけです。

import UIKit
import SpringIndicator

class ViewController: UIViewController {
    override func viewDidLoad() {
        let indicator = SpringIndicator(frame: CGRect(origin: view.center, size: CGSize(width: 100, height: 100)))
        view.addSubview(indicator)
        indicator.start()
    }
}

f:id:llcc:20171025153537g:plain

線の太さや色を変えることができます。

let indicator = SpringIndicator(frame: CGRect(origin: view.center, size: CGSize(width: 100, height: 100)))
indicator.lineWidth = 5
indicator.lineColor = .brown

lineColorsをセットすると、1週ごとに色が変化して面白いです。

let indicator = SpringIndicator(frame: CGRect(origin: view.center, size: CGSize(width: 100, height: 100)))
indicator.lineColors = [.red, .purple, .blue, .purple]

回転速度も変更可能です。

let indicator = SpringIndicator(frame: CGRect(origin: view.center, size: CGSize(width: 100, height: 100)))
indicator.rotationDuration = 4.0

Reachability.swiftで通信状況を確認する

Reachability.swiftというライブラリで現在の通信状況を調べてみました。

Reachability.swiftのインストール

インストールはCocoaPodsで行いました。

target 'MyApp' do
  use_frameworks!

  pod 'ReachabilitySwift'
end

通信状況を確認する

Wifi/キャリア通信/電波なし は下のように確認できます。

import UIKit
import Reachability

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let reachability = Reachability() {
            print(reachability.connection == .wifi)
            print(reachability.connection == .cellular)
            print(reachability.connection == .none)
        }
    }
}

通信可能になった時に通知する

whenReachableを使えば、通信可能になったタイミングを知ることができます。

let reachability = Reachability()
reachability?.whenReachable = { reachability in
    print(reachability.connection)
}
try? reachability?.startNotifier()

逆に通信できなくなったタイミングを知りたい時はwhenUnreachableを使います。

let reachability = Reachability()
reachability?.whenUnreachable = { reachability in
    print(reachability.connection)
}
try? reachability?.startNotifier()

この時、Reachabilityはインスタンス変数にするなどして開放されないよう気をつける必要があります。

import UIKit
import Reachability

class ViewController: UIViewController {
    let reachability = Reachability()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        reachability?.whenReachable = { reachability in
        }
        try? reachability?.startNotifier()
    }
}

通信状況が変わった時の通知は、NotificationCenterで検知する事もできます。

import UIKit
import Reachability

class ViewController: UIViewController {
    let reachability = Reachability()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        NotificationCenter.default.addObserver(self, selector: #selector(self.reachabilityChanged), name: .reachabilityChanged, object: reachability)
        try? reachability?.startNotifier()
    }
    
    @objc func reachabilityChanged() {
        print(Reachability()?.connection)
    }
}