7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Affinity Designer

Cómo Crear Fondos Coloridos en Affinity Designer para iPad

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

En este tutorial, podrá crear un diseño colorido fondo de pantalla para la pantalla de bloqueo de nuestros iPads con distintas herramientas y funciones de la nueva aplicación de gráficos para iOS, diseñador de afinidad! Diseñador de afinidad para iPad le permite combinar gráficos vectoriales y raster, creando grandes imágenes con todas las características que puede encontrar en un paquete de escritorio similar.

Soy un fan del juego de vídeo de vigilancia contra incendios, que me inspiró a crear esta ilustración. Si eres un amante de la naturaleza salvaje, asegúrese de comprobar PhotoDune algunas referencias adecuadas de montañas y bosques.

¡Agarra su pluma, lápiz o lápiz de Apple y vamos a empezar!

1. Cómo Dibujar un Boceto en Affinity Designer para iPad

Paso 1

Vamos a lanzar la aplicación y crear un Nuevo Documento.

Estoy usando un iPad Pro 9.7'', por lo que el tamaño de mi fondo de pantalla va a ser de 2048 x 1536 px. Si usted está usando otro modelo o quisiera crear fondos para otro dispositivo, usted puede encontrar aquí la resolución de su pantalla.

new documentnew documentnew document

Paso 2

Aquí tenemos un documento en blanco con todas las herramientas del diseñador de afinidad. Toque y mantenga el icono pequeño signo de interrogación en la esquina inferior derecha de la pantalla para ver el nombre de cada herramienta.

Nos a cambiar entre el Vector y Personajes de Píxel en el panel de control superior de la aplicación.

affinity designer tools vectoraffinity designer tools vectoraffinity designer tools vector

Paso 3

Vamos a cambiar a la Persona de Pixel pulsando el icono de Pixel. Usaremos sus herramientas para crear un boceto de nuestro fondo de pantalla de futuro.

affinity designer tools pixelaffinity designer tools pixelaffinity designer tools pixel

Paso 4

Seleccione la Herramienta pincel de pintura y aprovechar el Brushes Studio en la parte derecha de la aplicación para revelarlo. Seleccione Portaminas 4B del grupo Carbón y Lápices y ajuste su configuración en el panel de control en la parte inferior de la pantalla. Toque y sostenga la opción que desee (por ejemplo, Anchura) y a continuación, arrastre el dedo hacia arriba o hacia abajo para cambiar el valor.

Brushes StudioBrushes StudioBrushes Studio

Paso 5

Abrir el Colour Studio y usar la rueda de color para seleccionar el color deseado para el Trazo.

Hacer un bosquejo áspero, prestando atención a la composición. Asegúrese de dejar suficiente espacio para las zonas de la pantalla de bloqueo de tu iPad que muestran la hora y fecha.

Puede utilizar la función de Ocultar Interfaz de Usuario en la parte superior derecha de la pantalla para darte más libertad mientras dibujo.

Pellizque hacia dentro o hacia afuera con dos dedos para acercar y alejar con la ilustración.

Toque con dos dedos para Deshacer y tres dedos para Rehacer las acciones.

Cuando utilice gestos, usted puede notar azul circular destaca bajo los dedos cuando toque y mantenga la pantalla. Esto ayuda a realizar diversas acciones, como diseñador de afinidad utiliza un montón de gestos con los dedos dos y tres para hacer el dibujo y la navegación mucho más fácil.

Aquí está un breve vídeo útil sobre gestos de la página oficial de afinidad.

draw a sketch in affinity designer ipaddraw a sketch in affinity designer ipaddraw a sketch in affinity designer ipad

Paso 6

Puedes crear tu propio dibujo o utilizar éste.

wallpaper sketchwallpaper sketchwallpaper sketch

Paso 7

Una vez que has guardado en tu iPad, toque en el icono de Documento en el panel de control superior del diseñador de afinidad y selecciona la Imagen del lugar para agregar la imagen del Rollo de Cámara.

place image in affinity designerplace image in affinity designerplace image in affinity designer

Paso 8

Abrir el Layers Studio y pulse el icono de plus para crear una Capa Vectorial para nuestro fondo de pantalla de futuro. Toque y sostenga la nueva capa y arrastre hacia abajo, colocando debajo de la Capa de Píxeles que contiene el bosquejo.

A continuación seleccione la capa de píxeles y toque en el icono de opciones de capa (tres puntos en un círculo) sobre el Layers Studio.

Bajar la Opacidad a 50% y ajustar el modo de mezcla a Multiplicar. Esta manera, seremos capaces de dibujar bajo el bosquejo.

adjust layer settingsadjust layer settingsadjust layer settings

