Merancang Situs Web dari Awal - Illustrator atau Photoshop?

11

Jika saya mendesain situs web dari awal dan saya berniat untuk mengiris dan mengodekannya di Adobe Dreamweaver nanti, haruskah saya membuat desain situs web di Illustrator atau Photoshop? Mengapa?

— JFW
sumber

1

Saya akan merekomendasikan Photoshop untuk penggunaannya yang lebih luas dan lebih banyak tutorial.

— Jichao

6

Anda seharusnya tidak mendesain situs web menggunakan metodologi 'slice an image' yang lama. Idealnya, Anda akan mulai dalam HTML / CSS dan menggunakan aplikasi gambar Anda seiring berjalannya waktu.

— DA01

@Jichao: Komentar Anda harus dijadikan jawaban.

— Philip Regan

2

@ DA01 "tidak seharusnya" mungkin terlalu penting untuk masalah subyektif seperti itu. Tidak ada praktik terbaik yang cocok untuk semua.

— Jari Keinänen

2

@ Koiyu sangat benar. Yang mengatakan, irisan-n-dadu jarang menjadi praktik terbaik hari ini. Saya akan menguraikan jawaban.

— DA01

26

Jawaban literal cepat: Antara Illustrator dan Photoshop, PhotoShop, seperti raster, seperti halnya situs web.

Jawaban yang sedikit lebih detail: Anda akan menggunakan keduanya.

Jawaban alternatif: Pertimbangkan untuk menggunakan Adobe Fireworks. Kembang api jauh lebih mudah digunakan setelah Anda terbiasa untuk menghasilkan grafik web.

Jawaban kuliah yang membosankan:

Metode "Slice-n-Dice" agak kuno. Itu populer satu dekade yang lalu tetapi hari ini itu benar-benar bukan pendekatan yang direkomendasikan. Saya sarankan:

Gunakan aplikasi apa pun (AI / PSD) untuk 'membuat sketsa' situs tersebut. Merasa bebas untuk kesetiaan yang tinggi, tetapi perlakukan itu hanya sebagai mock-up.
setelah itu, mulailah membangun situs. Selami HTML / CSS / JS.
sesuai kebutuhan, masuklah ke PhotoShop untuk membuat elemen grafis individual yang Anda butuhkan.

Mengapa? Yah, mendesain di photoshop tidak memperhitungkan media tempat Anda bekerja. Ini kanvas tetap dan web bukan kanvas tetap, juga bukan kanvas standar. Ini mengarahkan tim ke ide pixel-perfect dan web tidak sempurna pixel.

— DA01
sumber

Mungkin, kita bisa memperbaiki lebar kanvas, karena ada begitu banyak situs web lebar tetap terkenal. Untuk informasi lebih lanjut, silakan lihat 960.gs .

— Jichao

itu akan membuat Anda setengah jalan di sana. untuk beberapa layar.

— DA01

Itu seharusnya menjadi masalah. Namun, saya tidak memiliki LCD besar, jadi saya tidak memiliki kesempatan untuk mengujinya.

— Jichao

1

maaf jika saya tumpul. Yang saya maksudkan adalah bahwa ada banyak hal yang tidak menjadi kanvas tetap daripada apakah itu situs dengan lebar tetap ... konten, perangkat seluler, teknologi bantuan, SEO, perbedaan browser, dll.

— DA01

2

+1 untuk merekomendasikan Fireworks dalam jawaban Anda. Aplikasi desain web yang sangat diremehkan, tetapi kuat.

— Dwayne Charrington

7

Gunakan Fireworks atau Illustrator untuk pembuatan logo dan ikon. Untuk mengedit foto, gunakan Photoshop. Untuk semua yang lain itu sangat penting. Saya tahu ada perdebatan tentang perangkat lunak grafis mana yang harus digunakan, tetapi itu benar-benar pilihan pribadi.

Namun, perlu diingat:

Fireworks lebih baik untuk kompresi PNG. Ukuran file cenderung 20% -30% lebih kecil dari Photoshop.
Jika Anda tahu jalan Anda akan merancang konten non-web lainnya untuk situs (tshirts, poster, selebaran, dll) lebih baik jika Anda memulai dalam program berbasis vektor.

— Jin
sumber

