Saya menggunakan Photoshop untuk mendesain situs web dan setiap kali saya membandingkan desain photoshop dengan pratinjau langsung peramban, font-font tersebut tampak berbeda.
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?
Jawaban:
Ada dua alasan mengapa teks ClearType begitu tajam.
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.
sumber
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/
sumber
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.
sumber
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.
sumber
Sebuah solusi yang mungkin dilakukan adalah dengan menggunakan metode anti-aliasing "tajam" dan mengatur cahaya batin 0-kedalaman pada layer teks:
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)
sumber