復古漫畫藝術:在網頁設計中使用 Ben Day 點

已發表: 2019-07-12

作為網頁設計師,我們一直在尋找新的創意想法來添加到我們的網站。 值得慶幸的是,靈感並不難找到。 例如,復古漫畫藝術總是捲土重來。 有時是排版,有時是照片過濾器。 最近,帶有 Ben Day 圓點的紋理和插圖出現在很多地方。 想親自嘗試一下嗎?

在本文中,我們將解釋 Ben Day 圓點的起源以及如何自己製作它們。 此外,我們還有一些關於如何在網頁設計中使用這種視覺技術的例子。

Ben Day 圓點和半色調圓點

術語“Ben Day dots”和“復古漫畫書藝術”往往可以互換使用。 實際上,Ben Day dots 是最先出現的。 本傑明·亨利·戴 (Benjamin Henry Day Jr.) 於 1879 年創建了它們,以降低彩色印刷的成本。 它們是一種在網格上放置等距點的技術。 印在白色上的紅點變成粉紅色,藍色和黃色點變成綠色。

Ben Day 網點的靈感來自用於黑白平版印刷和照相印刷的半色調網點。 兩種網點樣式都排列在一個方格上,但半色調網點的大小不同,而 Ben Day 網點都相同。

Ben Day Dots、漫畫書和 Roy Lichtenstein

在 1930 年代,漫畫書大量出現,Ben Day dots 是首選的印刷技術。 Ben Day 圓點並不完全是一門藝術,直到 Roy Lichtenstein 在 1960 年代受到其通用獨特性的啟發。 正是羅伊·利希滕斯坦 (Roy Lichtenstein) 的漫畫書藝術作品使本·戴 (Ben Day) 的點點成為眾人矚目的焦點。 利希滕斯坦所做的是複制低俗漫畫書頁的小部分,並將它們變成大規模的傑作。

儘管 Roy Lichtenstein 使用了類似於 Ben Day 點的點,但它們還是有些不同。 藝術史學家會告訴你,它們被稱為“列支敦士登點”更合適。 主要區別在於 Ben Day 點很小且位於方形網格上,而 Lichtenstein 點位於偏移對角線網格上且相當大。

圖片來源 Radu Bercan/shutterstock.com

復古漫畫藝術的興起

Roy Lichtenstein 的藝術已成為複古漫畫藝術的代名詞。 許多藝術家複製了列支敦士登的技術。 許多設計師在他們的創作中使用漫畫書點來製作品牌計劃和營銷材料。 現在,您也可以將 Ben Day 點或 Lichtenstein 點添加到您的網站。

滾動瀏覽以了解如何製作自己的 Ben Day 點創作。 您將實現的最終設計實際上將涵蓋各種技術; 半色調網點、Ben Day 網點和 Lichtenstein 網點。 總而言之,都是複古漫畫風格的設計。

讓我們開始吧。

如何使用 Photoshop 創建復古漫畫書藝術