2. Cómo Hacer un Firewatch House en Affinity Designer para iPad

Paso 1

Pulse Vector en el panel de control en la parte superior para cambiar a la Persona de Vector y seleccione la Herramienta Rectángulo.

Pulse y arrastre para crear un rectángulo. Use el esbozo como base para averiguar el tamaño correcto de la forma. Llenan de color púrpura oscuro, con la Rueda de Color.

make a rectanglemake a rectanglemake a rectangle

Paso 2

Toque y mantenga presionado el icono de la Herramienta Rectángulo para abrir el menú con todas las formas. Seleccione la Herramienta Triángulo y crear el techo. Cambiar a la Herramienta Mover, pulse la forma creada y arrastrar las esquinas para cambiar el tamaño.

Sugerencia: Toque y mantenga un dedo de la mano opuesta mientras crea la forma para hacerlo incluso (si usted necesita hacer un cuadrado en vez de un rectángulo, un círculo incluso, etcetera.).

También necesitamos para asegurarse de que ambas formas estén alineados correctamente. Con la Herramienta Mover, pulse en un espacio vacío en la lona y mantenga y arrastre para extender el cuadro de selección para cubrir ambas formas. También puede seleccionar varios objetos golpeando a uno de ellos, manteniendo el segundo dedo en un espacio vacío en la pantalla y golpeando otro objeto. Esto añade a la selección.

Abrir el Transform Studio y pulse en Alineación. Seleccione Alinear Horizontalmente hacia el Centro y establecer el objeto clave Seleccionado Primera.

make a roof and align the shapesmake a roof and align the shapesmake a roof and align the shapes

Paso 3

Vamos a añadir algunas ventanas. Utilice la Herramienta Rectángulo para hacer una forma naranja para la primera ventana.

add windowsadd windowsadd windows

Paso 4

Pulse Editar en el panel de control en la parte superior y toque Duplicar. Repita esta acción para añadir más ventanas.

duplicate the windowsduplicate the windowsduplicate the windows

Paso 5

Vamos a utilizar la función de Alineación para distribuir correctamente las formas. Seleccione las ventanas y toque Distribuir Horizontalmente. Toque y mantenga el círculo de la Anchura y arrastre el dedo arriba o abajo el valor del conjunto.

Configurar Alinear Verticalmente hacia Abajo.

align the windowsalign the windowsalign the windows

Paso 6

Mantener las ventanas seleccionadas, pulse Editar > Grupo.

group the objectsgroup the objectsgroup the objects

Paso 7

Utilice la Herramienta Rectángulo para dibujar una raya fina para el soporte del edificio. Seleccione la forma con la Herramienta Mover, toque el círculo blanco en la parte superior del cuadro de selección, mantenga y arrastre para girar un poco la forma. También puede abrir el Transform Studio y utilizar la opción de Rotación hay para ajustar el valor deseado.

Duplicar la forma creada y Voltear Horizontal en el Transform Studio para crear un segundo apoyo.

rotate and flip the objectsrotate and flip the objectsrotate and flip the objects

Paso 8

Añadir más detalles a la construcción de apoyo. Grupo los elementos creados y Duplicar todo el grupo.

Hacer la parte de atrás copia ligeramente más estrecho y hacer su color más ligero, por lo que se ve más lejos.

create support of the buildingcreate support of the buildingcreate support of the building

3. Cómo Dibujar un Bosque en el Affinity Designer para iPad

Paso 1

Ahora vamos a crear el entorno. Agarra la Herramienta Lápiz o utilizar la Herramienta Pluma para crear una silueta del abeto. Estoy usando mi bosquejo como guía al crear un contorno áspero.

Una vez que me siento feliz con la silueta, cambiar a la Herramienta Nodo y usar el panel de control en la parte inferior para manipular los nodos y los tiradores de nodo. Eliminar los puntos innecesarios y haciendo la forma general liso.

Consejo: Cuando utilice la Herramienta Pluma, prueba manteniendo el dedo haciendo una línea, así puede controlar su línea y trabajar con las manijas también.

draw a tree with pencil tooldraw a tree with pencil tooldraw a tree with pencil tool

Paso 2

Abrir el Colour Studio y aplica un relleno de púrpura oscuro para el árbol. Ahora podemos Duplicar para crear un bosque. Una manera más rápida para duplicar cualquier objeto o grupo de objetos es seleccionar con la Herramienta Mover y toque y mantenga en un espacio en blanco en la pantalla con dos dedos mientras se mueve el objeto seleccionado.

apple color and duplicateapple color and duplicateapple color and duplicate

Paso 3

