レトロコミックブックアート：Webデザインでのベンデイドットの使用
公開: 2019-07-12ウェブデザイナーとして、私たちは常にウェブサイトに追加する新しい創造的なアイデアを探しています。 ありがたいことに、インスピレーションを見つけるのは難しいことではありません。 たとえば、レトロな漫画本のアートは常に復活します。 タイポグラフィの場合もあれば、写真フィルターの場合もあります。 最近、ベンデイドットのテクスチャやイラストが色んな所に出てきています。 自分で試してみませんか？
この記事では、ベンデイドットの起源とそれらを自分で作る方法を説明します。 さらに、この視覚的手法をWebデザインで使用する方法の例をいくつか示します。
ベンデイドットとハーフトーンドット
「ベンデイドット」と「レトロコミックアート」という用語は、同じ意味で使用される傾向があります。 実際、ベンデイドットが最初に来ました。 ベンジャミンヘンリーデイジュニアは、カラー印刷のコストを削減するために、1879年にそれらを作成しました。 これらは、グリッド上に等距離のドットを配置する手法です。 白の上に印刷された赤い点はピンクになり、青と黄色の点は緑になります。
ベンデイドットは、白黒の平版印刷および写真印刷に使用されたハーフトーンドットに触発されました。 両方のドットスタイルは正方形のグリッドに配置されていますが、ハーフトーンドットはサイズが異なり、ベンデイドットはすべて同じです。
ベンデイドット、コミックブック、ロイリキテンスタイン
1930年代には、漫画本が大々的に登場し、ベンデイドットは頼りになる印刷技術でした。 ベンデイドットは、ロイリキテンスタインが1960年代にそれらの一般的な独自性に触発されるまで、正確にファインアートではありませんでした。 ベン・デイのドットが脚光を浴びたのは、ロイ・リキテンスタインのコミックアートの作品でした。 リヒテンシュタインがしたことは、パルプ漫画のページの小さなセクションをコピーして、それらを大規模な傑作に変えることでした。
ロイ・リキテンスタインはベン・デイのドットに似たドットを使用していましたが、少し異なっていました。 美術史家は、彼らがより適切に「リヒテンシュタインドット」と呼ばれているとあなたに言うでしょう。 主な違いは、ベンデイドットが小さくて正方形のグリッド上にあるのに対し、リヒテンシュタインドットはオフセット対角グリッド上にあり、かなり大きいことです。
画像クレジットRaduBercan / shutterstock.com
レトロコミックブックアートの台頭
ロイ・リキテンスタインの芸術は、レトロな漫画本の芸術の代名詞になっています。 多くの芸術家がリヒテンシュタインの技法を模倣しています。 多くのデザイナーは、ブランディングスキームやマーケティング資料の作成にコミックドットを使用しています。 これで、BenDayドットまたはLichtensteinドットをWebサイトに追加することもできます。
スクロールして、独自のベンデイドットを作成する方法を学びます。 達成する最終的な設計は、実際にはさまざまな手法をカバーします。 ハーフトーンドット、ベンデイドット、およびリヒテンシュタインドット。 全体として、それらはすべてレトロなコミックスタイルのデザインです。
それを手に入れましょう。
Photoshopでレトロなコミックブックアートを作成する方法
ハーフトーンドットは非常に一般的であるため、Photoshopにはそれらのフィルターがあり、どの画像でも機能します。 このフィルターが行うことは、画像の色をドットに変えることです。 ドットの角度分布は、カラーチャネルによって制御されます。 フィルタを適用すると、画像はシアン、マゼンタ、黄色、黒のドットで構成されます。 赤（＃ff0000）、緑（＃00ff00）、青（＃0000ff）などの純粋な色にハーフトーンフィルターを適用すると、分離する色がないため、フィルターは機能しません。
適切なベンデイドットとリヒテンシュタインドットを作成するには、AdobeIllustratorが必要です。 スキップするには、ここをクリックしてください。
Photoshopを使用してハーフトーンドットで写真をレトロなコミックブックアートのように見せるための方法
1.コミックスタイルのドットに変換する画像を選択します。
私はこの変な格好の男を無料のストックフォトサイトGratisographyから選びました。 同じ画像を使用してフォローする場合は、ここをクリックしてください。 Photoshopで画像を開き、キャンバスの中央に配置します。
2.レイヤーを2回複製し、最初のレイヤーを非表示にします。
複製するには、最初のレイヤーを選択した状態で、右クリックして[レイヤーの複製]を選択するか、Macの場合はCommand + J、PCの場合はCtrl + Jをクリックします。 それぞれの名前を変更して、それぞれを見失わないようにします。 最上層のブレンドオプションを「ハードライト」に調整し、不透明度を約40％に下げます。 色が劇的に変化します。これにより、ハーフトーンドットの粒子の粗い外観を得ることができます。
3.上位2つのレイヤーをグループ化し、それらをスマートオブジェクトに変換します。
4.スマートオブジェクトにハーフトーンドットフィルターを適用します。
[カラーハーフトーン設定]ポップアップで、最大サイズのピクセルを13に、チャネルをさまざまな角度で選択します。 これらを試して、さまざまな効果を確認できます。
5.最下層を複製し、最上層に移動します。
'Find Edges'フィルターを適用し、輪郭がよく見えるようにレベルを調整します。 これを実現するには、黒い三角形を右に移動し、白い三角形を左に移動します。
6.調整を使用して、レイヤーを白黒に変換します。
調整レイヤーの不透明度を30％に設定します。 最後に、「エッジの検索」レイヤーのレイヤーオプションを「オーバーレイ」に設定します。
完成したデザイン！
Photoshopでレトロなコミックブックアートの背景を作成する方法
1.素敵なデザインまたはグラデーションのある色の背景を見つけます。
Photoshopダッシュボードで画像を開き、画面の中央に配置します。
2.背景レイヤーのロックを解除し、複製して、下のレイヤーを非表示にします。
ハーフトーンドットフィルターを最上層に適用します。 さまざまな効果のために、ハーフトーンドットフィルターポップアップのパラメーターを調整します
3.完成したデザイン！
イラストレーターでレトロな漫画本のアートの背景を作成する方法
前に述べたように、ハーフトーンドットは、画像のコントラストを再現するためにさまざまなサイズになっています。 上で使用したPhotoshopフィルターは、その効果に最適です。 ただし、Ben-DayドットやLichtensteinドットのような同じサイズのドットを作成する場合は、AdobeIllustratorと統合パターンメーカーを使用する必要があります。 上で述べたように、ベンデイドットは正方形グリッド上にあり、リヒテンシュタインドットはオフセット対角グリッド上にあります。 どちらもIllustratorのパターンメーカーで実現できます。
Illustratorでベンデイドットパターンを作成する方法
1.Illustratorで新しいプロジェクトを作成します。
サイズはそれほど重要ではありません。 600 x350ピクセルを使用しました。
2.角丸長方形ツールを選択します。
アートボードを1回クリックして、図形のサイズを設定します。 角の半径が7.5oxで15pxx15pxにします。 円の色を青い塗りつぶしでストロークなしに変更します。
3.上部のメニューバーで[オブジェクト]をクリックし、[パターン]、[作成]の順に選択します。
4.ドットが正方形のグリッド上にあるように設定を調整します。
これらはあなたが選ぶ必要がある好みです：
- グリッドへのタイルタイプを選択します
- アートへのサイズタイルを確認してください
- H間隔とV間隔を15px x 15pxに設定します
- [9 x9にコピー]を選択します
下の画像のようなパターンが表示されたら、[完了]をクリックします。 これにより、パターンが自動的にスウォッチパネルに保存されます。
IllustratorでLichtensteinドットパターンを作成する方法
このパターンは上記と同じ手順に従い、パターンメーカーで設定を調整するときにのみ変更されます。 Ben-Dayパターン設定を開き、[コピーを保存]を押します。 新しいパターンに「LichtensteinDots」という名前を付けます。 [OK]をクリックすると、スウォッチパネルにコピーとして保存されます。 Ben-Dayドットパターンを閉じます。 スウォッチパネルに戻り、Lichtensteinドットパターンを開きます。 パターンにカーソルを合わせると、パターンの名前がポップアップ表示されます。 環境設定で、[レイアウトタイプ]のみを[行ごとのブリック]に変更し、[完了]をクリックします。
レトロな漫画本のアートパターンを形に追加する方法
独自のレトロコミックパターンを作成したので、いつでも好きな形に適用できます。 まず、パターン見本を保存して、将来のプロジェクトに追加できるようにする必要があります。
1. [スウォッチ]パネルで、作成した両方の新しいパターンを選択します。
スウォッチライブラリアイコンをクリックし、[スウォッチを保存]を選択します。 新しいスウォッチに「レトロコミックブックパターン」という名前を付けて、[OK]をクリックします。
2.新しいプロジェクトを作成し、これらのパターンを使用する場合は、[スウォッチ]パネルに移動します。
新しいスウォッチは表示されないため、インポートする必要があります。もう一度スウォッチライブラリアイコンをクリックし、[ユーザー定義]、[レトロコミックブックパターン]の順にスクロールします。 新しいウィンドウが開き、見本と漫画のパターンが含まれている通常の色が表示されます。 これで、好きな形で使用できるようになりました。
3.新しい形状を作成し、パターンの1つで塗りつぶします。
ドットのサイズは、作成するシェイプのサイズによって異なります。 形状の最大サイズは、アートボードのサイズによって制御されます。
形状が小さいほどドットが大きくなり、その逆も同様です。 小さいシェイプを使用していて、ドットが大きすぎると感じた場合は、シェイプ内のパターンを右クリックして、[変換]、[スケール]の順に選択します。 ドットを非常に小さくするには、次のパラメータを選択します。
- 均一：10％
- オプションで：変換パターンをチェックします
さまざまなサイズのドットを取得するには、「均一」オプションのさまざまなパラメータを試してください。
4.レトロコミックスタイルで星の形を作成するには、1000ピクセル×1000ピクセルで新しいプロジェクトを作成します。
カラーパネルで、ストロークの場合は黒をクリックし、塗りの場合はLichtensteinパターンをクリックします。 星の形を選択し、キャンバスをクリックして表示します。
Webデザインでレトロなコミックブックアートを使用するためのアイデア
コミックアートのトレンドが高まっているようです。 もちろん、すべてのブランドがこのスタイルの創造性から恩恵を受けるわけではありません。 色を愛する楽しいブランドには、ベンデイドットとリヒテンシュタインにインスパイアされたグラフィックが新鮮な空気を吹き込むのに最適です。 漫画本のドットパターンの最適な使用法は、別の色の上またはなしの背景としてです。 同様に、大きな吹き出しを区切り文字として使用したり、コンテンツでコミックスタイルの感嘆符を使用したりしてみてください。 上記のチュートリアルを使用して独自の画像を作成することも、Freepikからすでに設計された画像を入手することもできます。
以下のデザインは、Freepikから供給された漫画本のデザインで実現されました。 ご覧のとおり、設計者はドットのサイズをどのように設計するかについて自由を取りました。 それにもかかわらず、彼らはまだ完全に独自の方法でレトロコミックスタイルを具体化しています。
結論
ご覧のとおり、レトロな漫画本のデザインの可能性はかなり多様です。 クラシックなスタイルからよりモダンなバージョンまで、ほとんど何でもできます。 自分でパターンを作成する場合でも、オンラインでグラフィックを入手する場合でも、Retro Comic BookアートとDiviを使用すると、非常にすばらしいものを作成できます。