Font (anti) aliasing di Photoshop


20

Saya menggunakan Photoshop untuk mendesain situs web dan setiap kali saya membandingkan desain photoshop dengan pratinjau langsung peramban, font-font tersebut tampak berbeda.

Arial

Pada dasarnya setiap metode anti-aliasing yang saya pilih di photoshop, teks selalu memberi kesan teks tebal . Jadi saya selalu dipaksa untuk mematikan antialiasing (untuk teks normal 12px / 14px).

Apakah ada metode yang saya dapat mencapai rendering font yang sama di Photoshop seperti yang digunakan Windows dengan cleartype?

Jika tidak, apakah ada font di luar sana yang terlihat lebih baik daripada Arial ketika anti-aliasing dimatikan?


5
Saya telah menanyakan masalah ini di situs resmi Photoshop Feedback, feedback.photoshop.com/photoshop_family/topics/… pliz vote!

Jawaban:


18

Ada dua alasan mengapa teks ClearType begitu tajam.

  1. ini menggunakan rendering subpixel . Saya tidak berpikir Photoshop mendukungnya.
  2. itu menggunakan petunjuk agresif untuk menyesuaikan garis ke dalam kotak pixel

Anda dapat mengetik teks Anda di Notepad, tangkapan layar dengan beberapa alat yang nyaman, dan tempel ke Photoshop dengan blending mode Multiply (karena itu teks hitam pada latar belakang putih). Tapi itu tidak nyaman. Sunting: mungkin juga hampir tidak mungkin dilakukan dengan warna latar depan selain hitam.

Orang ini telah menjelaskan metode untuk melakukan rendering subpiksel manual, dan bagi saya, itu memang meningkatkan ketajaman font, membuatnya lebih dekat ke ClearType. Tetapi masih menggunakan petunjuk Photoshop, jadi tidak setajam ClearType.

Apakah Anda benar-benar membutuhkan render ClearType di Photoshop? Jika Anda mengekspor gambar apa pun yang mengandung teks untuk digunakan dalam desain web Anda, mereka tidak boleh mengandung rendering subpixel karena tidak sesuai untuk beberapa tampilan (CRT, telepon yang diputar). Dan jika Anda tidak mengekspor teks tetapi hanya melihatnya, rendering Photoshop tampaknya OK.


Populasi CRT adalah cara terlalu rendah untuk merawat mereka .....
Pacerier

13

Photoshop bukan program mendesain web. Untuk mendapatkan teks yang terlihat sama di browser seperti pada grafik (jpg, gif dll) Anda harus menggunakan font yang sama di kedua program. Beberapa font tidak digunakan oleh semua browser.

Bergantung pada ukuran teks Anda, font berukuran sedang yang bagus bisa Tahoma, Helvetica, Trebuchet atau Georgia. Lihatlah situs web ini untuk beberapa ide bagus: http://www.snaphow.com/10-most-p--web-fonts-used-in-web-safe-design/

Font yang lebih besar adalah awal dari masalah anti-aliasing.

Jika Anda mencoba untuk mendapatkan teks untuk digabungkan dengan teks pada halaman, saya sarankan menggunakan positioning CSS untuk mencapai tujuan Anda. CSS memungkinkan Anda untuk menempatkan teks dari halaman web Anda di atas gambar, dan menggunakan posisi relatif dan absolut untuk membuat halaman persis seperti yang Anda inginkan. Berikut ini contoh dan tutorial: http://css-tricks.com/text-blocks-over-image/


1
"Photoshop bukan program mendesain web." Sangat????
Farray

3
@ Farray: Sungguh. Ini adalah editor grafis raster. Hanya karena Anda juga dapat melakukan desain web dengan itu tidak berarti itu awalnya dirancang untuk itu. Anda juga bisa mengendarai traktor di jalan raya, tetapi itu tidak menjadikannya mobil.
Ilmari Karonen

