วงรี

รูปหลายเหลี่ยม

เส้น.

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

มือ– หากภาพไม่พอดีกับกรอบหน้าจอเราก็สามารถลากไปได้

หมุนมุมมองหมุนทั้งแผ่นด้วยทุกชั้น

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

สี่เหลี่ยมสี- สีหลัก (บน) และสีพื้นหลัง (ล่าง)

โหมดมาส์กด่วน- เรียกว่าโดยปุ่ม Q ซึ่งเป็นรูปภาพโปร่งแสง (คล้ายผ้าอ้อมที่คลุมภาพวาด) ซึ่งคุณสามารถวาดบนเลเยอร์ปกติ จากนั้นแปลงมาสก์นี้กลับเป็นตัวเลือก

โหมดการดูเอกสาร- โหมดแรกคือโหมดมาตรฐานที่ตั้งไว้ตามค่าเริ่มต้น โหมดที่สองคือแบบเต็มหน้าจอพร้อมแถบเมนู ส่วนโหมดที่สามคือแบบเต็มหน้าจอ คุณยังสามารถสลับระหว่างโหมดต่างๆ ได้โดยการกดปุ่ม F

โปรดทราบว่าจะมีการป้อนสไตล์ CSS สำหรับรูปร่างที่กำหนดลงในไฟล์เพียงครั้งเดียว แต่สามารถวางแท็ก HTML บนไซต์ได้ไม่จำกัดจำนวนครั้ง

จากผลลัพธ์ที่เราได้รับดังต่อไปนี้ สี่เหลี่ยมพร้อมกรอบ.

วิธีสร้างมุมโค้งมนใน CSS

คุณลักษณะนี้ใช้ในการปัดเศษมุม รัศมีชายแดน.

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

แท็ก div ของ HTML จะให้เรา สี่เหลี่ยมผืนผ้าในกรอบที่มีมนและมุม:

และแท็ก HTML สำหรับแสดงข้อความจะมีลักษณะดังนี้:

เราได้รับ สี่เหลี่ยมผืนผ้าโค้งมนและข้อความ:

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

1. ไม่มีข้อความ

ในกรณีนี้ แบบฟอร์มจะใช้มิติของสภาพแวดล้อม: ความยาวสอดคล้องกับความกว้างของฟิลด์ และความสูงจะเปลี่ยนไปเมื่อกรอกแบบฟอร์มด้วยเนื้อหา

ปัดเศษมุมที่เลือก

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

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

1. มุมซ้ายบน.

2. มุมขวาบน.

3. มุมขวาล่าง

4. มุมซ้ายล่าง.

ผลลัพธ์ที่ได้คือสี่เหลี่ยมผืนผ้าที่มีส่วนโค้งที่เลือกไว้เฉพาะที่มุมด้านบนเท่านั้น

มุมจะนับตามเข็มนาฬิกา โดยเริ่มจากมุมซ้ายบน:

2. การปัดเศษมุมโดยใช้โค้ด HTML โดยไม่ต้องเขียนลงในไฟล์สไตล์

มาดูวิธีที่สองในการรับสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมนโดยใช้โค้ด HTML โดยไม่ต้องเขียนลงในไฟล์สไตล์

HTML มุมโค้งมน

มีคุณสมบัติเล็ก ๆ อย่างหนึ่งที่ทำให้กระบวนการทั้งหมดง่ายขึ้น - นี่คือ HTML มุมโค้งมน- ประกอบด้วยการสร้างโค้ด HTML ซึ่งมีสไตล์เดียวกันกับโค้ด CSS ซึ่งใช้คุณลักษณะเดียวกันกับในบล็อก CSS และไม่จำเป็นต้องเขียนบล็อกลงในไฟล์ Style.css กล่าวอีกนัยหนึ่ง เราแทนที่โค้ด CSS ด้วยโค้ด HTML อย่างสมบูรณ์

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

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

3. รูปภาพที่มีมุมโค้งมน ใส่กรอบรูปภาพ HTML

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

ทำได้ง่ายมาก และตอนนี้เราจะเรียนรู้วิธีการทำ

มาวางรูปภาพบนเว็บไซต์ โดยทำให้เป็นพื้นหลังของตัวเองเป็นพื้นหลังของแท็ก div เราได้รับรหัสและรูปภาพต่อไปนี้:

การปัดเศษมุมของภาพโดยการเพิ่มกรอบ

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

เมื่อใช้วิธีแรกในบทความนี้ โค้ดรูปภาพสำหรับไฟล์สไตล์และโค้ด HTML ของแท็ก div จะมีลักษณะดังนี้:

โปรดทราบว่าแอตทริบิวต์บางอย่างสามารถป้อนลงในไฟล์สไตล์ได้ และบางส่วนสามารถป้อนลงในแท็ก div ในกรณีของเรา ความกว้างและความสูงของขนาดรูปภาพจะถูกแทรกลงในโค้ด HTML

