วิธีสร้างไอคอนไอคอนของคุณเอง วิธีทำไอโอ. การสร้างicons.icoสำหรับโปรแกรม การวาด Favicon โดยใช้บริการบนเว็บ

ปัญญาย่อมดีเพราะเป็นได้
พูดด้วยเหตุผลหนึ่ง แต่มีประโยชน์อีกอย่างหนึ่ง
“อยู่ไม่สุข”, เซอร์เก ลุคยาเนนโก

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

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

ฉันขอย้ำอีกครั้งว่าประสบการณ์ส่วนตัวของฉันอธิบายไว้ที่นี่ ที่, ฉันจะสร้างไอคอนได้อย่างไร- สุนทรียศาสตร์และนักชิมอาจผ่านไปได้

เอาล่ะ มาเริ่มกันเลย

ก่อน, วิธีการติดตั้งไอคอนบนเว็บไซต์มันจำเป็นต้องสร้างมันขึ้นมา เริ่มจากสิ่งนี้กันก่อน

§ 1. วิธีสร้างไอคอน

ไอคอน (favicon) คืออะไร อธิบายไว้ ดังนั้นเรามาดูกระบวนการสร้างโดยตรงกันดีกว่า ฉันจะทำอย่างไร:

เพียงเท่านี้ - ไอคอนสำหรับไซต์พร้อมแล้ว

ความแตกต่างของวิธีการ:

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


• ~ วิธีการนี้ได้รับการทดสอบใน XnView เท่านั้น เมื่อบันทึกแล้ว ระบบจะบันทึกรูปภาพใหม่ตามต้องการ

§ 2. การสร้างไอคอนสำหรับไซต์

ที่จริงแล้ว การบันทึกรูปภาพเป็น favicon.ico เราได้สร้างไอคอนสำหรับไซต์ขึ้นมา

§ 3. วิธีติดตั้งไอคอนบนเว็บไซต์

เราคัดลอกไฟล์ favicon.ico ของเราไปยังโฟลเดอร์รูทของเว็บไซต์ (ซึ่งมีหน้าหลักของเว็บไซต์) เท่านี้ก็เรียบร้อย และอื่น ๆ ที่มีบริการจะค้นหาและแสดงไอคอนของเราโดยอัตโนมัติ สิ่งสำคัญคือเรียกว่า favicon.ico และอยู่ในโฟลเดอร์รูทของเว็บไซต์

§ 4. วิธีเปลี่ยนไอคอนไซต์

แทนที่ไฟล์ favicon.ico ที่อยู่บน ด้วยไฟล์ของคุณเองซึ่งสร้างขึ้นโดยใช้วิธีการด้านบน

§ 5. เหตุใดจึงจำเป็น?

การมีไอคอนบนเว็บไซต์ทำหน้าที่อะไร? สิ่งที่สำคัญที่สุดคือไซต์นั้นได้รับเครื่องหมายประจำตัวของตัวเอง ในเบราว์เซอร์:

ในเครื่องมือค้นหา (

ขอให้เป็นวันที่ดี! คุณมี favicon บนเว็บไซต์ของคุณหรือไม่? นี่เป็นองค์ประกอบสำคัญของเว็บไซต์ ซึ่งจะปรากฏในผลการค้นหา! อ่านบทความเกี่ยวกับมันคืออะไรและจะติดตั้งอย่างไรในไม่กี่นาที

ไอคอนประจำเว็บไซต์คือไอคอนสำหรับเว็บไซต์ คุณลักษณะสำคัญ และความเป็นเอกลักษณ์ของทรัพยากรของคุณ ด้วยความช่วยเหลือของfaviсon ผู้อ่านโครงการออนไลน์ของคุณสามารถระบุและค้นหาได้อย่างง่ายดาย "แถบบุคมาร์ค" บนเบราว์เซอร์ของคุณหรือในเครื่องมือค้นหาบางตัว เช่น Yandex

favicon ของฉันในปัจจุบันมีลักษณะดังนี้:

ตอนนี้ฉันคิดว่าคุณคงเข้าใจแล้วว่านี่คืออะไร" กิสโม่" — favicon มาดูวิธีทำกันดีกว่า

วิธีทำ favicon

โดยทั่วไป ไอคอน Fav ควรมีขนาด 16x16 คุณสามารถสร้างรูปภาพสำหรับไอคอนได้ด้วยตัวเองโดยใช้โปรแกรมแก้ไขกราฟิก Photoshop หรือค้นหารูปภาพบนอินเทอร์เน็ตและลดขนาดให้เป็นขนาดของ favicon (ในกรณีนี้คือ 16x16) ปัญหาเดียวคือ Photoshop และโปรแกรมแก้ไขกราฟิกอื่น ๆ ไม่บันทึกรูปภาพในรูปแบบ ICO แต่เราต้องการรูปแบบนี้!

แต่ดังคำกล่าวที่ว่า “ผู้ที่แสวงหาย่อมจะพบเสมอ" - และฉันพบวิธีแก้ไข - นี่คือบริการออนไลน์ที่แปลงรูปแบบรูปภาพของคุณ (favicon) ซึ่งมักจะเป็นรูปแบบ PNG หรือ JPG เป็นรูปแบบ ICO นี่คือบริการ image.online-convert.com.

ในการแปลงรูปแบบภาพเป็นรูปแบบไอคอน ICO คุณต้องคลิกที่ปุ่ม " ทบทวน" ให้เลือกรูปภาพ ตั้งค่าขนาดพิกเซลเป็น 16×16 แล้วคลิกที่ปุ่ม "แปลงไฟล์" .

หลังจากดำเนินการข้างต้นแล้ว คุณสามารถดาวน์โหลดไฟล์ลงในคอมพิวเตอร์ของคุณในรูปแบบ ICO ได้

หากคุณไม่ต้องการรบกวนการสร้าง favicon คุณสามารถดาวน์โหลดได้จากบริการต่างๆ บนอินเทอร์เน็ต ซึ่งอยู่ในรูปแบบ ICO อยู่แล้ว ตัวอย่างเช่นการบริการ ไอคอนค้นหา.ruที่นี่คุณจะพบ favicon โดยคุณต้องป้อน " ค้นหา" คำที่นำความหมายของไอคอน Fav ของคุณ ตัวอย่างเช่น " เงิน"—จากนั้นไอคอนทั้งหมดที่ตรงกับความหมายจะปรากฏขึ้น

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

ไฟล์นี้สามารถพบได้ที่: wp-content/themes/folder ด้วยธีมที่คุณใช้ .

จากนั้นเมื่อคุณเปิดไฟล์ header.phpหลังแท็ก คุณจะต้องใส่รหัส:

บันทึกการเปลี่ยนแปลง ไอคอน Fav พร้อมแล้ว!

ตอนนี้ฉันคิดว่าคุณสามารถสร้างและติดตั้ง favicon ได้อย่างง่ายดาย ฉันขอให้คุณประสบความสำเร็จ มีความเป็นตัวของตัวเองมากขึ้น)!

ป.ล.

ขอแสดงความนับถือ อเล็กซานเดอร์ เซอร์จิเอนโก

