ウェブデザイナーのためのホームページ考察ブログ

WebデザイナーのためのWebページの考察を行うブログ。またはウェブページの作り方Tipsを語るブログ。

【便利サイト】iPhoneやMacやAndroid端末に指定した画像を埋め込んだ写真を作る

f:id:Keiro:20140902201118j:plain

↑こんな感じの携帯端末に画像が埋め込まれた写真をよく見ますよね?

これ凄く簡単に作れるWebサービスがあったのでご紹介します。

iPhone Screenshot Maker

その名も「iPhone Screenshot Maker」です。
作り方は簡単で、

①フレームを選びます
MaciPhoneiPadAndroidなど
画像を埋め込みたいフレームを選択します。

ちょっとナナメを向いたフレームもあってかっこいいです。

②オプションを設定します
基本的にデフォルトで問題ないと思います。

③埋め込みたい画像をアップロードします
こちらで気をつけたいのは画像の縦横比です。
各端末の縦の長さ、横の長さにあわせて画像を作成します。
念のため軽くまとめます!

Mac
1440x900
iPhone4S
960×640(3:2)
iPhone5 or 5S or 5C
1136×640(16:9)
iPad
1024×768(4:3)
Android
各フレームに記載されています。

こういう便利なウェブサービスっていいですよね!
みなさんもよかったら使ってみてください。

Photoshopデザインメソッド

Photoshopデザインメソッド