รหัส HTML ของวิธีที่สองโดยไม่ต้องใช้ไฟล์สไตล์ที่อธิบายไว้ในบทความนี้จะมีลักษณะดังนี้:

จากรหัสของแต่ละวิธีเราได้ผลลัพธ์เดียวกัน - รูปภาพที่มีมุมโค้งมน:

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

ครั้งแรกของฉัน บทเรียนโฟโต้ชอปจะบอกคุณว่าอย่างไร รอบมุมรูปถ่าย.

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

บทเรียนวันนี้เกี่ยวกับการปัดเศษมุมของภาพถ่ายใน Photoshop มาถ่ายรูปรวมมุมโค้งมนแบบในรูปของผมกัน

1. เพื่อนำไปปฏิบัติ การปัดเศษมุมใน Photoshop, เปิดด้วย โฟโต้ชอปรูปภาพ (ภาพถ่าย) ที่เราต้องการ ตัวอย่างเช่น ฉันถ่ายภาพหนึ่งภาพจากคลังภาพของฉัน

2. เรานำขนาดของรูปวาดมาสู่พารามิเตอร์ที่เราต้องการ เมื่อต้องการทำเช่นนี้ ให้กด ALT+CTRL+I หน้าต่างขนาดภาพจะเปิดขึ้น เรากำหนดขนาดที่เราต้องการ คุณสามารถครอบตัดรูปภาพตามขนาดที่ต้องการได้

3. เลือกรูปภาพ (CTRL+A) (เส้นประรอบปริมณฑลจะปรากฏขึ้น) และคัดลอก (CTRL+C) เราคัดลอกภาพถ่ายเพื่อให้ภาพต้นฉบับยังคงไม่เปลี่ยนแปลงหลังจากที่เราเสร็จสิ้น การปัดเศษมุมใน Photoshop- แม้ว่าเราจะทำงานกับต้นฉบับได้ แต่เมื่อมุมโค้งมนพร้อม เราก็จะบันทึกภาพถ่ายเป็นอีกภาพหนึ่ง

4. เปิดหน้าต่างใหม่ (CTRL+N) กำหนดขนาดรูปภาพที่ต้องการ แล้วคลิก "ตกลง" โปรดทราบว่าฉันตั้งค่าพื้นหลังเป็น "โปร่งใส" คุณสามารถตั้งค่าพื้นหลังให้เป็นสีที่คุณต้องการได้ทันที

5. วางภาพที่คัดลอกไว้ในหน้าต่างใหม่ (CTRL+V) และสร้างเลเยอร์ใหม่ (CTRL+SHIFT+N) ในเลเยอร์นี้ ให้ใช้เครื่องมือสี่เหลี่ยมผืนผ้า มุมโค้งมน"วาดรูปสี่เหลี่ยมผืนผ้าตามขนาดที่ต้องการ สีของสี่เหลี่ยมผืนผ้าไม่สำคัญ เครื่องมือถูกเลือกโดยคลิกที่ปุ่มเมาส์ขวา หรือเพียงแค่กดปุ่ม (U) เราตั้งค่ารัศมีความโค้งตามดุลยพินิจของเรา ( ดูรูปด้านล่าง);

หากจำเป็น คุณสามารถย้ายรูปร่างที่วาดไว้ได้โดยใช้ลูกศรบนแป้นพิมพ์ หรือใช้เมาส์ในขณะที่กดปุ่มซ้ายค้างไว้ ขั้นแรกอย่าลืมเปิดใช้งาน “move” บนแถบเครื่องมือ (ปุ่มด้านบน) คุณยังสามารถ ปรับขนาดตัวเลข เมื่อต้องการทำเช่นนี้ ให้กด (CTRL+T) แล้วยืดรูปร่างตามขนาดที่ต้องการโดยใช้เมาส์ขณะกดปุ่มซ้ายค้างไว้ หากคุณต้องการเปลี่ยนขนาดโดยยังคงสัดส่วนไว้ คุณต้องกด SHIFT ค้างไว้แล้วลากที่มุมของรูปร่าง

6. ไปที่แผงเลเยอร์ ขณะที่กด CTRL ค้างไว้ ให้คลิกซ้ายที่ภาพตัวอย่าง (รูปภาพ) ของเลเยอร์สี่เหลี่ยมผืนผ้า เส้นประของรูปร่างจะปรากฏขึ้น

7. เลื่อนไปที่ชั้นล่างสุด โดยคลิกทางด้านขวาของรูปภาพในแผงเลเยอร์ ในกรณีของเราคือเลเยอร์ 1 ไฮไลต์สีน้ำเงินจะไปอยู่ที่เลเยอร์ 1

8. กด CTRL+ SHIFT+I การเลือกจุดจะปรากฏขึ้นตามขอบของส่วนของรูปภาพที่อยู่นอกสี่เหลี่ยมผืนผ้าของเรา มุมโค้งมน.

9. กด DEL บนแป้นพิมพ์ ส่วนของรูปภาพที่อยู่นอกสี่เหลี่ยมจะถูกลบออก

