Ecco tutto quello di cui ha bisogno un utente Photoshop per entrare in Adobe XD

Se sei un utente Photoshop che non ha ancora provato Adobe XD, adesso è un ottimo momento per farlo. Adobe XD non solo ti dà la straordinaria capacità di collegare i tuoi progetti di Photoshop e trasformarli in un’app interattiva e prototipi web, ma il suo design intuitivo rende il lavoro in entrambe le app un flusso di lavoro semplice ed efficace che include anche potenti opzioni per condividere i tuoi progetti e ricevere un feedback. Ecco alcuni semplici passaggi per avere i tuoi file Photoshop in Adobe XD, spiegati da Paul Trani Senior Evangelist Creative Cloud, e alcuni suggerimenti chiave per sfruttare al meglio un flusso di lavoro multi-app che può portare i tuoi progetti a un livello superiore.

Per iniziare: importa i tuoi file PSD in Adobe XD

  1. Scarica Adobe XD o prova la versione di prova gratuita.
  2. Inizia un nuovo design e clicca su File > Apri. Individuare il tuo file .PSD e clicca su Apri.
  3. Adobe XD importerà il tuo file Photoshop, completo di tutti i livelli, effetti, gruppi e maschere in piena fedeltà, permettendoti di manipolare il .PSD in Adobe XD e utilizzarlo per sfondi, icone, ecc.
  4. Usa gli strumenti di Adobe XD per iniziare a progettare la tua app o il tuo sito web. Passa alla modalità prototipo e inizia a collegare gli schermi per creare un prototipo completamente interattivo.
  5. Guarda i tuoi disegni di Photoshop prendere vita come un’app completamente interattiva e prototipi di siti web.

“È semplice come aprire praticamente il PSD direttamente in XD ed entrarci dentro. Una volta che hai la risorsa Photoshop in XD, portala al prototipo, collega tra loro alcuni schermi. Da lì tutti i livelli sono singoli livelli, quindi tutto entra dentro direttamente, bello e pulito”, dice Paul.

Copia e incolla i tuoi disegni di Photoshop in Adobe XD

Se lavori in Photoshop e vuoi portare il tuo design in Adobe XD ancora più rapidamente, puoi semplicemente copiare e incollare il tuo lavoro nell’app. Questo significa che puoi trasferire singoli livelli di un’immagine di Photoshop o l’intero disegno come una singola immagine con tutti gli strati uniti. Ecco i passaggi per copiare e incollare il disegno di Photoshop in Adobe XD:

  1. Usando lo strumento Selezione in Photoshop, seleziona il contenuto che desideri copiare su XD.
  2. Clicca su **Modifica > Copia **in Photoshop per copiare il contenuto nel livello corrente, o seleziona Modifica > Copia Unito per copiare tutto il contenuto, su tutti i livelli, all’interno dell’area selezionata.
  3. Apri Adobe XD e clicca su **Modifica > Incolla **per incollare il tuo livello copiato o il disegno completo in XD come bitmap.

Importa le risorse Photoshop in Adobe XD utilizzando le librerie Creative Cloud

https://blog.adobe.com/media_1869f5f5d8384f4c6d6d9f6b2b4945ec2cd4a8f1.gif

Il modo migliore per lavorare, secondo Paul, è quello di importare i tuoi disegni di Photoshop nella tua Creative Cloud Library e utilizzare la stessa libreria per accedere alle tue risorse in Adobe XD. Ciò non significa solo che puoi facilmente utilizzare le risorse di Photoshop sui tuoi prototipi di app e sito Web in XD, ma puoi anche modificare di nuovo tali risorse in Photoshop e modificarli automaticamente in Adobe XD. Ecco i passaggi per importare le risorse di Photoshop nella tua Creative Cloud Library e accedervi in Adobe XD:

  1. Seleziona il contenuto che desideri importare in Photoshop. Sul lato destro dello schermo, sotto Librerie, clicca sul pulsante +. Assicurati che il grafico sia selezionato e clicca su aggiungi.
  2. In Adobe XD, clicca su File > Apri librerie CC. Clicca e trascina la risorsa Photoshop sul progetto Adobe XD.
  3. Ora stai lavorando con una risorsa collegata. Qualsiasi modifica apportata in Photoshop a quell’asset si rifletterà automaticamente in Adobe XD.

