Share
A lo largo de los años, he desarrollado algunos métodos y trucos para mejorar mi productividad y consistencia en el trabajo. Este tutorial cubrirá cómo adoptar el pensamiento modular en su flujo de trabajo, cuando cree interfaces de usuario flexibles y ligeras utilizando Adobe Illustrator CS5 (o superior) junto con algunos recursos gratuitos. Empecemos.
Gridcalculator.dk ofrece las opciones que necesitará para crear fácilmente una cuadrícula flexible. Esto puede ahorrarle tiempo en la experimentación y cálculos..
Las cuadrículas deben estar separadas de los objetos, para que pueda alternar su visibilidad de forma independiente y reutilizarlas mientras diseña varias páginas o pantallas..
Coloque sus guías como las capas superiores de su documento, sobre todo su contenido.
Si su cuadrícula tiene varias columnas, es mejor separarlas en capas independientes o puede que esté demasiado llena. Algunas páginas pueden necesitar cuatro columnas, otras pueden necesitar solo dos. Esto le permite administrar la visibilidad de la red de acuerdo a sus necesidades.
El uso de un navegador completamente escalable será útil para exportar imágenes de alta resolución y para crear diseños con capacidad de respuesta..
Coloque su navegador (s) debajo de todas sus capas de contenido.
Nota: En los archivos adjuntos de este tutorial, puede descargar mi configuración responsiva de Illustrator que incluye versiones vectoriales de Chrome Desktop y Safari Mobile..
Personalización Espacios de trabajo (Ventana> Espacio de trabajo) para adaptarse a sus necesidades personales o de proyecto es crucial para su flujo de trabajo. Sé qué herramientas utilizo con más frecuencia, por lo que cerrar / abrir paneles y mover ventanas es aburrido e improductivo. Actualmente trabajo con tres espacios de trabajo según el tamaño de la pantalla:
El uso de Workspaces es realmente bueno: puedo revertir fácilmente la interfaz a mi configuración predeterminada haciendo clic en Restablecer (nombre de tu Artboard).
Al crear un nuevo documento, deje el Alinear nuevos objetos a la cuadrícula de píxeles desenfrenado. Sí, sin marcar.
Si marca esa opción, algunos elementos de la interfaz de usuario, como el texto delineado (expandido), se distorsionarán y no podrá dibujar algunas formas libremente cuando sus puntos se ajusten constantemente a la cuadrícula de píxeles..
Debe elegir qué objetos deben alinearse con los píxeles seleccionando el Alinear a Pixel Grid opción del Transformar panel.
Nota: Una vez que se aplica Alinear a Pixel Grid a un objeto, no hay manera de revertir el objeto seleccionado al estado original "no alineado". Desmarcar esa casilla no te salvará.
Cuando amplía su imagen por encima del 100%, puede ver los píxeles como si estuviera trabajando con una imagen de mapa de bits. Actívalo yendo a Ver> Vista previa de píxeles. Esto le permitirá detectar qué píxeles podrían causar bordes difusos para que pueda corregirlos sobre la marcha.
Nota: La cuadrícula de píxeles es sensible al origen de la regla (0,0). Mover el origen de la regla cambiará la forma en que Illustrator "rasteriza" la obra de arte. Además, asegúrate de que las coordenadas X e Y de tu objeto estén redondeadas.
Illustrator tiene algunas funciones matemáticas básicas para ajustar objetos dentro de paneles y diálogos. Esto es útil cuando desea agregar (+), restar (-), dividir (/) o multiplicar (*). Estas operaciones se pueden utilizar en objetos, trazos, transparencias y en muchas otras cosas..
Desafortunadamente, solo puedes hacer una operación a la vez. Algo como “260/3 * 2” no es posible.
Por lo general, el mismo componente UI se usa una y otra vez, solo cambiando su tamaño y color. Piense en módulos, planifique con anticipación y construya componentes no destructivos que puedan ser fácilmente reciclables. Evite revisar todas las pantallas para ver si ha olvidado actualizar un elemento. Los símbolos pueden ser muy poderosos cuando están bien..
Cada vez que cambia el símbolo original, esos cambios se reflejan inmediatamente en todas las instancias encontradas en su documento. Esto es especialmente útil para regiones recurrentes, como botones, pies de página, elementos de paginación, navegación, fondos, etc..
Incluso puedes usar símbolos dentro de los símbolos ("combos"). Esto le ahorra tiempo y garantiza la coherencia en toda la interfaz de usuario.
El 9-Slice Scaling es una opción de símbolo avanzada que le permite definir qué áreas de un símbolo no se estirarán al cambiar su tamaño.
Si cambia el ancho de un símbolo sin usar esta función, obtendrá formas deformadas. Esto puede ser especialmente útil para los botones cuando solo necesita estirar un segmento de un símbolo.
Nota: Puede habilitar la escala 9 en un símbolo en cualquier momento. Pero para obtener mejores resultados, asegúrese de marcar la opción de escala 9 cuando cree el símbolo por primera vez.
Los atributos de apariencia no afectan la estructura subyacente de un objeto o grupo de objetos. Es bastante útil usar efectos como esquinas redondeadas o pilas de rellenos de color que se pueden cambiar o eliminar en todo momento.
Hay una manera de crear botones que se adaptan a la longitud de tu texto. Así es como:
Juega un poco con eso. Puede guardar eso como un Estilo grafico para uso futuro.
Nota: Esto solo se recomienda para el cableado ya que la alineación de píxeles es difícil con este método.
Esta es una de las características más subestimadas, pero es muy poderosa. Cada vez que modifica un color global, todos los objetos que usan esa muestra se actualizan. Puedes ajustar al instante docenas de objetos.
Color Groups es un gran ahorro de tiempo cuando se trabaja con enormes combinaciones de colores o varias marcas al mismo tiempo. Al darles nombres claros, facilita la búsqueda y el trabajo desde el mismo archivo..
Si está dispuesto a experimentar, puede descargar paletas y combinaciones de colores de fuentes como Kuler y Colourlovers. Además, juega con el Recolorear ilustraciones Rueda para probar diferentes temas de color: Editar> Editar colores> Volver a colorear ilustraciones.
Los estilos de caracteres se pueden aplicar a cualquier cantidad de texto: desde grandes trozos hasta palabras sueltas. Son más flexibles y superan los estilos de párrafo. Como no estamos realizando trabajos de impresión, solo use estilos de caracteres para garantizar que su tipografía sea consistente.
Debe ordenar su lista de Estilos de caracteres por tamaño: de más grande a más pequeño, por orden de diseño: de arriba a abajo, o alfabéticamente. Esto le ayudará a mantener una mejor jerarquía y buscar fácilmente en su lista.
Afina y reutiliza tus estilos tanto como sea posible para evitar crear demasiadas excepciones. Esto simplificará el desarrollo y mejorará la consistencia..
Cualquier texto sin contexto o relevancia para el tema carece de valor. No te abstraigas de la experiencia real. "Lorem ipsum" te da una forma, pero no te da sentido. Escribir su propia copia para titulares o navegación ayuda a explicar su uso y la valiosa información que pueden proporcionar. Si su sitio o aplicación requiere ingreso de datos, ingrese palabras reales y relevantes. Escriba un nombre real o ciudad.
Cuando usa texto real, descubre problemas que de otra manera podrían pasar desapercibidos: las columnas son demasiado anchas / estrechas, los campos deben ser más grandes / más pequeños, algunas cosas funcionan en un idioma pero no funcionan en otras, etc..
El uso de datos representativos es un buen aviso para el producto final que se va a utilizar..
Con Illustrator no estás limitado a una resolución específica. En un solo documento, y utilizando Artboards, puede simular cómo una UI debe responder a diferentes resoluciones de pantalla y editarlas simultáneamente usando colores globales, símbolos y estilos de caracteres. Incluso con una docena de pantallas diferentes, el archivo seguirá siendo pequeño y fácil de administrar.
Nombra cada mesa de trabajo según el tamaño del dispositivo / pantalla. Esto automáticamente nombrará esas pantallas al guardar. Voy a compartir algunos consejos para guardar y nombrar más en el tutorial..
Nota: En los archivos adjuntos de este tutorial, puede descargar la configuración del ilustrador sensible que se muestra arriba.
Esto le permite ver cómo se ve una sola página en cada tamaño de pantalla y exportar todas las capas (páginas) desde un Artboard seleccionado (tamaño de pantalla) de forma independiente.
La limpieza es realmente importante para mantener sus archivos en buen estado y acelerar el rendimiento. Para lograrlo, usa las opciones integradas de Illustrator..
Windows> Acciones> Eliminar elementos del panel no utilizados
Esta acción pasará automáticamente por cada panel, seleccionará los contenidos que no estén en uso y luego los eliminará en cuestión de segundos..
Esta acción predeterminada no incluye la limpieza de los estilos de caracteres no utilizados. Puede agregar ese paso o puede manualmente Seleccionar todo no utilizado, entonces trátelos.
Si desea deshacerse de los puntos perdidos, los objetos sin pintar y las rutas de texto vacías, así es como:
Cuando use capas, oculte todos los grupos u objetos en el Opciones del panel de capas. Así es como debe verse:
Nombre cada capa con un nombre de página. Asigne números al nombre de cada capa para mantenerlos ordenados cuando se exporten. El uso de mayúsculas y nombres sin espacios a veces los hace fáciles de leer.
Esas 59 capas / páginas pesan solo 2.5 mb (sin imágenes incrustadas), lo que permite un alto rendimiento y tiempos de ahorro muy rápidos.
Para incluir guías de estilo para el desarrollo en sus archivos, debe crear una "subcapa" asociada a cada una de las páginas / capas. Así es como lo haces:
Accentsconagua
GUÍA DE ESTILO Esas guías se mantendrán al tanto de tu contenido y, dado que están ubicadas en una "subcapa", puedes administrar fácilmente su visibilidad..
Al colocar imágenes de mapa de bits., no incrustar ellos en tu archivo Escoger Enlazar en lugar.
Esto disminuirá el tamaño de su archivo, mejorará el rendimiento del ilustrador y le permitirá editar esas imágenes por separado. Illustrator detecta automáticamente cuando un archivo se actualiza.
Si sigue todos los pasos anteriores, sus archivos deben ser livianos. Aunque, si marca Crear archivo compatible con PDF mientras guarda, esto aumentará el tamaño de su archivo y aumentará el tiempo de ahorro. Ya que solo estamos tratando con gráficos de pantalla con múltiples capas y tableros, no hay ninguna ventaja real al dejar esto marcado.
Para un mejor control de las opciones de exportación, descargue este script Multi Exporter. Su uso es bastante sencillo, pero eche un vistazo a la documentación para poder aprovecharla al máximo.
La fragmentación del tamaño / resolución del dispositivo hace que la exportación de activos móviles requiera mucho tiempo. Bueno, los scripts también pueden ayudar con eso. Descarga este script de Illustrator para diseño móvil..
Los activos móviles requerían nombres de archivos específicos dependiendo del sistema operativo. Para seguir sus convenciones de nomenclatura, es más fácil crear archivos de Illustrator separados para cada sistema operativo. Si algunos activos son comunes a las plataformas en las que está trabajando, cree un archivo llamado "común" o lo que más le convenga.
En entornos web y móviles, el rendimiento es clave y cada byte cuenta. Illustrator carece de optimización PNG / JPG, así que use ImageOptim (Mac OS X) después de exportar su contenido.
Nos dirigimos hacia una red ágil y receptiva, donde nuestras IU deben ser inmunes a la densidad de píxeles y consistentes en muchos tamaños diferentes. La escalabilidad infinita es invaluable, y los vectores son una parte importante de la independencia de resolución.
El flujo de trabajo modular de Illustrator resiste la escala y el tiempo y es una opción sólida desde el punto de vista de la productividad y la flexibilidad. Me quedo con eso. Que pasa contigo?