10. เปิดใช้งานเลเยอร์สี่เหลี่ยมผืนผ้าอีกครั้ง ลบออกโดยคลิกที่ไอคอนถังขยะ

11. กดปุ่ม "M" แล้วคลิกซ้ายที่ใดก็ได้ในภาพ การเลือกได้ถูกลบออกแล้ว การปัดเศษมุมใน Photoshopพร้อม. คุณสามารถบันทึกภาพที่เราได้รับโดย

ในรูปแบบที่เราต้องการ

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

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

สี่เหลี่ยมผืนผ้าเป็นรูปร่างพื้นฐานที่ง่ายที่สุด - ตั้งค่าพิกัด x และ y ของมุมซ้ายบนของสี่เหลี่ยมผืนผ้า ความกว้าง (ความกว้าง) และความสูง (ความสูง) สี่เหลี่ยมจะเต็มไปด้วยสี (คุณสมบัติการเติม) ที่เราระบุ โดยค่าเริ่มต้นจะเป็นสีดำ สีเติมสามารถตั้งค่าได้ในลักษณะเดียวกับ หากคุณระบุค่า "ไม่มี" สี่เหลี่ยมผืนผ้าจะไม่มีการเติม นั่นคือโปร่งใส กฎสำหรับการระบุระดับความโปร่งใสของการเติมสี่เหลี่ยม (การเติมความทึบ) นั้นคล้ายคลึงกับกฎของเส้น ทั้งคุณสมบัติ "เติม" และ "เติมความทึบ" เป็นคุณสมบัติการนำเสนอและอธิบายไว้ในแอตทริบิวต์ style

บันทึก

เมื่อมองเห็นแล้ว พิกัด x และ y ในพารามิเตอร์สี่เหลี่ยมผืนผ้าอาจไม่ใช่มุมซ้ายบน ตัวอย่างเช่น หากใช้การแปลงกับรูปร่าง

โครงร่างของสี่เหลี่ยมนั้นถูกวาดด้วยแปรงเดียวกับเส้นโดยมีคุณสมบัติเหมือนกัน ตามค่าเริ่มต้น แปรงจะถูกตั้งค่าเป็น none (เส้นโครงร่าง: ไม่มี) และจะไม่มีการวาดโครงร่าง ตัวอย่างบางส่วน:

ผลลัพธ์ “สด” หรือดูภาพ:

บันทึก

โครงร่างถูกวาดในลักษณะที่ครึ่งหนึ่งอยู่ภายในสี่เหลี่ยม และอีกครึ่งหนึ่งอยู่ด้านนอก ลองดูที่หนึ่งในสี่เหลี่ยมในมุมมองที่ขยายใหญ่ขึ้น:

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

สี่เหลี่ยมมน

หากต้องการวาดรูปสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมน คุณต้องระบุรัศมีของมุมตามแกน x (rx) และ y (ry) จำนวนสูงสุดของ rx คือครึ่งหนึ่งของความกว้างของสี่เหลี่ยม ค่าสูงสุดสำหรับ ry คือครึ่งหนึ่งของความสูง หากคุณระบุเพียง 1 รายการของ rx หรือ ry ดังนั้นรายการที่ไม่ได้ระบุจะเท่ากับรายการที่ระบุ

คุณจะต้อง

• ภาพถ่ายหรือภาพอื่น ๆ ในรูปแบบดิจิทัล
• คอมพิวเตอร์ที่ติดตั้งโปรแกรม Corel Draw ที่มีลิขสิทธิ์ไว้

คำแนะนำ

ลองพิจารณาวิธีการที่คุณต้องปัดเศษมุมหนึ่งหรือหลายมุมของสี่เหลี่ยมด้วยวิธีต่างๆ
เปิดอันใหม่ใน Corel Draw โดยใช้ CTRL+N หรือเลือกฟังก์ชัน "สร้าง" ในรายการแบบเลื่อนลงจากเมนู "ไฟล์" จากนั้น จากรายการเดียวกัน ให้เลือกการดำเนินการ "นำเข้า" หรือเรียกโดยใช้คีย์ผสม CTRL+I จากนั้นระบุเส้นทางไปยังไฟล์รูปภาพในกล่องโต้ตอบแล้วคลิกปุ่ม "นำเข้า" ของคุณจะปรากฏบนแผ่นงานนี้

ในแถบเครื่องมือ ค้นหาการเปิดตัว "Node Editor" และเลือกเครื่องมือ "Shape" เครื่องมือนี้สามารถเรียกใช้งานได้โดยการกดปุ่ม F10

ทางด้านขวาของมุมคุณต้องปัดเศษให้คลิกซ้ายที่ขอบของภาพ โหนดใหม่จะปรากฏในภาพ นอกเหนือจากโหนดทั้งสี่มุม จากนั้นเลือกตัวเลือก Convert Line To Curve ในแผง Node Editor เครื่องหมายกลมจะปรากฏทางด้านซ้ายของโหนดที่สร้างขึ้นใหม่

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

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

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