Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

คุณใช้เวลามากในการตั้งค่าการออกแบบบล็อกของคุณ แต่ทำไมภาพถึงแสดงไม่ถูกต้องบนสมาร์ทโฟน? คุณแน่ใจว่าได้ใช้ภาพที่มีคุณภาพสูง แต่สภาพของภาพที่ไม่ดีไม่สามารถแก้ไขการแสดงผลได้

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

ในบทช่วยสอนนี้เราจะพยายามแนะนำแนวคิดเล็กน้อยของ " พร้อมจอประสาทตา และแสดงวิธีสร้างภาพ Retina

แต่ก่อนที่คุณจะเริ่มใช้เวลาดู วิธีการติดตั้งธีม WordPressวิธีการหลายปลั๊กอินที่ฉันควรจะติดตั้งบน WordPress.

งั้นมาทำงานกันเถอะ

คำอธิบายของภาพ Retina พร้อม

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

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

การหารความกว้างทางกายภาพของหน้าจอด้วยจำนวนพิกเซลที่แสดงในแนวนอนทำให้เรามีพิกเซลต่อนิ้ว (ppi หรือที่เรียกว่า ppp สำหรับจุดต่อนิ้ว) " DPI สูง ใช้เพื่ออ้างถึงอุปกรณ์ใด ๆ ที่มีมากกว่า 200 พิกเซลต่อนิ้ว ซึ่งรวมถึงอุปกรณ์แสดงผลทั้งหมด " จอตา (จาก Apple) และอุปกรณ์บางอย่างจากผู้ผลิตรายอื่น

วิธีสร้างภาพ "Retina Ready" ด้วย Photoshop

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

ทางออกสำหรับนักออกแบบส่วนใหญ่คือการสร้างหลายเลเยอร์และจัดกลุ่มเข้าด้วยกันเปิดใช้งานได้ตามต้องการ ใช้ฟังก์ชั่น "comps » Photoshop ทำงานด้วยความละเอียดดั้งเดิมและส่งออกรูปแบบที่ต้องการ (โดยใช้การกระทำเช่น "retinize").

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

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

1 - สร้าง Artboard แรกของคุณ

เครื่องมือ Artboard ใหม่แนะนำใน Photoshop CC ฮิตซ่อนอยู่หลังเครื่องมือเคลื่อนไหว คุณสามารถคลิกเครื่องมือในเมนูหรือใช้ Shift + V เพื่อสลับระหว่าง " การกำจัด "และ" artboard ":

ในการสร้างระนาบงานให้คลิกและลากพื้นที่ อาร์ตบอร์ดใหม่จะแสดงในแผงเลเยอร์ด้วยชื่อเริ่มต้น "Artboard 1"

อ่าน: เหตุใดคนทำงานอิสระจึงต้องมีตารางประจำวัน

2 - กำหนดค่า Artboard ของคุณ

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

3 - ทำซ้ำ Artboard ของคุณ

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

เพื่อค้นพบ: วิธีการทำซ้ำบทความหรือหน้าเว็บใน WordPress

4 - วางท็อปครัวของคุณ (Artboard)

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

ใช้พาเนลที่ปรากฏขึ้นเมื่อเลือกระนาบงานเพื่อป้อนพิกัด X และ Y ที่มุมซ้ายบนของระนาบการทำงาน

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

ใช้ปุ่มลูกศรบนแป้นพิมพ์เพื่อย้ายระนาบการทำงานที่เลือก

ดูบทช่วยสอนของเราบน: วิธีแก้ไขไลบรารีสื่อที่ไม่ทำงานบน WordPress

5 - ปรับขนาดอาร์ตบอร์ดของคุณ (เมื่อจำเป็น)

หากคุณต้องการปรับขนาดของอาร์ตบอร์ดของคุณคุณมีหลายทางเลือกดังนี้

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

6 - สร้างงานศิลปะของคุณ

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

ดูรายการของเรา 26 ธีม WordPress ด้วยการลากและวางระบบในการสร้างหน้าเว็บของคุณ

7 - ตั้งค่าเครื่องมือ "สร้าง"

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

8 - เปลี่ยนชื่ออาร์ตบอร์ดของคุณ

