Apple製品の画面に文字や画像を合成してブログのアイキャッチ画像やプレゼン資料を作っている人をよく見かけます。 カッコイイですよね。私も作りたい!と思い、ネットで探していたのですが、Photoshopの無料素材はたくさんあるのですが、なんか難しそう・・・ 今回は有料ですが、かんたんにApple製品やSamsung、Surfaceなどのモックアップ画像を合成できるMacアプリ「Mockups」を紹介します。 テンプレートもあって、カッコイイ画像をすぐ作ることができますよ!
Mockups
カテゴリ: 開発ツール 価格: ¥300(記事公開時)
デベロッパ名: Mojtaba Komeili
以下の記事を参考にしました。
Apple製品のモックアップ画像をかんたんに合成できるMacアプリ「Mockups」 – iTea3.0
Mockupsの使い方
「 Mockups」を起動します。すると、このような画面が表示されます。 「Custom Template」はまっさらな状態から始まります。また「LADIIN」「Experience」という2つのテンプレートが準備されています。
Express Templateをクリックすると、Device Typeから合成画像を作成したいデバイスを選択できます。いろいろ選択できますが、iPhoneは今のところ6、6Plusは選択できません。 今回はテンプレートの「Experience」を使ってみます。選択し、「Create Project」をクリック。
このような画像が表示されます。大きめに表示されるので、全画面表示をオススメします。
右の「Attributes」-「Rotation」で縦置き、横置きを選択できます。 デバイスを変更した場合は、「Device Type」で変更できます。 「Properties」ではズームやレイアウトを確認できます。
「Layers」では「Visible」のチェックを外すと表示されなくなります。 また、iPhone SilverをiPhone Blackのレイヤーの前にドラッグ&ドロップすることで、iPhone Blackが前に表示されます。 ドラッグ&ドロップでレイヤーを自由に変更できます。
中央の「Add New Object」をクリックすることでデバイスを新しく挿入できます。 今回はMacBookを追加しました。MacBook Proしか選択できませんでした。 「Add New Label」で新しいテキストを、「Add New image」で新しい画像を挿入できます。
MacBookを選択し、「Attributes」-「Browse」をクリックすることで、合成画像を作成することができます。簡単ですね!
保存するときは、右上の「Export」をクリックし、保存先を指定します。 「Share」をクリックすることで、TwitterやFacebookにシェアすることもできるようです。
できあがった画像もいい感じです。
あとがき
「Mockups」は300円かかりますが、かんたんにカッコイイ合成画像を作ることができます。プレゼンをする機会もこれからあるので、これからも使っていきたいと思います。 ただ、MacBookを選択しているのに、iPhone5sやSilverと表示されたりなど、少し動作が安定しない時がありました。少し気になりますね。アップデートに期待です。 興味がある人はぜひ使ってみてください!
Mockups
カテゴリ: 開発ツール 価格: ¥300(記事公開時)
デベロッパ名: Mojtaba Komeili