สร้างภาพประกอบง่ายๆสำหรับเว็บ

Sep 14, 2025
วิธีการ

ฉันนั่งลงเล่นเพลงหรี่ไฟและเปิดแล็ปท็อปของฉัน ฉันต้องทำมากมาย ในความพยายามที่จะอัญเชิญแรงบันดาลใจฉันเริ่มวาดภาพ ศิลปะ Doodle บรรทัดจากมุมหนึ่งของหน้าจอไปยังอีกมุมหนึ่งเมื่อฉันเห็นรูปดาวหาง "อืม" สมองของฉันเริ่มต้นขึ้นอย่างช้าๆ "จะเกิดอะไรขึ้นถ้าฉันเชื่อมต่อพวกเขาและเพิ่มดาวเคราะห์บางอย่าง"

ไม่กี่ชั่วโมงต่อมาฉันมีภาพประกอบ Dribbble ที่นิยมมากที่สุดของฉัน ฉันยังจำได้ยากว่ามันเกิดขึ้นได้อย่างไร แต่หลังจากขุดผ่านสมองของฉันฉันค้นพบอัลกอริทึมภายในของฉันสำหรับการสร้างภาพประกอบ - ไม่ใช่แค่อันนี้ แต่คนอื่น ๆ ที่ฉันทำ มันตลกดีฉันคาดหวังว่าจะมีความซับซ้อนมากขึ้น โอ้ดี ...

สไตล์ภาพประกอบ

ก่อนที่ฉันจะเริ่มทำงานกับภาพประกอบฉันให้แน่ใจว่าฉันเข้าใจวัตถุประสงค์และบริบทที่มันจะมีชีวิตอยู่ เป็นในแอปหรือเว็บไซต์หรือวอลล์เปเปอร์? จะมีข้อความอยู่หรือไม่และมันจะอยู่ในสภาพแวดล้อมที่วุ่นวายหรือไม่? มันควรจะเป็นสัญลักษณ์ของการกระทำหรือมันเพียงแค่ให้ความรู้สึกบางอย่าง?

หากภาพประกอบควรถ่ายทอดความคิดที่ชัดเจนหรือเป็นสัญลักษณ์ของวัตถุหรือการกระทำที่เฉพาะเจาะจงฉันจะเลือกใช้งานง่าย ๆ ที่ความสนใจทั้งหมดมุ่งเน้นไปที่ส่วนสำคัญ อย่างไรก็ตามถ้าเป็นเช่นนั้นฉันจะไปที่ภาพประกอบพื้นหลัง 'เงียบ' โดยเฉพาะฉันจะเลือกวิธีการเหมือนรูปแบบหรือตรวจสอบให้แน่ใจว่าไม่มีองค์ประกอบที่น่าสนใจที่เห็นได้ชัดเพื่อลดความเป็นไปได้ของคนที่ตีความมากเกินไป . สำหรับภาพประกอบในแอปฉันพยายามทำให้สิ่งต่าง ๆ เชื่องเพื่อหลีกเลี่ยงความสนใจจากการทำงาน

กฎความงาม

สมองของฉันชอบสร้างกฎแปลก ๆ เหล่านี้ทั้งหมด พวกเขาเป็นเหมือนความท้าทายที่ไร้สาระที่ฉันไม่สามารถยืนผ่านได้: ถ้าฉันวาดมนุษย์เพียงแค่ใช้วงกลม? เกิดอะไรขึ้นถ้าฉันแสดงพระอาทิตย์ตกโดยใช้สีเดียวเท่านั้น

กฎทางเรขาคณิต, ความก้าวหน้าเชิงตรรกะ, สมมาตร มีบางสิ่งที่น่าดึงดูดใจในการมีกฎทางคณิตศาสตร์ที่เข้มงวดที่ใช้กับงานศิลปะ รู้สึกเหมือนวิเศษวิศวกรรมย้อนกลับ มันออกไปจากองค์ประกอบลึกลับในงานศิลปะดังนั้นจึงเกือบจะเหมือนเผยให้เห็นถึงวิทยาศาสตร์ที่อยู่เบื้องหลัง

