ออกแบบเว็บไซต์ตั้งแต่เริ่มต้น - ผู้วาดภาพประกอบหรือ Photoshop?

11

หากฉันออกแบบเว็บไซต์ตั้งแต่เริ่มต้นและฉันตั้งใจจะฝานมันและโค้ดใน Adobe Dreamweaver ในภายหลังฉันควรสร้างการออกแบบเว็บไซต์ใน Illustrator หรือ Photoshop หรือไม่ ทำไม?

— JFW
แหล่งที่มา

1

ฉันขอแนะนำ Photoshop สำหรับการใช้งานที่กว้างขึ้นและบทแนะนำเพิ่มเติม

— Jichao

6

คุณไม่ควรออกแบบเว็บไซต์โดยใช้วิธีการ 'แบ่งภาพ' แบบเก่าเพื่อเริ่มต้นด้วย เป็นการดีที่คุณจะเริ่มต้นใน HTML / CSS และใช้แอปพลิเคชั่นภาพของคุณเมื่อคุณไปพร้อมกัน

— DA01

@Jichao: ความคิดเห็นของคุณควรเป็นคำตอบ

— Philip Regan

2

@ DA01 "ไม่ควร" อาจมีความจำเป็นเกินไปสำหรับเรื่องส่วนตัว ไม่มีแนวปฏิบัติที่เหมาะสมที่สุดสำหรับทุกคน

— Jari Keinänen

2

@koiyu จริงมาก ที่กล่าวว่าการหั่นลูกเต๋าเป็นวิธีที่ดีที่สุดในสมัยนี้ ฉันจะอธิบายอย่างละเอียดในคำตอบ

— DA01

26

คำตอบที่แท้จริงอย่างรวดเร็ว: ระหว่าง Illustrator และ Photoshop, PhotoShop เนื่องจากเป็นภาพแรสเตอร์เช่นเดียวกับเว็บไซต์

คำตอบที่ละเอียดมากขึ้นเล็กน้อย: คุณใช้ทั้งคู่

คำตอบอื่น: พิจารณาใช้ Adobe Fireworks ดอกไม้ไฟนั้นง่ายต่อการใช้งานมากเมื่อคุณได้รับความไว้วางใจในการผลิตเว็บกราฟิก

คำตอบการบรรยายที่น่าเบื่อนาน:

วิธี "Slice-n-Dice" เป็นวันที่บิต เป็นที่นิยมเมื่อสิบปีก่อน แต่วันนี้ไม่ใช่วิธีที่แนะนำจริงๆ ฉันขอแนะนำ:

ใช้แอปอะไรก็ได้ (AI / PSD) เพื่อ 'ร่าง' ไซต์ อย่าลังเลที่จะไปสู่ความเที่ยงตรงสูง แต่ปฏิบัติเหมือนเป็นการเยาะเย้ยเท่านั้น
เมื่อคุณสร้างเสร็จแล้วให้เริ่มสร้างเว็บไซต์ ดำดิ่งสู่ HTML / CSS / JS
ข้ามไปที่ PhotoShop เพื่อสร้างองค์ประกอบกราฟิกที่คุณต้องการ

ทำไม? การออกแบบใน photoshop นั้นไม่ได้คำนึงถึงสื่อที่คุณกำลังทำงานอยู่มันเป็นผืนผ้าใบคงที่และเว็บไม่ใช่ผ้าใบแบบคงที่และไม่เป็นผ้าใบแบบธรรมดา มันนำทีมไปสู่แนวคิดที่สมบูรณ์แบบพิกเซลและเว็บก็ไม่ได้เป็นพิกเซลที่สมบูรณ์แบบ

— DA01
แหล่งที่มา

บางทีเราอาจแก้ไขความกว้างของผืนผ้าใบเนื่องจากมีเว็บไซต์ความกว้างคงที่ที่มีชื่อเสียงมากมาย สำหรับข้อมูลเพิ่มเติมโปรดดูที่960.gs

— Jichao

ที่จะพาคุณไปครึ่งทาง สำหรับบางหน้าจอ

— DA01

นั่นควรเป็นปัญหา อย่างไรก็ตามฉันไม่มีแอลซีดีขนาดใหญ่ดังนั้นฉันจึงไม่มีโอกาสทดสอบ

— Jichao

1

ขอโทษถ้าฉันกำลังป้าน สิ่งที่ผมหมายถึงคือการที่มีจำนวนมากขึ้นไปไม่เป็นผ้าใบคงที่กว่าหรือไม่ก็คงเว็บไซต์กว้าง ... เนื้อหาโทรศัพท์มือถือเทคโนโลยีช่วยเหลือ, SEO, ความแตกต่างของเบราว์เซอร์ ฯลฯ

— DA01

2

+1 สำหรับการแนะนำดอกไม้ไฟในคำตอบของคุณ แอปพลิเคชันการออกแบบเว็บที่มีการประเมินค่าต่ำ แต่มีประสิทธิภาพ

— Dwayne Charrington

7

ใช้ Fireworks หรือ Illustrator สำหรับการสร้างโลโก้และไอคอน สำหรับการแก้ไขภาพถ่ายใช้ Photoshop สำหรับทุกอย่างอื่นมันมีความสำคัญน้อยมาก ฉันรู้ว่ามีการโต้วาทีเกี่ยวกับซอฟต์แวร์กราฟิกที่จะใช้ แต่มันเป็นการตั้งค่าส่วนตัว

อย่างไรก็ตามโปรดจำไว้ว่า:

ดอกไม้ไฟดีกว่าสำหรับการบีบอัด PNG ขนาดไฟล์มักจะเล็กกว่าของ Photoshop 20% -30%
ถ้าคุณรู้ว่าคุณกำลังจะออกแบบเนื้อหาที่ไม่ใช่เว็บอื่น ๆ สำหรับเว็บไซต์ (เสื้อยืดโปสเตอร์ใบปลิว ฯลฯ ) จะเป็นการดีกว่าถ้าคุณเริ่มต้นในโปรแกรมที่ใช้เวกเตอร์

— จิน
แหล่งที่มา

+1 สำหรับ "ถ้าคุณรู้จักไปตามถนน ... " ที่จริงแล้วฉันคิดว่าเป็นวิธีที่ดีที่สุดในการทำงานโดยสมมติว่าองค์ประกอบภาพที่สำคัญจะต้องใช้ในรูปแบบอื่น ลูกค้าแทบจะไม่เคยรู้ว่าพวกเขาจะต้องการใช้สิ่งใดจนกว่าพวกเขาจะเห็นมันและจะไม่เข้าใจว่าการสร้างภาพเว็บ RGB สำหรับการพิมพ์นั้นไม่ใช่เรื่องง่ายอย่างที่พวกเขาคาดหวัง ... มันดีที่มีบางอย่างในกระเป๋าหลัง เป็นครั้งคราว "ที่ดูดีคุณสามารถใช้สไตล์นั้นและนำไปใช้กับโปสเตอร์ติดผนัง A0 เหล่านี้ที่เรากำลังพิมพ์สำหรับการประชุมใหญ่ของเราในวันอังคารหน้าได้หรือไม่?

— user56reinstatemonica8

ในหัวข้อของการบีบอัดภาพที่มีประสิทธิภาพฉันไม่ต้องพึ่งพาแอพของ Adobe ลองใช้บางอย่างเช่นImageOptimซึ่งเป็นแอป Mac มีวิธีแก้ปัญหาในท้องถิ่นและบนเว็บอื่น ๆ คุณจะได้กราฟิกที่เล็กกว่ามากในบางกรณี

— เสื้อผ้าธรรมดา

6

ฉันต้องไม่เห็นด้วยกับ DA01

ความจริงที่ว่าเอกสารเว็บไม่ใช่ภาพคงที่ไม่เกี่ยวข้องกับประโยชน์ของโปรแกรมแก้ไขกราฟิกสำหรับการจัดวางและออกแบบเว็บไซต์ การออกแบบจำลองของคุณไม่จำเป็นต้องมี (และไม่ควร) เป็นต้นแบบที่ใช้งานได้จริงของเว็บไซต์ของคุณ การออกแบบจำลองเป็นเอกสารที่ช่วยให้คุณมองเห็นและปั้นการออกแบบที่สวยงามของเว็บไซต์ของคุณ

เพียงเพราะแผ่นกระดาษหรือไวท์บอร์ดไม่มีคุณสมบัติในนาทีทั้งหมดของเอกสารเว็บไม่ได้หมายความว่าไม่สามารถใช้ในการวางสายเว็บไซต์ได้ ในทำนองเดียวกันความจริงที่ว่าหน้าต่างเบราว์เซอร์สามารถยืดและปรับขนาดได้ไม่มีผลกระทบต่อมูลค่าของการจำลองการออกแบบ นักออกแบบเว็บไซต์ที่มีประสบการณ์จะรู้ว่าจะวางแผนบางส่วนของเลย์เอาต์และยืดหยุ่นสำหรับข้อ จำกัด ของเทคโนโลยีเว็บ องค์ประกอบภาพทั้งหมดของเลย์เอาต์ยังคงสามารถแสดงในรูปแบบแบน (นั่นคือวิธีการแสดงผลบนหน้าจอหลังจากทั้งหมด)

ประการที่สองวิธีการทีละน้อยในการออกแบบไม่เอื้อต่อผลลัพธ์ที่มีคุณภาพ คุณกำลังออกแบบเค้าโครงเว็บไม่ใช่วิดเจ็ตที่แยกเป็นร้อย หากไม่มีการเยาะเย้ยของเลย์เอาต์เต็มรูปแบบคุณเพียงแค่ตบสิ่งต่าง ๆ โดยไม่รู้ว่าผลลัพธ์สุดท้ายควรมีลักษณะอย่างไร การเพิ่มองค์ประกอบกราฟิกแต่ละชิ้นทีละชิ้นในขณะที่คุณไปโดยไม่มีภาพรวมขององค์ประกอบทั้งหมดวิ่งเคาน์เตอร์เพื่อการออกแบบที่ดี การออกแบบเสร็จสมบูรณ์เมื่อคุณมีสิ่งที่จะเอาออกหมดไม่ใช่เมื่อคุณหมดสิ่งที่ต้องเพิ่ม

สุดท้ายมันใช้เวลานานกว่าในการเปลี่ยนแปลงการออกแบบในรหัสมากกว่าที่จะปรับแต่งภาพจำลอง นั่นเป็นเหตุผลที่คุณควรวางแผนการออกแบบของคุณในแบบจำลองก่อนที่จะส่งรหัส ไม่ว่าคุณจะใช้โปรแกรมกราฟิกแบบเวกเตอร์เช่น Fireworks หรือ Illustrator หรือโปรแกรมแรสเตอร์เช่น Photoshop นั้นขึ้นอยู่กับคุณ แต่คุณควรใช้การออกแบบกราฟิกในตัวแก้ไขกราฟิกก่อนที่จะเริ่มเขียนโค้ด

— Calvin Huang
แหล่งที่มา

2

ฉันไม่คิดว่าเราไม่เห็นด้วย ฉันเห็นด้วยกับคุณอย่างสมบูรณ์ตามตัวแปร 'นักออกแบบเว็บไซต์ที่มีประสบการณ์' ปัญหาคือคนที่ดูแลเรื่องการลอกเลียนแบบ PSD มักจะไม่ได้พบกับนักออกแบบเว็บไซต์และทำให้เกิดอาการปวดหัวทุกประเภทในขณะที่โครงการดำเนินไป สำหรับ 'การจำลองเต็มรูปแบบ' ฉันก็เห็นด้วย ฉันจะไม่บอกว่าควรจะเป็นหรือต้องเป็นไฟล์ PSD ที่มีความเที่ยงตรงสูงเสมอ โครงลวดมักจะเพียงพอ

— DA01

3

แม้ว่าฉันจะไม่เห็นด้วยกับย่อหน้าสุดท้ายของคุณ คุณต้องใช้รหัสเพื่อออกแบบประสบการณ์ของผู้ใช้อย่างสมบูรณ์ และบ่อยครั้งที่นั่นเป็นกระบวนการสำคัญในการออกแบบและจริงๆแล้วค่อนข้างง่ายที่จะทำการเปลี่ยนแปลง ณ จุดนั้นในสภาพแวดล้อมที่เหมาะสม (ความคล่องตัวเป็นจุดเริ่มต้นที่ดี)

— DA01

ฉันจะยึดความคิดเห็นทั้งสองของคุณและอาจขึ้นอยู่กับโครงการเช่นกัน ฉันสามารถเข้าใจประเด็นทั้งสองได้แม้ว่าฉันจะต้องพูดว่าฉันไม่อดทนบ่อยหรือรู้สึกสูญเสียรายละเอียดถ้าฉันออกแบบหน้าทั้งหมดใน PS ก่อน นอกจากนี้การออกแบบใน CSS นั้นดูแตกต่างจาก PS ยิ่งไปกว่านั้นฉันพบว่าหากคุณคุ้นเคยกับการเขียนโปรแกรมอย่างน้อยที่สุดฉันก็เปลี่ยนได้เร็วกว่าใน PS และสุดท้าย แต่ไม่ท้ายสุดสิ่งต่าง ๆ สามารถเปลี่ยนแปลงได้ (แม้หลังจากวางแผนอย่างละเอียดทุกรายละเอียด) และเมื่อการเขียนโปรแกรมฉันยังพบความท้าทายในการออกแบบ (จาก CSS และอื่น ๆ ) และฉันต้องเปลี่ยน - ใน PS นั้นไม่ค่อยเกิดขึ้น .. .

— Chris

1

นี่คือโพสต์ที่ดีที่อธิบายสิ่งนี้ในวิธีที่ตลก :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

นี่คือคำอธิบายที่ดีขึ้นจากแหล่งที่เชื่อถือได้มาก "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

"ในที่สุดการตัดสินใจของเครื่องมือที่จะใช้ควรกำหนดโดยเจ้าของประกวด แต่โดยทั่วไปแล้ว Illustrator ควรใช้สำหรับโลโก้และงานพิมพ์ในขณะที่ Photoshop ควรใช้ในการออกแบบเว็บและการออกแบบใด ๆ ที่เห็นบนคอมพิวเตอร์เท่านั้น หน้าจอ."

— โดยผู้ดูแลระบบ
แหล่งที่มา

4

99designs ไม่ใช่แหล่งข้อมูลที่น่าเชื่อถือ

— DA01

มีเหตุผลใดที่คุณจะบอกอย่างนั้นเหรอ? เพียงเพื่อความกระจ่างแจ้งฉันไม่ได้ทำงานกับพวกเขาหรือผูกติดอยู่กับพวกเขา แต่อย่างใดในอดีตที่ผ่านมาฉันพบว่าบทความและบล็อกของพวกเขามีประโยชน์มาก พวกเขายังได้รับการยอมรับจากชื่อสื่อขนาดใหญ่เช่น msnbc, new york times เป็นต้น .... ดังนั้นฉันจึงขาดอะไรบางอย่างที่นี่? กรุณาแบ่งปัน.

— Ved

2

และเพียงเพื่อพิสูจน์จุดของฉันโลโก้สแต็คโอเวอร์โฟลว์ได้รับการออกแบบที่ 99 Designs 99designs.com/users/245023

— Ved

2

@ DA01: โปรดอธิบายเสมอว่าทำไมสิ่งที่ไม่น่าเชื่อถือมิฉะนั้นจะไม่มีสิ่งใดในความคิดเห็นของคุณ

— Littlemad

1

การประกวดออกแบบผ่านฝูงชนการจัดหาไม่ใช่สิ่งที่ดีสำหรับฉันและไม่ควรได้รับการสนับสนุนจากนักออกแบบมืออาชีพ (บวกมันผิดกฎหมายเล็กน้อยในประเทศของฉัน: D)

— ชิกิริว

1

หากคุณต้องการ "การแบ่ง" คุณสามารถใช้ Photoshop ได้โดยตรงโดยไม่ต้องไปที่ Dreamweaver

มีสองวิธีในการแบ่งส่วนของ Photoshop โดยอัตโนมัติและด้วยตนเองโดยเลือกส่วนของกราฟิกที่คุณต้องการและบันทึกไว้สำหรับเว็บหนึ่งชิ้นต่อครั้ง

เมื่อใดก็ตามที่คุณ "หั่นโดยอัตโนมัติ" ด้วยการสร้าง HTML คุณจะไม่สามารถควบคุมโค้ดได้ ในช่วงเริ่มต้นอาชีพของคุณมันก็โอเคคุณกำลังเรียนรู้ แต่มันจะมาถึงจุดที่คุณต้องรู้รหัสเพราะการเพิ่มประสิทธิภาพมันเป็นรหัสมือที่ดีกว่าในเครื่องมือแก้ไขข้อความขั้นสูง (เช่นซอฟต์แวร์ Ultraedit) html และ css ของตัวเอง

ช่วงเวลาเดียวที่ฉันพบว่ามีประโยชน์มากขึ้นในการแบ่งส่วนโดยอัตโนมัติคือเมื่อฉันต้องสร้างรหัสตารางเมื่อออกแบบอีเมล

— Littlemad
แหล่งที่มา

0

photoshop เพื่อภาพพร้อม นั่นคือเนื้อหาเกี่ยวกับเว็บไซต์ ลูกค้าไม่จ่ายเงินสำหรับการปรับปรุงพอร์ตโฟลิโอของคุณ KL

— Ken Lax
แหล่งที่มา

2

ยินดีต้อนรับสู่ GD ฉันคิดว่าฉันเข้าใจว่าคุณกำลังทำอะไรอยู่ แต่คุณช่วยขยายความให้หน่อยหน่อยได้ไหม?

— Farray

0

มันค่อนข้างชัดเจนว่าคุณควรใช้ photoshop สำหรับการออกแบบเว็บที่ครอบคลุม

การออกแบบ Illustrator ยังคงมีแนวโน้มที่จะดำเนินการช้าลงเมื่อเทียบกับการออกแบบ Photoshop

หากคุณกำลังออกแบบไอคอนและองค์ประกอบของเว็บฉันขอแนะนำให้ออกแบบในภาพประกอบจากนั้นวางองค์ประกอบเหล่านั้นลงใน Photoshop

หากคุณสร้าง mockups ใน photoshop คุณสามารถถ่ายโอนเอกสารเหล่านั้นไปยัง Fireworks เพื่อการสร้างต้นแบบอย่างรวดเร็ว

— Marsman
แหล่งที่มา

-1

Photoshop จะดีขึ้น มันจะช่วยให้ผู้ใช้หั่น

— Lahiru Chathuranga
แหล่งที่มา

4

คำตอบนี้สั้นนิดหน่อย คุณช่วยอธิบายความหมายของคุณได้ไหม

— Mensch

2

ใครหั่นอีกต่อไป

— สกอตต์