คุณใช้เวลามากในการตั้งค่าการออกแบบบล็อกของคุณ แต่ทำไมภาพถึงแสดงไม่ถูกต้องบนสมาร์ทโฟน? คุณแน่ใจว่าได้ใช้ภาพที่มีคุณภาพสูง แต่สภาพของภาพที่ไม่ดีไม่สามารถแก้ไขการแสดงผลได้
หลายคนไม่ตระหนักว่าอุปกรณ์ใหม่ (โดยเฉพาะจาก 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" ที่คล้ายกันซึ่งมีโครงสร้างเดียวกันกับส่วนประกอบทั้งหมด:
เพื่อค้นพบ: วิธีการทำซ้ำบทความหรือหน้าเว็บใน 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 ของคุณโดยอัพโหลดไปยังไลบรารีสื่อของคุณ
รู้สึกอิสระที่จะถามคำถามเราตามความจำเป็น
ค้นพบปลั๊กอิน 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 จะช่วยคุณสร้างแถบด้านข้างบนเว็บไซต์ของคุณโดยมีวัตถุประสงค์เพื่อช่วยให้คุณทำ แบ่งปันเนื้อหาของคุณอย่างรวดเร็วบนเครือข่ายโซเชียลต่างๆ.
ฟังก์ชันต่างๆ ประกอบด้วย: การผสานรวมกับ your . โดยอัตโนมัติ ธีม WordPress, ความสามารถในการกำหนดค่าจากบนลงล่าง, เข้ากันได้กับเบราว์เซอร์ล่าสุดและทันสมัยหลายตัว, ความเป็นไปได้ของการวางไซด์บาร์จากซ้ายไปขวาด้านบนหรือด้านล่างของหน้าเว็บของคุณมีชุดสี 4 แบบให้เลือกทั้งแบบเลย์เอาต์ที่ตอบสนองและอื่น ๆ อีกมากมาย
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ
- ปลั๊กอิน 7 WordPress เพื่อสร้างการออกแบบสำหรับผลิตภัณฑ์ของคุณ
- ปลั๊กอิน WordPress 4 เพื่อบันทึกบน DropBox
- วิธีเพิ่มการเลื่อนแบบไม่ จำกัด ลงในบล็อก WordPress
- ปลั๊กอิน WordPress 10 เพื่อรับบริจาคในบล็อกของคุณ
สรุป
ที่นี่! สำหรับบทช่วยสอนนี้ฉันหวังว่าจะช่วยให้คุณสร้างภาพ "Retina" สำหรับบล็อก WordPress ของคุณได้
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเรา การสร้างบล็อก WordPress
หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น. อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ.
...
