共有する前にスクリーンショットにきれいな境界線を追加してください

丸い角、ストローク、ソフトシャドウ – デザインソフトウェアを使わずに洗練されたプレゼンテーションを実現します。

  • ローカルで処理され、画像はアップロードされません
  • 無料、透かしなし
  • 角丸 + 境界線 + 影、リアルタイムプレビュー

はじめる

最短パス・画像丸め影処理

ソフトウェアをインストールする必要はなく、すべてのプロセスが Web ページ上で完了し、画面はリアルタイムで更新されます。

  1. 1

    写真をアップロードする

    画像をクリックして選択するか、Web ページに直接ドラッグします。 JPG、PNG、WebP、GIF がサポートされています。各画像は 20MB を超えてはなりません。一度に処理される画像は 1 つだけです。

  2. 2

    フィレットの半径を調整する

    角丸スライダーをドラッグして四隅の曲率をリアルタイムに調整すると、プレビュー効果がすぐに更新されます。

  3. 3

    境界線または影をオンにする

    必要に応じて境界線と影をオンにし、それぞれの色、幅、透明度、範囲を設定し、キャンバスの背景色を設定します。

  4. 4

    ダウンロードして保存

    効果が満足できることを確認したら、「ダウンロード」をクリックします。画像は現在の設定に従って再生成され、ローカルに保存されます。

トラブルシューティング

丸い角、境界線、影はバッチ処理をサポートしていますか?

サポートされていません。このツールは単一の画像調整として位置付けられています。フィレットの半径と影の強さが適切かどうかは、通常、イメージの具体的な比率や用途を 1 つずつプレビューして確認する必要があります。たとえば、正方形のスクリーンショットと長いポスターでは、大幅に異なるフィレットの比率が必要になります。同じパラメータのセットを適用すると、効果に一貫性がなくなる可能性があるため、単一の画像を微調整するためのツールとして設計されています。複数の写真を処理する必要がある場合は、1 つずつ開いて個別に調整することをお勧めします。

丸い角、境界線、影はコンピューターまたは携帯電話で行われますか? それともサーバーにアップロードする必要がありますか?

現在お使いの端末のブラウザ上で完全に完結します。リアルタイム プレビューは、ブラウザーのネイティブ CSS 境界線、丸い角、影のスタイルを使用して即座にレンダリングされます。ダウンロード時に、Canvas を使用して同じパラメータに従って再描画し、最終イメージを生成します。元の画像は、プロセス全体を通じてどのサーバーにもアップロードされません。

影を追加した後、エクスポートされた画像の周囲の領域が元の画像よりも大きくなるのはなぜですか?

投影効果をはっきりと確認するには、影を一定の範囲に外側に広げる必要があるため、キャンバスが元の画像と同じサイズの場合、影は直接切り取られて見えなくなります。したがって、エクスポート時には、現在設定されている影のぼかし範囲、投影距離、境界線の幅に応じてキャンバスが自動的に拡張されます。追加の領域は選択した背景色で塗りつぶされ (または透明のまま)、影が完全に表示され、トリミングされないことが保証されます。

背景色に「透明」を選択しても、エクスポートした JPG 画像の背景が白いままになるのはなぜですか?

JPG 形式自体は透明チャネルをサポートしていません。背景が透明で、元の画像が JPG 形式の場合、透明部分は自動的に白で塗りつぶされます。これは JPG 形式に固有の制限であり、処理エラーではありません。本当に透明な背景が必要な場合は、画像を PNG または WebP 形式でアップロードしてください。エクスポート結果は処理後も透明な背景を保持します。

フィレットの円弧、境界線の幅、影の範囲の値はピクセル単位で固定されていますか、それとも比例して計算されますか?

これらは、固定ピクセル値ではなく、画像自体の幅と高さの比率に基づいて計算されます。このようにして、アップロードされた画像の解像度が大きくても小さくても、同じスライダー値で同じ視覚的比率効果を実現できます。プレビューで見られる効果も、ダウンロード後に生成される最終的な画像効果とまったく同じです。

EXIFの撮影情報や加工画像の元の透明背景は保持されますか?

