Come ritagliare ed avere così le risorse immagini che avete creato su Photoshop per passarle al developer?

Ci sono tanti metodi. Vediamoli nel dettaglio:

Genera > Risorse immagine

Photoshop CC ha introdotto una nuova funzionalità tramite la quale andando a rinominare i files con una certa radice verranno riconosciuti e successivamente esportati.

Potete generare risorse di immagini JPEG, PNG o GIF dai contenuti di un livello o gruppo di livelli di un file PSD. Le risorse vengono generate automaticamente quando aggiungete l’estensione di un formato immagine supportato al nome di un livello o gruppo di livelli. Facoltativamente, potete anche specificare i parametri di qualità e dimensione da applicare alle risorse di immagini generate.

Per generare risorse di immagini da questo file PSD, effettuate i passaggi seguenti:

  1. Con il file PSD aperto, selezionate File > Genera > Risorse immagine.
  2. Aggiungete l’estensione del formato desiderato (.jpg, .png o .gif) al nome del livello o gruppo di livelli da cui desiderate generare le risorse di immagini. Ad esempio, modificate il nome dei gruppi di livelli Rounded_rectangles e Ellipses in Rounded_rectangles.jpg e Ellipses.png e quello del livello Ellipse_4 in Ellipse_4.gif.

Un po’ macchinoso, a meno di non prevedere di rinominare ogni file già dall’inizio del proprio lavoro.

Plugin

Utilizzare cutandslice per esportare le risorse su diversi dispositivi in ​​pochi secondi. Migliora il tuo flusso di lavoro semplicemente nominando i tuoi livelli.

Non tutti rinominano i propri layer correttamente. Ma se hai questa disciplina, puoi esportare le tue risorse in pochi secondi. Aggiungi semplicemente alcuni caratteri alla fine dei nomi dei livelli.

Taglia e taglia i tagli e li esporta in formato png tagliando i pixel che non ti servono, o lascia che tu possa specificare la dimensione che desideri. Oppure puoi esportare tutti gli stati dei tuoi pulsanti in un batter d’occhio.

Un design per dominare tutte le risoluzioni

Progettare a piena risoluzione ed esportarlo in diverse dimensioni.

Taglia e tagliami esportare su iPhone e Android, rimuove anche tutti i caratteri non supportati nel nome del file.

Per iPhone design per retina, per Android design per xxhdpi e quindi esportazione in ldpi, mdpi e hdpi con un solo clic.

Come si fa?

Prima di iniziare (è compatibile con cs6 e non oltre)

Alcune cose che dovresti sapere:

  • Devi progettare per la massima risoluzione. Questa è retina per dispositivi Apple e xhdpi per dispositivi Android.
  • Cut & Slice me controlla solo i nomi dei gruppi, per motivi di prestazioni, quindi ripulisci doc e oggetti di gruppo nelle cartelle .
  • Ti consiglio di effettuare il check-in “Strumenti vettoriali a scatto e Trasforma in griglia pixel” nel pannello Preferenze generali.
Come esportare oggetti

Puoi esportare un livello selezionandolo e quindi fai clic su “Taglia selezionato” (funziona con gruppi e livelli).

Oppure puoi esportare tutti i gruppi che vuoi contemporaneamente:

è facile. L’unica cosa che devi fare è includere ‘@’ alla fine di tutti i nomi di gruppi che vuoi esportare, quindi fare clic su ‘Taglia tutte le risorse’.

Non voglio esportare tutto il documento, voglio solo tutte le risorse che ho inserito in un gruppo

Se si fa clic su “Taglia sottogruppi”, Taglia & Slice me esporterà tutti i livelli “@” all’interno di questo gruppo.

Come esportare lo stato dei pulsanti

Devi mettere tutto lo stato dei pulsanti in gruppi diversi e nominarli come segue.

Ho pensato che fosse bello avere un sistema standard per denominare layer / file che dovrebbero essere semantici allo stesso tempo. Questo è il motivo per cui non uso la stessa parola chiave per bottoni cliccabili.

 

cut-and-slice-me dimostrativi-img

Script

Questo script è facile da azionare e permette di salvare i vari formati per Android. Per azionarlo basta andare nel menu di photoshop ed azionare lo script caricandolo anche dal desktop. partire dalla versione più grande xxxhdpi

The script works by duplicating the selected layer (or layergroup) to a new document, then scaling it to each of the 5 most common Android sizes (XXXHDPI, XXHDPI, XHDPI, HDPI, and MDPI) and then placing the files inside a folder next to the PSD.

smart-slices

Quickly slice designs in place and export pixel-perfect image assets at multiple resolutions.

A complete solution for slicing designs in place and exporting pixel-perfect image assets at multiple resolutions in any supported format including SVG.

Sito web

Zeplin

Con Zeplin non dovrete fare più nulla, se non esportare direttamente gli artboard. Il lavoro lo farà tutto lui, generando le risorse immagini e fornendo allo sviluppatore i codici css di ogni icona. Attenti a non nidificare troppo i vostri layers: se colorate un’icona di blu ed applicate contemporaneamente un layer filtro rosso l’icona agli occhi di Zeplin rimarrà blu.

Risultati immagini per zeplin

Retinize It

The best Photoshop actions for preparing designs
for iOS or optimized for Retina-display websites

Si installa come un’azione normale di photoshop e permette di ottenere @1 @2 e @3 di ios.

Asset-studio

A collection of online tools to easily generate assets such as launcher icons for your Android app.

 Android Studio include uno strumento chiamato Image Asset Studio che ti aiuta a generare le tue icone di app da icone di materiali , immagini personalizzate e stringhe di testo. Genera un set di icone alla risoluzione appropriata per ogni densità di schermo generalizzata supportata dalla tua app. Image Asset Studio posiziona le icone appena generate in cartelle specifiche della densità nella res/directory del progetto. Durante il runtime, Android utilizza la risorsa appropriata in base alla densità dello schermo del dispositivo su cui è in esecuzione la tua app.
Risultati immagini per asset-studio

 

bjango

A comprehensive set of app icon templates for Photoshop, Illustrator, Sketch, and Affinity Designer. The templates cover Android, iOS, macOS, Apple TV (tvOS), Apple Watch (watchOS), iMessage, Windows, Windows Phone and web favicons. Where possible, they’re set up to automate exporting final production assets. All free and open source, released under the BSD license.

https://bjango.com/designresources/

RESONATOR

RESONATOR is an extension for collecting, exporting,
and storing graphical resources for various mobile platforms and the web.

Categorie: Articoli

Lascia un commento