0

これはプログラミングに関する直接的な質問ではありませんが、数学と css を少し使用しているため、しばらくの間私を悩ませてきました。

私の目的は、斜めのロゴ画像 (ロゴを 35 度回転させたもの) を作成し、タイル状に表示できるようにすることです。このよく考えられた質問について言及しましたが、現在、ステージ 1 で少し立ち往生しています。

これが私のロゴだとしましょう:

ここに画像の説明を入力

左上に小さなアイコンがあり、設定されたサイズの長方形内に設定されていないため、境界が明確ではないという点で、それほど規則的ではありません。

最初のステップは、現在の形式でタイル化できるようにすることだと思います。そのまま CSS タイル ルールを適用するだけでは、次のような結果になります。これは良くありません。

ここに画像の説明を入力

理想的には、回転する前に交互の行をオフセットして、グリッドのようにならないようにする必要があります。

ここに画像の説明を入力

オフセットは、隣接する 2 つのロゴの同じポイント間のスペースの 50% にする必要があります。このステップを達成するための最良の方法は何ですか? 正しく表示されるまで、コピー/貼り付けしてドラッグするだけですか? これはそれほど正確ではありません。（フォトショップを使用）。

次に、シームレスに繰り返されるようにトリミング領域を決定する必要があります。

これが完了すると、フォトショップで希望の角度に回転できる画像のグリッドができました。難しいのは、トリミング領域を正しくすることです。次に、上記のリンクを参照します。

さらに難しいのは、横方向のロゴに適したサイズのクロップ領域を確保することです。エッジの比率が最小公倍数が非常に高いことを意味する場合、回転したトリミング領域は巨大で無意味になります。

要約すると、水平グリッドを確実に設定して適切なサイズ (150 x 100 ピクセルなど) のトリミング領域を取得するための最良の方法は何ですか?

4

1 に答える 1

1

OK、いくつかの精力的な試みの後、私はそれを割ったが、45度の回転だけだった. 他の角度のトリミング領域を計算する方法についてアドバイスをいただければ幸いです。

  • したがって、最初のステップは、質問の最後の例のように、ロゴの水平グリッドを作成することです. これを行うには、ロゴをキャンバスの左上に配置し、ロゴがちょうど内側に収まるようにキャンバスをトリミングします.

  • 次に、必要に応じてキャンバスのサイズを変更して、必要な画像のサイズに近づけます。この段階では縦横比は重要ではありません。扱いやすい画像サイズが必要です。幅250pxくらいがいいです。この結果、もう一方のエッジに奇妙な次元が生じる可能性があります。例: 幅 250 ピクセル x 高さ 78 ピクセル。

  • 次に、ロゴを空白で埋めます。これには2つの目的があります。まず、ロゴ間に適切なスペースを確保し、次に適切な縦横比を確保します。これは本当に重要です。可能であれば、一方の端がもう一方の端の長さの 1/2 または 1/3 になるようにキャンバスを作成してみてください。これにより、最小公倍数をできるだけ低くすることができます。キャンバスのサイズを変更するときは、実際のロゴがキャンバスの左上にあり、パディングが画像の右と下にあることを確認してください。

  • 手動で画像を並べて表示しますが、パディングされた領域も含めます。これをそのままコピーすると、Photoshop はパディング領域を無視し、ロゴ自体のみをコピーします。新規レイヤーを作成し、ロゴレイヤーのあるレイヤーフォルダーに入れます。このレイヤーを色で塗りつぶします。

  • ここで、新しい Photoshop ドキュメントを作成します。キャンバスのサイズをかなり大きくします。1000px x 1000px のように。

  • 作成したばかりのレイヤー フォルダーをこの新しいドキュメントにコピーします。レイヤーが選択されている状態で [レイヤー] -> [複製] を選択し、新しいドキュメントをコピー先として選択します。

  • レイヤーを複製してドラッグして、このフォルダーを並べて表示します。最初のコピーを下にドラッグし、次に右にドラッグします。Photoshop は、キー ポイントでレイヤーを元のレイヤーにスナップすることで、これを支援します。複製されたレイヤーの上端が元のレイヤーの下端に接触し、長さの途中でスナップして、水平方向にオフセットできることがわかります。

  • 大きなキャンバスをタイルでほぼ覆うまで、複製とスナップを繰り返します。

  • 次に、タイル化可能な画像を生成するトリミングを行います。選択ツールを入手し、fixed sizeオプションを選択します。元の画像の長い方と同じ長さの辺を持つ正方形を選択するピクセル サイズを入力します。つまり、元の画像が 150px x 50px の場合、切り抜きサイズを 150px x 150px にする必要があります。

  • キャンバスの任意の場所をクリックして選択し、新しいドキュメントにコピーマージすると、横向きのロゴではありますが、使用できるタイル可能な画像が表示されるはずです。

  • 今それを回転させます。大きなタイル張りのドキュメントに移動します。Ctrl-D で選択を解除します。編集→キャンバスを45度回転。

  • 次に、作物のサイズを計算します。これは次のとおりです。

    1. 最小公倍数を求めます。したがって、寸法が 150x50 の場合LCM = 150。

    2. クロップ ボックスのサイズは、他の辺の長さ = LCM に対する直角三角形の仮説です。つまりLCM = 150、L = sqrt(150 2 * 150 2 ) = 212.12 の場合。

  • 次に、回転したキャンバスのサイズ 212 (この場合) の正方形のトリミングを作成します (どこでも構いません)。これは、保存、サイズ変更、編集などが可能なタイル可能な画像である必要があります。

この方法は、私の会社の Twitter ページでうまくいきました

私が言ったように、他の角度のクロップサイズを計算する方法は役に立ちます.

于 2013-02-22T14:39:15.117 に答える