การใช้นามแฝง (ต่อต้าน) แบบอักษรใน Photoshop

ฉันใช้ Photoshop ในการออกแบบเว็บไซต์และเมื่อใดก็ตามที่ฉันเปรียบเทียบการออกแบบ Photoshop กับการแสดงตัวอย่างเบราว์เซอร์สดแบบอักษรที่ปรากฏจะแตกต่างกัน

โดยพื้นฐานแล้ววิธีการลบรอยหยักที่ฉันเลือกใน photoshop ข้อความจะให้ความประทับใจกับตัวหนาเสมอ ดังนั้นฉันถูกบังคับให้ปิดการลดรอยหยักเสมอ (สำหรับข้อความ 12px / 14px ปกติ)

มีวิธีที่ฉันสามารถใช้การแสดงผลแบบอักษรชนิดเดียวกันใน Photoshop เช่นเดียวกับที่ Windows ใช้กับการพิมพ์ดีดหรือไม่

ถ้าไม่ใช่มีแบบอักษรใดบ้างที่ดูดีกว่า Arial เมื่อปิดการลบรอยหยัก?

มีสองสาเหตุที่ข้อความ ClearType คมชัดมาก

1. จะใช้การแสดงผล subpixel ฉันไม่คิดว่า Photoshop รองรับสิ่งนั้น
2. มันใช้คำใบ้เชิงรุกเพื่อให้พอดีกับเส้นในกริดพิกเซล

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

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

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

Photoshop ไม่ใช่โปรแกรมออกแบบเว็บ ในการรับข้อความที่มีลักษณะเหมือนกันในเบราว์เซอร์เช่นเดียวกับกราฟิก (jpg, gif ฯลฯ ) คุณต้องใช้แบบอักษรเดียวกันในทั้งสองโปรแกรม เบราว์เซอร์ทั้งหมดไม่ได้ใช้แบบอักษรบางแบบ

แบบอักษรขนาดกลางที่ดีอาจเป็น Tahoma, Helvetica, Trebuchet หรือ Georgia ทั้งนี้ขึ้นอยู่กับขนาดของข้อความของคุณ ตรวจสอบเว็บไซต์นี้สำหรับความคิดที่ดี: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

แบบอักษรที่มีขนาดใหญ่ขึ้นนั้นเป็นเรื่องที่สำคัญ

หากคุณกำลังพยายามให้ข้อความผสานกับข้อความบนหน้าเว็บฉันขอแนะนำให้ใช้การวางตำแหน่ง CSS เพื่อให้บรรลุเป้าหมายของคุณ CSS ช่วยให้คุณสามารถวางข้อความจากเว็บเพจที่อยู่เหนือภาพและใช้การจัดตำแหน่งแบบสัมพัทธ์และสัมบูรณ์เพื่อแสดงผลหน้าเว็บตามที่คุณต้องการ นี่คือตัวอย่างและบทช่วยสอน: http://css-tricks.com/text-blocks-over-image/

น่าเสียดายที่ Photoshop ไม่รองรับการแสดงผลพิกเซลย่อยใด ๆ หรือไม่ Adobe ใด ๆ ซอฟแวร์ที่มีข้อยกเว้นของอื่น ๆDreamweaver (มันไม่ได้เป็นเทคโนโลยีของ Dreamweaver อย่างแน่นอนเพราะมันแค่แสดงผล HTML และส่งข้อความเพื่อให้ระบบปฏิบัติการแสดงผล)

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

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

เพียงแค่ข้อสังเกตด้านข้าง: ClearType ได้รับการคุ้มครองด้วยสิทธิบัตร 10 ข้อดังนั้นการแสดงผลเดียวกันจึงไม่น่าจะเป็นไปได้ นอกจากนี้ยังเป็นที่น่าสังเกตว่า OS X ใช้การเรนเดอร์ที่แตกต่างกัน (Quartz) โดยค่าเริ่มต้นและอินเทอร์เฟซแบบกราฟิกในการแจกแจงลินุกซ์

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

การตั้งค่าประเภทใน PhotoShop เป็นความเจ็บปวดโดยทั่วไป

วิธีแก้ปัญหาที่เป็นไปได้คือการใช้วิธีการลดรอยหยัก "แหลม" และตั้งค่าการเรืองแสงภายใน 0 ลึกลงบนเลเยอร์ข้อความ:

สำหรับตัวอย่างนี้ฉันใช้สีขาวความทึบ 85% โหมดผสม "หน้าจอ" 0 โช้ค 0 ขนาด ไม่ดีเท่า Ms clear-type แต่มันดูหนากว่า ...

(บรรทัดแรก = ไม่มีการลบรอยหยักบรรทัดสุดท้าย = การลบรอยหยักที่คมชัดโดยไม่มีการเรืองแสงภายใน)