@IlmariKaronen Photoshop adalah alat yang bagus untuk mendesain situs web, hanya saja tidak digunakan untuk membangun situs web. Saya belum punya desain web yang tidak melibatkan pengeditan grafik raster ...
Farray

2
Itulah salah satu pendapat paling disayangkan yang saya baca belakangan ini. Jika Photohop tidak dimaksudkan untuk mendesain situs web (dan juga banyak hal lainnya), lalu apa yang Anda gunakan untuk mendesainnya? Anda harus melihat beberapa blog dan situs web desain serius, semua orang menggunakan photoshop untuk merancang situs web mereka.
José Tomás Tocino

@ TheOm3ga - sebenarnya, itu benar-benar tidak benar. Beberapa lebih suka Fireworks karena alur kerjanya yang lebih baik (meskipun rendering teks FW mengerikan ), yang lain bersikeras pada prototipe HTML. Tapi photoshop bukanlah pilihan universal.
Jimmy Breck-McKye

6

Sayangnya Photoshop tidak mendukung render subpixel apa pun. Juga tidak ada perangkat lunak Adobe lainnya — dengan pengecualian Dreamweaver . (Yah, itu bukan teknologi Dreamweaver, karena hanya membuat HTML dan kemudian mengirimkan teks untuk sistem operasi yang akan di-render.)

Alur kerja yang disarankan adalah Anda membuat dan mengiris desain Anda di Photoshop dan kemudian membukanya di Dreamweaver. Jika desain membutuhkan koreksi lebih lanjut, Anda dapat membuka file secara bersamaan di Photoshop, melakukan perubahan, menyimpan, dan menyegarkan tampilan di Dreamweaver. Tambahkan salinan final dan asli di Dreamweaver. Anda juga bisa mengganti Photoshop dengan Fireworks; atau bahkan mulai wireframing di Fireworks → lanjutkan di Photoshop → publikasikan melalui Dreamweaver. (Sudah jelas mengapa edisi Creative Suite biasanya dibeli dalam bundel, bukan?)

Jika desain terlihat berbeda di pratinjau Dreamweaver daripada di browser, itu adalah masalah lain, yang disayangkan, (dan saya tidak hanya berbicara tentang tipografi tetapi rendering secara keseluruhan). Semakin cepat Anda dapat beralih dari Photoshop ke demo langsung — baik itu melalui Dreamweaver atau tidak — semakin baik. Saya melakukan keinginan Photoshop akan memiliki kekuatan subpixel render (tapi pada saat yang sama harapan itu tidak akan diperkenalkan di CS6, atau setidaknya harapan saya akan menjadi kaya saat itu)!

Hanya catatan tambahan: ClearType dilindungi dengan 10 atau lebih paten, jadi kemungkinan rendering yang sama tidak mungkin. Juga perlu dicatat bahwa OS X menggunakan render yang berbeda (Kuarsa) secara default dan begitu juga antarmuka grafis dalam distribusi linux.


5

Desain dalam HTML dan CSS. Jika Anda HARUS mendapatkannya kembali menjadi mock-up PhotoShop, layar mengambilnya dari browser, lalu membawanya kembali ke dokumen PhotoShop Anda.

Jenis pengaturan di PhotoShop adalah sakit, secara umum.


5

Sebuah solusi yang mungkin dilakukan adalah dengan menggunakan metode anti-aliasing "tajam" dan mengatur cahaya batin 0-kedalaman pada layer teks:

masukkan deskripsi gambar di sini

Untuk sampel ini saya menggunakan warna putih, 85% opacity, "campuran" mode, 0 choke, 0 ukuran Tidak sebagus Ms clear-type, tetapi terlihat kurang berani ...

(baris pertama = tidak ada anti-aliasing, baris terakhir = tajam anti-aliasing tanpa cahaya batin)


Pendekatan yang cukup menarik! Juga membuat teks dapat diedit.
kontur

@onetrickpony, Apa gaya untuk baris kedua?
Pacerier
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.