Qual è un buon (e semplice) modo per dimostrare che uno screenshot è uno screenshot?


14

Sto usando Mac OS X 10.6 e mi piace lo strumento di acquisizione dello schermo del sistema. Per impostazione predefinita, quando afferri un'intera finestra, sotto di essa verrà messa un po 'di ombra / gradiente, con trasparenza, usando un'immagine PNG - che penso sia piuttosto carina.

Tuttavia, se acquisisci un'area dello schermo, ad esempio da una pagina Web, i bordi sono piatti e può essere difficile distinguerlo dal resto del sito Web, soprattutto se sembra simile agli elementi che sono già lì .

Quindi la mia domanda è questa: qual è un modo semplice, di classe, per dimostrare che un'immagine non è in realtà parte di un sito Web? Penso che un bordo nero di 5 pixel probabilmente lo farebbe, ma non è di classe. Mi piace il gradiente sottile di OS X, ma è appropriato per tutti gli screenshot e sarebbe facile da creare?

Mi piacerebbe davvero che ci fosse uno script che potrei usare per applicare la trasformazione senza dover aprire Photoshop stesso, ma non è un requisito per una risposta accettabile.

inserisci qui la descrizione dell'immagine

^ esempio del problema di cui sto parlando


5
Bell'esempio Per un momento ho pensato che Chrome avesse un problema di rendering ...
Farray,

1
Con classe, il contesto è tutto. Un bordo 5px è un'auto K di classe, un'ombra discendente è un'auto sportiva di classe e il bordo 1px è un'elegante berlina di lusso.
horatio,

1
ImageShack sembra aver eliminato la tua immagine e sostituita con un banner pubblicitario. Se possibile, ricaricare l'immagine (o qualcosa di equivalente) utilizzando il pulsante di caricamento dell'immagine nella barra degli strumenti dell'editor (che la caricherà sull'account imgur di Stack Exchange).
Ilmari Karonen,

Risposte:


8

Dipende totalmente dal tipo di immagini di cui stiamo parlando.

Possibili modi per farlo:

  1. Testo in qualche angolo che dice "Screenshot" o "Screencapture"
  2. Icona della fotocamera qualche angolo o Testo e immagine dell'icona della fotocamera.
  3. Nel caso di dire quella casella di risposta, il modo più sicuro potrebbe essere quello di sovrapporlo con un altro colore e rivelare l'immagine al passaggio del mouse.
  4. Poiché il n. 3 potrebbe non essere così chiaro, tale overlay potrebbe essere accompagnato da testo e / o icona o se non vi è alcun colore di overlay potrebbe essere invertito.
  5. Una sorta di confine potrebbe essere un buon indicatore.

Per quanto riguarda le tecniche:

# 1 e # 2
Molti programmi di screencapture consentono filigrane che sarebbero l'ideale per singole immagini o poche immagini. In caso di più immagini Photoshop potrebbe essere utilizzato per aggiungere una filigrana. O una HTML/CSSdidascalia.

# 3, # 4 e # 5
Questi dovrebbero essere fatti con HTML/CSSdidascalia.


Non potevo fare a meno di pensare a uno dei miei progetti ... ora ... "Non voglio fare pubblicità ... Ma ..." http://photoshopmesta.net/sic/theTest/ potrebbe essere usato qualcosa del genere mostra che è un'immagine quando passi il mouse sopra l'immagine.

Non avevo nient'altro da fare, quindi ho fatto un esempio di come potrebbe funzionare http://photoshopmesta.net/1/screenshot/


A proposito, stavo leggendo questo sul mio iPad e devo confessare che ho provato a fare clic sull'immagine di risposta. Sono andato avanti per darti un +1. Vorrei poter dare +2 dato che è stato un eccellente esempio :)


6

Questo è il mio modo preferito personale, non funziona in tutte le situazioni, ma è l'ideale per schermate a schermo intero.

Esempio di schermata


Puoi approfondire come realizzare questo o collegarti a un posto che ha un tutorial?
Cwd,

Ctrl + PrintScrn per stampare lo schermo, incollarlo in Photoshop. Scatta una foto di un monitor da Internet e aprilo in Photoshop. Copia lo screenshot sull'immagine del monitor e usa lo strumento modifica> trasforma> distorsione per trascinare gli angoli sulla forma dello schermo.
Scott Brown,

4

È una buona idea mantenere coerente l'approccio, mettendo in evidenza i tuoi screenshot in modo sottile. Trovo che l'ombra discendente predefinita di Apple sia un po 'troppo.

Aggiungo solo un tratto centrato di 3px allo scatto con opacità al 40%. Se lo desideri, puoi aggiungere un'ombra esterna.


grazie, puoi aggiungere un esempio?
Cwd

4

A seconda del contesto, potresti fare molto peggio che deridere un frame "monitor" stilizzato (forse in grigio mela?). Lo script Elaboratore immagini di Photoshop ti consente di eseguire un'azione durante l'elaborazione in batch delle immagini, in modo da poter creare un'azione che ridimensiona la tela, rilasci nel "monitor" sopra la schermata, aggiunge uno sfondo standard (per le schermate che non riempiono il frame), quindi salva il risultato come png o jpeg.

Non devi andare elaborato come un monitor stilizzato e se non vuoi che abbiano tutte le stesse dimensioni, la tua azione potrebbe semplicemente aggiungere un tratto sfumato a un'immagine di dimensioni arbitrarie. Ciò ti consentirebbe di elaborare in batch da Bridge ( Tools > Photoshop > Batch...) e fare tutto nell'Azione.


4

Alcune cose che potrebbero aiutare:

  • Includi parti tagliate di elementi circostanti. È possibile aggiungere un'ombra discendente e un effetto simile a un bordo strappato per enfatizzare questo aspetto. (Per l'effetto bordo strappato, creo una maschera di livello e applico il filtro Distorsione oceano> Ondulazione oceano di Photoshop con una piccola dimensione dell'ondulazione (2) e una piccola entità dell'ondulazione (3).)
  • Riduci la dimensione dell'immagine in modo che non sia più alla stessa scala degli elementi di pagina reali. (E possibilmente consentire agli utenti di fare clic sulla miniatura per vedere una versione a dimensione intera.)

Per esempio:

Schermata di esempio


il secondo punto funziona bene, a quanto pare. Ben fatto!
Bharat,

3

(Mi hai ingannato con il colpo della segreteria telefonica. Molto intelligente.) Ma per quanto riguarda la mia risposta ...

Suggerirei di utilizzare un effetto cornice per rendere lo scatto visivamente significativo dal resto della pagina. Basta dargli un bordo di carta frastagliato. Questo è quello che farei.


Non sono un professionista su Photoshop - è così facile da fare?
Cwd,

Potresti facilmente creare un rettangolo bianco, posizionare lo scatto sopra di esso, quindi cancellare intorno alla foto in modo irregolare. Dovrebbe essere facile da fare in Photoshop.
Andrew Davis,

1

Come linea laterale, se vuoi usare l'intero screenshot della finestra ma non hai le grandi ombre e le aree trasparenti in modo da poter applicare rapidamente il tuo stile semplicemente inserisci quanto segue nel Terminale:

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

Quindi riavvia o inserisci quanto segue per vedere subito le modifiche:

$ killall SystemUIServer

Ecco come invertire quanto sopra:

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

tramite un utile articolo su tutsplus.com


0

Per mostrare schermate come tali, ho usato un gradiente radiale grigio chiaro e un'ombra a forma di scatola. Questo metodo ha il vantaggio di essere possibile solo con CSS - non è necessaria la modifica delle immagini:

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;

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.