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. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. webデザイン

    Photoshopスゴ過ぎだろっ!美女の正体は逆再生すると実はピザだった的な話題があったけど・・

    今更感まんさいですが・・「美女の正体は実はピザでした」ってことで話題に…

  2. webデザイン

    photoshopで普通のノイズを加えるだけじゃ満足できない人にはNoise Texture Gen…

    通常、画像にザラっとしたノイズを加える場合には ↓ のようにフィルター…

  3. webデザイン

    Photoshopユーザー必見!無料になったNik Collectionのヤバすぎる使い方

    Photoshopでクオリティの高い加工が可能なプラグインのNik C…

  4. webデザイン

    photoshopで縁取りを応用し素人っぽさから一歩抜け出すスゴ技を伝授。

    photoshopで文字などをデザインする際、レイヤースタイルの境界線…

  5. webデザイン

    Photoshopでネオン管が光っているような文字の作り方を解説

    歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っ…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  3. キュレーション

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
PAGE TOP