Apa cara yang baik (dan mudah) untuk menunjukkan bahwa tangkapan layar adalah tangkapan layar?


14

Saya menggunakan Mac OS X 10.6 dan saya suka alat ambil layar sistem. Secara default ketika Anda mengambil seluruh jendela itu akan menempatkan sedikit bayangan / gradien di bawahnya, dengan transparansi, menggunakan gambar PNG - yang menurut saya cukup bagus.

Namun, jika Anda menangkap bagian layar, misalnya dari halaman web, tepinya rata dan sulit membedakannya dari bagian situs web lainnya, terutama jika tampilannya mirip dengan elemen yang sudah ada di sana. .

Jadi pertanyaan saya adalah ini - apa cara yang mudah, berkelas, untuk menunjukkan bahwa gambar sebenarnya bukan bagian dari situs web? Saya pikir perbatasan hitam 5 piksel mungkin akan melakukannya, tapi itu tidak berkelas. Saya suka gradien halus yang dilakukan OS X, tetapi apakah itu sesuai untuk semua tangkapan layar, dan apakah itu mudah dibuat?

Saya benar-benar menyukainya jika ada skrip yang dapat saya gunakan untuk menerapkan transformasi tanpa harus membuka photoshop sendiri, tetapi itu bukan persyaratan untuk jawaban yang dapat diterima.

masukkan deskripsi gambar di sini

^ contoh masalah yang saya bicarakan


5
Contoh yang bagus. Sejenak saya pikir Chrome punya masalah rendering ...
Farray

1
Dengan berkelas, konteks adalah segalanya. Perbatasan 5px adalah K-car berkelas, drop shadow adalah mobil sport berkelas, dan perbatasan 1px adalah sedan mewah berkelas.
horatio

1
ImageShack tampaknya telah menghapus gambar Anda, dan menggantinya dengan spanduk iklan. Jika Anda bisa, silakan unggah ulang gambar (atau sesuatu yang setara) menggunakan tombol unggah gambar di bilah alat editor (yang akan mengunggahnya ke akun imgur Stack Exchange).
Ilmari Karonen

Jawaban:


8

Sangat tergantung pada jenis gambar apa yang sedang kita bicarakan.

Kemungkinan cara melakukannya:

  1. Teks di beberapa sudut mengatakan "Screenshot" atau "Screencapture"
  2. Ikon kamera, beberapa sudut, atau Teks dan gambar ikon kamera.
  3. Seandainya katakanlah kotak jawaban itu, cara teraman mungkin untuk menimpanya dengan warna lain dan mengungkap gambar pada hover.
  4. Karena # 3 mungkin tidak terlalu jelas, overlay itu bisa disertai dengan teks dan / atau ikon atau jika tidak ada warna overlay, itu bisa dibalik juga.
  5. Semacam perbatasan bisa menjadi indikator yang baik.

Sejauh teknik:

# 1 dan # 2
Banyak program screencapture memungkinkan tanda air yang ideal untuk gambar tunggal atau beberapa gambar. Dalam hal banyak gambar, Photoshop dapat digunakan untuk menambahkan tanda air. Atau HTML/CSSketerangan.

# 3, # 4 dan # 5
Ini harus dibuat dengan HTML/CSSteks.


Mau tidak mau memikirkan salah satu proyek saya ... sekarang .. "Saya tidak ingin beriklan ... Tapi ..." http://photoshopmesta.net/sic/theTest/ sesuatu seperti ini dapat digunakan untuk menunjukkan bahwa itu adalah gambar ketika Anda mengarahkan kursor ke gambar.

Tidak memiliki hal lain untuk dilakukan, jadi saya membuat contoh bagaimana ini bisa berfungsi http://photoshopmesta.net/1/screenshot/


Oh, ngomong-ngomong, saya di iPad saya membaca ini dan saya harus mengakui bahwa saya memang mencoba mengklik gambar jawaban. Saya langsung memberi Anda +1. Seandainya saya bisa memberi +2 karena itu contoh yang bagus :)


6

Ini adalah cara favorit pribadi saya, meskipun tidak berfungsi dalam semua situasi tetapi ideal untuk tangkapan layar layar penuh.

