Desain web apa yang harus menggunakan Photoshop atau Illustrator?

8

Apa yang harus saya gunakan untuk mendesain situs web, Photoshop atau Illustrator?

Apakah ada perangkat lunak yang benar atau itu lebih merupakan pilihan pribadi?

Giannis
sumber
Akan seperti apa konten Anda?
SaturnsEye
Itu memang pertanyaan berbasis opini. Ada banyak perangkat lunak untuk mendesain situs web. Ai, Ps, Dreamweaver, langsung di browser. Masing-masing memiliki penggemar dan pencela mereka.
Vincent
1
Perlu diketahui juga bahwa ada banyak pilihan selain Illustrator dan Photoshop
spiral
@ SaturnsEye Saya sedang belajar dan saya mencoba untuk memilih alat.
Giannis
1
@ SaturnsEye Struktur, tata letak
Giannis

Jawaban:

7

Saya tidak setuju dengan jawaban Anaksunaman dalam hal Photoshop. Suatu hari kami memiliki pertanyaan serupa yang saya jawab ( Mengatur PSD untuk pengembang ) di mana saya menyebutkan bahwa di era yang berkembang ini, kita sebagai desainer dan coders harus berevolusi dengan alur kerja dan menggunakan Photoshop adalah kuno dan tidak lagi berfungsi dalam desain web karena sarana pembangunan yang EFEKTIF. Ini masih merupakan alat yang bagus untuk manipulasi foto tetapi menggunakannya untuk mengimplementasikan desain situs web tidak ada gunanya bagi saya.

Saya akan merekomendasikan (referensi: Apa langkah-langkah dalam mendesain situs web? ) Bahwa pendekatan yang lebih baik dapat dicapai dengan Illustrator terutama dengan menggunakan artboards. Meskipun, saya tidak merujuk untuk mendesain seluruh situs di Illustrator, saya berbicara tentang wireframe dan mockup. Anda masih harus mendesain di browser tetapi jika Anda mendesain ikon apa pun, ikon itu dapat diselesaikan di Illustrator dan diekspor. Jika Anda akan mengembangkan branding atau apa pun yang berhubungan dengan cetak, saya pasti berharap bahwa logo yang Anda kembangkan dalam bentuk vektor dan bentuk vektor itu dapat disimpan sebagai SVG untuk gambar yang skalabel dalam desain web responsif. Jadi mockup sederhana atau ikon apa pun yang terkait dapat diekspor sebagai kode SVG dan disertakan dalam dokumen XHTML (referensi: Saya membuat peta di AI, tetapi ukuran file BESAR sebagai svg?)

Pada topik pengkodean saya percaya bahwa Dreamweaver tidak ada gunanya dan membuang-buang uang dan jika Anda bertanya di beberapa perusahaan pengembangan web yang saya sudah bicara dengan mereka tertawa di Dreamweaver. Tidak apa-apa untuk pengguna baru, tetapi orang-orang yang telah bekerja sama dengan saya yang mulai menggunakan Dreamweaver sangat bergantung pada area pratinjau desain alih-alih bekerja pada kode dan penyelesaian kode adalah kebiasaan buruk yang harus diandalkan oleh pembuat kode baru. Anda tidak akan ingat cara kode dengan benar jika Anda selalu menggunakan penyelesaian kode mulai. Ada beberapa editor kode yang hebat dan kuat yang gratis seperti Notepad ++, Text Wrangler (Saya lebih suka BBEDit yang berbayar) dan Sublime Text.

Jadi rekap pertanyaan Anda "Desain web apa yang harus menggunakan Photoshop atau Illustrator?": Keduanya, manipulasi gambar menggunakan Photoshop dan Illustrator untuk logo, mockup, kawat-framing, ikon dan apa pun yang dapat dieksekusi sebagai SVG. Setelah mockup Anda selesai, saya akan bekerja di editor kode dan mengembangkan situs Anda.

DᴀʀᴛʜVᴀᴅᴇʀ
sumber
1
Apakah ini akan membuat Anda tenang jika saya memberi tahu saya bahwa saya melakukan sebagian besar pekerjaan saya di GIMP, Inkscape dan Notepad ++? :-P
Anaksunaman
Saya bahkan tidak menggunakan Gimp atau Photoshop lagi. Saya telah menemukan jika saya harus mengedit gambar, saya hanya menggunakan ImageMagick dan bekerja dibayar untuk Adobe =)
DᴀʀᴛʜVᴀᴅᴇʀ
4

photoshop atau ilustrator?

Iya. Dan kemungkinan juga

  • kertas
  • pensil
  • alat wireframing
  • javascript
  • html
  • css

Dengan kata lain, Anda memiliki kotak alat, dan Anda akan menggunakan alat yang tepat untuk tugas tertentu.

DA01
sumber
1
Intinya jawaban Anda benar, tetapi saya tidak benar-benar belajar apa pun dari membacanya. Beberapa contoh nyata (seperti dalam jawaban Darth_Vader) akan bermanfaat.
Stijn
3

Sayangnya, saya berpendapat bahwa ini bukan pertanyaan biner karena program grafis apa pun dapat menampilkan konten untuk digunakan di situs web. Jadi, dalam hal itu, itu lebih merupakan pilihan pribadi.

