เป็นวิธีที่ดี (และง่าย) ในการแสดงว่าภาพหน้าจอเป็นภาพหน้าจอคืออะไร

ฉันใช้ Mac OS X 10.6 และฉันชอบเครื่องมือจับหน้าจอระบบ ตามค่าเริ่มต้นเมื่อคุณจับทั้งหน้าต่างมันจะวางเงา / ไล่ระดับลงเล็กน้อยด้วยความโปร่งใสโดยใช้ภาพ PNG ซึ่งฉันคิดว่าค่อนข้างดี

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

ดังนั้นคำถามของฉันคือสิ่งนี้วิธีที่ง่ายและดีงามในการแสดงให้เห็นว่าภาพไม่ได้เป็นส่วนหนึ่งของเว็บไซต์ ฉันคิดว่าเส้นขอบสีดำขนาด 5 พิกเซลน่าจะเป็นเช่นนั้น แต่นั่นไม่ใช่สิ่งที่ดีงาม ฉันชอบการไล่ระดับสีที่บอบบางที่ OS X ทำ แต่เหมาะสำหรับหน้าจอทั้งหมดและจะสร้างได้ง่ายหรือไม่

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

ตัวอย่างของปัญหาที่ฉันพูดถึง

ทั้งหมดขึ้นอยู่กับประเภทของภาพที่เรากำลังพูดถึง

วิธีที่เป็นไปได้ของการทำมัน:

1. ข้อความในบางมุมว่า "ภาพหน้าจอ" หรือ "ภาพหน้าจอ"
2. ไอคอนกล้องบางมุมหรือข้อความและรูปภาพของไอคอนกล้อง
3. ในกรณีที่กล่าวว่ากล่องคำตอบนั้นวิธีที่ปลอดภัยที่สุดอาจเป็นการซ้อนทับด้วยสีอื่นและแสดงภาพเมื่อเลื่อน
4. เนื่องจาก # 3 อาจไม่ชัดเจนทั้งหมดการซ้อนทับนั้นอาจมาพร้อมกับข้อความและ / หรือไอคอนหรือหากไม่มีสีซ้อนทับก็สามารถกลับด้านได้เช่นกัน
5. เส้นขอบบางประเภทอาจเป็นตัวบ่งชี้ที่ดี

เท่าที่เทคนิคไป:

# 1 และ # 2
โปรแกรม screencapture จำนวนมากอนุญาตให้มีลายน้ำซึ่งเหมาะสำหรับภาพเดี่ยวหรือภาพไม่กี่ภาพ ในกรณีที่มีภาพหลายภาพสามารถใช้ Photoshop เพื่อเพิ่มลายน้ำ หรือHTML/CSSคำบรรยายใต้ภาพ

# 3, # 4 และ # 5 สิ่ง
เหล่านี้จะต้องทำด้วยHTML/CSSคำบรรยาย

ไม่สามารถช่วย แต่คิดเกี่ยวกับหนึ่งในโครงการของฉัน ... ตอนนี้ .. "ฉันไม่ต้องการโฆษณา ... แต่ ... " http://photoshopmesta.net/sic/theTest/บางอย่างเช่นนี้สามารถใช้ในการ แสดงว่าเป็นภาพเมื่อคุณวางเมาส์เหนือภาพ

ฉันไม่ได้ทำอย่างอื่นเลยฉันจึงยกตัวอย่างว่ามันทำงานอย่างไรhttp://photoshopmesta.net/1/scurrency/

โอ้โดยวิธีการที่ฉันอยู่บน iPad ของฉันอ่านนี้และฉันต้องยอมรับว่าฉันพยายามคลิกที่ภาพคำตอบ ฉันไปข้างหน้าเพื่อส่ง +1 ให้คุณ หวังว่าฉันจะให้ +2 เป็นตัวอย่างที่ยอดเยี่ยม :)

นี่เป็นวิธีโปรดของฉันไม่สามารถใช้งานได้ในทุกสถานการณ์ แต่เหมาะสำหรับหน้าจอเต็มหน้าจอ

เป็นความคิดที่ดีที่จะรักษาความสอดคล้องในขณะที่เน้นภาพหน้าจอของคุณอย่างละเอียด ฉันพบว่าเงาเริ่มต้นของ Apple ลดลงมากเกินไป

ฉันเพิ่มจังหวะ 3px กึ่งกลางในภาพด้วยความทึบที่ 40% คุณสามารถเพิ่มเงาได้หากต้องการ

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

คุณไม่จำเป็นต้องทำอย่างละเอียดเหมือนจอมอนิเตอร์ที่มีสไตล์และถ้าคุณไม่ต้องการให้มันมีขนาดเท่ากันการกระทำของคุณอาจเพิ่มการไล่ระดับสีแบบลาดลงในภาพขนาดที่ไม่มีกฎเกณฑ์ ที่จะช่วยให้คุณสามารถประมวลผลชุดงานจาก Bridge ( Tools > Photoshop > Batch...) และทำทุกอย่างใน Action

บางสิ่งที่จะช่วย:

• รวมส่วนที่ตัดออกขององค์ประกอบโดยรอบ คุณสามารถเพิ่มเงาแบบหล่นและเอฟเฟกต์ที่ฉีกขาดเพื่อเน้นสิ่งนี้ (สำหรับเอฟเฟกต์ฉีกขาดฉันสร้างเลเยอร์มาสก์และใช้ตัวกรอง Distort> Ocean Ripple ของ Photoshop ที่มีขนาดเล็ก (2) และขนาดเล็ก (3))
• ลดขนาดของภาพเพื่อไม่ให้มีขนาดเท่ากันกับองค์ประกอบของหน้าจริง (และอาจอนุญาตให้ผู้ใช้คลิกที่ภาพขนาดย่อเพื่อดูเวอร์ชันเต็ม)

ตัวอย่างเช่น:

(คุณหลอกฉันด้วยการยิงกล่องตอบรับฉลาดมาก) แต่สำหรับคำตอบของฉัน ...

ฉันขอแนะนำให้ใช้เอฟเฟกต์เฟรมเพื่อทำให้การถ่ายภาพมีนัยสำคัญจากส่วนที่เหลือของหน้า เพียงแค่ให้มันขอบกระดาษขรุขระ นั่นคือสิ่งที่ฉันจะทำ

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

$ defaults write com.apple.screencapture disable-shadow -bool TRUE

จากนั้นรีสตาร์ทหรือป้อนสิ่งต่อไปนี้เพื่อดูการเปลี่ยนแปลงในทันที:

$ killall SystemUIServer

ต่อไปนี้เป็นวิธีย้อนกลับด้านบน:

$ defaults write com.apple.screencapture disable-shadow -bool FALSE
$ killall SystemUIServer

ผ่านบทความที่มีประโยชน์บนtutsplus.com

ในการแสดงภาพหน้าจอเช่นนี้ฉันได้ใช้การไล่ระดับสีรัศมีสีเทาอ่อนและเงาของกล่อง วิธีนี้มีข้อดีของการเป็นไปได้ด้วย CSS เพียงอย่างเดียวไม่จำเป็นต้องแก้ไขรูปภาพ:

background: -webkit-radial-gradient(white,white,#e5e6e7);
background: -o-radial-gradient(white,white,#e5e6e7);
background: -moz-radial-gradient(white,white,#e5e6e7);
background: radial-gradient(white,white,#e5e6e7);
box-shadow: 0px 0px 2px #555555;

เพิ่มเครื่องหมายน้ำในภาพ:

: P