Vamos a agrupar nuestros árboles. Una manera más rápida para hacer esto es abrir el Layers Studio, toque el árbol superior para seleccionarlo y, después el árbol de la parte inferior con dos dedos para seleccionar todas las capas entre estas dos.

También puede deslizar las capas izquierdas o derecha para seleccionar y anular la selección de cada uno de ellos.

Una vez que has seleccionado las capas, pellizcar hacia dentro utilizando dos dedos en el Layers Studio para organizar en un grupo. Usted puede pellizcar hacia fuera para llevar a cabo la acción opuesta.

group the treesgroup the treesgroup the trees

Paso 4

Vamos a crear más copias y cambiar el color de relleno a la luz violeta. Coloque el segundo grupo detrás de la casa de vigilancia contra incendios.

add background treesadd background treesadd background trees

Paso 5

Ahora a llenar la parte inferior de la ilustración, añadiendo al suelo. Estoy utilizando la Herramienta Lápiz para dibujar una forma ondulada a mano alzada. Agregar líneas lisas, que fluye de colores más oscuros y más ligeros para hacer el suelo más texturado.

add the ground with pencil tooladd the ground with pencil tooladd the ground with pencil tool

Paso 6

Ahora vamos a añadir algunas montañas en el fondo. Utilice la Herramienta Triángulo o la Herramienta Pluma para crear la forma principal de la montaña.

Luego tomar la Herramienta Lápiz y dibujar una forma más oscura de la sombra que cubre la mitad izquierda de la montaña.

make a triangle mountainmake a triangle mountainmake a triangle mountain

Paso 7

Vamos a ver cómo nos podemos ocultar las piezas innecesarias de sombra que cruzan los bordes de la montaña.

Cambiar a la Herramienta Mover. Aprovechar la sombra y mantenga y suelte el dedo para abrir el menú contextual. Puntee en Cortar.

Ahora pulse para seleccionar la montaña, abra el panel de Editar y seleccionar Pegar Dentro. La forma de la sombra se colocará dentro de la forma de la montaña, como si dentro de un contenedor. Todavía puede acceder y editar ambas formas en el Layers Studio.

paste inside the objectpaste inside the objectpaste inside the object

Paso 8

Añadir una segunda montaña (sin sombra) detrás de la primera.

Seguir añadiendo montañas más pequeñas en el fondo, haciendo que su color más ligero formar la profundidad de la perspectiva.

add more mountainsadd more mountainsadd more mountains

Paso 9

Utilice la Herramienta Rectángulo para hacer una forma para el cielo. Que sea ligeramente más grande que el lienzo y colocar en la parte inferior del Layers Studio.

make a rectangle for skymake a rectangle for skymake a rectangle for sky

4. Cómo Trabajar Con Gradientes en Gradients in Affinity para iPad

Paso 1

Ahora es momento de cambiar los colores del marcador de posición con una paleta agradable, viva. Puede utilizar la Herramienta de Selector de Color golpeando y arrastrando sobre el lienzo el color deseado y aplicar a la forma seleccionada. Por ejemplo, podría hacerlo si desea elegir los colores de una referencia de la foto.

Como también habrás observado, hay un campo de Colores Rápido en el Colour Studio que mantiene todos sus últimas selecciones.

Para hacer esta ilustración en algunos real eye-candy, he decidido añadir algunos gradientes a los objetos.

Vamos a empezar con el cielo. Toque para seleccionar con la Herramienta Mover y coger la herramienta rellenar. Arrastre para crear un Relleno Degradado. Toque y mantenga otro dedo en la pantalla para hacer el relleno de degradado precisamente vertical u horizontal.

Ajuste los colores del relleno de degradado es muy fácil: sólo toque la punta del círculo del control deslizante y escoger el color deseado en el Colour Studio. Repetir lo mismo para el extremo opuesto de la botella, si es necesario.

Vamos a aplicar un relleno de color amarillo rosáceo al cielo y empezar a recolouring las montañas mediante la aplicación de un relleno lineal de color rosado más oscuro a rosa más claro.

use fill tool for gradient fillsuse fill tool for gradient fillsuse fill tool for gradient fills

Paso 2

Seleccione todas las montañas pequeñas y aplicar el degradado.

Para elegir un relleno de degradado (o la configuración de otro estilo) de un objeto existente, sólo Copiar el objeto y luego seleccione la forma que desea que el estilo que se aplicará a y pulse Editar > Pegar Estilo.

use paste style use paste style use paste style

Paso 3

Vamos a pasar a los árboles de primer plano y aplicar un relleno de púrpura azulado al grupo de objetos, creando una niebla sutil en la parte inferior del bosque. Hacer la parte inferior del grupo detrás de los árboles más ligeros, añadiendo profundidad a la ilustración.

