インスタグラム投稿画像にこだわる為のiPhoneフレーム素材

写真映えの意味がいまいち「ピン」とこないhuma worksですが笑^^、ブログやってますというメッセージをフレームで無駄にお洒落感を表現してみようとチャレンジしてみました。 透明gifのフレーム素材の話 以前にもサムネ […]

[スポンサードリンク]

写真映えの意味がいまいち「ピン」とこないhuma worksですが笑^^、ブログやってますというメッセージをフレームで無駄にお洒落感を表現してみようとチャレンジしてみました。

透明gifのフレーム素材の話

以前にもサムネイルをお洒落なバナーにする方法について投稿しましたが、その続編みたいなものなのですが、細かな作業方法などは省かせて頂きますので興味ありましたら以前の投稿を参照してみて下さい^^。

WEBデザインに使える スクリーンショットをお洒落にする方法

基本概念だけご紹介させて頂きますm(_ _)m

画像を重ねて利用できるフレーム

僕は、基本PCで作業するのがとても苦手で、出来れば、WEB制作などもiPhoneとiPad Proで完了させたいと本気で思っています。

そんな僕は、それを実現する為に先程「サムネイルをお洒落なバナーにする方法についての投稿」という過去の記事にふれました、画像を重ねて利用できるフレームを使用します。
その際は、Adobe Drawというアプリを使用しています。他に画像を重ねて保存できるアプリをしらないので、もし有ればそれでも大丈夫だと思います^^。

ブログのトップページがiPhoneの後ろ側からひょっこりと顔を出している画像を用意してみました。
この画面の写真について「ブログで紹介してますよ〜」みたいなメッセージにしています。こんな感じで投稿していれば、ブログで紹介したんだぁ、と認識してもらえるようになるのかと思い表現しています。
もちろん画面の中の画像を伝えたいのでブログのトップページは、主張しすぎずひょっこりと顔を出す程度にしてみました。

さて、この画像だけだといまひとつどのような仕組みになるのか分かりづらいので、背景に透明風の壁紙を置いてみます。

白い四角とグレーの四角が並んでいますが、それが見えている部分が透明になっている画像です。
僕は16:9のバランスのiPhone Xを愛用しているので、この画像を利用していますが、もし作成される場合、自身の環境に合わせるようにして下さいね。サムネイルのサイズがはみ出てしまいますので汗^^。

iPhoneの画面部分をくり抜いた透明gif画像ですので、ちょうど画面の部分の重ね順は下側になるようにスクリーンショットをはめ込んで下さい。機種が一緒なのでぴったりはまるのが心地よい笑^^。

今回画面以外も透明にしている理由として、背景の色が毎回変えれる事です。
毎回同じ色だと味気ないし写真によってカラフルな印象やシックな雰囲気と色々合わせたいですね。

ブルーの背景にしてみましたが、背景を置くだけで雰囲気がかわります。

取り敢えず撮影した写真の為なんか微妙な雰囲気ですが、ピンク色もポップな感じでお洒落を演出出来そうですね。

仕事が効率よくなる

実は、こういった素材だけに言える事ではないのですが、反復作業が想定される場合はフォーマット化する事で大幅に作業時間が短縮されます。
営業の基本、「段取り8割 営業2割」みたいな言葉もあるように準備段階にしっかり土台を気づけば売上を伸ばす為に残り2割力を入れるだけでいい・・みたいな概念ですね。
例えば、このフォーマットを毎回使用するてなるとフォーマット化してファイル保存していても、パソコン作業の場合下記のような作業が想定されます。

1.パソコンを開く 2.スマホのスクリーンショットをメールだよ 3.メールを開いて保存 4.イラストレーターを開く 5.スマホ画像にスクリーンショット画像を配置 6.背景色を変更 7.保存

という流れが想定されますが、iPhoneとiPadの場合約1分程度で作業が終わってしまうのです。
実際比べてませんが、パソコン立ち上げの間に作業が終わるように思います^^。

結構便利な手法だと思いますので是非チャレンジしてみて下さいねm(_ _)m

[スポンサードリンク]

Weekly

今週一番閲覧された記事をランキング形式で表示しています。人気になるには何か魅力があるんですね。是非皆様も読んでみて下さい。