半色調點是如此常見,以至於 Photoshop 為它們提供了一個過濾器,它適用於任何圖像。 這個過濾器的作用是將圖像中的顏色變成點。 點的角度分佈由顏色通道控制。 當您應用過濾器時,您的圖像現在由青色、品紅色、黃色和黑色點組成。 如果您將半色調濾鏡應用於純色,如紅色 (#ff0000)、綠色 (#00ff00) 或藍色 (#0000ff),則濾鏡將不起作用,因為它沒有可分離的顏色。

為了創建正確的 Ben Day 點和 Lichtenstein 點,您需要 Adob​​e Illustrator。 單擊此處跳過。

如何使用 Photoshop 使照片看起來像半色調點的複古漫畫書藝術

1. 選擇你想要變成漫畫書風格點的圖像。

我從免費圖片網站 Gratisography 中選擇了這個看起來很有趣的傢伙。 如果您想使用相同的圖像,請單擊此處。 在 Photoshop 中打開圖像並將其居中放置在畫布上。

準備好變成漫畫書風格紋理的有趣男人的屏幕截圖

2. 複製圖層兩次並隱藏第一個。

要復制,在選擇第一層時,右鍵單擊並選擇“複製層”或在 Mac 上單擊 Command+J,在 PC 上單擊 Ctrl+J。 重命名它們,這樣您就不會忘記每一個。 將頂層的混合選項調整為“強光”並將不透明度降低到 40% 左右。 顏色會發生巨大變化,這將有助於獲得半色調點的顆粒感。

有趣的人被 Photoshop 變成漫畫書的屏幕截圖

3. 將最上面的兩層組合成一個智能對象。

將圖像變成漫畫書的 Photoshop 操作的屏幕截圖

4. 對智能對象應用半色調點過濾器。

在顏色半色調設置彈出窗口中,選擇最大尺寸像素為 13,並選擇不同程度的通道。 您可以使用這些來查看不同的效果。

一個人被變成漫畫書的 Photoshop 動作截圖

應用於搞笑人物圖像的彩色半色調濾鏡的屏幕截圖

5.複製底層並將其移動到頂部。

對其應用“查找邊緣”過濾器並調整級別,以便更好地查看輪廓。 為此,請將黑色三角形向右移動,將白色三角形向左移動。

查找邊緣過濾器的 Photoshop 操作屏幕截圖

調整面板的屏幕截圖

photoshop 濾鏡調整截圖

6. 使用調整將圖層變成黑白。

將調整圖層的不透明度設置為 30%。 最後,將“查找邊緣”圖層的分層選項設置為“疊加”。

Photoshop 調整圖層的屏幕截圖

Photoshop 上調整圖層的屏幕截圖

完成的設計!

如何使用 Photoshop 中的照片創建復古漫畫風格

如何使用 Photoshop 創建復古漫畫書藝術背景

1. 找一個有漂亮設計或漸變的顏色背景。

在 Photoshop 儀表板上打開圖像並將其置於屏幕中央。

Photoshop 中彩色背景的屏幕截圖

2. 解鎖背景層,複製並隱藏最底層。

將半色調點過濾器應用於頂層。 調整半色調點過濾器彈出窗口中的參數以獲得不同的效果

Photoshop 上的彩色半色調濾鏡的屏幕截圖

3. 成品設計!

用 Photoshop 製作的半色調點背景

如何使用 Illustrator 創建復古漫畫書藝術背景

正如我之前提到的,半色調點具有不同的大小,以便在圖像中重新創建對比度。 我們上面使用的 Photoshop 濾鏡非常適合這種效果。 但是,如果您想創建相同大小的點,如 Ben-Day 點或 Lichtenstein 點,則需要使用 Adob​​e Illustrator 和集成的圖案製作工具。 正如我上面提到的,Ben Day 點位於方形網格上,而 Lichtenstein 點位於偏移對角線網格上。 兩者都可以通過 Illustrator 中的圖案製作工具來實現。

如何使用 Illustrator 創建 Ben-Day 圓點圖案

1. 在 Illustrator 上創建一個新項目。

大小真的不重要。 我們使用了 600 x 350 像素。

Adobe Illustrator 上新項目設置的屏幕截圖

2. 選擇圓角矩形工具。

在畫板上單擊一次並設置形狀的大小。 使其為 15px x 15px,具有 7.5 牛角半徑。 將圓圈的顏色更改為藍色填充且沒有描邊。

Photoshop 中圓角矩形工具的屏幕截圖

3. 單擊頂部菜單欄中的“對象”並選擇“圖案”,然後選擇“製作”。

Photoshop 上的圖案製作器屏幕截圖

4. 調整首選項,使點位於方形網格上。

這些是您需要選擇的首選項:

  • 選擇瓷磚類型到網格
  • 檢查大小瓷磚到藝術
  • 將 H 間距和 V 間距設置為 15 px x 15 px
  • 選擇複印到 9 x 9

當您看到如下圖所示的圖案時,單擊“完成”。 這將自動將圖案保存到“色板”面板。

Photoshop 上 Ben Day 圖案的屏幕截圖

如何使用 Illustrator 創建 Lichtenstein 圓點圖案

此模式遵循與上述相同的步驟,並且僅在需要調整模式生成器中的首選項時才會更改。 打開 Ben-Day 模式首選項,然後按“保存副本”。 將新圖案命名為“Lichtenstein Dots”。 單擊“確定”後,它將在色板面板上另存為副本。 關閉 Ben-Day 點圖案。 返回“色板”面板,打開 Lichtenstein 圓點圖案。 當您將鼠標懸停在它上面時,您將看到一個帶有圖案名稱的彈出窗口。 在首選項中,僅將佈局類型更改為“按行砌塊”,然後單擊“完成”。

在 Photoshop 上保存圖案的屏幕截圖

Photoshop 中圖案製作器的屏幕截圖

Photoshop 上的製版機屏幕截圖

如何將復古漫畫書藝術圖案添加到形狀

現在您已經創建了自己的複古漫畫書圖案,您可以隨時將它們應用到您想要的任何形狀。 首先,您需要保存圖案色板,以便您可以將它們添加到任何未來的項目中。

1. 在色板面板中,選擇我們創建的兩個新圖案。

單擊色板庫圖標並選擇“保存色板”。 將新色板命名為“復古漫畫書圖案”,然後單擊“確定”。

Photoshop 中色板面板的屏幕截圖

2. 當您創建一個新項目並想要使用這些圖案時,請轉到“色板”面板。

您不會在那裡看到我們的新色板,因此您需要將它們導入。再次單擊色板庫圖標並向下滾動到“用戶定義”,然後是“復古漫畫書圖案”。 將打開一個新窗口,其中包含色板和包含漫畫書圖案的常規顏色。 現在它們可以用於您想要的任何形狀。

Photoshop 中色板庫的屏幕截圖

3. 創建一個新形狀並用其中一種圖案填充它。

點的大小將取決於您創建的形狀的大小。 形狀的最大尺寸由畫板的尺寸控制。

形狀越小,點越大,反之亦然。 如果您使用小形狀並覺得點太大,請右鍵單擊形狀內的圖案並選擇“變換”然後選擇“縮放”。 要使點超小,請選擇以下參數。

  • 制服:10%
  • 在選項中:檢查變換模式

為 'uniform' 選項嘗試不同的參數以獲得不同大小的點。

Photoshop 上帶有圖案的形狀的屏幕截圖

Photoshop 中形狀內圖案的屏幕截圖

4. 要創建具有復古漫畫風格的星形,請創建一個 1000 像素 x 1000 像素的新項目。

在顏色面板中,單擊黑色作為描邊,單擊 Lichtenstein 圖案作為填充。 選擇星形並單擊畫布使其出現。

星星上漫畫書點圖案的截圖

在網頁設計中使用複古漫畫藝術的想法

漫畫書藝術趨勢似乎正在興起。 當然,並非所有品牌都會從這種創意風格中受益。 對於有趣、熱愛色彩的品牌,Ben Day 圓點和受 Lichtenstein 啟發的圖形非常適合呼吸新鮮空氣。 漫畫書點圖案的最佳用途是作為背景,無論是在另一種顏色上還是沒有其他顏色。 同樣,嘗試在您的內容中使用大氣泡作為分隔符或漫畫書風格的感嘆號。 您可以使用上面的教程製作自己的教程,也可以從 Freepik 獲取一些已經設計好的圖像。

在 Divi 中使用複古漫畫書藝術

帶有 Divi 的半色調背景的屏幕截圖

帶有復古漫畫外觀的 divi 網站截圖

下面的設計是通過來自 Freepik 的漫畫書設計實現的。 如您所見,設計師在設計點的大小方面採取了一些自由。 儘管如此,他們仍然以自己的方式完美地體現了復古漫畫風格。

漫畫書語音氣泡設計與 Divi

在 divi builder 中使用漫畫書圖形

結論

如您所見,復古漫畫書設計的可能性是多種多樣的。 從經典款式到更現代的款式,您幾乎可以做任何事情。 無論您是自己創建圖案還是在線獲取一些圖形,您都可以使用複古漫畫書藝術和 Divi 創建非常驚人的東西!