Share
Lo que vas a crearEn este punto, es probable que haya descubierto que nosotros aquí en Envato Tuts + tenemos un amor profundo y cada vez mayor por los misterios oscuros que se encuentran más allá de la increíble inmensidad del espacio, por lo que este tutorial seguirá la misma tendencia..
Entonces, si eres como nosotros, ponte el cinturón de seguridad ya que en los siguientes momentos verás lo fácil que es crear una insignia del Observatorio Espacial utilizando las formas más básicas de Illustrator y un par de tratamientos visuales..
Además, siempre puedes expandir tu universo dirigiéndote a Envato Market, donde encontrarás toneladas de ilustraciones inspiradoras en el espacio a la espera de que se haga clic en ellas..
Dicho esto, volvamos a nuestra transmisión regular y comencemos a trabajar en nuestro pequeño proyecto..
Como de costumbre, comience creando un documento nuevo yendo a Archivo> Nuevo o usando el Control-N acceso directo del teclado, y ajústelo usando la misma configuración que se muestra a continuación:
Y desde el Avanzado lengüeta:
Consejo rapido: La mayoría de las configuraciones indicadas pueden activarse configurando el documento Perfil a Web; El único que no se configurará automáticamente es el tamaño, el cual deberás seleccionar manualmente.
Como ya sabrá, Illustrator nos permite aprovechar sus potentes Cuadrícula, que ajustaremos al establecer los valores más bajos posibles, de modo que podamos adherirnos a un "flujo de trabajo de píxel perfecto". Al hacerlo, tomaremos el control total de nuestras formas y nos aseguraremos de que nuestra ilustración se vea lo más nítida posible..
La configuración que nos interesa se puede encontrar en la Edición> Preferencias> Guías y cuadrícula submenú, y se debe ajustar de la siguiente manera:
Consejo rapido: puede aprender más acerca de las cuadrículas personalizadas leyendo este detallado artículo sobre cómo funciona el sistema de cuadrículas de Illustrator..
Una vez que hemos configurado nuestra cuadrícula personalizada, todo lo que tenemos que hacer para asegurarnos de que nuestras formas se vean nítidas es habilitar la Encajar a la cuadricula opción encontrada bajo el Ver menú, que se transformará en Ajustar a Pixel cada vez que entras Vista previa de píxeles modo.
Ahora, dado que nuestro objetivo es crear nuestra ilustración utilizando un flujo de trabajo de "píxel perfecto", te recomiendo que sigas mi tutorial de creación de ilustraciones de píxel perfecto, que te ayudará a ampliar tus habilidades técnicas y ponerte al día. al instante.
En comparación con algunos de los otros proyectos, usaremos un enfoque de una sola capa esta vez, ya que queremos que todas nuestras formas se agrupen en lugar de estar separadas en capas diferentes..
Utilizando la Redondeado Herramienta rectangular, crear un 148 x 188 px forma con un 14 px Radio de esquina que colorearemos usando # 32323a, y luego posicionarlo en el centro de nuestra Mesa de trabajo Con la ayuda de Illustrator's. Alinear panel.
Consejo rapido: al hacer alineaciones a la Mesa de trabajo, siempre asegúrese de que el Alinear hacia opción está configurada para Alinear a Artboard; De lo contrario, tus objetos seleccionados mantendrán las mismas posiciones..
Seleccione la forma que acabamos de crear, y usando la Transformar panel ajusta la redondez de sus dos esquinas inferiores, incrementando individualmente sus valores a un alto 74 px.
Consejo rapido: Si encuentra que no puede ajustar individualmente las esquinas, probablemente tenga la Valores del radio de la esquina del enlace habilitado lo que le impide hacerlo. Esto se puede solucionar fácilmente haciendo clic en el ícono de la pequeña cadena, que ahora debería permitirte ajustar cada esquina sin preocuparte de que se aplique el mismo valor a todos los demás..
Una vez que hayamos terminado de ajustar las esquinas inferiores de nuestra forma principal, tendremos que darle un esquema, lo que haremos usando el Ruta de desvío método.
Primero, seleccione la forma, y luego vaya a Objeto> Ruta> Ruta compensada y entrar 8 px en el primer campo de valor, dejando a todos los demás como están, y luego haga clic en DE ACUERDO.
Consejo rapido: Si nunca ha usado las compensaciones antes, pero desea obtener más información sobre ellas, le recomiendo que siga este tutorial sobre los dos métodos principales para crear íconos de líneas, que le mostrarán todo lo que hay que saber..
Como queremos que el contorno se destaque de nuestra forma de relleno, tendremos que cambiar su color a algo más oscuro (# 1f1e23).
En este punto, tenemos la forma principal de nuestra insignia, pero en lugar de continuar trabajando en su fondo interno, nos centraremos en el observatorio en sí mismo, y volveremos una vez que esté terminado para agregar todos los pequeños detalles..
Si te estás preguntando por qué, la razón es porque necesitamos crear y posicionar todos los otros elementos en relación con el observatorio..
Sí, sé que podríamos haber comenzado con el observatorio en primer lugar, pero quería mostrarle que el proceso creativo no siempre es tan fácil y directo como podría esperarse, en comparación con el de recrear algo utilizando un tutorial..
La primera pieza de la insignia en la que vamos a comenzar a trabajar es el observatorio espacial, que será un proceso bastante sencillo como se verá en los siguientes momentos..
Selecciona el Herramienta Rectangular (M) y crear un 84 x 26 px forma, que colorearemos utilizando # 68514c y luego centrarse en el Mesa de trabajo, Alineando al lado inferior de la forma de relleno principal de la insignia..
Selecciona la forma que acabamos de crear y dale un buen grosor 8 px contorno (# 1f1e23) utilizando la Ruta de desvío método (seleccione> Objeto> Ruta> Ruta de desplazamiento> 8 px).
Consejo rapido: Como puede ver, hemos alineado intencionalmente el segmento marrón con la sección de relleno de la credencial para que sus contornos se superpongan, lo que nos permite utilizar un flujo de trabajo preciso, donde nuestras formas se crean y colocan cuidadosamente.
Con el esquema en su lugar, comience a agregar detalles a la base del observatorio, creando un 84 x 4 px rectángulo que colorearemos usando # 1f1e23 y luego alinear a su lado superior, asegurándose de bajar su Opacidad a 40% hacerla actuar como una sombra.
A continuación, agregue un 84 x 4 px Divisor horizontal que colorearemos utilizando. # 1f1e23 y luego posicionar bajo la sombra que agregamos en el paso anterior.
Añadir otro diluyente. 84 x 2 px divisor# 1f1e23) y colóquelo sobre la sombra, asegurándose de alinear en el centro la nueva forma.
Crea otro 84 x 4 px blanco#FFFFFF) rectángulo que colocaremos debajo del divisor horizontal más grueso, asegurándonos de ajustarlo ajustando su Modo de fusión a Cubrir y bajando su Opacidad nivel para 40%.
A continuación, crea un conjunto de catorce. 2 x 18 px rectángulos# 1f1e23) posicionado 4 px unos de otros, agruparlos (Control-G) y luego colóquelos sobre la sección inferior de la base del observatorio.
Consejo rapido: puede tomar el control total de sus formas y sus posiciones relativas cambiando a Vista previa de píxeles modo (Alt-Control-Y o Ver> Vista previa de píxeles) que le permitirá identificar y mover cada forma utilizando la cuadrícula de píxeles subyacente como sistema de referencia.
Utilizando la Herramienta Rectangular (M) agregue un par de luces verticales a la base del observatorio, asegurándose de establecer su color en blanco (#FFFFFF), su Modo de fusión a Cubrir, y ellos Opacidad a 40%.
Una vez que haya terminado, seleccione todas las formas que forman la base del observatorio y agrúpelas usando el Control-G método abreviado de teclado, para que pueda seleccionarlos y moverlos fácilmente si alguna vez necesita.
Toma el Herramienta Rectangular (M) y crea un 92 x 6 px forma, que colorearemos utilizando # ced0d8 y luego dar un bonito 8 px contorno grueso (# 1f1e23). Coloque los dos hacia la sección superior de la base del observatorio, asegurándose de que los dos contornos se superpongan.
Agrega un 92 x 2 px rectángulo#FFFFFF) hacia la sección superior de la forma gris que acabamos de crear, asegurándose de establecer su Modo de fusión a Cubrir y baja su Opacidad a 60%. Luego agregue dos resaltes verticales debajo de él usando los mismos valores de transparencia, alineando a la derecha con el resaltado más delgado que agregamos al segmento marrón.
A continuación, agregue un 92 x 2 px línea divisoria horizontal (# 1f1e23) en la parte superior de la forma gris, posicionándola hacia su centro.
Termina esta sección del observatorio agregando una pila de seis 112 x 2 px rectángulos redondeados (# 1f1e23) con un 1 px Radio de esquina posicionado 2 px el uno del otro, que agruparemos (Control-G) y posición sobre la forma gris.
Una vez que haya terminado, seleccione y agrupe los elementos del segmento del observatorio actual juntos usando el Control-G atajo de teclado.
Crear un 84 x 4 px rectángulo, el cual colorearemos usando # 706f7a, dar un 8 px contorno grueso (# 1f1e23), y luego colóquelos hacia la sección superior de la forma gris, asegurándose de que sus contornos se superpongan.
Utilizando la Herramienta Rectangular (M) crear un 84 x 2 px forma# 1f1e23), que alinearemos en el centro de la parte superior de la forma de relleno más oscura, y luego la convertiremos en una sombra bajando su Opacidad a 40%.
Dale a esta sección alguna dimensión agregando un 16 x 2 px rectángulo# 1f1e23) hacia su centro, colocándolo justo debajo de la sombra que acabamos de crear.
Como siempre, no olvide seleccionar y agrupar los elementos de las secciones usando el Control-G atajo de teclado.
Toma el Herramienta Elipse (L) y crea un 92 x 92 px circulo (# ced0d8) que ajustaremos seleccionando y quitando su parte inferior punto de anclaje utilizando la Herramienta de selección directa (A) y luego dar lo mismo 8 px contorno grueso (# 1f1e23), colocando las dos formas hacia la sección superior del observatorio.
Cree una copia de la forma de relleno del domo,Control-C> Control-F) (1) y luego agregue un 84 x 84 px círculo (resaltado con rojo) que utilizaremos para crear un recorte con la ayuda de Pioneroes Frente menos Modo de forma (2). Cambia el color de la forma resultante a blanco (#FFFFFF), y luego conviértelo en un punto culminante Modo de fusión a Cubrir y bajando su Opacidad a 60% (3).
Toma el Herramienta Rectangular (M) y crea un 108 x 2 px línea divisoria horizontal (# 1f1e23) que posicionaremos hacia la sección inferior de la cúpula, dejando un espacio vacío de 2 px entre ella y el contorno más grande.
Dado que las secciones laterales de nuestra línea divisoria se extienden completamente fuera de la superficie de contorno de nuestra cúpula, tendremos que crear una copia de la forma de relleno azul-ishControl-C> Control-F) y usar eso como Máscara de recorte (clic derecho> Hacer máscara de recorte).
Consejo rapido: si nunca has usado Máscaras de recorte antes, realmente debería revisar este artículo que habla de las ventajas de usar el Máscara de recorte sobre los modos de forma del pionero.
Agrega un 12 x 54 px rectángulo# 1f1e23) hacia el centro de la cúpula, que actuará como la sección más oscura interior donde se encuentran las lentes y el mecanismo. Asegúrese de alinear la forma con la parte inferior del objeto subyacente, cortándola y pegándola (Control-X> Control-F) dentro de Máscara de recorte que hemos creado para el divisor horizontal.
A continuación, comience a trabajar en las vigas de arco, creando un 8 x 50 px rectángulo redondeado (# 706f7a) con un Radio de esquina de 2 px, que ajustaremos eliminando la redondez de sus esquinas inferiores, y luego le daremos una 8 px contorno (# 1f1e23) utilizando la Ruta de desvío Método, colocando las dos formas hacia el lado izquierdo de la forma que creamos en el paso anterior.
Añadir un par de puntos destacados (color: blanco; Modo de fusión: Cubrir; Opacidad: 20%) y sombras (color: # 1f1e23; Opacidad: 40%) a la viga usando rectángulos básicos, asegurándose de que no se superpongan.
Termina la viga del arco, añadiendo un 12 x 4 rectángulo redondeado (# 1f1e23) con un Radio de esquina de 2 px a su lado izquierdo, superponiéndolo con su contorno, y luego colóquelo justo por encima del divisor horizontal a una distancia de 2 px de eso.
Una vez que haya terminado, seleccione y agrupe todos los elementos de las vigas usando el Control-G atajo de teclado.
Seleccione la viga que acabamos de crear y cree una copia de ella (Control-C> Control-F) que posicionaremos hacia el lado derecho de la cúpula, asegurándonos de reflejarla verticalmente (clic derecho> Transformar> Reflejar> Vertical).
Utilizando la Herramienta Elipse (L) crear un 14 x 14 px círculo, que colorearemos utilizando blanco (#FFFFFF), y la posición hacia el centro de la cúpula en aproximadamente 12 px desde su lado inferior.
Convierte la forma en una lente ajustando su Modo de fusión a Cubrir y bajando su Opacidad a 80%.
Agregue algunos detalles a la lente, agregando un resaltado similar a un anillo (color: blanco; Modo de fusión: Cubrir; Opacidad: 20%), una mitad superior de reflexión (color: blanco; Modo de fusión: Cubrir; Opacidad: 60%), y dos 2 x 2 px círculos como un conjunto de reflexiones más pequeñas (color: blanco; Modo de fusión: Cubrir; Opacidad: 60%, 20%).
Como siempre, no olvide seleccionar y agrupar todas las formas usando la Control-G atajo de teclado.
Termina la cúpula añadiendo dos. 4 x 54 px rectángulos# 1f1e23) uno a cada viga, asegurándose de bajar sus Opacidad a 20% ya que actuarán como sombras.
Una vez que hayas terminado, selecciona todos los elementos de la cúpula y agrúpalos (Control-G).
Utilizando la Herramienta de rectángulo redondeado crear un 12 x 22 px forma# ced0d8) con un Radio de esquina de 6 px, dale un 2 px anillo gruesocolor: blanco; Modo de fusión: Cubrir; Opacidad: 60%) y una 8 px contorno (# 1f1e23), y luego grupo (Control-G) y coloque las formas hacia la sección inferior del observatorio, dejando un 2 px brecha entre ellos y el divisor horizontal.
En este punto, podemos seleccionar todas las diferentes secciones del observatorio y agruparlas usando el Control-G atajo de teclado.
Ahora que hemos terminado de trabajar en el observatorio, debemos enmascarar su sección inferior para que pueda seguir la curvatura de la insignia subyacente..
Para hacer esto, primero seleccione la forma de relleno de la insignia, y cree y pegue una copia (Control-C> Control-F) de eso encima de todo lo demás. Luego, simplemente seleccione el duplicado y el observatorio, clic derecho> Hacer máscara de recorte.
Como puede ver, nuestro observatorio ahora está perfectamente enmascarado, lo que significa que podemos comenzar a trabajar en segundo plano y dar vida a nuestra pequeña insignia..
El primer elemento de nuestro fondo es el paisaje de montaña que dará mucha profundidad a nuestra ilustración, que en este punto es exactamente lo que necesita..
Toma el Herramienta Pluma (P) y, usando el observatorio como su principal punto de referencia, dibuje dos cimas de montañas usando # 9b9ea8 como su color de relleno. Dado que este paso del proceso permite mucha más libertad, tómese su tiempo y sea creativo para que al final se le ocurra algo único..
Una vez que hayas terminado, dale a la forma una 8 px contorno (# 1f1e23), y luego agrupar las dos formas (Control-G), y luego cortarlos y pegarlos (Control-X> Control-F) dentro del observatorio Máscara de recorte, Asegurándose de enviarlos a la parte posterior (clic derecho> Organizar> Enviar al fondo).
Consejo rapido: puedes ingresar fácilmente a Máscara de recorte Al hacer doble clic en los objetos que forman parte de él, o por clic derecho y seleccionando Aislar máscara de recorte seleccionada.
Aísla el paisaje de montaña, y usando el Herramienta Pluma (P) Comience agregando algunas líneas ásperas a cada lado del observatorio, usando # 1f1e23 para las secciones oscuras, y # 9b9ea8 para los más ligeros superpuestos.
Una vez que haya terminado, termine esta sección de la ilustración agregando un par de puntos destacados (color: blanco; Modo de fusión: Cubrir; Opacidad: 40) aquí y allá, asegurándote de colocarlos debajo de las líneas y segmentos que creaste hace un momento.
Consejo rapido: puedes salir fácilmente Modo de aislamiento Una vez que haya terminado de trabajar en una sección específica de su ilustración presionando la tecla Escapar llave o por clic derecho y seleccionando Salir del modo de aislamiento.
Una vez que tengamos nuestro observatorio y el paisaje de montaña, ahora podemos enfocarnos en el poco fondo, y comenzar a agregar pequeños detalles para hacer que la insignia resalte..
Agregue un resalte interno completo a la insignia, seleccionando primero la forma de relleno y creando una copia de la misma (Control-C> Control-F).
A continuación, aplique un desplazamiento de -4 px para ello, que utilizaremos para crear un recorte con la ayuda de Pioneroes Frente menos opción.
Una vez que tengamos nuestra forma deseada, todo lo que tenemos que hacer es ajustar su transparencia cambiando su color a blanco (#FFFFFF) y estableciendo su Modo de fusión a Cubrir mientras baja su Opacidad a 80%, Asegúrate de agruparlo y enviarlo a la parte posterior junto con la insignia..
Utilizando cinco rectángulos concéntricos con diferentes valores de ancho, cree los haces de luz ajustando sus puntos de anclaje y agregando otros nuevos hasta que los vea en diagonal. A continuación, establezca su color en blanco (#FFFFFF) y ajustar su transparencia estableciendo sus Modo de fusión a Luz tenue, y ellos Opacidad para sólo 10%.
Una vez que hemos agregado los haces de luz, ahora podemos crear las sombras superpuestas creadas por el observatorio y las montañas.
Para hacer esto, primero tenemos que seleccionar las formas principales que componen estos elementos, y luego aplicar una Ruta de desplazamiento de 8 px a los que luego cortaremos (Control-X) y pegar (Control-f) dentro de nuestro grupo insignia.
Ya que este no es exactamente el aspecto que buscábamos, primero tendremos que enmascarar las formas utilizando la sección interior del resaltado tipo anillo..
Para hacer esto, simplemente cree una copia del resaltado, péguela en frente de nuestra sombra y luego clic derecho> Liberar ruta compuesta, y seleccione y use la forma central como Máscara de recorte para nuestra sombra, mientras borra la restante..
Todo lo que tenemos que hacer ahora es crear una Forma compuesta Seleccionando nuestra sombra y yendo a Pioneroessubmenú, donde tenemos que hacer clic en Hacer forma compuesta, lo que nos permitirá bajar el Opacidad De las formas que conforman nuestra sombra. 40%, Sin tener áreas superpuestas, se rompe la uniformidad de nuestra transparencia..
Lo último que debemos hacer es agregar las pequeñas estrellas, así que tómate tu tiempo y crea un patrón interesante usando # b2a45f como su color de relleno principal, y una vez que haya terminado, salga del grupo de distintivos, seleccione todos los elementos de la ilustración y agrúpelos usando el Control-G atajo de teclado.
Puede que nos haya llevado algo de tiempo, pero con un poco de paciencia, finalmente hemos logrado crear esta insignia de aspecto impresionante que podemos usar en cualquier proyecto futuro..
Espero que hayas logrado entender y seguir cada paso y, lo más importante, haber aprendido algo nuevo durante el proceso..
Accentsconagua