JavaScriptプログラマがSwift iOSアプリを2週間で作って公開してみた〜その22 Edit Images with Mac Preview〜


JavaScriptプログラマー(JSer)がSwiftデビューして、ただ作りたいアプリを作ってみたシリーズ第22回目です。

前回はxibファイルでLaunch Screenを作る話でした。今回はMacのデフォルトでインストールされているプレビューアプリを使用して画像を編集する方法についてです。

今回プレビューの使い方を一回の記事として紹介しようかと思った理由は、アプリを実際に作ってみると、アイコンなどが必ず必要になり、どうしても画像編集する場面が出てくるからです。特にTwitStockerではチュートリアル画面は画像で作ったりしていて、アプリ完成までにかけた時間の中の何割かは画像編集に費やしました。

スクリーンショット 2015-03-22 20.39.45

Photoshopなどツールが使えるならそちらを使ったほうが良いと思いますが、自分はインストールしていないので。。今回の記事ではプレビューのちょっとしたTipsとして、指定した範囲を透過にする機能を紹介します。

指定範囲を透過にする

例えば、以下の画像の白い部分を透過にしたいときにどのようにやるか紹介します。

スクリーンショット 2015-03-22 20.42.25

まずは一番上に積んである白い四角を透過にします。
以下のスクリーンのように、ツールバーの中のカバンのようなアイコンを選んで、その下に表示されるツールバーでペンの先が光っているようなアイコンを選択します。

そのあとに白い四角の部分を選択後にドラッグすると赤く範囲が表示されるので、白い四角の部分がきちんと覆われたらドラッグをはなします。

スクリーンショット 2015-03-22 20.44.06

上記のように指定範囲が選択された状態になるので、Deleteボタンを押します。そうすると、白い部分が消えます。これで透過状態になっています。

スクリーンショット 2015-03-22 20.47.06

他の四角の部分も同様に選択して消していけば、白かった部分が透過に切り取られたようなアイコンのできあがりです。
選択範囲が狭い部分は拡大して選択しましょう。

こんな感じで透過になりました。

スクリーンショット 2015-03-22 20.49.51

他にもプレビューを使って、リサイズや画像の組み合わせをしたりしました。そこらへんは特に解説する必要はないと思うので、スキップします。

今回はSwiftの紹介ではありませんでしたが、一人でアプリを開発する上で避けて通れない画像編集のTipsについてでした。
次回はxcodeのdebugについて少し紹介します。

TwitStockerのダウンロードはこちらから。
https://itunes.apple.com/en/app/twitstocker/id958798898?l=ja&ls=1&mt=8