ภาพประกอบที่ซับซ้อน จานสีที่เรียบง่าย

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette

ภาพประกอบของเมืองที่มีระดับรายละเอียดที่ซับซ้อนซึ่งได้รับการผสมผสานกับจานสีที่เรียบง่ายและคล้ายคลึงกัน (เครดิตรูปภาพ: Nina Geometieva)

เมื่อปรากฎว่าสมองของฉันค่อนข้างขี้เกียจเมื่อมันมาถึงการเลือกสีดังนั้นจึงมีสองประเภทของจานสีทั่วไปที่เลือกจาก: หนึ่งสำหรับภาพประกอบที่ซับซ้อน; อีกอย่างสำหรับคนที่เรียบง่าย

ภาพประกอบที่ซับซ้อนมีระดับความละเอียดสูงมีรูปร่าง / วัตถุจำนวนมากและรายละเอียดจำนวนมาก สิ่งเหล่านี้มักจะเป็นรูปแบบของธรรมชาติและไม่มีจุดโฟกัสที่ชัดเจน สมองของฉันตัดสินใจว่าภาพประกอบประเภทนี้ทำงานได้ดีกับจานสีเดียวหรือสีที่คล้ายคลึงกัน หรือในแง่ที่กว้างขึ้น - สีน้อยลงและความคมชัดของสีน้อยลง

ทั้งหมดนี้เดือดลงสู่สมดุลภาพ; หากรูปร่างเป็นบ้าสีควรจะอ่อนโยน ข้อยกเว้นหนึ่งอยู่ในกรณีที่ฉันต้องการให้ความสำคัญกับวัตถุบางอย่างที่ไม่โดดเด่น สิ่งนี้สามารถทำได้โดยใช้สีที่ตัดกันสูงในขณะที่ทุกอย่างอื่นถูกเก็บไว้ด้วยกันและเชื่อง ความสมดุลของภาพที่สมบูรณ์แบบอยู่ที่ไหนสักแห่งระหว่าง overstimulation (สีดัง, รูปร่างที่ซับซ้อนรายละเอียดจำนวนมากทุกอย่างกรีดร้องที่ใบหน้าของคุณ) และความเข้าใจ (ชนิดที่ไม่ดีของน้อยที่สุดน่าเบื่อไม่มีอะไรใหม่หรือน่าสนใจเกิดขึ้น)

จานสีโมโนโครม

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements

จานสีที่คล้ายคลึงหรือขาวดำทำงานได้อย่างมีประสิทธิภาพเมื่อมีความก้าวหน้าทางสายตาหรือการทำซ้ำขององค์ประกอบ (เครดิตรูปภาพ: Nina Geometieva)

จานสีขาวดำประกอบด้วยโทนสีหรือเฉดสีหนึ่งสี โทนสีเกิดขึ้นเมื่อสีผสมกับสีขาวอย่างต่อเนื่อง เฉดสีเกิดขึ้นเมื่อมันผสมกับสีดำอย่างต่อเนื่อง ปัญหาหนึ่งที่ฉันมีกับจานสีเดียวคือโทนสีและเฉดสีที่สูญเสียความสั่นสะเทือนอย่างต่อเนื่องเนื่องจากลักษณะของการผสมสีด้วยสีขาวหรือสีดำซึ่งทั้งสองมีความอิ่มตัวของศูนย์

เพื่อหลีกเลี่ยงความหมองคล้ำอย่างค่อยเป็นค่อยไปนี้ฉันใช้การโกงอย่างง่าย: รวมถึงการเพิ่มสีขาวหรือสีดำฉันเลื่อนเฉดสีเล็กน้อย นี่เป็นจานสีที่คล้ายคลึงกันแทนที่จะเป็นจานสีเดียว ตัวอย่างเช่นถ้าฉันต้องการสร้างสีแดงโทนสีแดงฉันจะเปลี่ยนสีให้เป็นสีส้ม ถ้าฉันต้องการสร้างเฉดสีแดงสีแดงฉันจะเปลี่ยนเว้ไปยังม่วงแดงในขณะที่มันมืด ถ้าฉันต้องการสัมผัสสีน้ำเงินเบา ๆ ฉันเปลี่ยนไปที่สีฟ้า สำหรับเฉดสีน้ำเงินเข้มฉันเปลี่ยนไปในทิศทางอื่น ๆ ไปทางสีม่วง