+1 untuk "Jika Anda tahu jalannya ...", pada kenyataannya, saya merasa lebih baik bekerja dengan asumsi bahwa elemen visual utama akan diperlukan dalam format lain. Klien hampir tidak pernah tahu untuk apa mereka ingin menggunakan sesuatu sampai mereka melihatnya dan tidak akan pernah mengerti bahwa membuat gambar web RGB berfungsi untuk pencetakan tidak semudah yang mereka harapkan ... Ada baiknya memiliki sesuatu di saku belakang Anda untuk sesekali "Itu tampak hebat, bisakah Anda mengambil gaya itu dan menerapkannya pada poster-poster A0 dinding yang kami cetak untuk konferensi besar kami Selasa depan? Itu mudah dilakukan, bukan?"

— user56reinstatemonica8

Pada topik kompresi gambar yang efisien, saya tidak bergantung pada salah satu aplikasi Adobe. Cobalah sesuatu seperti ImageOptim , aplikasi Mac. Ada solusi lokal dan berbasis web lainnya. Anda akan mendapatkan gambar yang jauh lebih kecil, dalam beberapa kasus.

— Pakaian biasa

6

Saya harus tidak setuju dengan DA01.

Fakta bahwa dokumen web bukan gambar statis tidak relevan dengan kegunaan editor grafis untuk meletakkan dan merancang situs web. Maket desain Anda tidak perlu (dan tidak seharusnya) menjadi prototipe situs web Anda yang berfungsi. Maket desain adalah dokumen yang membantu Anda memvisualisasikan dan memahat desain estetika situs Anda.

Hanya karena selembar kertas atau papan tulis tidak memiliki semua kualitas menit dari suatu dokumen web tidak berarti itu tidak dapat digunakan untuk membuat bingkai situs web. Demikian juga, fakta bahwa jendela browser dapat diregangkan dan diubah ukurannya tidak berpengaruh pada nilai desain mockup. Setiap perancang web yang berpengalaman akan tahu untuk merencanakan bagian-bagian tertentu dari tata letak sebagai elastis dan memperhitungkan keterbatasan teknologi web. Semua elemen visual tata letak masih dapat direpresentasikan dalam gambar datar (begitulah yang ditampilkan di layar).

Kedua, pendekatan sedikit demi sedikit untuk desain tidak kondusif untuk hasil yang berkualitas. Anda sedang merancang tata letak web, bukan seratus widget yang terisolasi. Tanpa mockup tata letak penuh, Anda pada dasarnya hanya menampar hal-hal tanpa tahu seperti apa hasil akhirnya. Menambahkan elemen grafis satu per satu saat Anda pergi tanpa ikhtisar komposisi lengkap bertentangan dengan praktik desain yang baik. Sebuah desain selesai ketika Anda kehabisan hal untuk dihapus, bukan ketika Anda kehabisan hal untuk ditambahkan.

Terakhir, dibutuhkan banyak waktu lebih lama untuk membuat perubahan desain dalam kode daripada mengubah gambar mockup. Itu sebabnya Anda harus selalu merencanakan desain Anda dalam maket sebelum Anda berkomitmen pada kode. Apakah Anda menggunakan program grafik vektor seperti Fireworks atau Illustrator atau program raster seperti Photoshop terserah Anda. Tetapi Anda harus selalu membuat desain Anda dalam editor grafis sebelum Anda mulai mengkodekannya.

— Calvin Huang
sumber

2

Saya tidak berpikir kita tidak setuju. Saya sepenuhnya setuju dengan Anda berdasarkan variabel 'desainer web berpengalaman'. Masalahnya adalah bahwa orang-orang yang bertanggung jawab atas mockup PSD sering tidak mengalami desainer web dan yang menyebabkan semua jenis sakit kepala saat proyek berlangsung. Adapun 'maket tata letak penuh' saya juga setuju. Saya tidak akan mengatakan itu harus selalu atau selalu harus menjadi file PSD kesetiaan tinggi, meskipun. Wireframes sering cukup.

— DA01

3

Saya akan tidak setuju dengan paragraf terakhir Anda. Anda perlu masuk ke kode untuk sepenuhnya mendesain pengalaman pengguna. Dan, lebih sering daripada tidak, itu adalah bagian penting dari proses desain dan sebenarnya cukup mudah untuk membuat perubahan pada titik itu di lingkungan yang tepat (gesit menjadi tempat yang baik untuk memulai).

— DA01