Yang mengatakan, jika Anda tidak melakukan pengkodean langsung apa pun (hanya mock-up dan mengekspor elemen untuk digunakan, dll.) Photoshop sejauh ini merupakan produk yang paling banyak digunakan. Klien mungkin menginginkan atau mengharapkan bahwa Anda menggunakan produk ini dan demikian pula, pihak ketiga yang mengirimkan kepada Anda (seperti jika Anda melakukan outsourcing pekerjaan logo) dapat mengirimkan produk jadi mereka kepada Anda dalam format .psd. Jadi memiliki salinan Photoshop sangat dianjurkan terlepas dari apa yang Anda pilih untuk dilakukan sehari-hari.

Untuk pekerjaan Anda sendiri, fitur antara Illustrator dan Photoshop cukup mirip, Anda tentu dapat mengadaptasi Illustrator untuk menghasilkan desain web front-end (bagian grafis). Pencarian Google sederhana muncul hasil ini untuk beberapa pengaturan dasar untuk CS5 yang akan membantu desainer web. Ingatlah bahwa Illustrator ditujukan lebih tepat pada gambar dan cetakan berbasis vektor, jadi mungkin memerlukan sedikit pemikiran di luar kotak jika digunakan untuk desain web.

Adobe Dreamweaver berada di urutan kedua di belakang Photoshop pada daftar yang hampir harus dimiliki, kemungkinan, setidaknya jika Anda akan melakukan pengkodean dengan desain Anda. Untuk pekerjaan entry level dengan kode (dan beberapa kerepotan berpemilik) Adobe Muse adalah semacam alternatif untuk Dreamweaver. Tentu saja ada banyak produk bagus lainnya yang melakukan hal serupa, tetapi sekali lagi, popularitas memilih Dreamweaver.

Atau, ada beberapa editor kode bebas yang bagus seperti MS Visual Studio Express, Komodo dan Notepad ++ (dan Anda bahkan dapat menggunakan MarkdownPad untuk beberapa pekerjaan konten dasar.) Apa yang Anda kehilangan dengan tidak menggunakan Dreamweaver adalah WYSIWYG, kebanyakan, karena produk lain memiliki penyelesaian kode, dll. Tetapi jika Anda benar-benar ingin WYSIWYG sans Dreamweaver, ada produk lain juga.

Jika Anda menginginkan non-vektor, raster alternatif untuk Illustrator yang bukan Photoshop, Anda mungkin dapat menggunakan produk Corel jika Anda mau atau Program Manipulasi Gambar Gnu (GIMP) sumber terbuka. GIMP memiliki keuntungan (seperti editor kode alternatif yang saya sebutkan) menjadi bebas.

Setiap alat bagus yang Anda gunakan harus (akan) kemungkinan memiliki semacam opsi "slice" untuk mengekspor elemen akhir dari mock-up Anda (dengan asumsi ini belum dipilah dan disimpan secara terpisah). Selain itu, ada sangat sedikit fitur "harus memiliki" menurut saya kecuali atas nama kenyamanan.

Sejujurnya, Anda benar-benar bisa melakukan semua desain web Anda dengan MS Paint dan Notepad jika Anda cukup berpengalaman ...

Anaksunaman
sumber
2

Anda dapat menggunakan keduanya untuk desain Web tergantung pada pilihan Anda, tetapi ketika datang untuk memberikan desain web / frame kawat lebih awal maka Illustrator jauh lebih cepat dan lebih mudah digunakan untuk tugas ini.

Creanyx
sumber
1

Bagi saya Illustrator turun tangan tetapi Anda dapat melakukan hampir semua yang Anda inginkan dengan Photoshop dan jika Anda tidak mampu membeli paket cloud kreatif yang penuh maka saya sarankan Anda mencoba mencari cukup uang untuk Photoshop CC.

Jika Anda mampu membeli cloud kreatif maka saya merekomendasikan yang berikut:

  1. Adobe Muse CC untuk desain framing dan tata letak kawat
  2. Adobe illustrator CC untuk ikon, logo, dan ilustrasi lainnya
  3. Adobe Photoshop CC untuk memanipulasi dan mengedit foto

Adobe muse adalah tempat semua keajaiban terjadi. Itu dibangun oleh beberapa orang yang membangun InDesign dan telah dirancang sehingga desainer cetak dapat mempublikasikan situs web langsung di web tanpa menulis satu baris kode pun.

Mock up tidak lagi harus dalam format pdf, alih-alih Anda dapat membuat desain responsif sehingga klien dapat benar-benar merasakan bagaimana kerjanya di dunia nyata. Tetapi jika Anda masih ingin membuat presentasi pdf juga, maka saya sarankan Anda mengunduh ekstensi chrome screenshot mengagumkan karena Anda tidak dapat mengekspor pdf file png dari muse; Yah, bukankah itu yang saya tahu?

Saya juga merekomendasikan Anda akhirnya membuat kode situs web sendiri dan jangan meninggalkan semuanya hanya untuk merenungkan karena Anda akan membuat situs yang lebih baik dalam jangka panjang.

Saya juga ingin menyebutkan bahwa banyak perancang web bahkan tidak menggunakan perangkat lunak desain, mereka hanya mendesain tepat di browser, sejak awal.

Samuel
sumber