สิ่งนี้ส่งผลให้จานสีที่ยังคงรู้สึกว่าค่อนข้างขาวดำ แต่มีชีวิตอยู่มากขึ้นและมีการเตะอย่างแน่นอน ตั้งแต่ฉันค้นพบสิ่งนี้ฉันไม่เคยสร้างจานสีโมโนโครมที่แท้จริงอีกครั้ง

ภาพประกอบง่ายๆ; จานสีที่ซับซ้อน

ภาพประกอบที่มีความซับซ้อนต่ำกว่ามักจะมีจุดโฟกัสที่ชัดเจนและลำดับชั้นวัตถุ รูปร่างมีแนวโน้มที่จะตรงไปตรงมามากขึ้นดังนั้นตัวเลือกสีอาจเป็นที่รกร้างจำเป็น ฉันกำลังคิดสีที่ตัดกันสูงทุกชนิด - เสริม, triadic, tetradic - ตราบใดที่มันเป็นจานสีที่สะดุดตา

มีทั้งจักรวาลอยู่ระหว่างสิ่งที่ฉันอธิบายว่าเป็นภาพประกอบที่ซับซ้อนและเรียบง่าย แต่สมองของฉันไม่เกี่ยวข้องกับสเปกตรัมทั้งหมดนั้นมากเกินไป - มันชอบที่จะติดป้ายใด ๆ ที่ซับซ้อนหรือเรียบง่าย

จานสีความคมชัดสูงไม่ง่ายเหมือนการเลือกสีตรงข้ามบนวงล้อสี ล้อสีเป็นจุดเริ่มต้นที่ยอดเยี่ยม แต่ก็ไม่ได้เป็นจุดสิ้นสุดของกระบวนการ ตัวอย่างเช่นเมื่อเลือกการผสมผสานสีส้มและสีน้ำเงินที่ดีฉันให้ความสนใจกับบางสิ่ง: การรับรู้การส่องสว่างและวิธีการสำเนียงสีทำงานกับสีเริ่มต้น

การรับรู้การส่องสว่าง

หากทั้งสองสีมีความส่องสว่างที่รับรู้เช่นเดียวกับที่สมองพบว่ามันยากที่จะแยกแยะเส้นขอบระหว่างพวกเขาดังนั้นการดูภาพให้รู้สึกอึดอัด เว้นแต่สีจะไม่ควรสัมผัสซึ่งกันและกันมันก็คุ้มค่าที่จะทำให้แน่ใจว่าพวกเขาไม่มีความส่องสว่างที่รับรู้เหมือนกัน

โอ้และในกรณีที่คุณอยากรู้ว่าทำไมฉันถึงใช้คำว่า 'รับรู้' ค้นหาเอฟเฟ็กต์ Helmholtz-Kohlrausch ซึ่งแสดงให้เห็นว่าสีที่มีความสว่างเดียวกันสามารถรับรู้ได้ว่ามีค่าที่แตกต่างกัน ตั้งแต่ส้มมีความสว่างที่รับรู้สูงกว่าสีน้ำเงินเป็นเรื่องง่ายที่จะเพิ่มความแตกต่างระหว่างสองสีโดยใช้สีส้มที่มีน้ำหนักเบาและสีน้ำเงินเข้ม

สำเนียงเทียบกับสีเริ่มต้น

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents

ภาพประกอบสำหรับโฮมเพจ Zopim เฉดสีฟ้าโดดเด่นด้วยสีส้มให้สำเนียง (เครดิตรูปภาพ: Nina Geometieva)