Recolour el terreno, aplicación de colores azul y morados oscuros.

apply fill to the treesapply fill to the treesapply fill to the trees

Paso 4

Ahora vamos a añadir algunos toques finales a un segundo plano. Tomar la Herramienta Elipse, toque y mantenga su dedo, mantenga y arrastre otro dedo para crear un círculo aún para el sol. Colocar detrás de las montañas y la casa de vigilancia contra incendios.

Abrir el Layers Studio y toque en el icono de Opciones de Capa. Ajuste el modo a Aclarar.

make a circle sunmake a circle sunmake a circle sun

Paso 5

Utilice la Herramienta Lápiz para agregar algunas nubes luz, semi transparentes en el cielo.

add clouds with pencil tooladd clouds with pencil tooladd clouds with pencil tool

Paso 6

Vamos a añadir un sutil brillo a las ventanas de la choza. Seleccione el grupo de windows y abra la Capa FX Studio. Golpee el Resplandor Externo para aplicar el efecto y jugar con la configuración en el panel de control del fondo. ¡El color a amarillo brillante, Modo de Mezcla a Pantalla, dejar la Opacidad al 100% y ajuste el Radio a unos 75 y la Intensidad al 20%.

use Layer FX Studio and outer glowuse Layer FX Studio and outer glowuse Layer FX Studio and outer glow

Paso 7

En esta etapa, he decidido simplificar la cresta por la fusión de esos triángulos separados en una forma.

Para ello, seleccione todas las montañas dentro del grupo, pulse Editar y utilizar la operación de Agregar para unir los objetos.

merge shapes with add functionmerge shapes with add functionmerge shapes with add function

5. Cómo Aplicar la Textura en el Affinity Designer para iPad

Paso 1

Vamos a hacer nuestros fondos de pantalla más interesante añadiendo cierta textura.

Cambiar a la Persona de Pixel. Seleccione la Herramienta Pincel y aprovechar el Brushes Studio. Encontrar el conjunto de Grunge de pinceles y seleccione Pincel 2.

Una vez que empezar a dibujar, se creará automáticamente la nueva capa de Píxeles.

use paintbrush tool in pixel personause paintbrush tool in pixel personause paintbrush tool in pixel persona

Paso 2

Selecciona blanco como el color, aumentar el Ancho de su pincel en el panel de control de la parte inferior y hacer unas pocas pinceladas, cubriendo el lienzo entero.

Para hacer la capa de textura más sutil, abrir el Layers Studio y toque en el icono de Opciones de Capa. Establezca el Modo de Mezcla a Pantalla y disminuir la Opacidad a alrededor del 35%.

add texture with a brushadd texture with a brushadd texture with a brush

Paso 3

Podemos hacer la textura más consistente agregar algún grano a nuestra ilustración. Abrir el Layers Studio y seleccionar la capa Vector que contiene todos nuestros objetos. Manteniendo todos los objetos seleccionados, toque en el Colour Studio y mueva el control deslizante de Ruido a alrededor del 5%. Este efecto puede ser aplicado a cada objeto independiente, pero seleccionar todo a la vez es mucho más rápido.

También puede cambiar la cantidad de ruido o eliminar completamente en cualquier momento seleccionando un objeto (o un grupo de objetos) y hacia el regulador de Ruido del 0%.

add noise to the illustrationadd noise to the illustrationadd noise to the illustration

Paso 4

¡Estamos casi allí! Vamos a ver cómo se ve nuestro wallpaper. Alejar pellizcando con dos dedos, o pulse y mantenga presionado el icono de Navigator Studio y arrastrar hacia arriba o hacia abajo para alejar. Otra forma para que su imagen se adapta a la pantalla es abrir el Navigator Studio y doble clic en la miniatura.

Una vez que estés contento con el resultado, pulse Documento en el panel de control en la parte superior y seleccione Exportar.

export your workexport your workexport your work

¡Felicidades! ¡Nuestros Fondos de Pantalla de Vigilancia Contra Incendios para iPad Esta Terminado!

¡Buen trabajo! Espero que hayas descubierto algunos consejos útiles y trucos siguiendo este tutorial y disfrutado de trabajar con Affinity Designer en su iPad!

Ahora puede dibujar cosas impresionantes en cualquier lugar que desee llevando Affinity Designer en su bolso.

¡Que te diviertas!

wallpaper for ipad in affinity designerwallpaper for ipad in affinity designerwallpaper for ipad in affinity designer

¿Haber probado también la versión de escritorio de Affinity Designer? Asegúrese de comprobar hacia fuera estos tutoriales útiles:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.