¿Cómo diseñar una interfaz de usuario móvil con Photoshop? ¿Simplemente dibujo capas y las guardo como PSD

Answer 1

Hay muchas formas de pelar a este gato, y la mayoría, si no todas, son válidas dependiendo de dónde se encuentre en el proceso de diseño. Según tu pregunta, supongo que estás al principio.

La respuesta corta es sí, puedes usar capas en Photoshop y así generar un PSD. Sin embargo, Photoshop no es muy intuitivo como herramienta de diseño. Recomiendo adquirir fluidez en una aplicación vectorial como Adobe Illustrator. Podrá crear, adaptar y pivotar casi en tiempo real, lo que permite un proceso de diseño más natural y fluido. Puede migrar a Photoshop para crear un diseño final si es necesario, pero el arte vectorial que cree en AI será más universalmente útil que el arte de píxeles dependiente de res y, en algunos casos, no necesitará Photoshop en absoluto.

También debe buscar Dribbble en busca de inspiración: la gente de allí colectivamente ha realizado una inmensa cantidad de trabajo preliminar en la mecánica del diseño de la interfaz de usuario y hay toneladas de recursos que se comparten de buena fe. Copie, no robe, y si lo tiene en mente, mejorará rápidamente.

Además, no peles ningún gato real. Ellos odian eso.

Answer 2

codly.io será una buena herramienta para usted, corta su diseño de PHOTOSHOP automáticamente, genera activos para todas las pantallas de aplicaciones, genera automáticamente los componentes de la interfaz de usuario de su aplicación.
organice, exporte el código fuente de la interfaz de usuario y convierta su diseño de Photoshop en un prototipo interactivo que funcione. para que pueda obtener una vista previa de todas las pantallas y obtener comentarios de los clientes sin escribir una sola línea de código.

Answer 3

La mayoría del entorno de desarrollo no toma el archivo PSD como entrada, por lo que la mejor manera es

Diseñe cada gráfico capa por capa.

1. Aplane el fondo y guárdelo como .png o .jpg y úselo en el entorno de desarrollo

2. Puede que tenga que guardar cada capa de primer plano como .png o .jpg y usarla.

.png da mayor claridad, pero al mismo tiempo requiere más memoria, jpg es de otra manera.

Puede perder algunos de los filtros, si los ha utilizado en la tienda de fotos. Puede que tenga que solucionarlo con eso.

Answer 4

¿Móvil para web o aplicación móvil? ¿Quién está produciendo la aplicación? Pregúnteles cómo necesitan los activos de diseño y se lo dirán.