Bagaimana saya bisa membuat teks Photoshop saya tampak seperti di web?

11

Apakah saya benar-benar harus mendesain semuanya di Photoshop dengan set anti-aliasing ke "tidak ada"? Saya yakin ada cara yang lebih baik.

Saya ingin memiliki pengaturan sehingga ketika memilih web-safe dasar (seperti Tahoma) di Photoshop sehingga saya bisa melihat seperti apa bentuknya saat di web.

Sebagai contoh: Perbedaan antara Tahoma dengan anti-aliasing diatur ke "crisp" di Photoshop dan bagaimana renders di Firefox adalah utama. Ini terlihat bagus dan halus di Photoshop dan terlihat seperti omong kosong di web.

Apakah ada pilihan anti-aliasing yang terbaik untuk memulai (yang memiliki hasil paling mirip) ketika merencanakan untuk membuat konten langsung di web?

jonn_g
sumber
1
Bagaimana font terlihat 'di web' sepenuhnya tergantung pada browser, pengaturan browser, OS, dan pengaturan OS. Dengan kata lain, ini terlihat berbeda untuk orang yang berbeda.
DA01

Jawaban:

10

Sebagian besar sistem operasi dan browser ditampilkan dengan antialiasing atau antialiasing sub-piksel. Antialiasing sub-pixel adalah umum pada platform desktop, seperti Windows (dengan ClearType) dan OS X. Antialiasing monokrom standar umum pada platform mobile, di mana urutan sub-pixel perangkat dapat berubah dengan orientasi perangkat, dan di mana rendering sub-pixel tidak t sama pentingnya, karena mereka sering memiliki tampilan kerapatan piksel yang lebih tinggi.

Render teks yang diasingkan adalah umum pada Windows XP, di mana ClearType dinonaktifkan secara default. Windows Vista dan yang lebih baru mengaktifkan ClearType secara default.


Rendering di Photoshop vs Windows vs OS X vs iOS vs Android vs WebKit vs Firefox (Gecko) biasanya berbeda. Jadi sama sekali tidak ada cara Anda dapat membangun sesuatu di Photoshop dan tahu bahwa rendering teks akan sama, kecuali jika Anda mengambil tangkapan layar dan menambahkannya ke dokumen Anda sebagai lapisan bitmap.

Marc Edwards
sumber
2
Sejak menjawab pertanyaan ini, Adobe menambahkan opsi "Mac" dan "Mac LCD" ke Photoshop (plus padanan pada Windows) yang menggunakan rendering font sistem. Ini sering sangat dekat atau identik dengan Safari sekarang.
Marc Edwards
8

Tidak. Garis pemikiran baru adalah untuk menghindari Photoshop untuk tata letak dan desain tipografi dan mulai di browser sedini mungkin.

Dengan memberikan klien URL yang sebenarnya sebagai lawan dari comp Photoshop, Anda menghindari harapan klien putus-putus ketika produk akhir membuat sedikit berbeda di browser pilihan mereka vs comps Photoshop.

Pada akhirnya, adalah tanggung jawab kami untuk mendidik klien dan membuat mereka sadar akan perbedaan tipografi yang tidak dapat dihindari yang terjadi antara browser dan OS.

Supir
sumber
1
Di perusahaan saya, saya membuat desain dan menyerahkannya kepada pengembang front-end. Saya tidak pernah menyentuh kode. Dengan itu, saya butuh solusi yang tidak benar-benar membangun halaman web untuk melihat seperti apa teks saya.
jonn_g
2

Di Photoshop CC, kami menambahkan mode aliasing baru untuk font Anda. Alih-alih "tajam", atau "kuat", coba "Mac LCD" yang baru. Anda akan mendapatkan desain web yang aman 100%.

Michael Chaize
sumber
1
Tidak ada yang namanya "desain web 100% aman" mengingat bahwa tidak ada yang namanya 100% konsistensi di seluruh browser, font dan sistem operasi.
DA01
1

Jawaban Singkat: Anda tidak bisa.

Tidak hanya Photoshop tidak pernah ideal untuk mengetahui bagaimana tipografi Anda akan ditampilkan di luarnya, itu juga tidak ideal untuk bekerja dengan font pada umumnya. (Ketika saya bekerja di Design Firm / Print Shop, semua yang dirancang dalam PS harus diekspor sebagai PDF untuk alasan yang sama). Kemudian muncul masalah web, browser dan OS yang menjalankan browser tersebut. Sejauh ini, sejauh yang saya ketahui, OS X adalah yang terbaik dalam hal rendering font dengan tepat, sedangkan Linux yang kedua, dan Windows tentu saja yang terakhir. Kenyataannya adalah, mereka semua menggunakan algoritma yang berbeda untuk merender font, dan Anda tidak akan mendapatkan hasil yang sama di mana-mana. Jika ada solusi, mungkin kita semua beralih ke Linux, Mac, atau menunggu hingga Microsoft berhasil lain kali dengan Windows Metro (Maaf, saya benci menyebutnya Windows 8) atau benar-benar gagal,

Hanya 2 sen saya,

Tambalan

Tambalan
sumber
0

Bagi saya, rendering di browser ada di antara Photoshop "Sharp" dan "Crisp" di Mac, dan antara "Crisp" dan "Strong" di Windows. Saya sarankan menggunakan "Crisp" untuk teks langsung ke desainer grafis tempat saya bekerja. Default "Strong" selalu membuat mereka kecewa. ;)

Greg Perham
sumber