ข้อความในภาพ Photoshop ของฉันดู“ พร่ามัว”

9

ฉันกำลังสร้างส่วนหัวของเว็บไซต์ใน Photoshop CS5 แต่เมื่อฉันดูมันข้อความดูเหมือนจะพร่ามัวมากและฉันก็ไม่รู้ว่าทำไม

ฉันใช้เว็บที่ตั้งไว้ล่วงหน้า คุณแนะนำอะไรเพื่อให้ได้ผลลัพธ์ที่คมชัดและดีที่สุด

นี่คือการจำลองปัจจุบัน:

หัวข้อ

adobe-photoshop website-design cs5

คุณพยายามที่จะขยายภาพแรสเตอร์? ซึ่งมักนำไปสู่ความพร่ามัว สำหรับหมายเหตุด้านข้างสำหรับแรสเตอร์กับเวกเตอร์ให้ดูเช่น: graphicdesign.stackexchange.com/questions/260/ …

— Jari Keinänen

@koiyu - เลเยอร์ที่ฉันกังวลมากที่สุดคือเลเยอร์ข้อความและฉันไม่ได้แรสเตอร์เหล่านั้น

— Jeff

(โอ้ฉันดูโค้งรอบ ๆ "xSky") Photoshop ใช้การต่อต้านนามแฝงกับข้อความโดยค่าเริ่มต้นและการตั้งค่าอาจไม่ตรงกับความต้องการในปัจจุบันของคุณ มีตัวอย่างในgraphicdesign.stackexchange.com/questions/1177/… (แม้ว่าสิ่งนี้จะไม่ตอบคำถามของคุณโดยตรง)

— Jari Keinänen

ขอบคุณสำหรับการโพสต์นี้สิ่งที่ฉันต้องการเพื่อช่วยฉันด้วยข้อความพร่ามัวความช่วยเหลือที่ยอดเยี่ยมที่ชัดเจน :)

14

โดยค่าเริ่มต้น Photoshop ใช้การต่อต้านนามแฝงกับเลเยอร์ข้อความ อเล็กซ์ให้การเปรียบเทียบที่ดีในคำถามอื่น :

ตัวเลือกการลดรอยหยักมีอยู่ในแถบเครื่องมือและในCharacterหน้าต่าง:

ตัวเลือกการลดรอยหยัก

หมายเหตุ:หากคุณวางแผนที่จะใช้เลเยอร์ข้อความเป็นข้อความปกติ (HTML) ในผลิตภัณฑ์ขั้นสุดท้ายเบราว์เซอร์ส่วนใหญ่อาจแสดงข้อความต่างจาก Photoshop ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งนี้คุณสามารถค้นหาในคำถาม "Font (anti) aliasing ใน Photoshop" ที่กล่าวถึง

— Jari Keinänen
แหล่งที่มา

ดังนั้นฉันคิดว่ามันเป็น Anti Aliasing ที่กำลังทำอยู่? ฉันจะได้รับข้อความที่เป็นตัวหนาได้อย่างไร :)

— เจฟฟ์

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

— Jari Keinänen

2

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

— mattdm

4

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

หากคุณต้องการตรวจสอบให้แน่ใจว่ามันถูกต้องให้รักษาพิกเซล 1: 1 ไว้

— mattdm
แหล่งที่มา

สิ่งนั้นคือใน Photoshop ตัวมันเองมันดู blury ฉันจะทำ "พิกเซล 1: 1" ได้อย่างไร

— Jeff

@Jeff "รักษาพิกเซล 1: 1" เทียบเท่ากับการดูภาพที่ซูม 100%

— Jari Keinänen

@koiyu - โอเคฉันมีอยู่แล้วว่า :)

— เจฟฟ์

1

ฉันจะไม่แสดงข้อความเป็นรูปภาพตามที่นำไปสู่ปัญหาการเข้าถึงและเครื่องมือค้นหา

อย่างไรก็ตามหากคุณต้องการแสดงข้อความเป็นภาพรูปภาพ png หรือ gif ให้ผลลัพธ์ที่ดีกว่าภาพ jpg เนื่องจากการบีบอัด jpeg แม้ว่าคุณจะไม่บีบอัดรูปภาพเบราว์เซอร์เช่น Opera mobile หรืออินเทอร์เน็ตอาจเป็น 'ตัวเร่ง'

— Jeroen
แหล่งที่มา

ใช้ PNG เสมอห่างจาก JPEG นานมาแล้ว: P

— Jeff

1

ฉันจะทำให้ข้อความเป็นไฟล์ PNG ที่โปร่งใสเพื่อการแก้ปัญหาที่ดีขึ้น อีกทางเลือกหนึ่งคือการใช้sIFRสำหรับทั้งสไตล์และ SEO sIFR นั้นโดยทั่วไปจะฝังตัวอักษรเป็น Flash แต่มันเป็นเครื่องมือค้นหาที่เป็นมิตร 100% ดูตัวอย่างบางส่วนที่เช่น3d-photomontage.com

— โทนี่ตัน
แหล่งที่มา

1

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

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

ลองดูที่นี่เช่นกันมันจะช่วยคุณได้มากขึ้นในการแก้ปัญหาการแสดงผลข้อความใน HTML ของคุณแทนที่จะเป็น PS

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

ฉันมักจะออกแบบด้วยตัวเลือก antia-aliased ที่เลือกไว้และตระหนักถึงความจริงที่ว่าข้อความใน HTML จะดูแตกต่างออกไป!

— Sahbas มี
แหล่งที่มา