webデザイン

ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

ブログを書いているとパソコン画面の”はめ込み画像”を作りたい場合がありますが、そんなときはわずか10秒でモックアップ画像が作れるMockDropがめっちゃ便利っ!パソコンだけではなく、スマホやタブレット、ウォッチなどの”はめ込み画像”も簡単&無料で作れます

ドラッグ&ドロップではめ込み画像が作れるMockDrop

MockDropにアクセスすると【all】【Smartphone】【Laptop】【Desktop】【Watch】【Tablet】【Tv】のタブがあるので任意のものを選択することができます。(選択しなければすべてのデバイス素材が表示)

ここでは、デスクトップパソコンのはめ込み画像を作ってみようと思います。各デバイスのディスプレイには推奨サイズらしきものが書いてあるので、まず【1920 × 1080】の画像を用意します

使い方はいたって簡単。

「これが良いかな~」と思ったデバイス素材にはめ込みたい画像をドラッグ&ドロップしてプレビューを確認したら【download mockup】を押してダウンロードするだけ

すると、約10秒でこのような画像が完成。

いろいろはめ込んでみても面白いMockDrop!

“複数の素材”にはめ込んでからモックアップ画像を選んでダウンロードすることもできます。

うん、かっちょよい(゚ー゚)

角度があってもちゃんとはまる(゚ー゚)

コレなんか、背景となじむように色彩まで調整されてる(゚0゚*)

MockDropでスマホ用のはめ込み画像を作ってみよう

【Smartphone】のタブをクリックしてスマホ用のはめ込み画像を作ってみます。ここでは【750 × 1334】の画像を用意しました

画像をドラッグ&ドロップ。

複雑な形状のイヤホンコードもなんのその、良く見るとコードの影も付いてちゃんとなじんでますね(゚0゚*)

MockDropでウォッチ用のはめ込み画像を作ってみよう

【Watch】のタブをクリックしてウォッチ用のはめ込み画像を作ってみます。ここでは【600 × 600】の画像を用意しました

画像をドラッグ&ドロップ。

すると、こんなはめ込み画像が完成!

MockDropで用意されている素材は多くはないですが、1枚1枚のクオリティーが高く”完成度の高いはめ込み画像”が作れますね

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. webデザイン

    初心者でも簡単!GIMPをダウンロードしてインストール方法。

    GIMP公式サイトへGOっ!【Download GIMP バージョン】…

  2. webデザイン

    フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

    フォトショップのフィルターを活用すると、画像を印象をガラっと変えること…

  3. webデザイン

    社長っ!御社のホームページはタコサイトですよっ、、ウェブ制作者・担当者が知っておくべき重要事項

    ちょっと過激なタイトルですが、タコとは悪口で使われるような意味を含んだ…

  4. webデザイン

    素人っぽいWEBサイトに見えてしまう4つのロゴデザインの特徴と誰でも簡単にできるPhotoshopと…

    ウェブサイトやブログなどでデザインクオリティの高いテンプレートを使用し…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  2. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…
  3. Photoshopを使って動画をGIFアニメーション(動く画…

思考系のおもろい記事

ブログラ
  1. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
PAGE TOP