Share
Cosa starai creandoGli oggetti intelligenti sono una delle funzionalità più potenti di Photoshop. In questo tutorial, imparerai come preparare un gruppo di schermate di computer come un mockup, quindi aggiungi layer Smart Object agli schermi. Una volta che tutto è stato impostato, è possibile modificare tutte le immagini dello schermo contemporaneamente aggiornando lo Smart Object. Ogni oggetto avanzato può contenere più livelli, rendendo super veloce e facile cambiare la presentazione.
Sto iniziando con tre prodotti diversi. Puoi trovare scatti di prodotto isolati su PhotoDune o GraphicRiver e puoi utilizzarne quanti ne vuoi nella composizione. Questo particolare file ha livelli separati per i prodotti, le loro ombre e il bagliore su ogni schermo.
Preparare un livello separato per ogni schermata. Prendi il Strumento rettangolo (U) e disegna un rettangolo delle stesse dimensioni di ogni schermo. In alternativa, puoi utilizzare il rettangolo Strumento selezione (M) e riempire la selezione con pixel. Qualunque metodo tu usi, lo "schermo" deve essere su un livello separato.
Disegna un rettangolo delle stesse dimensioni dello schermo. Questo coprirà ogni immagine che hai sullo schermo e occuperà il proprio livello.Preferisco usare un livello di forma perché è più facile apportare regolazioni fini alla forma usando il Trasformazione libera (Comando-T) comando.
Crea un livello di schermo per ciascuna delle altre schermate. Puoi riempire le forme con qualsiasi colore. Questi livelli "schermo" saranno utilizzati in seguito per mascherare gli oggetti intelligenti. Il tuo mockup dovrebbe ora assomigliare all'immagine qui sotto:
È una buona idea fare delle pulizie a questo punto. Denominare e organizzare i livelli ti farà risparmiare tempo a lungo termine. Nell'immagine sottostante, ho codificato a colori tutti i livelli che appartengono a ciascun prodotto. Per cambiare il colore di un livello, fai clic sul livello per evidenziarlo, quindi fai clic sul menu a comparsa sul lato Livelli pannello e scegliere Proprietà del livello.
Puoi persino creare Gruppi di livelli per ogni prodotto. Seleziona tutti i layer che appartengono a un prodotto e fai clic sul menu a comparsa sul Livelli pannello. Scegliere Nuovo gruppo da livelli, come nell'immagine qui sotto. Puoi quindi colorare l'intero gruppo scegliendo Proprietà del gruppo dal menu a comparsa.
Sto usando uno screenshot del sito Web Tuts +. Trascina lo screenshot nel mockup PSD. Sposta il suo livello sopra il livello della schermata del desktop. Per convertire questo livello in un oggetto avanzato, puoi fare una delle tre cose:
Nota: non ridimensionare il livello per adattarlo allo schermo prima di convertirlo in oggetto avanzato.
Ora è possibile ridimensionare l'oggetto avanzato per adattarlo alla larghezza dello schermo del desktop. stampa Comando / Control-T e usa le maniglie per ridimensionare l'immagine. Noterai un sottile segnale visivo quando lavori con un oggetto avanzato: le maniglie di trasformazione su un oggetto avanzato sono solide, mentre le maniglie su un normale livello di pixel sono vuote. Lascia per ora l'oggetto avanzato sospeso nella parte inferiore dello schermo. Se lo desideri, rinomina il livello dell'oggetto avanzato.
Crea un duplicato del livello Oggetto avanzato trascinandolo su Nuovo strato icona nella parte inferiore del pannello Livelli.
Duplica il livello oggetto avanzato trascinandolo sull'icona Nuovo livello.Trascina la copia di Smart Object sopra il livello della schermata del laptop. Come hai fatto prima, usa Trasformazione libera per ridimensionarlo per adattarlo alla larghezza dello schermo del tablet. Ancora una volta, puoi lasciarlo estendere oltre la parte inferiore dello schermo per ora.
Sposta la copia di Smart Object sopra il livello della schermata del laptop.Crea un'altra copia dell'oggetto avanzato e posizionala sopra il livello Schermo tablet. Come prima, ridimensionalo per adattarlo alla larghezza dello schermo del tablet. Non preoccuparti della lunghezza eccessiva.
Ora che tutti gli oggetti intelligenti sono a posto, puoi agganciarli ai rispettivi schermi. Ciò maschererà la parte dell'immagine che si estende oltre la parte inferiore dello schermo, ma in realtà non ritaglia lo screenshot. Innanzitutto, seleziona il livello Oggetto avanzato, quindi fai clic sul menu mobile nel pannello Livelli e scegli Creare maschera di ritaglio. Puoi anche usare la scorciatoia da tastiera, come mostrato.
In alternativa, puoi tenere premuto il tasto Opzione (Alt) chiave e fare clic tra i due livelli. Vedrai il cursore cambiare a doppie cerchi per farti sapere che sei nel posto giusto.
Tenere premuto il tasto Opzione / Alt e fare clic tra i livelli per creare una maschera di ritaglio. Il cursore si trasforma in un'icona a doppio cerchio.Una volta creata la maschera di ritaglio, lo screenshot dovrebbe riempire le dimensioni dello schermo. Vedrai anche che la miniatura del livello si è spostata leggermente a destra e ha una piccola freccia rivolta verso il basso. Ciò indica che il livello dell'oggetto avanzato è "ritagliato" sul livello sottostante. Questo è il motivo per cui abbiamo creato questi livelli di schermo in precedenza.
Ecco il mockup, con tutti gli oggetti intelligenti ritagliati nei rispettivi schermi:
Ora che lo Smart Object e le sue copie sono a posto, è possibile modificare l'immagine su tutti e tre gli schermi modificando l'oggetto Smart originale. Fare doppio clic sulla miniatura Oggetto intelligente da modificare. Vedrai il seguente messaggio. Una volta che si è abituati a lavorare con Smart Objects, è possibile scegliere di disattivare questa finestra di avviso.
L'oggetto avanzato si apre come un file speciale separato. L'estensione del file è .psb:
Per modificare lo Smart Object, ho intenzione di trascinare un altro screenshot sopra quello esistente. Non è necessario appiattire l'immagine, poiché gli oggetti intelligenti possono avere più livelli.
Chiudi e salva il file .psb. Ora il nuovo screenshot apparirà su tutte e tre le schermate. Non è necessario modificare gli altri due livelli Smart Object, poiché ognuno è una copia dell'originale.
Puoi aggiungere o modificare l'immagine tutte le volte che vuoi. È possibile memorizzare diversi screenshot all'interno dei livelli nell'oggetto avanzato, per presentare rapidamente diverse versioni nello stesso documento di Photoshop.
I prototipi di prodotto come questi sono un ottimo modo per presentare diversi progetti a un cliente. Poiché i livelli Smart Object sono copie dell'originale, è possibile aggiornare tutte e tre le schermate contemporaneamente. E poiché è possibile memorizzare più schermate all'interno dei livelli di Smart Object, è possibile conservare tutto in un PSD ben organizzato.
Hai bisogno di alcuni prototipi fatti in modo facile e veloce ma non hai tempo o competenze per Photoshop? Prova Placeit. È un generatore di mockup online che ti consente di portare a termine il lavoro online, quindi non sono richieste competenze di Photoshop. Mockup fotorealistici e reattivi per qualsiasi dispositivo eseguiti in modo rapido ed efficiente.
Apple Watch e iPhone 6 Over Couch
Adolescente Guarda iPhone 6 Mockup e Desktop PC Mockup
Accentsconagua