ในบทเรียนวันนี้ฉันจะเล่าให้คุณฟัง ไอคอนฟาวิคอน (ไอคอน Fav- ฉันจะแสดงให้คุณดู วิธีสร้าง favicon.ico สำหรับเว็บไซต์(หรือสำหรับบล็อกก็ไม่สำคัญ) และฉันจะแสดงให้คุณเห็นว่าเป็นไปได้อย่างไร ใส่ favicon.

แน่นอนว่าหลายคนยังไม่รู้ว่าฉันกำลังพูดถึง “ปาฏิหาริย์” อะไร พูดง่ายๆ ก็คือ Favicon คือรูปภาพ (ไอคอน) ที่ปรากฏในเบราว์เซอร์ก่อนที่อยู่ไซต์ ฉันจะแสดง Favicon ของบล็อกของฉันให้คุณดู:

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

แผนการเรียน:

1. การสร้าง Favicon ตั้งแต่เริ่มต้น
2. การสร้าง favicon จากภาพที่เสร็จแล้ว
3. บริการพร้อมไอคอนสำเร็จรูปสำหรับเว็บไซต์
4. การแนบไอคอนผลลัพธ์เข้ากับไซต์

วิธีสร้าง Favicon ตั้งแต่เริ่มต้น

มีบริการหนึ่งที่สะดวกมาก มีที่อยู่ favicon.cc บริการสร้าง favicon นี้มีลักษณะดังนี้:

ถึง วาด faviconสิ่งที่คุณต้องทำคือเลือกสีและทาสี หากคุณวาดบางอย่างผิดปกติเพื่อลบส่วนของภาพวาดออก ให้เลือกเครื่องมือโปร่งใส (ทำเครื่องหมายที่ช่อง) และ "กระตุ้น" บนพิกเซล ("สี่เหลี่ยม") ที่ต้องลบออก:

ฉันวาด favicon ต่อไปนี้:

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

หรือคุณสามารถดูผลงานได้โดยตรงในเบราว์เซอร์ของคุณ (Opera, Firefox, Internet Explorer ฯลฯ ):

การสร้าง favicon จากภาพที่เสร็จแล้ว

สมมติว่าคุณไม่ต้องการสร้างไอคอนสำหรับเว็บไซต์ของคุณตั้งแต่เริ่มต้น แต่ต้องการสร้างไอคอนจากรูปภาพสำเร็จรูป ในกรณีนี้บริการสร้าง favicon favicon.ru จะสะดวกสำหรับคุณ

บริการนี้เป็นภาษารัสเซีย ดังนั้นคุณไม่น่าจะมีปัญหาใดๆ เพียงระบุรูปภาพที่คุณต้องการเห็นเป็นไอคอนของไซต์ของคุณ (ปุ่ม "เรียกดู") จากนั้นคลิก " สร้าง favicon.ico” แล้วก็ “ ดาวน์โหลด favicon.ico”.

การค้นหาไอคอนและเวกเตอร์ที่ทำมาอย่างดีราคาไม่แพงนั้นเป็นเรื่องง่าย นั่นคือสิ่งที่เว็บไซต์อย่าง Iconfinder (ที่ผู้เขียนบทความนี้ทำงาน) ทำ นักออกแบบมีชุดไอคอนระดับพรีเมียมนับพันชุด และชุดไอคอนหลายร้อยชุดพร้อมให้ดาวน์โหลดฟรี

บทความนี้ให้คำแนะนำเกี่ยวกับการออกแบบไอคอนเวกเตอร์ที่มีหกขั้นตอน เราจะดูขั้นตอนเหล่านี้หลังจากที่เราได้กล่าวถึงหลักการพื้นฐานของการออกแบบไอคอนที่ประสบความสำเร็จแล้ว หลักการเหล่านี้เป็นที่รู้จักกันดีและกล่าวถึงอย่างละเอียดในงานต่างๆ เช่น คู่มือการออกแบบไอคอนของ John Hicks และการออกแบบ Material ของ Google สำหรับการออกแบบไอคอนระบบ หกขั้นตอนที่เราจะพูดถึงในบทความนี้ควรถือเป็นแนวทาง ไม่ใช่ความเชื่อ ความสามารถในการรับรู้ว่าเมื่อใดควรปฏิบัติตามกฎและเมื่อใดควรแหกกฎเป็นคุณสมบัติสำคัญที่นักออกแบบที่ดีทุกคนควรพัฒนา และเราจะแสดงให้เห็นอย่างชัดเจน

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

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

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

เสาหลักสามประการของการออกแบบไอคอนที่มีประสิทธิภาพ

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

แน่นอนว่าการออกแบบที่มีประสิทธิภาพไม่ได้จำกัดอยู่เพียงแนวคิดทั้งสามนี้เท่านั้น แต่ยังเป็นสถานที่ที่เหมาะสำหรับการเริ่มต้นและครอบคลุมอยู่ในบทความเดียว

รูปร่าง

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

เส้นสีแดงจะสรุปรูปทรงเรขาคณิตหลักที่ประกอบเป็นรูปร่างของไอคอน

ความสมบูรณ์ทางสุนทรียภาพ

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

ไอคอนทั้งสามนี้เรียกได้ว่ามีความสวยงามสอดคล้องกันเนื่องจากใช้องค์ประกอบและเทคนิคเดียวกัน

การยอมรับ

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

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

ดังนั้นเราจึงได้กล่าวถึงองค์ประกอบหลักสามประการของการออกแบบไอคอนที่มีประสิทธิภาพ ตอนนี้เราจะมาดูวิธีนำองค์ประกอบทั้งสามนี้ไปปฏิบัติจริงในหกขั้นตอนให้ละเอียดยิ่งขึ้น

หกขั้นตอน

เริ่มต้นด้วยตารางเสมอ

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

ดังนั้นเราจึงมีตาราง 32 พิกเซลพร้อมเส้นขอบ 2 พิกเซลซึ่งเราจะเว้นว่างไว้ เราเรียกพื้นที่นี้ว่าเขตปลอดอากร และทำหน้าที่เพื่อให้พื้นที่แก่ไอคอน ไม่ควรวางองค์ประกอบต่างๆ ภายในบริเวณนี้ เว้นแต่จะหลีกเลี่ยงไม่ได้อย่างยิ่ง

รูปร่างของไอคอนเริ่มต้นด้วยรูปร่างและการวางแนวพื้นฐาน หากคุณวาดเส้นรอบขอบด้านนอกของไอคอน เช่น กรอบขอบ ไอคอนจะเป็นรูปทรงสี่เหลี่ยม วงกลม สามเหลี่ยม หรือสี่เหลี่ยมผืนผ้า

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

การจัดแนวไอคอนวงกลมให้ตรงกับเส้นตารางและเส้นหลัก

ไอคอนสี่เหลี่ยมจะจัดชิดตรงกลางตารางด้วย แต่ตามกฎแล้วจะไม่ถึงขอบเขตของพื้นที่ทำงาน เพื่อรักษาความสอดคล้องกับไอคอนทรงกลมและสามเหลี่ยม ไอคอนสี่เหลี่ยมและสี่เหลี่ยมส่วนใหญ่จะจัดชิดกับเส้นฐานตรงกลาง (พื้นที่สีส้มในภาพด้านล่าง) การตัดสินใจว่าไอคอนควรสอดคล้องกับบรรทัดหลักใดจะขึ้นอยู่กับรูปลักษณ์ของมัน และความรู้สึกว่าจะเลือกขนาดใดในแต่ละกรณีนั้นได้รับการพัฒนาจากการฝึกฝน สี่เหลี่ยมจัตุรัสศูนย์กลางทั้งสามที่กล่าวถึงข้างต้นจะแสดงไว้ในภาพด้วยสีน้ำเงิน สีส้ม และสีเขียวอ่อน

การจัดตำแหน่งและเลือกขนาดของไอคอนทรงกลมและสี่เหลี่ยมที่สัมพันธ์กับตาราง

ในภาพต่อไปนี้ ภายในตารางพิกเซล 32x32 พิกเซล คุณจะสังเกตเห็นสี่เหลี่ยมขนาด 20x28 พิกเซลที่วางในแนวนอนหรือแนวตั้ง ขึ้นอยู่กับการออกแบบไอคอน

การจัดตำแหน่งและปรับขนาดไอคอนในแนวตั้งและแนวนอน

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

การจัดตำแหน่งและปรับขนาดไอคอนในแนวทแยง

โปรดจำไว้ว่าคุณไม่จำเป็นต้องปฏิบัติตามตำแหน่งของไอคอนที่อธิบายไว้โดยสัมพันธ์กับเส้นตารางและเส้นเสริมอย่างเคร่งครัด ตารางเป็นเพียงเครื่องมือเสริมเท่านั้น หากคุณต้องเผชิญกับทางเลือกระหว่างการทำสิ่งที่แปลกใหม่อย่างแท้จริงหรือการอยู่ภายใต้กฎเกณฑ์ คุณสามารถเพิกเฉยต่อกฎเกณฑ์เหล่านั้นได้ อย่างไรก็ตาม นี่ต้องเป็นขั้นตอนที่จงใจ Hemmo de Jong หรือที่รู้จักในชื่อ Dutch Icon กล่าวว่า:

“ความเป็นเอกเทศของไอคอนมีมากกว่าความจำเป็นในการรักษาความสอดคล้องกันของชุดไอคอน”

เริ่มต้นด้วยรูปทรงเรขาคณิตที่เรียบง่าย

เริ่มออกแบบไอคอนของคุณโดยร่างรูปร่างพื้นฐานคร่าวๆ โดยใช้วงกลม สามเหลี่ยม และสี่เหลี่ยม แม้ว่าคุณจะวางแผนสร้างไอคอนด้วยรูปทรงที่เรียบเนียนและเป็นธรรมชาติ ให้เริ่มด้วยเครื่องมือ Shape ใน Adobe Illustrator เมื่อพูดถึงการออกแบบไอคอน โดยเฉพาะอย่างยิ่งเมื่อต้องวาดไอคอนขนาดเล็กบนหน้าจอ การวาดด้วยมือย่อมส่งผลให้เกิดความไม่สมส่วนรอบขอบเล็กน้อย และทำให้รูปลักษณ์ของไอคอนแย่ลงมาก การเริ่มต้นด้วยรูปทรงเรขาคณิตง่ายๆ จะช่วยให้คุณได้ขอบที่สะอาดและสม่ำเสมอ (โดยเฉพาะบริเวณส่วนโค้ง) และยังทำให้ง่ายต่อการปรับขนาดองค์ประกอบต่างๆ และปรับทิศทางให้สัมพันธ์กับตารางและรูปร่างพื้นฐาน

พื้นฐานของไอคอน Corgi คือรูปทรงเรขาคณิตที่เรียบง่าย: สามเหลี่ยมสองอันและวงรีสองอัน

ทุกสิ่งทุกอย่างทำด้วยตัวเลข: ขอบ เส้น มุม และเส้นโค้ง

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

มุม

ในกรณีส่วนใหญ่ ขอแนะนำให้ใช้มุม 45° หรือทวีคูณของค่านี้ การปรับให้เรียบของความผิดปกติที่ค่ามุมที่กำหนดจะดำเนินการอย่างเท่าเทียมกัน (พิกเซลที่ใช้งานอยู่ติดกันอย่างดี) และผลลัพธ์มีความชัดเจนและรัดกุม นอกจากนี้ 45 องศายังเป็นเส้นทแยงมุมในอุดมคติที่สบายตา การใช้การกำหนดค่าที่คุ้นเคยอย่างสม่ำเสมอช่วยให้คุณได้รับภาพรวมของทั้งไอคอนแต่ละรายการและทั้งชุด หากการออกแบบที่คุณเลือกจำเป็นต้องฝ่าฝืนกฎนี้ ควรหารด้วยสอง (22.5°; 11.25° ฯลฯ) หรือใช้มุมที่ทวีคูณของ 15° แต่ละสถานการณ์เป็นรายบุคคลและต้องใช้แนวทางของแต่ละบุคคลเหมือนกัน ข้อดีของการใช้มุมที่ทวีคูณของ 45° คือด้วยค่าดังกล่าว การปรับให้เรียบของความผิดปกติที่ดีที่สุดระหว่างการเปลี่ยนภาพ

ภาพระยะใกล้ของการปรับเส้นทางให้เรียบที่มุม 45°

เส้นโค้ง

องค์ประกอบที่เห็นได้ชัดเจนที่สุดอย่างหนึ่งที่สามารถลดคุณภาพของไอคอนที่แสดงความแตกต่างระหว่างมืออาชีพและมือสมัครเล่นได้อย่างชัดเจนคือเส้นโค้ง แม้ว่าดวงตาของมนุษย์สามารถตรวจจับรูปร่างที่ไม่สอดคล้องกันแม้แต่น้อยได้อย่างชัดเจน แต่การประสานงานของเราไม่อนุญาตให้เราบรรลุความแม่นยำแบบเดียวกันเมื่อวาดภาพด้วยมือ ดังนั้นเมื่อสร้างเส้นโค้งขอแนะนำให้ใช้ไม้บรรทัดและเครื่องมือรูปร่างในโปรแกรมแทนการใช้มือ เมื่อคุณไม่สามารถหลีกหนีจากการวาดภาพด้วยมือได้ ให้ใช้ปุ่มปรับข้อจำกัด (เช่น Shift ใน Adobe Illustrator) หรือใช้ VectorScribe และ InkScribe จาก Astute Graphics - เครื่องมือเหล่านี้ช่วยให้คุณได้ผลลัพธ์ที่ดีที่สุดเมื่อ สร้างเส้นโค้ง

เส้นที่วาดด้วยมือมีคุณภาพไม่ดี

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

เส้นโค้งที่สมบูรณ์แบบเหล่านี้สร้างขึ้นใน Adobe Illustrator โดยใช้เครื่องมือเส้นโค้ง Bezier

มุม

ขนาดทั่วไปสำหรับมุมโค้งมนคือ 2 พิกเซล สำหรับไอคอนขนาด 32x32 พิกเซล ค่ารัศมีนี้จะทำให้มองเห็นการปัดเศษได้ชัดเจน และในขณะเดียวกันก็ไม่ทำให้มุม "อ่อนลง" มากเกินไป (ซึ่งทำให้ภาพดู "พร่ามัว") ขนาดของรัศมีความโค้งขึ้นอยู่กับอักขระที่คุณต้องการกำหนดให้กับการออกแบบของคุณ การตัดสินใจว่าจะใช้มุมโค้งมนหรือไม่นั้นขึ้นอยู่กับการวิเคราะห์ความสวยงามของทั้งชุด

มุมโค้งมนอย่างแม่นยำ

กลับมาที่ Kogri ของเรา: เริ่มต้นด้วยรูปทรงที่ซับซ้อนทางเรขาคณิต เราย้ายไปที่การปัดเศษมุมโดยใช้เครื่องมือรูปร่าง โดยใช้ค่ารัศมีมุม 2 พิกเซล รูปร่างหน้าตาดีขึ้นแล้ว

ระยะแรกของการแปลงพันธุ์คอร์กี้

แนวคิดพื้นฐานของการออกแบบใหม่ปรากฏให้เห็นแล้ว: มุมโค้งมนและเส้นโค้งเรียบ

การเพิ่มประสิทธิภาพพิกเซล

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

ดังที่ได้กล่าวไปแล้ว มุมในอุดมคติคือ 45° (แน่นอนว่าอยู่หลังเส้นตรง) เนื่องจากพิกเซลอยู่ในตำแหน่งที่สัมพันธ์กันในแนวทแยงอย่างเคร่งครัด เช่นเดียวกันกับมุมและเส้นโค้ง ยิ่งมีความแม่นยำทางคณิตศาสตร์มากเท่าไร คุณจะได้ผลลัพธ์ที่ดีกว่าเมื่อปรับให้เรียบ เป็นที่น่าสังเกตว่าการปรับพิกเซลให้เหมาะสมไม่ได้สร้างความแตกต่างที่เห็นได้ชัดเจนในขนาดที่ใหญ่ขึ้นหรือบนจอแสดงผลที่มีความละเอียดสูง เช่น Retina

ความหนาของเส้น

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

ไอคอน iPhone นี้แสดงตัวอย่างการใช้น้ำหนักเส้นที่วัดได้

ใช้องค์ประกอบที่แตกต่างกันอย่างสม่ำเสมอ และไม่เปลี่ยนการเน้นภายในไอคอนชุดเดียวกัน

Hemmo de Jong (ไอคอนชาวดัตช์) บรรยายเกี่ยวกับแง่มุมนี้ของการออกแบบไอคอนที่ Icon Salon 2015 Hemmo และหุ้นส่วนของเขาออกแบบตราสัญลักษณ์ให้กับรัฐบาลเดนมาร์กมาเป็นเวลาสองปีแล้ว และรูปแบบที่เป็นเอกลักษณ์ของพวกเขาคือการใช้เครื่องหมายกรีด ช่องเจาะไม่ได้ปรากฏบนไอคอนทั้งหมด แต่ปรากฏบนไอคอนส่วนใหญ่ การเน้นแบบนี้ที่ใช้กับทั้งซีรีส์จะเชื่อมโยงไอคอนเข้าด้วยกันและทำให้เป็นที่รู้จักในหมู่คนอื่นๆ นับพัน

การใช้องค์ประกอบการออกแบบทั่วไป

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

องค์ประกอบทั่วไปที่ใช้สำหรับการออกแบบไอคอนสุนัข

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

การใช้องค์ประกอบเดียวกันในสไตล์ที่แตกต่าง

การใช้รายละเอียดและการตกแต่งในระดับปานกลาง

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

รายละเอียดเล็กๆ น้อยๆ ถ่ายทอดความหมายได้อย่างมีประสิทธิภาพ

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

ทำให้ไอคอนมีเอกลักษณ์

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

สิ่งที่ทำให้ดีไซน์ของคอร์กี้มีเอกลักษณ์เฉพาะตัวคือรูปทรงของจมูก

ท้ายที่สุดแล้ว ซึ่งทำให้คอร์กี้มีเสน่ห์ ความแปลกใหม่ และความเบาเป็นพิเศษ เราใช้จมูกรูปหัวใจ

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

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

บทสรุป

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

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

จากบทความนี้ คุณจะได้เรียนรู้ว่าเหตุใดจึงจำเป็นต้องมีไอคอน Fav ตำแหน่งที่จะค้นหา และวิธีสร้างไอคอนในรูปแบบ ICO อย่างง่ายดายและรวดเร็ว

องค์ประกอบที่มองไม่เห็นซึ่งสะสมอยู่ในจิตใต้สำนึกของทุกคน

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

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

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

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

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

วิธีสร้าง favicon ในเวลาเพียง 2 นาที

ไอคอนสำหรับเว็บไซต์ของคุณสามารถอยู่ในรูปแบบ PNG หรือ ico ขนาด 16 x 16 พิกเซล

คุณสามารถใช้ตัวแปลงและสร้าง favicon จากรูปภาพใดก็ได้ ตัวอย่างเช่นที่นี่ https://www.icoconverter.com/ - เลือกไฟล์.

เช่นฉันได้เตรียมภาพวาดไว้แล้ว วิธีที่ดีที่สุดคือเลือกรูปแบบ PNG จากนั้นขอบจะโปร่งใส

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

ดังนั้นดูเหมือนว่าจะเป็นอย่างนั้น อย่างไรก็ตาม ฉันได้รับข้อผิดพลาด ความจริงก็คือขนาดภาพเกินมาตรฐานที่อนุญาต รูปภาพต้องมีขนาดไม่เกิน 3 MB

คุณสามารถบีบอัดและหรือระบายสีได้ แต่ฉันจะแสดงตัวเลือกอื่นให้คุณดู หากคุณดาวน์โหลดรูปภาพใน Google ให้ค้นหาอีกครั้ง จากนั้นเรียกใช้ "ค้นหาจากรูปภาพ"

ตอนนี้เลือก "เล็ก"

ดาวน์โหลดรูปภาพเดียวกัน แต่มีขนาดเล็กกว่า

มาแปลงกันใหม่ครับ

จะมองหาไอคอนสำเร็จรูปได้ที่ไหน

วิธีที่ง่ายและตรงไปตรงมามากขึ้นในการค้นหาไอคอนคือการดาวน์โหลดจากบริการออนไลน์ https://www.iconsearch.ru/ - การใช้รูปภาพเหล่านี้ได้รับอนุญาตจากฝ่ายบริหารและไม่มีโทษตามกฎหมาย - ป้อนชื่อใดก็ได้ในแถบค้นหา เท่านี้ก็เสร็จเรียบร้อย

ค้นหารูปภาพในรูปแบบ PNG และ ico ดาวน์โหลดและติดตั้งบนเว็บไซต์ของคุณ

แต่ถ้าคุณต้องการสร้างมันขึ้นมาเองล่ะ? ไม่มีอะไรซับซ้อนเกี่ยวกับมัน

งานสร้างสรรค์สำหรับมืออาชีพและผู้ที่ต้องการเป็นผู้เชี่ยวชาญ

กิจการไหนก็ดี จะดีมากหากคุณสนใจความรู้ใหม่ๆ และพร้อมที่จะทำสิ่งเล็กๆ น้อยๆ เพื่อพัฒนาความสามารถของคุณ หากคุณต้องการสร้างสิ่งที่น่าสนใจสำหรับพอร์ทัลคุณจะต้องใช้บริการฟรี: https://favicon.ru/ .

เลือกสี

วาดในฟิลด์ที่ให้ไว้สำหรับสิ่งนี้

ขณะเดียวกันก็ติดตามผล จากนั้นดาวน์โหลดและคุณทำเสร็จแล้ว

บางทีคุณอาจได้รับแรงบันดาลใจจากการใช้ภาพวาดสำเร็จรูป เลือกไฟล์จากคอมพิวเตอร์ของคุณ

และรูปภาพของคุณจะกลายเป็น favicon 8 บิต ใช้ความโปร่งใสเพื่อกำจัดพื้นหลัง

นี่คือผลลัพธ์ที่คุณจะได้รับ ฉันไม่รู้เกี่ยวกับคุณ แต่พูดตามตรง ฉันไม่ชอบเขาเป็นพิเศษ

ฉันยินดีเป็นอย่างยิ่งที่ได้ใช้ Photoshop () สำหรับงานนี้ ฉันจะสร้างไอคอน บันทึกเป็น PNG แล้วแปลงโดยใช้ https://www.icoconverter.com - ใช่มีงานอีกมาก แต่ผลลัพธ์จะน่าสนใจและสวยงามยิ่งขึ้น แม้ว่าจะขึ้นอยู่กับคุณที่จะเลือก

ชมวิดีโอที่ผู้ชายสร้างไอคอนที่น่าทึ่งในเวลาเพียง 9 นาที

หากคุณชอบวิดีโอนี้และต้องการเรียนรู้ Photoshop ในเชิงลึกมากขึ้น ฉันขอแนะนำหลักสูตรของ Zinaida Lukyanenko ( Photoshop ตั้งแต่เริ่มต้นในรูปแบบวิดีโอ VIP 3.0 - ในเวลาเพียงไม่กี่สัปดาห์ คุณจะเชี่ยวชาญทักษะทั้งหมดที่จำเป็นในการทำงานกับโปรแกรมนี้

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

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

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

ทำทุกอย่างให้ทันเวลา ในไม่ช้าคุณจะเข้าใจอย่างแน่นอนว่าคุณสามารถทำงานได้ง่ายขึ้น เร็วขึ้น และในวิธีที่ดีที่สุดได้อย่างไร ในขั้นตอนนี้ ทำงานให้สำเร็จ อย่างน้อยก็ด้วยวิธีใดวิธีหนึ่ง และคุณจะสามารถไปถึงจุดสิ้นสุดด้วยความรู้จำนวนมหาศาลอย่างแน่นอน

หากคุณชอบบทความนี้ สมัครรับจดหมายข่าว คุณจะสามารถได้รับข้อมูลล่าสุดที่จะช่วยให้คุณค้นพบตัวเองบนอินเทอร์เน็ตและสร้างรายได้ที่ดีจากการทำสิ่งที่คุณต้องการ: ออกแบบ การเขียนข้อความ เลย์เอาต์ และแม้แต่การจัดการกระบวนการเหล่านี้ทั้งหมด มีบางอย่างสำหรับทุกคน

ขอให้โชคดีในความพยายามของคุณ จนกว่าจะถึงครั้งต่อไป.