what this does
独自の画像を繰り返しタイルに変換。
Pattern Generatorは16種類の幾何学プリセット — またはアップロードした画像 — から背景を生成できます。テクスチャスウォッチ、ブランドマーク、写真の切り抜き、またはPNG、JPEG、WebP、SVGファイルをリピートタイルとして使用できます。
ツールは完全にブラウザ内で動作します。ファイルを選び、背景色、タイルスケール、不透明度を調整し、CSSをコピーするかSVGまたはPNGをダウンロードします。アカウントもサーバーアップロードも不要です。
step-by-step
5ステップでアップロードとエクスポート。
- Pattern Generatorを開きます。
- パターン選択でYour imageカード — グリッド先頭のアップロードタイル — をクリックします。
- デバイスからPNG、JPEG、WebP、またはSVGファイルを選びます。画像が読み込まれるとプレビューが更新されます。
- Background colour、Scale、Opacityを調整し、プレビューでリピートが正しく見えるまで調整します。
- Copy CSS、Download SVG、またはDownload PNGをクリックしてプロジェクトでパターンを使用します。
your file
画像に何が起こるか。
Pattern Generatorは画像を中央の正方形にクロップします — ファイルの中央、短辺をクロップサイズとして使用 — その正方形を現在のスケール設定のタイル寸法（最大256 px）にリサイズします。
すべての処理はデバイス上のメモリ内で行われます。元のファイルはTiny Design Shopやサードパーティサーバーにアップロードされることはありません。
transparent pngs
透過PNGと背景色。
画像に透過がある場合 — PNG、アルファ付きWebP、またはSVG — Pattern Generatorは画像を描画する前に、選択したBackground colourでタイルを塗りつぶします。画像の不透明部分は表示されたまま、透過ピクセルは背景色が透けて見えます。
ロゴマーク間の隙間の色を制御したり、切り抜きテクスチャのエッジを柔らかくしたり、ソースファイルに独自の背景がない場合にブランドの表面色に合わせるのに使えます。
export
CSS、SVG、またはPNGをコピー。
Copy CSSは、タイルをdata URIとして埋め込んだ、貼り付け可能なbackground-color、background-image、background-sizeブロックを提供します。リピートを表示する要素のスタイルシートまたはインラインスタイルに貼り付けます。
Download SVGはタイルをスタンドアロンのベクターファイルとしてエクスポート — Figmaフィルやデザインハンドオフに便利です。Download PNGはタイル状プレビューの1600×900ラスターをエクスポート — スライド、ソーシャルプレビュー、data URI背景を受け付けないツール向けです。
詳細の多いカスタム画像はより長いCSSスニペットを生成します。ツールがCSSが大きいと警告する場合は、インラインdata URIの代わりにDownload PNGを使うか、タイルを別の画像ファイルとしてホストすることをお勧めします。
limits
ファイルサイズ、タイルサイズ、セッションメモリ。
アップロードは8 MBまで。対応形式はPNG、JPEG、WebP、SVGです。タイルは最大スケールで長辺256 pxに制限 — スタイルシートを肥大化させずに鮮明なCSSリピートに十分です。
カスタム画像はこのブラウザタブ内のみに存在します。ページを更新するかタブを閉じるとアップロードはクリアされます — ファイルを再度選ぶ必要があります。クラウド保存やデバイス間同期はありません。
privacy
ファイルはデバイスから送信されません。
Pattern Generatorはブラウザ内でローカルにアップロードを処理します。クロップ、リサイズ、プレビュー、エクスポートはすべてお使いのマシン上で実行 — Tiny Design Shopサーバーには何も送信されません。完了したらタブを閉じてください。画像のコピーは保持されません。