สร้าง« ศิลปะ "เพื่อ บันทึกองค์ประกอบภาพ คุณกำลังทำงานโดยยึดตามตัวเลือกที่ตั้งไว้ในชุดเลเยอร์หรือในบอร์ดอาร์ตของคุณ มีตัวเลือกไม่กี่ตัวที่คุณสามารถตั้งค่าได้:

  • รูปแบบไฟล์. เพิ่มนามสกุล (.ไฟล์ jpg, .gif หรือ .png ) เพื่อบันทึกไฟล์ที่เกี่ยวข้องเช่น header-main.png คอมโพเนนต์รูปภาพจะถูกบันทึกไว้ในโฟลเดอร์เดียวกับไฟล์ PSD แต่มี "-assets" เป็นส่วนต่อท้าย
  • การบีบอัดไฟล์.  หลังจากส่วนขยายคุณสามารถเพิ่มตัวเลขที่ระบุระดับการบีบอัดที่ใช้ สำหรับ " opt.jpg »คุณสามารถใช้เปอร์เซ็นต์และสำหรับ png ให้ใช้บิตตามลำดับ: 8, 24 หรือ 32
  • ขนาดทางออก. คุณสามารถตั้งค่ามาตราส่วนเอาต์พุตได้โดยเพิ่มเปอร์เซ็นต์หรือพิกเซล (ความกว้างความสูง) ก่อนชื่อภาพ (ตัวอย่างเช่น 100% header-main.png8 ).
  • รูปภาพเพิ่มเติม. คุณสามารถส่งออกภาพหลายภาพของอาร์ตบอร์ดเดียวกัน (artboard) โดยใช้ลูกน้ำหรือเครื่องหมายบวกเพื่อแยกชื่อรูปภาพ ดังนั้นแต่ละภาพสามารถมีตัวเลือกของตัวเองได้ตราบเท่าที่แต่ละชื่อของภาพไม่ซ้ำกัน

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

ค้นพบเครื่องมือที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

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

  • คำหลักเริ่มต้น: ชื่อต้องขึ้นต้นด้วยสิ่งนี้จึงจะออกจากเครื่องมือ " ผลิต »อิสระในการใช้เป็นค่าเริ่มต้น
  • ขนาดทางออก: ให้คุณตั้งค่ามาตราส่วนผลลัพธ์ด้วยเปอร์เซ็นต์หรือพิกเซล (ความกว้างความสูง).
  • โฟลเดอร์ / ต่อท้าย: กำหนดชื่อของโฟลเดอร์ที่ควรบันทึกรูปภาพและคำต่อท้ายเพื่อเพิ่มชื่อของไฟล์

ย่อ

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

รู้สึกอิสระที่จะถามคำถามเราตามความจำเป็น

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 WP Ultimate Social

นี่เป็นชุดที่ดีที่สุดของคุณสมบัติเครือข่ายสังคมออนไลน์ทั้งหมดที่คุณอาจต้องการในบล็อก WordPress ของคุณ

อ่านยังของเรา ปลั๊กอินเพื่อบูรณาการระบบการลด 8 WordPress

คุณสมบัติหลักคือ: ไอคอนเครือข่ายสังคมออนไลน์หลายรายการการแบ่งปันทางสังคมที่อนุญาตให้ทุกคน แบ่งปันเนื้อหาของเว็บไซต์ของคุณ (บทความหน้ารูปภาพสื่อ) บนเครือข่ายสังคมยอดนิยม (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, บัฟเฟอร์ Reddit, ทัมเบลอร์, Stumbleupon, Xing, Weibo, VK, Delicious) การเชื่อมต่อกับเว็บไซต์ด้วยข้อมูลรับรองสื่อสังคมออนไลน์ของคุณตัวนับเพื่อแสดงจำนวนผู้ติดตามของคุณและการแบ่งปันของเว็บไซต์ของคุณและคนอื่น ๆ

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 WP Slick Slider ภาพโปรรัศมี

หากคุณเป็นผู้ติดตามตัวยงของชุด Visual Composer การใช้ปลั๊กอิน WP Slick Slider เป็นตัวเลือกที่คุณต้องพิจารณา ด้วยเทมเพลตที่กำหนดไว้ล่วงหน้าเกือบ 100 คุณจะพบสิ่งที่คุณกำลังมองหาโดยไม่ต้องเข้ารหัสอะไร

นี่คือตัวเลือกที่จะใช้อย่างจริงจังโดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ แต่งภาพ. คุณสมบัติอื่น ๆ ได้แก่ เค้าโครงที่ตอบสนองได้อย่างสมบูรณ์พร้อมการรองรับการลากและวาง a รหัสย่อ, สนับสนุน RTL และหลายภาษาการออกแบบที่สวยงามและอีกมากมาย

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 เวิร์ดเพรส Social Sidebar

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

ดาวน์โหลดเครื่องมือมากกว่า 11 ล้านรายการ

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

ฟังก์ชันต่างๆ ประกอบด้วย: การผสานรวมกับ your . โดยอัตโนมัติ ธีม WordPress, ความสามารถในการกำหนดค่าจากบนลงล่าง, เข้ากันได้กับเบราว์เซอร์ล่าสุดและทันสมัยหลายตัว, ความเป็นไปได้ของการวางไซด์บาร์จากซ้ายไปขวาด้านบนหรือด้านล่างของหน้าเว็บของคุณมีชุดสี 4 แบบให้เลือกทั้งแบบเลย์เอาต์ที่ตอบสนองและอื่น ๆ อีกมากมาย

ดาวน์โหลด สาธิต | เว็บโฮสติ้ง

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

สรุป

ที่นี่! สำหรับบทช่วยสอนนี้ฉันหวังว่าจะช่วยให้คุณสร้างภาพ "Retina" สำหรับบล็อก WordPress ของคุณได้ 

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

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

... 

%d บล็อกเกอร์ชอบหน้านี้: