เรียนรู้ Photoshop เพียงเพื่อการออกแบบเว็บ


17

ฉันต้องการเป็นนักออกแบบเว็บไซต์ดังนั้นฉันจึงดูวิดีโอแนะนำ Photoshop จำนวนมาก แต่บทเรียนเหล่านี้บางส่วนไม่มีประโยชน์สำหรับการออกแบบเว็บ ตัวอย่างเช่นภาพยนตร์บางเรื่องเกี่ยวกับผิวหนังหรือฟันหรือวาดดอกไม้หรือเปลี่ยนรูปแบบของกำแพงหรือสิ่งต่าง ๆ เช่นนี้ เพราะฉันไม่มีทรัพยากรที่เฉพาะเจาะจงสำหรับการออกแบบเว็บและแบบฝึกหัดเหล่านี้เป็นเวลาที่เสียไปสำหรับฉัน!

คุณรู้แหล่งที่มาของบทช่วยสอนใดบ้างเพื่อช่วยฉันเรียนรู้การออกแบบเว็บใน Photoshop?

ฉันควรทำอย่างไรเพื่อมุ่งเน้นการออกแบบเว็บใน Photoshop?

Photoshop ส่วนใดที่จำเป็นสำหรับการออกแบบเว็บและส่วนใดที่ไม่ใช่?

คำตอบ:


15

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

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

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

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


4
"... มีการออกแบบมากกว่า Photoshop" ได้ยินได้ยิน! +1
ฟิลิปรีแกน

1
Photoshop นั้นขาดคุณสมบัติบางอย่างที่การออกแบบเลย์เอาต์จะได้ประโยชน์จาก ... พร้อมด้วยเครื่องมือเวคเตอร์มากมาย ฉันอาจเปลี่ยนไปใช้นักวาดภาพประกอบและใช้ Photoshop สำหรับกราฟิกพิเศษอื่น ๆ เช่นเดียวกับตัวละครไอคอนภาพเหมือนจริง ...
Muhammad Umer

17

"ฉันต้องการเป็นนักออกแบบเว็บไซต์ดังนั้นฉันจึงดูวิดีโอแนะนำ Photoshop จำนวนมาก"

คุณรู้ HTML, CSS และ JS หรือไม่ ถ้าไม่เริ่มต้นที่นั่นก่อน

ใช้ Photoshop เป็นเครื่องมือในการสร้างกราฟิกที่มากับ HTML, CSS และ JS

'การออกแบบเว็บไซต์' ไม่มีอะไรเป็นพิเศษเกี่ยวกับเครื่องมือเฉพาะใน PhotoShop มันเป็นเพียงเครื่องมือสร้างและแก้ไขรูปภาพ


4

ในการออกแบบเว็บไซต์คุณควรดูที่จำลองอื่น ๆ เช่นกัน พิจารณาเอฟเฟกต์บางอย่างที่คุณสามารถใช้เช่นการลอกหน้าการเชื่อมโยงแถบการนำทาง สิ่งนี้ไม่ได้ยากใน Photoshop แต่จะต้องใช้ Google Googling สักหน่อย ฉันมักจะตรวจสอบDribbbleซึ่งเป็นชุมชนการออกแบบที่ยอดเยี่ยม มันได้รับความนิยมอย่างมากดังนั้นคุณจะเห็นเทคนิคใหม่ ๆ มากมายที่นักออกแบบเว็บไซต์กำลังใช้งานอยู่

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


4

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

ข้อดีของการจุดพลุคือ:

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

ข้อดีที่แท้จริงเพียงอย่างเดียวที่ Photoshop นำมาสู่ตารางคือความจริงที่ว่า

  • การแสดงแบบอักษรดีกว่า
  • เพื่อนร่วมงานของคุณจะรู้ว่าแอปพลิเคชันดีขึ้นเล็กน้อย

1
ใช่ดอกไม้ไฟดีกว่ามิฉะนั้นคุณต้องใช้ทั้ง Illustrator และ Photoshop แล้วสลับไปมา
เค้ก

0

ในบันทึกของ "มีมากกว่าการออกแบบ Photoshop": ฉันพบที่ชาญฉลาด: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/


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

นอกจากนี้มันเป็นลิงก์คำตอบเท่านั้น
สัญลักษณ์แทน

0

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

ความคิดที่ว่าคุณเพียงแค่ต้องเรียนรู้ Photoshop แล้วคุณจะเป็นนักออกแบบเหมือนกับที่คุณเรียกตัวเองว่าเป็นผู้สร้างเพราะคุณรู้วิธีใช้ค้อนหรือช่างเพราะคุณสามารถใช้ประแจได้ การออกแบบดังกล่าวทำให้สิ่งต่าง ๆ ทำงานได้ดี (และอาจดูดีในกระบวนการ) มันมีน้อยมากที่จะรู้ Photoshop / Illustrator / InDesign / Sketch / อะไรก็ตาม แต่คุณใช้เครื่องมือเหล่านั้นเพื่อเติมเต็มความคิดของคุณ

มีบทเรียนที่ไม่ดีมากมายบน YouTube และบทเรียนดีๆอีกมากมายเช่นกัน เรียนรู้วิธีการทำทุกอย่างเทคนิคต่าง ๆ จะมีค่าลงมาอยู่ดี Creative Block ยังมีบทช่วยสอนที่ดี แต่ยิ่งไปกว่านั้นลองศึกษาทฤษฎีของสีทฤษฎีเลย์เอาต์ (Tphiography) ของเอริคสไปเออร์แมนการขโมยแกะและค้นหาวิธีการทำงานของ Typeเป็นคำนำที่ดีมากและทักษะการออกแบบกราฟิกแบบดั้งเดิมอื่น ๆ Photoshop

นอกจากนี้ตามที่มีคนพูดถึงก่อนหน้านี้การเรียนรู้ HTML / CSS / JS ก็เป็นประโยชน์แน่นอนสำหรับการออกแบบเว็บเช่นกัน


-2

คุณสามารถตรวจสอบไฟล์ PSD ของคุณสำหรับปัญหาความเข้ากันได้ของเว็บที่รู้จักกันที่นี่ https://www.oss-usa.com/web-preflight?promo=web-preflight ได้ฟรี


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

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

ขอบคุณ แม้ว่ามันจะช่วยได้จริงๆถ้าคุณต้องการแบ่งปันประสบการณ์ของคุณและกำจัดข้อผิดพลาดเหล่านั้น ด้วยวิธีนี้คำตอบของคุณจะยังคงมีมูลค่า (มาก!) ในกรณีที่ลิงก์แตกในภายหลัง ลิ้งค์เน่าคือเหตุผลที่เราไม่ค่อยกระตือรือร้น (ส่วนใหญ่) ลิงค์เดียวเท่านั้นและเหตุผลที่ฉันโหวตให้คุณตอบ อย่าท้อแท้โปรดทราบว่าการใช้เว็บไซต์นี้อาจเป็นช่วงการเรียนรู้ เรามีความสุขที่ได้มีส่วนร่วมกับคุณ!
Vincent
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.