Saya akan tetap dengan kedua pendapat Anda, dan mungkin itu tergantung pada proyek juga. Saya dapat memahami kedua poin ini, meskipun saya harus mengatakan saya tidak cukup sabar atau merasa kehilangan detail jika saya mendesain seluruh halaman di PS terlebih dahulu. Selain itu, desain dalam CSS terlihat berbeda dari PS. Selanjutnya saya menemukan bahwa jika Anda terbiasa dengan pengkodean, setidaknya bagi saya, saya lebih cepat daripada mengubahnya dalam PS. Dan last but not least, hal-hal dapat berubah (bahkan setelah hati-hati merencanakan setiap detail), dan ketika coding saya masih sering menemukan tantangan dalam desain (dari CSS, dll) dan saya harus mengubah - dalam PS itu jarang terjadi .. .

— Chris

1

Berikut ini adalah pos yang bagus untuk menjelaskan ini dengan cara yang lucu :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

berikut adalah penjelasan yang lebih baik dari sumber yang sangat andal "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

"Pada akhirnya, keputusan alat apa yang harus digunakan harus ditentukan oleh pemegang kontes, tetapi secara umum, Illustrator harus digunakan untuk logo dan pekerjaan cetak, sedangkan Photoshop harus digunakan untuk desain web dan desain apa pun yang hanya terlihat di komputer layar."

— Ved
sumber

4

Desain bukanlah sumber yang dapat diandalkan untuk apa pun.

— DA01

Apakah ada alasan khusus Anda mengatakan itu? Hanya untuk klarifikasi saya tidak bekerja dengan mereka atau terikat pada mereka dengan cara apa pun namun di masa lalu saya telah menemukan artikel dan blog mereka sangat berguna. Mereka juga telah dikenali oleh banyak nama media besar seperti msnbc, new york times dll .... jadi apakah saya kehilangan sesuatu di sini? Tolong bagikan.

— Ved

2

Dan hanya untuk membuktikan maksud saya Stack over flow Logo dirancang di 99 Designs 99designs.com/users/245023

— Ved

2

@ DA01: tolong selalu jelaskan mengapa sesuatu tidak dapat diandalkan, jika tidak, tidak ada yang konstruktif dalam komentar Anda.

— Littlemad

1

Kontes desain melalui crowdsourcing tidak pernah baik bagi saya dan tidak boleh dipromosikan oleh desainer profesional. (Plus, ini sedikit ilegal di negara saya: D)

— Shikiryu

1

Jika Anda perlu "mengiris", Anda dapat menggunakan Photoshop secara langsung tanpa pergi ke Dreamweaver.

Ada 2 cara memotong di photoshop, secara otomatis dan manual dengan memilih bagian grafik yang Anda butuhkan dan menyimpannya untuk web, satu per satu.

Kapan saja Anda "mengiris secara otomatis" dengan menghasilkan HTML, Anda memutuskan untuk kehilangan kendali atas kode. Pada awal karir Anda tidak apa-apa, Anda sedang belajar, tetapi itu akan tiba pada titik di mana Anda harus tahu kode, karena untuk pengoptimalan lebih baik kode tangan pada editor teks tingkat lanjut (misalnya perangkat lunak Ultraedit) melakukan html dan css sendiri.

Satu-satunya momen yang saya temukan lebih berguna yaitu mengiris otomatis ketika saya harus membuat kode tabel ketika mendesain untuk email.

— Littlemad
sumber

0

photoshop ke gambar siap. yaitu tentang konten situs. Klien tidak membayar untuk peningkatan portofolio Anda. KL

— Ken Lax
sumber

2

Selamat datang di GD. Saya pikir saya mengerti apa yang Anda maksudkan, tetapi bisakah Anda mengembangkannya sedikit?

— Farray

0

Cukup jelas Anda harus menggunakan photoshop untuk maket desain web yang komprehensif.

Desain ilustrator masih cenderung untuk memproses lebih lambat dibandingkan dengan desain photoshop.

Jika Anda mendesain ikon dan elemen web saya sarankan mendesain di ilustrator dan kemudian menempatkan elemen-elemen itu ke photoshop.

Jika Anda membuat maket di photoshop, Anda dapat dengan mudah mentransfer dokumen-dokumen itu ke Fireworks untuk pembuatan prototipe cepat.

— MarsMan
sumber

-1

Photoshop akan lebih baik. Ini akan membantu pengguna untuk memotong.

— Lahiru Chathuranga
sumber

4

Jawaban ini agak pendek. Bisakah Anda jelaskan maksud Anda?

— Mensch

2

siapa yang memotong lagi?

— Scott