Ekran görüntüsünün ekran görüntüsü olduğunu göstermenin iyi (ve kolay) yolu nedir?

Mac OS X 10.6 kullanıyorum ve sistem ekranı yakalama aracını beğendim. Varsayılan olarak, bir pencerenin tamamını yakaladığınızda, bir PNG görüntüsü kullanarak şeffaflık ile altına bir gölge / gradyan koyacaktır - ki bu oldukça hoş.

Bununla birlikte, ekranın bir bölgesini, örneğin bir web sayfasından yakalarsanız, kenarlar düzdür ve web sitesinin geri kalanından ayrı olarak söylemek zor olabilir, özellikle de zaten var olan öğelere benziyorsa .

Benim sorum şu - bir görüntünün aslında bir web sitesinin bir parçası olmadığını göstermenin kolay, şık bir yolu nedir? Sanırım 5 piksel siyah bir kenarlık muhtemelen bunu yapardı, ama bu şık değil. OS X'in yaptığı ince degradeyi seviyorum, ancak tüm ekran görüntüleri için uygun mu ve bu oluşturulması kolay mı?

Photoshop'u açmak zorunda kalmadan dönüşümü uygulamak için kullanabileceğim bir senaryo olsaydı gerçekten çok isterdim, ama bu kabul edilebilir bir cevap için bir gereklilik değil.

^ Bahsettiğim sorunun örneği

Tamamen ne tür görüntülerden bahsettiğimize bağlı.

Bunu yapmanın olası yolları:

1. Bazı köşelerde "Ekran görüntüsü" veya "Ekran görüntüsü" yazan metin
2. Kamera simgesi bazı köşe veya Metin ve kamera simgesinin resmi.
3. Bu cevap kutusunun söylenmesi durumunda, en güvenli yol başka bir renkle kaplamak ve fareyle üzerine gelindiğinde görüntüyü ortaya çıkarmak olabilir.
4. # 3 bu kadar net olmayabilir, bu kaplamaya metin ve / veya simge eşlik edebilir veya kaplama rengi yoksa tersine çevrilebilir.
5. Bir çeşit sınır iyi bir gösterge olabilir.

Teknikler ile ilgili olarak:

# 1 ve # 2
Çok sayıda tarama programı, tek görüntüler veya birkaç görüntü için ideal olacak filigranlara izin verir. Birden fazla görüntü olması durumunda filigran eklemek için Photoshop kullanılabilir. Veya bir HTML/CSSaltyazı.

# 3, # 4 ve # 5
Bunların HTML/CSSaltyazıyla yapılması gerekir .

Yardım edemedim ama projelerimden birini düşünün ... şimdi .. "Reklam vermek istemiyorum ... Ama ..." http://photoshopmesta.net/sic/theTest/ böyle bir şey kullanılabilir imleci görüntünün üzerine getirdiğinizde bunun görüntü olduğunu gösterin.

Yapacak başka bir şeyim yoktu, nasıl çalışabileceğine dair bir örnek yaptım http://photoshopmesta.net/1/screenshot/

Bu arada, iPad'imde bunu okuyordum ve cevap resmini tıklamaya çalıştığımı itiraf etmeliyim. Sana bir +1 vermek için ileri gittim. Ben mükemmel bir örnek olarak +2 verebilir diliyorum :)

Bu benim en sevdiğim yol, her durumda çalışmıyor, ancak tam ekran ekran görüntüleri için ideal.

Ekran görüntülerinizi ince bir şekilde vurgularken, yaklaşımı tutarlı tutmak iyi bir fikirdir. Apple'ın varsayılan alt gölgesini biraz fazla buluyorum.

Sadece% 40 opaklıkla çekime 3 piksel merkezli bir kontur ekliyorum. İsterseniz bir gölge ekleyebilirsiniz.

Bağlama bağlı olarak, stilize edilmiş bir "monitör" çerçevesini (belki de Apple grisi?) Taklit etmekten çok daha kötü yapabilirsiniz. Photoshop'un Görüntü İşlemcisi komut dosyası görüntüleri toplu olarak işlerken bir Eylem çalıştırmanıza izin verir, böylece tuvali yeniden boyutlandıran, ekran görüntüsünün üzerindeki "monitöre" düşen bir eylem oluşturabilirsiniz, standart bir arka plan ekler ( ), ardından sonucu bir png veya jpeg olarak kaydeder.

Stilize edilmiş bir monitör kadar ayrıntılı bir şekilde gitmek zorunda değilsiniz ve hepsinin aynı boyutta olmasını istemiyorsanız, eyleminiz rastgele boyutlandırılmış bir görüntüye degrade kontur ekleyebilir. Bu, işlemi Bridge ( Tools > Photoshop > Batch...) 'den toplu hale getirmenize ve Eylem'deki her şeyi yapmanıza izin verir .

Yardımcı olabilecek bazı şeyler:

• Çevredeki öğelerin kesme kısımlarını ekleyin. Bunu vurgulamak için bir alt gölge ve yırtık kenar benzeri bir efekt ekleyebilirsiniz. (Yırtık kenar efekti için, bir katman maskesi oluşturuyorum ve küçük bir dalgalanma boyutu (2) ve küçük dalgalanma büyüklüğü (3) ile Photoshop'un Deformasyonu> Okyanus Dalgalanma filtresini uyguluyorum.)
• Görüntünün boyutunu, artık gerçek sayfa öğeleriyle aynı ölçekte olmayacak şekilde küçültün. (Ve muhtemelen kullanıcıların tam boyutlu bir sürümü görmek için küçük resme tıklamasına izin verin.)

Örneğin:

(Beni cevap kutusunun çekimiyle kandırdın. Çok zekice.) Ama cevabım gelince ...

Çekimi sayfanın geri kalanından görsel olarak anlamlı hale getirmek için bir çerçeve efekti kullanmanızı öneririm. Sadece pürüzlü bir kağıt kenarı verin. Ben de öyle yapardım.

Bir yan çizgi olarak, tüm pencere ekran görüntüsünü kullanmak istiyorsanız, ancak büyük gölgelere ve saydam alanlara sahip değilseniz, kendi stilinizi hızlı bir şekilde uygulayabilmeniz için aşağıdakileri Terminal'e girmeniz yeterlidir:

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

Ardından, değişiklikleri hemen görmek için yeniden başlatın veya aşağıdakileri girin:

$ killall SystemUIServer

Yukarıdakileri nasıl tersine çevireceğiniz aşağıda açıklanmıştır:

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

tutsplus.com'daki yararlı bir makale aracılığıyla

Ekran görüntülerini bu şekilde göstermek için açık gri bir radyal degrade ve bir kutu gölgesi kullandım. Bu yöntem sadece CSS ile mümkün olma avantajına sahiptir - görüntü düzenlemeye gerek yoktur:

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;

Resme bir su işareti ekleyin:

: P