“Il motivo per cui utilizzerei Creative Cloud Libraries è perché è un collegamento. Così posso andare nella mia libreria, fare clic con il tasto destro del mouse su select, modificarlo in Photoshop per modificare lo sfondo, quindi posso tornare a XD dopo averlo ottimizzato. È una connessione live e se hai 15 diverse tavole da disegno rende la vita abbastanza facile”, dice Paul.

Usa Ripeti Griglia per creare rapidamente esperienze multischermo con le risorse di Photoshop

Se lavori molto in Photoshop, probabilmente passi molto tempo ad apportare piccole modifiche a più elementi visivi. Una volta portate tali risorse in Adobe XD, sarai in grado di utilizzare la potente funzionalità Ripeti Griglia per risparmiare tempo. Con Ripeti Griglia, si crea essenzialmente un gruppo di oggetti, che può includere il design di Photoshop. Le modifiche apportate ad una tavola da disegno verranno automaticamente applicate a tutte le altre.

“Quando si tratta di creare un nuovo design, con piccole icone o pulsanti, l’uso di strumenti come Ripeti Griglia è molto semplice. Se devo avere uno schermo con cinque elementi diversi e tutti i tipi di elementi che devono essere uguali per le tavole da disegno, è un sacco da copiare e incollare in Photoshop. In XD è davvero facile creare esperienze coerenti su molte tavole da disegno utilizzando le risorse di Photoshop”, afferma Paul.

Per un tutorial dettagliato su come usare Ripeti Griglia in Adobe XD, controlla il nostro post sul blog Esplorando Ripeti Griglia in Adobe XD, e poi provalo con i tuoi disegni.

Condividi i tuoi prototipi e ottieni un feedback facile sui tuoi progetti di Photoshop

Uno dei principali vantaggi dell’uso di Adobe XD per progettare e creare prototipi interattivi è la possibilità di condividere facilmente le tue creazioni tramite link e ottenere un feedback. Questo può essere efficace anche per raccogliere feedback sui tuoi progetti di Photoshop.

Per iniziare a condividere un prototipo interattivo, dopo averlo creato e collegato insieme alle tavole da disegno, clicca sul pulsante di condivisione nell’angolo in alto a destra di Adobe XD e clicca su Pubblica Prototipo. Da lì, puoi cliccare su **Crea collegamento pubblico **per generare un URL che puoi condividere con altri. Chiunque condivida il collegamento può lasciare commenti ed evidenziare aspetti specifici di un design.

“Se ho quel link e voglio dare un feedback su un disegno di Photoshop, posso bloccare i commenti su alcune parti di ciò che era una volta in Photoshop, nel prototipo di Adobe XD. Il cliente può dire “ehi, rendi questo verde” e in realtà appunta quel commento in alto a sinistra dove devono fare qualcosa di verde. Tutto ciò viene monitorato e quindi è possibile risolverlo come designer (specialmente se tali risorse sono collegate), puoi facilmente tornare in Photoshop e aggiornare il link in un secondo momento”, afferma Paul.

Questo può anche essere un ottimo strumento per lavorare con gli sviluppatori, dato che possono accedere a informazioni di dimensionamento su tutti gli elementi del link.

Tutte le risorse necessarie per avere successo con Adobe XD

Ci sono molti vantaggi nel lavorare in Photoshop e Adobe XD, ma il modo migliore per creare progetti straordinari che si trasformino in impressionanti prototipi di web e app interattivi è utilizzare entrambi strumenti in tandem. Ecco alcune risorse in più per aiutarti ad iniziare ad usare Adobe XD:

“Penso che XD sia abbastanza facile da permettere a qualsiasi utente di Photoshop di prenderlo. Gli strumenti sono davvero semplici. Se conosci Photoshop, conosci XD”, ci dice Paul.

Per le informazioni UX inviate direttamente alla tua casella di posta, registrati per la newsletter di progettazione dell’esperienza di Adobe.

https://blog.adobe.com/media_ef60a83d97e5fa4ed4d35839a8cf5fd0d2177ea9.gif