BGがタイルをPhotoshopで適切に繰り返すかどうかをテストしますか？

9

私はPhotoshopで背景テクスチャを作成してWebで使用するように頻繁に取り組んでいます。残念ながら、私は通常、推測するか、他のWebサイトの景品を使用する必要があります。

Photoshopで独自のテクスチャを作成し、画像をエクスポートする前にそれらが適切にタイリングされているかどうかを確認したいと思います。これをすばやく行う方法はありますか？オフセットを使った方法を覚えていますが、ツールに慣れていません。

以下は背景タイルの例ですので、私が話している内容を確認できます。

tile1

tile2

adobe-photoshop  website-design  background  tiles 
— 運命の島
ソース

回答:

17
  • 画像を作成します。たとえば、200pxの正方形だとします
  • フィルター>その他>オフセットに移動し、画像サイズの半分（この場合は100px）であるxとyの数値を入力します
  • これにより、画像がその多くのピクセルを超えて移動し、キャンバスから移動したピクセルが反対側に配置されます。これで、パターンが完全に繰り返されていない画像の中央を縫い目が走っています。
  • この継ぎ目を修正して、好きなツールを使用してスムーズにブレンドします（クローンツールは一般的なオプションです）。
  • 新しい画像を保存します。

より複雑な画像の場合、最初にキャンバスのエッジ近くに落ちたときに見逃した可能性のあるエッジを修正するために、ピクセル寸法の約1/4の最終オフセットを行う必要がある場合があります。

— DA01
ソース
ありがとう、これは完璧です！まさに私が探していたもの
— Destiny Islands
5

DA01はそれを作る方法に答えますが、あなたの質問はそれをテストする方法です。その質問に対する答えは次のとおりです。

  1. パターンレイヤーを選択します
  2. 編集>パターンの定義
  3. 新しいレイヤーを作成
  4. すべて選択
  5. 編集>塗りつぶし>パターン>パターンを選択
  6. 大丈夫ヒットし、それがよさそうだかどうかを確認
— ライアン
ソース
2
うん。質問を完全に読み間違えました！良いヒント。別のオプションは、繰り返し背景を持つテストHTMLファイルを作成することです。次に、ファイルを再保存し、ブラウザをリロードします。
— DA01
1
はい私はHTML / CSSでそれを行う方法を知っていましたが、Photoshopもテストできることを知りませんでした。アドバイスありがとうございます！
— Destiny Islands
2

私は伝統的に画像をjpgまたはpngとして保存し、基本的なhtmlを使用してタイリングをテストします。

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

それをブラウザで開くと、タイリングが表示され、「image.jpg」を再保存してWebページを更新するだけで、リビジョンを確認できます。

— スコット
ソース
1

これを行う別の方法もありますが、制限は、他のすべてのパターンが同じサイズでなければならないということです。その理由がわかります。

手順：

  • 200px x 200pxのボックスを作成します。
  • それをスマートオブジェクトに変換します。
  • 複製して、横に3つのボックスがあるように配置します。間に重複やスペースがないことを確認してください。
  • 選択した3つのボックスを3つの縦の列に複製します。
  • まだ有効になっていない場合は、環境設定でフローティングウィンドウを有効にします。
  • スマートオブジェクトをダブルクリックして開きます。
  • 両方のファイルが見えるように、両方のウィンドウを揃えます。
  • スマートオブジェクトを任意のパターンで塗りつぶし、他のウィンドウで同時に動作していることを確認します。
— ムハンマドウメール
ソース
1

AMP Tile Viewerと呼ばれる優れた（個人用のフリーウェア）ツールがあり、画像がタイル表示可能かどうか、タイル表示されているかどうかをすばやく確認できます。私はそれをいつも使用していて、それはうまくいきます。Photoshopでパターンを作成する必要はなく、後で使用することも削除する必要もありません。

— TaranQ
ソース
0

私が行う方法は、タイルをjpgとして保存し、デスクトップでタイルに設定することです。とても簡単です。

— ジル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.