Screenshot exmaple


Bisakah Anda menguraikan cara menyelesaikan ini atau tautan ke tempat yang memiliki tutorial?
cwd

Ctrl + PrintScrn untuk mencetak layar, rekatkan ke photoshop. Dapatkan foto monitor dari internet dan buka di photoshop. Salin tangkapan layar Anda ke pic monitor dan gunakan alat edit> transform> distort untuk menyeret sudut ke bentuk layar.
Scott Brown

4

Ini adalah ide yang bagus untuk menjaga pendekatan konsisten, sambil menyoroti tangkapan layar Anda dengan cara yang halus. Saya menemukan drop shadow default Apple sedikit terlalu banyak.

Saya hanya menambahkan stroke terpusat 3px ke bidikan dengan opacity pada 40%. Anda bisa menambahkan drop shadow ke dalamnya jika mau.


terima kasih, bisakah Anda menambahkan contoh?
cwd

4

Bergantung pada konteksnya, Anda bisa melakukan jauh lebih buruk daripada membuat kerangka "monitor" bergaya (mungkin di Apple grey?). Script Image Processor Photoshop memungkinkan Anda menjalankan Aksi saat memproses gambar, sehingga Anda dapat membuat tindakan yang mengubah ukuran kanvas, turun di "monitor" di atas tangkapan layar, menambahkan latar belakang standar (untuk tangkapan layar yang tidak memenuhi bingkai), lalu simpan hasilnya sebagai png atau jpeg.

Anda tidak harus pergi selengkap monitor bergaya, dan jika Anda tidak ingin mereka semua memiliki ukuran yang sama, tindakan Anda mungkin hanya menambahkan stroke gradien ke gambar berukuran sewenang-wenang. Itu akan memungkinkan Anda untuk batch proses dari Bridge ( Tools > Photoshop > Batch...) dan melakukan segalanya dalam Action.


4

Beberapa hal yang akan membantu:

  • Sertakan bagian cut-off dari elemen sekitarnya. Anda bisa menambahkan drop shadow dan efek seperti sobek untuk menekankan ini. (Untuk efek sobekan, saya membuat layer mask dan menerapkan Photoshop's Distort> Ocean Ripple filter dengan ukuran riak kecil (2) dan riak kecil besarnya (3).)
  • Kurangi ukuran gambar sehingga tidak lagi pada skala yang sama dengan elemen halaman nyata. (Dan mungkin memungkinkan pengguna mengklik thumbnail untuk melihat versi ukuran penuh.)

Sebagai contoh:

Contoh tangkapan layar


Poin kedua tampaknya bekerja dengan baik. bagus
bharat

3

(Kamu membodohiku dengan tembakan dari kotak penjawab. Sangat pintar.) Tapi untuk jawabanku ...

Saya sarankan menggunakan efek bingkai untuk membuat bidikan menjadi signifikan secara visual dari sisa halaman. Berikan saja ujung kertas yang bergerigi. Itu yang akan saya lakukan.


Saya bukan pro di photoshop - apakah itu mudah dilakukan?
cwd

Anda dapat dengan mudah membuat persegi panjang putih, menempatkan bidikan di atasnya, lalu menghapus sekitar foto dengan cara bergerigi. Seharusnya mudah dilakukan di Photoshop.
Andrew Davis

1

Sebagai garis samping, jika Anda ingin menggunakan tangkapan layar seluruh jendela tetapi tidak memiliki bayangan besar dan area transparan sehingga Anda dapat dengan cepat menerapkan gaya Anda sendiri cukup masukkan berikut ini ke Terminal:

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

Kemudian mulai ulang atau masukkan yang berikut untuk melihat perubahan langsung:

$ killall SystemUIServer

Berikut cara membalikkan di atas:

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

melalui artikel yang bermanfaat di tutsplus.com


0

Untuk menunjukkan tangkapan layar seperti itu, saya telah menggunakan gradien radial abu-abu terang dan bayangan kotak. Metode ini memiliki keuntungan dimungkinkan hanya dengan CSS - tidak perlu mengedit gambar:

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;

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.