このプロセスの本質は、再描画とエンコードです。元の画像の背景が透明な場合、透明な領域は丸い角の外側に残ります (塗りつぶしに不透明な背景色が選択されていない限り)。元の画像の EXIF 撮影パラメータ、位置情報、その他のメタデータは、再エンコード後は保持されません。特に EXIF を表示または消去する必要がある場合は、「EXIF Cleaner」ツールを使用できます。

  • 元の画像はサーバーに入りません

    エフェクトのレンダリングとエクスポートのプロセス全体はブラウザー内でローカルに完了し、画像はサーバーを経由しません。

  • 丸みを帯びた影のないオーバーレイ

    3 つの効果は単独で使用することも、組み合わせて使用​​することもでき、最も洗練された表示ニーズに対応できます。

  • WYSIWYG リアルタイム プレビュー

    スライダーをドラッグすると、画面がすぐに更新されます。ダウンロードする前に、満足していることを確認してください。試行錯誤を繰り返す必要はありません。

  • アカウントを開設しなくても繰り返しエクスポートできる

    登録、支払い、隠れた使用制限はありません

該当する状況

このような場合、通常はこのページを開く方が簡単です

機能リストではありませんが、「画像をドラッグする価値があるのはどのような場合か?」うまくいかない場合は、無理に使用せず、ツールを変更してください。

アプリ/ウェブページのスクリーンショットと角の丸い投影ディスプレイ

製品紹介ページやポートフォリオのインターフェイスのスクリーンショットに丸い角とソフト シャドウを追加して、実際のデバイスの表示効果をシミュレートし、スクリーンショットをより洗練されたプロフェッショナルに見せます。

Eコマースの商品写真を洗練し、縁取りを施した

メインの商品画像に細い枠線とわずかな影を追加して、商品画像が白い背景に重なり合うようにし、クリック数とコンバージョン数を増やします。

角を丸くしてソーシャル カバー/アバターを美しくする

公式アカウントのカバーやアバターに角丸を追加し、ビジュアルスタイルと背景色を統一することで、ソーシャルトップページをよりすっきりと美しく見せます。

一致する提案

丸い角、境界線、影、より良い結果を得るためにそれらを一致させる方法

異なるパラメータの組み合わせには、異なるシナリオが適しています。最初にこのチートシートを参照して微調整すると、最初から試すよりも早く満足のいく結果が得られます。

エフェクトの組み合わせ推奨パラメータ範囲シーンに合わせて
角を少し丸く+ソフトシャドウ角丸 8%~15%、影の透明度 25%~40%、ぼかし範囲が大きく、投影距離が小さいアプリ/ウェブページのスクリーンショット表示、フローティング カード効果をシミュレート
大きな丸い角 + 影なし角が 25% 以上丸くなっており、影は有効になっていませんアバターとアイコン絵、丸くて愛らしいビジュアルスタイルを追求
細い境界線 + 影なしまたは薄い影枠線の幅が狭く、色が背景色または白に近い白背景に枠感をプラスしたEC商品画像
直角 + 鮮明な影角丸0%、影の透過率40%以上、投影距離が長い立体的な吊り下げ感を強調したプロモーション映像やポスター素材

上記は一般的なマッチングのアイデアです。実際の効果は、写真自体の構成と背景色に関係します。プレビュー領域でスライダーをドラッグして繰り返し比較し、現在の画像に最適なパラメータの組み合わせを見つけることをお勧めします。

技術的な説明

ローカル フィレット シャドウ処理について次の 2 つのことを知っておく価値があります。

  1. 01

    ライブ プレビューと最終エクスポートでは同じパラメータ セットが使用されます

    スライダーをドラッグすると、ブラウザーのネイティブ CSS の丸い角、境界線、および影のスタイルを使用して、プレビュー画像が即座にレンダリングされます。クリックしてダウンロードすると、ブラウザの Canvas 描画インターフェイスが使用され、まったく同じ比率パラメータで再描画され、画像ファイルにエンコードされ、ダウンロード結果とプレビュー効果の一貫性が保証されます。プロセス全体はサーバーを経由せずにデバイス上でローカルに完了します。

  2. 02

    エクスポートされた画像のサイズが元の画像より大きいのはなぜですか?

    シャドウまたは幅広の境界線を有効にした後、切り取られることなく完全に表示されるように、効果を画像の周囲の特定の範囲に拡張する必要があります。エクスポート時に、キャンバスは現在の影のぼかし範囲、投影距離、境界線の幅に基づいて拡張する必要がある余白を自動的に計算し、余分な領域は選択した背景色で塗りつぶされるか透明のままになります。影と境界線が必要ない場合 (両方ともオフに設定されているか、値が 0 の場合)、エクスポートされる画像のサイズは元の画像と同じままになります。

ファイルはまだ手元にあります。ファイルを 1 つドラッグして試してください。

口座を開設する必要はありません。満足したら、バッチ処理を開始してください。そうでない場合は、パラメーターを変更して再試行してください。