显示截图是截图的好(简单)方法是什么?


14

我正在使用Mac OS X 10.6,并且我喜欢系统屏幕抓取工具。默认情况下,当您抓住整个窗口时,会在其下方放置一点阴影/渐变,并使用PNG图像透明化-我认为这很好。

但是,如果您捕获了屏幕的某个区域(例如,从网页上捕获),则边缘是平坦的,很难区分它与网站的其余部分,尤其是当它看起来类似于已经存在的元素时。

所以我的问题是-有什么简单,优雅的方法可以显示图像实际上不是网站的一部分?我认为5像素的黑色边框可能会做到这一点,但这并不是经典。我喜欢OS X的细微渐变色,但是它适用于所有屏幕截图,并且易于创建吗?

我真的很喜欢它,如果有一个脚本可以用来应用转换而不必打开photoshop本身,但这不是可接受的答案的要求。

在此处输入图片说明

^我正在谈论的问题的示例


5
很好的例子。一会儿我以为Chrome浏览器出现了渲染问题...
Farray 2011年

1
有了优雅,背景就是一切。5px边框是经典的K型轿车,投影是经典的跑车,而1px边框是经典的豪华轿车。
horatio 2011年

1
ImageShack似乎删除了您的图片,并用广告横幅替换了它。如果可以,请使用编辑器工具栏中的图像上传按钮(将图像上传到Stack Exchange的imgur帐户)重新上传图像(或等效图像)。
Ilmari Karonen 2015年

Answers:


8

完全取决于我们所讨论的图像类型。

可能的方法:

  1. 某个角落的文字为“截屏”或“截屏”
  2. 相机图标的某个角或相机图标的文本和图像。
  3. 如果说那个答案框,最安全的方法可能是用另一种颜色覆盖它并在悬停时显示图像。
  4. 因为#3可能不是很清楚,所以该覆盖可能会伴随文本和/或图标,或者如果没有覆盖颜色,那么它也可以反转。
  5. 某种边界可能是一个很好的指标。

就技术而言:

#1和#2
许多屏幕捕获程序都允许水印,这对于单张图像或几张图像来说是理想的选择。如果有多个图像,则可以使用Photoshop添加水印。或HTML/CSS标题。

#3,#4和#5
这些必须带有HTML/CSS字幕。


现在忍不住想想我的一个项目.... “我不想做广告...但是...” http://photoshopmesta.net/sic/theTest/这样的东西可以用来将鼠标悬停在图像上时,表明它是图像。

没有其他事情可做,所以我举了一个例子,说明它如何工作http://photoshopmesta.net/1/screenshot/


哦,顺便说一句,我在iPad上正在阅读这篇文章,我不得不承认我确实尝试单击答案图像。我马上给您+1。希望我能给+2,因为这是一个很好的例子:)


6

这是我个人最喜欢的方式,尽管并非在所有情况下都有效,但对于全屏屏幕截图来说是理想的选择。

屏幕截图示例


您能否详细说明如何完成此操作或链接到有教程的地方?
cwd13年

Ctrl + PrintScrn以打印屏幕,将其粘贴到photoshop中。从互联网上获取监视器的图片,然后在photoshop中将其打开。将您的屏幕截图复制到监视器的图片,然后使用edit> transform> distort工具将角落拖动到屏幕形状。
Scott Brown

4

最好保持方法一致,同时以微妙的方式突出显示屏幕截图。我发现苹果的默认投影效果有点过分。

我只是在镜头中添加了3px居中笔画,不透明度为40%。您可以根据需要添加阴影。


谢谢,你能补充一个例子吗?
cwd

4

根据具体情况,您可能要比模拟风格化的“显示器”框架(也许是苹果灰色?)做得差得多。Photoshop的“图像处理器”脚本可让您在批量处理图像时运行一个Action,以便您可以创建一个操作来调整画布的大小,在屏幕截图上方的“监视器”中放置,添加标准背景(用于不占据屏幕尺寸的屏幕抓图)帧),然后将结果另存为png或jpeg。

您不必像风格化的显示器那样复杂,并且如果您不希望它们都具有相同的大小,则您的操作可能只是向任意大小的图像添加了渐变笔触。这样一来,您就可以从Bridge(Tools > Photoshop > Batch...)批处理并执行Action中的所有操作。


4

一些有帮助的事情:

  • 包括周围元素的切除部分。您可以添加阴影和类似撕边的效果来强调这一点。(对于边缘撕裂效果,我创建了一个图层蒙版,并应用了具有较小波纹尺寸(2)和较小波纹尺寸(3)的Photoshop的“扭曲”>“海洋波纹”滤镜。)
  • 减小图像的大小,使其不再与实际页面元素具有相同的比例。(并可能允许用户单击缩略图以查看完整版本。)

例如:

屏幕截图示例


第二点似乎很好。好一个!
巴拉特(Bharat)2015年

3

(你用回答盒的镜头骗了我。非常聪明。)但是至于我的回答……

我建议使用框架效果使该镜头在页面的其余部分上看起来更显眼。只是给它一个锯齿状的纸边缘。那就是我要做的。


我在photoshop中不是专业人士-这样容易吗?
cwd

您可以轻松地制作一个白色矩形,将照片放置在其顶部,然后以锯齿状擦除照片周围的内容。在Photoshop中应该很容易做到。
安德鲁·戴维斯

1

作为副业,如果您想使用整个窗口的屏幕截图,但又没有大的阴影和透明区域,以便可以快速应用自己的样式,只需在Terminal中输入以下内容:

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

然后重新启动或输入以下内容立即查看更改:

$ killall SystemUIServer

以下是扭转以上情况的方法:

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

通过tutsplus.com上的有用文章


0

为了显示这样的屏幕截图,我使用了浅灰色的径向渐变和框阴影。这种方法的优点是仅需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;

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.