หากการใช้งานแต่ละสีแตกต่างกันอย่างมากฉันปรับค่าสีตามลำดับ ความกล้าหาญที่มีสีสำเนียงและการเล่นให้ปลอดภัยด้วยสีเริ่มต้นคือวิธีการของฉัน

ในตัวอย่างสีส้มสีฟ้าข้างต้นฉันจะใช้สีน้ำเงินเป็นสีที่สงบเงียบในการเติมพื้นที่ที่ใหญ่กว่าสำหรับพื้นหลังและองค์ประกอบขนาดใหญ่และสีส้มป่าสำหรับปุ่มไอคอนและองค์ประกอบขนาดเล็กอื่น ๆ ในบริบทของภาพประกอบฉันจะมีเฉดสีฟ้าเป็นพื้นฐานและอีกครั้งสีส้มเป็นสำเนียง - บางทีโดยการเน้นรายละเอียดที่น่าสนใจหรือองค์ประกอบที่สำคัญ

ตรวจสอบความสมดุลของภาพ

สิ่งที่ภาพประกอบคุณจบลงด้วยการทำตามคำแนะนำข้างต้นตรวจสอบให้แน่ใจว่าคุณกลับไปทีละขั้นตอนและตรวจสอบว่าทั้งหมดนั้นสมเหตุสมผลแล้ว มีข้อยกเว้นมากมายสำหรับกฎในภาพประกอบว่ามันเป็นไปไม่ได้ที่จะแสดงรายการชุดค่าผสมทั้งหมดที่ให้กำเนิดภาพประกอบที่น่าทึ่ง ลองทำสิ่งต่าง ๆ ที่น่าสนใจเสมอและเมื่อบางสิ่งที่ประหลาดใจคุณให้แน่ใจว่าคุณเข้าใจเพื่อให้คุณสามารถปรับปรุงสัญชาตญาณของคุณ

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 286; ซื้อที่นี่ !

บทความที่เกี่ยวข้อง

  • 7 การออกแบบเว็บ Dos และ Don'ts
  • 6 ของพอร์ตการลงทุนอิสระที่ดีที่สุดของปี 2559
  • 6 เครื่องมือ Photoshop ที่ดีที่สุดสำหรับนักออกแบบเว็บไซต์

วิธีการ - บทความยอดนิยม

รูปวาดรูป: คู่มือเริ่มต้น

วิธีการ Sep 14, 2025

หน้า 1 จาก 3: วิธีการวาดรูป: หญิง ..

วิธีการวาดสิงโต

วิธีการ Sep 14, 2025

ยินดีต้อนรับสู่คำแนะนำของเราเกี่ยวกับวิธีการวาดสิงโ�..

วิธีการวาดแมว

วิธีการ Sep 14, 2025

ต้องการทราบวิธีการวาดแมว? คุณมาถูกที่แล้ว การ..

วิธีการทาสีศิลปะภาพเคลื่อนไหวที่มีสีสันใน Photoshop

วิธีการ Sep 14, 2025

ในระหว่างการกวดวิชา Photoshop นี้ฉันจะไปมากกว่าแนว�..

สร้างภาพเคลื่อนไหว GIF ใน Photoshop

วิธีการ Sep 14, 2025

Adobe กำลังเปิดตัวชุดวิดีโอชุดใหม่วันนี้เรียกว่าตอนนี้ซึ่งมีวัตถุปร�..

สร้างตัวละครที่มีความสมจริง stylized

วิธีการ Sep 14, 2025

มีพลอย เป็นเว็บไซต์ที่ดำเนินการโดย Henning Sanden �..

วิธีการตั้งชื่อตัวแทนออกแบบเว็บของคุณ

วิธีการ Sep 14, 2025

การได้รับชื่อที่ถูกต้องสำหรับเอเจนซี่ของคุณ..

วิธีใช้การถ่ายภาพสต็อกอย่างสร้างสรรค์ภายในงานออกแบบของคุณ

วิธีการ Sep 14, 2025

แทนที่จะเป็นทางเลือกสุดท้ายภาพสต็อกสามารถแล..

หมวดหมู่