Spanish (Español) translation by Rosario (you can also view the original English article)
En los siguientes pasos aprenderás a crear una interfaz detallada de un juego de tres en raya con Adobe Illustrator. Para empezar, aprenderás a crear un degradado cónico utilizando un simple rectángulo, un degradado radial y una malla. A continuación, utilizando el panel Apariencia, los efectos Grano de película y Esponja, un pincel artístico incorporado y algunas técnicas básicas de fusión y enmascaramiento, aprenderás a crear una textura sutil. Continuaremos con técnicas básicas de construcción de formas vectoriales y algunos efectos simples de Transformación. A continuación, utilizando más efectos de Transformación junto con el efecto de Extrusión y biselado 3D, el panel Apariencia, la herramienta Fusión y varios estilos gráficos, aprenderás a crear las X y O 3D. Una vez que hayas terminado con las formas 3D, aprenderás a añadir múltiples rellenos, trazos y efectos a un texto sencillo. Finalmente, aprenderás a hacer un segundo diseño más grande para una pantalla más grande.
1. Crea un nuevo documento y configura una cuadrícula
Pulsa Comando + N para crear un Nuevo documento. Introduce 640 en la casilla de anchura y 990 en la de altura y haz clic en el botón Avanzado. Selecciona RGB, Pantalla (72ppi) y asegúrate de que la casilla Alinear nuevos objetos con cuadrícula de píxeles esté desmarcada antes de hacer clic en Aceptar.
Activa la Cuadrícula (Ver > Mostrar cuadrícula) y la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Para empezar necesitarás una cuadrícula cada 10px, así que simplemente ve a Edición > Preferencias > Guías > Cuadrícula, introduce 10 en la casilla Línea de cuadrícula cada y 1 en la casilla Subdivisiones. También deberías abrir el panel de información (Ventana > Información) para obtener una vista previa con el tamaño y la posición de tus formas. No olvides establecer la unidad de medida en píxeles desde Edición > Preferencias > Unidades > Generales. Todas estas opciones aumentarán significativamente tu velocidad de trabajo.
2. Crea un degradado cónico
Paso 1
Selecciona la herramienta Rectángulo (M) y céntrate en tu barra de herramientas. Elimina el color del trazo y luego selecciona el relleno y establece su color en R=29 G=166 B=224. Muévete a tu mesa de trabajo, simplemente crea un cuadrado de 640px y colócalo como se muestra en la siguiente imagen, la opción Ajustar a cuadrícula debería facilitar tu trabajo.
Paso 2
Asegúrate de que tu cuadrado azul sigue seleccionado y haz una copia delante (Control + C > Control + F). Selecciona esta copia y reemplaza el azul con el degradado radial que se muestra en la siguiente imagen. Asegúrate de que esta copia está seleccionada y haz una nueva copia delante. Rellénala con blanco y luego enfócate en el panel Capas y hazla invisible.
Paso 3
Selecciona el cuadrado rellenado con el degradado radial y ve a Objeto > Expandir. Marca el botón Malla de degradado de la ventana Expandir y haz clic en Aceptar. Ve al panel Capas y encontrarás un grupo con una malla y un Trazado de recorte. Elimina el Trazado de recorte y Desagrupa la malla restante (Mayúsculas + Control + G). Toma la herramienta Selección (V), selecciona tu malla y muévela un poco hacia arriba y hacia la izquierda, de manera que se ajuste a la cuadrícula.
Paso 4
Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Selecciona tu malla, toma la herramienta Malla (U) y añade algunos puntos de malla nuevos como se muestra en la siguiente imagen.
Paso 5
Sigue concentrándote en tu malla y escoge la herramienta Selección directa (A). Selecciona los puntos de la malla uno por uno y establece los colores como se muestra en la siguiente imagen.
3. Máscara y adición de textura para el degradado cónicoPaso 1
Paso 1
Concéntrate en el panel Capas y activa la visibilidad de ese cuadrado blanco. Selecciónalo junto con la malla, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad. Al final las cosas deberían verse como en la segunda imagen.
Paso 2
Céntrate en el panel Capas, selecciona el cuadrado azul, llévalo al frente (Mayúsculas + Control + ] ) y céntrate en el panel Apariencia. Primero reemplaza el azul con un simple negro. Asegúrate de que este relleno negro está seleccionado, baja su Opacidad al 5%, cambia el Modo de fusión a Superponer y ve a Efecto > Artístico > Grano de película. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
Vuelve al panel Apariencia y añade un segundo relleno para esta forma utilizando el botón Añadir nuevo relleno (señalado por la pequeña flecha azul en la siguiente imagen). Selecciona este nuevo relleno, asegúrate de que el color es negro, baja su Opacidad al 40%, cambia el Modo de fusión a Superponer y ve a Efecto > Artístico > Esponja. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Añade un trazo de 2 puntos, alinéalo al interior y establece el color en R=219 G=224 B=227. Sigue centrándote en el panel Apariencia y añade un segundo trazo para esta forma utilizando el botón Añadir nuevo trazo (señalado por la pequeña flecha verde en la siguiente imagen). Selecciona este nuevo trazo, hazlo de 1pt de ancho, establece el color en R=113 G=123 B=126 y alinéalo al interior. Asegúrate de que esta forma texturizada sigue seleccionada, abre el panel Estilos gráficos y simplemente pulsa el botón Nuevo estilo gráfico. Haz doble clic en este nuevo Estilo gráfico y simplemente nómbralo "textura".
Paso 3
Asegúrate de que tu forma texturizada sigue seleccionada y haz una copia delante. Selecciona esta copia y simplemente pulsa la tecla D de tu teclado para reemplazar los atributos de Apariencia existentes por los predeterminados (relleno blanco y un trazo negro de 1pt). A continuación, necesitarás un pincel artístico incorporado. Ve al panel Pinceles, abre el menú desplegable y ve a Abrir biblioteca de pinceles > Artístico > Artístico_LápizTizaCarboncillo. Echa un vistazo dentro de este nuevo panel y deberías encontrar el pincel artístico Carboncillo_Variado. Vuelve a seleccionar la forma hecha en este paso y céntrate en el panel Apariencia. Selecciona el trazo, añade el pincel Carboncillo_Variado y establece su color en R=50 G=50 B=50. Asegúrate de que la forma hecha en este paso sigue seleccionada, muévete al panel Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "máscara".
Paso 4
Selecciona de nuevo la forma con el estilo gráfico "máscara" junto con el cuadrado texturizado, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad.
4. Crea los nueve marcos para la "X" y la "0".
Paso 1
Activa la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Para este paso necesitará una cuadrícula cada 5px, así que ve a Edición > Preferencias > Guías y cuadrícula e introduce 5 en la casilla Línea de cuadrícula cada. Usando la herramienta Rectángulo (M), crea un cuadrado de 160px, rellénalo con R=83 G=93 B=96, colócalo como se muestra en la siguiente imagen y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen), haz clic en Aceptar y ve a Objeto > Expandir apariencia. Selecciona el grupo resultante y pulsa Mayúsculas + Control + G tres veces.
Paso 2
Selecciona los nueve cuadrados, añade el pincel Carboncillo_Variado y establece el color en R=50 G=50 B=50. Selecciona estas formas una por una y gíralas al azar como se muestra en la segunda imagen. Una vez que hayas terminado agrúpalas (Control + G). Selecciona este nuevo grupo, baja su Opacidad al 15% y cambia el Modo de fusión a Sobreexposición de color.
Paso 3
Asegúrate de que el grupo con los nueve cuadrados sigue seleccionado y haz una copia delante (Control + C > Control + F). Abre este nuevo grupo, selecciona los nueve cuadrados y sustituye el pincel Carboncillo_Variado por el pincel Tiza - Garabato. Vuelve a seleccionar toda la copia del grupo, cambia el Modo de fusión a Luz suave y aumenta la Opacidad al 50%.
Paso 4
Make sure that the group made in the previous step is still selected and make a copy in front. Ungroup this new group, select the resulting nine squares, remove the art brush from the stroke and set the fill color at R=83 G=93 B=96. Ve al panel Capas y nombra estas formas del "1" al "9" como se muestra en la siguiente imagen.
Paso 5
Céntrate en el cuadrado "1". Selecciónalo, añade un trazo de 1pt, alinéalo al exterior y establece el color en R=103 G=113 B=116. Usando la herramienta Rectángulo (M), crea una forma de 15 x 160px y colócala como se muestra en la segunda imagen. Cambia a la herramienta Selección directa (A) y céntrate en la parte superior de este nuevo rectángulo. Selecciona el punto de anclaje derecho y arrástralo 15px hacia abajo. Una vez que hayas terminado, rellena esta forma con el degradado lineal que se muestra en la siguiente imagen. Asegúrate de que este degradado lineal sigue activo, céntrate en el panel de Muestras y haz clic en el botón Nueva muestra para guardar el degradado. Usando la herramienta Rectángulo (M), crea una forma de 160 x 15px y colócala como se muestra en la cuarta imagen. Cambia a la herramienta Selección directa (A) y céntrate en el lado izquierdo de este nuevo rectángulo. Selecciona el punto de anclaje inferior y arrástralo 15px hacia la derecha. Una vez que hayas terminado, rellena esta forma con el degradado guardado.
Paso 6
Vuelve a seleccionar tu cuadrado "1", haz una copia delante y llévala al frente. Selecciona esta copia, elimina el color del trazo y selecciona el relleno restante. Reemplaza el color existente con el degradado radial que se muestra en la siguiente imagen, baja su Opacidad al 50% y cambia el Modo de fusión a Luz suave. Vuelve al panel Apariencia y añade un segundo relleno para esta forma. Selecciónalo, establece el color en negro, baja su Opacidad a 3%, cambia el Modo de fusión a Superponer y ve a Efecto > Artístico > Grano de película. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar. Asegúrate de que la forma hecha en este paso sigue seleccionada, muévete al panel Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "sombreado".
Paso 7
Vuelve a seleccionar el cuadro "1" junto con las tres formas utilizadas para iluminarlo y agrúpalas (Control + G). Muévete al panel Capas, nombra este nuevo grupo "marcoUno", selecciónalo y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Objeto > Transformar > Reflejar. Marca la casilla Vertical y haz clic en el botón Copiar. Esto debería crear una copia del grupo volteada horizontalmente. Selecciónalo, arrástralo hacia la derecha y colócalo como se muestra en la tercera imagen. Muévete al panel de Capas y nombra este nuevo grupo como "MarcoTres". Siga enfocando el panel Capas y elimine el cuadro "3".
Paso 8
Vuelve a seleccionar los grupos "marcoUno" y "marcoTres" y ve a Objeto > Transformar > Reflejar. Marca la casilla Horizontal y haz clic en el botón Copiar. Arrastra los grupos resultantes hacia abajo y colócalos como se muestra en la tercera imagen. Nombra estos nuevos grupos "MarcoSiete" y "MarcoNueve" y luego ve al panel Capas y elimina los cuadrados "7" y "9".
Paso 9
Concéntrate en el cuadro "2". Selecciónalo, añade un trazo de 1pt, alinéalo al exterior y establece el color en R=103 G=113 B=116. Usando la herramienta Rectángulo (M), crea dos formas de 10 x 160px y colócalas como se muestra en la segunda imagen. Cambia a la herramienta Selección directa (A) y céntrate en la parte superior del rectángulo izquierdo. Selecciona el punto de anclaje derecho y arrástralo 15px hacia abajo. Mueve el rectángulo derecho, céntrate en la parte superior, selecciona el punto de anclaje izquierdo y arrástralo 15px hacia abajo. Una vez que hayas terminado, rellena ambas formas con el degradado guardado. Vuelve a seleccionar la herramienta Rectángulo (M), crea una forma de 160 x 15px y colócala como se muestra en la cuarta imagen. Cambia a la herramienta Selección directa (A) y céntrate en la parte inferior de este nuevo rectángulo. Selecciona el punto de anclaje izquierdo y arrástralo 15px hacia la derecha, luego selecciona el punto de anclaje derecho y arrástralo 15px hacia la izquierda. Una vez que hayas terminado, rellena esta forma con el degradado guardado.
Paso 10
Vuelve a seleccionar tu cuadrado "2", haz una copia delante y llévala al frente. Selecciona esta copia, añade el estilo gráfico "sombreado" y céntrate en el panel Apariencia. Selecciona el relleno inferior y ajusta la posición del degradado radial existente como se muestra en la siguiente imagen.
Paso 11
Vuelve a seleccionar el cuadrado "2" junto con las cuatro formas utilizadas para iluminarlo y agrúpalas (Control + G). Desplázate al panel Capas, nombra este nuevo grupo "cuadroDos", selecciónalo y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Objeto > Transformar > Reflejar. Marca la casilla Horizontal y haz clic en el botón Copiar. Esto debería crear una copia del grupo volteada verticalmente. Selecciónala, arrástrala hacia abajo y colócala como se muestra en la tercera imagen. Muévete al panel Capas y nombra este nuevo grupo como "MarcoOcho". No te olvides de quitar el cuadrado "8".
Paso 12
Vuelve a seleccionar los grupos "CuadroDos" y "CuadroOcho" y ve a Objeto > Transformar > Rotar. Introduce un ángulo de 90 grados y haz clic en el botón Copiar. Una vez que hayas terminado, ve al panel Capas. Nombra el nuevo grupo de la izquierda "marcoCuatro" y el otro nuevo grupo "marcoSeis" y luego borra los cuadrados "4" y "6".
Paso 13
Concéntrate en el cuadrado "5". Selecciónalo, añade un trazo de 1pt, alinéalo al exterior y establece el color en R=103 G=113 B=116. Usando la herramienta Rectángulo (M), crea dos formas de 10 x 160px y colócalas como se muestra en la segunda imagen. Cambia a la herramienta Selección directa (A) y céntrate en el lado derecho del rectángulo izquierdo. Selecciona el punto de anclaje superior y arrástralo 10px hacia abajo, luego selecciona el punto de anclaje inferior y arrástralo 10px hacia arriba. Muévete al rectángulo de la derecha y enfócate en su lado izquierdo. Selecciona el punto de anclaje superior y arrástralo 10px hacia abajo, luego selecciona el punto de anclaje inferior y arrástralo 10px hacia arriba. Una vez que hayas terminado, rellena ambas formas con tu degradado guardado.
Vuelve a seleccionar la herramienta Rectángulo (M), crea dos formas de 160 x 10px y colócalas como se muestra en la cuarta imagen. Cambia a la herramienta de Selección directa (A) y céntrate en la parte inferior del rectángulo superior. Selecciona el punto de anclaje izquierdo y arrástralo 10px hacia la derecha, luego selecciona el punto de anclaje derecho y arrástralo 10px hacia la izquierda. Desplázate hasta el rectángulo inferior y enfócate en su parte superior. Selecciona el punto de anclaje izquierdo y arrástralo 10px hacia la derecha, luego selecciona el punto de anclaje derecho y arrástralo 10px hacia la izquierda. Una vez que hayas terminado, rellena ambas formas con el degradado guardado.
Paso 14
Vuelve a seleccionar tu cuadrado "5", haz una copia delante y llévala al frente. Selecciona esta copia, añade el estilo gráfico "sombreado" y céntrate en el panel Apariencia. Selecciona el relleno inferior y ajusta la posición de ese degradado radial como se muestra en la siguiente imagen. Vuelve a seleccionar el cuadrado "5" junto con las formas utilizadas para iluminarlo y agrúpalas (Control + G). Desplázate al panel Capas, nombra este nuevo grupo "marcoCinco", selecciónalo y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
Paso 15
Selecciona los nueve grupos de marcos junto con los dos grupos con los nueve cuadrados (con pinceles artísticos) y agrúpalos (Control + G). Muévete al panel de Capas y simplemente nombra este nuevo grupo como "Marcos".
5. Crea las X 3D
Paso 1
Concéntrate en "marcoUno" y elige la herramienta Rectángulo (M). Crea una forma de 25 x 115px, rellénala con R=39 G=170 B=225 y colócala como se muestra en la primera imagen. Asegúrate de que este rectángulo azul está seleccionado y ve a Objeto > Transformar > Rotar. Introduce un ángulo de 90 grados y haz clic en el botón Copiar. Selecciona ambos rectángulos azules y haz clic en el botón Unir del panel Buscatrazos. Selecciona la forma resultante y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 12,5px, haz clic en Aceptar y ve a Objeto > Transformar > Rotar. Introduce un ángulo de 45 grados y haz clic en Aceptar. Mueve un poco esta forma azul y colócala como se muestra en la cuarta imagen.
Paso 2
Asegúrate de que la forma azul sigue seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen), haz clic en Aceptar y ve a Efecto > 3D > Extrusión y biselado. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar. Asegúrate de marcar la casilla Dibujar caras ocultas.
Paso 3
Asegúrate de que tus formas azules siguen seleccionadas y ve a Objeto > Expandir apariencia. Selecciona los grupos de formas resultantes y pulsa Mayúsculas + Control + G tres veces para Desagrupar todos esos grupos. Echa un vistazo dentro de tu panel Capas y encontrarás un montón de formas azules.
Paso 4
Elige la herramienta Selección (V), selecciona las nueve formas "X" superiores y agrúpalas (Control + G). Asegúrate de que este nuevo grupo está seleccionado y reemplaza el azul con R=142 G=150 B=155. Ve al panel Capas y haz que este grupo sea invisible.
Paso 5
Elige la herramienta Selección (V), selecciona las otras nueve formas "X" y agrúpalas (Control + G). Asegúrate de que este nuevo grupo está seleccionado y reemplaza el azul con R=72 G=80 B=85. Muévete al panel Capas, arrastra este nuevo grupo por debajo del invisible y hazlo invisible.
Paso 6
Enfócate en las formas azules restantes. Selecciona una de esas formas y ve a Seleccionar > Mismo > Apariencia (que seleccionará todas las formas azules) y luego simplemente pulsa la tecla Suprimir de tu teclado. Enfócate en el panel Capas, activa la visibilidad de los dos grupos con las formas "X" y luego Desagrúpalos (Mayús + Control + G).
Paso 7
Céntrate en el "marcoUno". Selecciona la forma "X" más oscura y haz una copia en la parte posterior (Control + C > Control + B). Asegúrate de que esta copia permanezca seleccionada y céntrate en el panel Apariencia. Elimina el color del relleno, añade un trazo de 2 puntos y selecciónalo. Establece el color en negro, baja su Opacidad al 10% y cambia el Modo de fusión a Luz suave. Sigue concentrándote en el panel Apariencia y añade un segundo trazo para esta forma. Selecciónalo, asegúrate de que el color sea negro, hazlo de 4 puntos de ancho, baja su Opacidad al 5% y cambia el Modo de fusión a Luz suave. Asegúrate de que la forma hecha en este paso sigue seleccionada, ve al panel de Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "detrás".
Paso 8
Sigue concentrándote en el "marcoUno". Selecciona la forma "X" superior y haz una copia delante (Control + C > Control + F). Asegúrate de que esta copia permanece seleccionada, céntrate en el panel Apariencia y añade un segundo relleno. Selecciónalo, establece el color en blanco, cambia su Modo de fusión a Superponer y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px, haz clic en Aceptar y vuelve al panel Apariencia. Añade un tercer relleno y selecciónalo. Usa el degradado radial que se muestra en la siguiente imagen y luego ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px, haz clic en Aceptar y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Efecto > Estilizar > Resplandor interior. Introduce los atributos que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Añade un trazo de 1pt, alinéalo al interior, establece el color en R=102 G=110 B=115 y baja su Opacidad al 15%.
Paso 9
Asegúrate de que la forma "X" superior sigue seleccionada, céntrate en el panel Apariencia, añade un nuevo relleno y selecciónalo. Usa el degradado radial mostrado en la primera imagen, baja su Opacidad al 70% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px y haz clic en Aceptar. Vuelve al panel Apariencia y añade un nuevo relleno para esta forma. Usa el degradado radial mostrado en la segunda imagen, baja su Opacidad al 10%, cambia el Modo de fusión a Superponer y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px y haz clic en Aceptar. Vuelve al panel Apariencia y añade un último relleno y selecciónalo. Usa el degradado lineal mostrado en la tercera imagen, baja su Opacidad al 25%, cambia el Modo de fusión a Superponer y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -2px y haz clic en Aceptar. Asegúrate de que la forma editada en este paso sigue seleccionada, muévete al panel de Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "frenteGris".
Paso 10
Enfócate en tu barra de herramientas y haz doble clic en la herramienta Fusión (o ve a Objeto > Fusión > Opciones de fusión). Selecciona Pasos especificados en el menú desplegable, introduce 25 en la casilla blanca y haz clic en Aceptar. Enfócate en "marcoUno", selecciona las dos formas "X" originales (las que tienen un solo relleno) y pulsa Alt + Control + B. Al final las cosas deberían verse como en la segunda imagen. Ve al panel Capas, selecciona esta nueva fusión y añade los tres efectos de Sombra paralela que se muestran en la siguiente imagen. Asegúrate de que la fusión sigue seleccionada, muévete al panel de Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "fusiónSombra". Vuelve a tu mesa de trabajo, selecciona de nuevo la fusión junto con las dos formas "X" utilizadas para resaltarla y agrúpalas (Control + G). Muévete al panel Capas y nombra este nuevo grupo como "X1".
Paso 11
A continuación, tienes que repetir las técnicas utilizadas para "X1" para el resto de las formas "X". El proceso debería ser más rápido ahora que tiene esos estilos gráficos guardados. Éstas son las cosas rápidas que necesita hacer. Enfócate en "marcoDos", selecciona la forma "X" más oscura y haz una copia en la parte de atrás (Control + C > Control + B). Selecciona esta copia y añade el estilo gráfico "detrás". Vuelve a tu mesa de trabajo, selecciona la forma "X" superior y haz una copia delante (Control + C > Control + F). Selecciona esta nueva copia y añade el estilo gráfico "frenteGris". Vuelve al panel Capas, céntrate en "marcoDos", selecciona las dos formas "X" originales (las que tienen un solo relleno), pulsa Alt + Control + B y añade el estilo gráfico "fusiónSombra" a la fusión recién creada. Selecciona esta nueva fusión junto con las dos copias hechas en este paso y agrúpalas (Control + G). Ve al panel de capas y nombra este nuevo grupo como "X2". Continúa con el resto de las formas "X" y repite estas técnicas. Una vez que hayas terminado, selecciona los nueve grupos de "X" y agrúpalos (Control + G). Pasa al panel Capas y nombra este nuevo grupo como "XGris".
Paso 12
Selecciona el grupo "XGris", haz una copia delante (Control + C > Control + F) y céntrate en el panel Capas. Desactiva la visibilidad del grupo "XGris" original, nombra la copia del grupo "XAmarillo" y ábrela. Selecciona una de las formas "X" con un relleno de R=72 G=80 B=85, ve a Seleccionar > Mismo > Apariencia y sustituye el R=72 G=80 B=85 por R=192 G=108 B=13.
Paso 13
Sigue concentrándote en el grupo "XAmarillo". Selecciona una de las formas "X" con un relleno de R=142 G=150 B=155, ve a Seleccionar > Mismo > Apariencia y reemplaza el R=142 G=150 B=155 con R=249 G=174 B=53.
Paso 14
Sigue concentrándote en el grupo "XAmarillo". Selecciona una de las formas "X" con el estilo gráfico "frenteGris" y sustituye los atributos de Apariencia existentes por los que se muestran en la siguiente imagen. Asegúrate de que esta forma amarilla sigue seleccionada, muévete al panel de Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "frenteAmarillo".
Paso 15
Selecciona las ocho formas "X" restantes con el estilo gráfico "frenteGris" y sustitúyelo por el estilo gráfico "frenteAmarillo". Una vez que hayas terminado, desactiva la visibilidad de tu grupo "XAmarillo".
6. Crea los 0's 3D
Paso 1
Con la herramienta Elipse (L), crea un círculo de 100px y colócalo como se muestra en la primera imagen. Rellénalo con ninguno, pero añade un trazo de 25pt de grosor, alinéalo al interior y establece el color en R=29 G=166 B=224.
Paso 2
Asegúrate de que tu círculo de 100px sigue seleccionado y añade los efectos Transformar y Extrusión y biselado 3D.
Paso 3
Asegúrate de que tu forma azul sigue seleccionada y ve a Objeto > Expandir apariencia. Selecciona los grupos de formas resultantes y pulsa Mayúsculas + Control + G tres veces para Desagrupar todos esos grupos. Ahora, enfócate en las formas azules resultantes y simplemente repite las técnicas utilizadas para las formas "X". Elimina las formas azules no deseadas y vuelve a colorear las formas "O" superiores e inferiores.
Paso 4
Céntrate en estas formas "O", aplica las mismas técnicas utilizadas para las formas "X" y asegúrate de utilizar los estilos gráficos guardados para facilitar tu trabajo. No olvides agrupar, nombrar y organizar estas formas. Deberías tener un grupo principal llamado "OGris".
Paso 5
Duplica tu grupo "OGris" y nombra el nuevo grupo "OAmarillo". Abre este nuevo grupo y hazlo amarillo utilizando el estilo gráfico "frenteAmarillo" y las técnicas de recoloreado utilizadas para el grupo amarillo "XAmarillo".
7. Crea el marco del menú
Paso 1
Con la herramienta Rectángulo (M), crea un cuadrado de 550px, rellénalo con R=83 G=93 B=96 y colócalo como se muestra en la primera imagen. Asegúrate de que esta nueva forma permanece seleccionada, céntrate en el panel Apariencia y añade dos trazos. Selecciona el de abajo, hazlo de 1pt de ancho, pon el color R=103 G=113 B=116 y alinéalo al exterior. Muévete al trazo superior, hazlo de 11pt de ancho, alinéalo al interior y establece el color en R=78 G=88 B=91.
Paso 2
Con la herramienta Rectángulo (M), crea dos formas de 15 x 550px y colócalas como se muestra en la primera imagen. Cambia a la herramienta Selección directa (A) y céntrate en el lado derecho del rectángulo izquierdo. Selecciona el punto de anclaje superior y arrástralo 15px hacia abajo, luego selecciona el punto de anclaje inferior y arrástralo 15px hacia arriba. Muévete al rectángulo de la derecha y enfócate en su lado izquierdo. Selecciona el punto de anclaje superior y arrástralo 15px hacia abajo, luego selecciona el punto de anclaje inferior y arrástralo 15px hacia arriba. Una vez que hayas terminado, rellena ambas formas con el degradado guardado.
Paso 3
Usando la herramienta Rectángulo (M), crea dos formas de 550 x 15px y colócalas como se muestra en la primera imagen. Cambia a la herramienta Selección directa (A) y céntrate en la parte inferior del rectángulo superior. Selecciona el punto de anclaje izquierdo y arrástralo 15px hacia la derecha, luego selecciona el punto de anclaje derecho y arrástralo 15px hacia la izquierda. Desplázate hasta el rectángulo inferior y enfócate en su parte superior. Selecciona el punto de anclaje izquierdo y arrástralo 15px hacia la derecha, luego selecciona el punto de anclaje derecho y arrástralo 15px hacia la izquierda. Una vez que hayas terminado, rellena ambas formas con el degradado guardado.
Paso 4
Vuelve a seleccionar tu cuadrado de 550px, haz una copia delante y llévala al frente. Selecciona esta copia, añade el estilo gráfico "sombreado" y céntrate en el panel Apariencia. Selecciona el relleno inferior y ajusta la posición del degradado radial existente como se muestra en la siguiente imagen. Selecciona esta nueva forma junto con el cuadrado de 550px y las cuatro formas trapezoidales y agrúpalas (Control + G). Selecciona este nuevo grupo y nómbralo "marco".
8. Crea el menú y el texto de la pantalla final
Paso 1
Usando la herramienta Texto (T) añade los fragmentos de texto "JUGAR", "PUNTUACIÓN" y " LOGROS " como se muestra en la siguiente imagen. Utiliza la fuente "American Purpose" con el tamaño fijado en 56pt y el color en negro.
Paso 2
Selecciona uno de tus fragmentos de texto, enfócate en el panel de Apariencia y simplemente Añade un nuevo relleno usando el mismo botón de Añadir nuevo relleno. Selecciona este nuevo relleno y establece el color en R=142 G=150 B=155. Añade un segundo relleno para este fragmento de texto, establece el color en blanco, cambia su Modo de fusión a Superponer y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px y haz clic en Aceptar. Vuelve al panel Apariencia y añade un tercer relleno para esta forma. Selecciónalo, utiliza el degradado lineal izquierdo que se muestra en la siguiente imagen, y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px, haz clic en Aceptar y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Asegúrate de que el relleno superior está seleccionado y pulsa el botón Duplicar elemento seleccionado para añadir una copia del relleno seleccionado. Selecciona este nuevo relleno, sustituye el degradado lineal existente por el que se muestra en la siguiente imagen, baja su Opacidad al 75% y cambia el Modo de fusión a Luz suave.
Vuelve al panel Apariencia, añade un nuevo relleno, hazlo negro, arrástralo en la parte inferior del panel Apariencia, baja su Opacidad al 5% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 1px y haz clic en Aceptar. Añade un segundo relleno negro para este fragmento de texto, arrástralo a la parte inferior del panel Apariencia, baja su Opacidad al 10% y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Añade un último relleno negro y arrástralo a la parte inferior del panel Apariencia. Baja su Opacidad al 10% y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Efecto > Desenfocar > Desenfoque gaussiano. Introduce un radio de 2px, haz clic en Aceptar y echa un vistazo final dentro del panel Apariencia. Simplemente añade un trazo de 1pt, alinéalo al interior y establece el color en R=102 G=110 B=115. Asegúrate de que este fragmento de texto sigue seleccionado, pasa al panel Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "grisTexto".
Paso 3
Selecciona los otros dos fragmentos de texto y añade el estilo gráfico "grisTexto". Selecciona los tres fragmentos de texto y agrúpalos (Control + G). Ve al panel Capas y nombra este nuevo grupo como "menú".
Paso 4
Duplica el grupo hecho en el paso anterior. Ve al panel Capas y nombra a este nuevo grupo "menuHover". Selecciona el fragmento de texto dentro de este nuevo grupo, céntrate en el panel Apariencia y sustituye los atributos existentes por los que se muestran en la siguiente imagen. Asegúrate de que uno de estos fragmentos de texto amarillos sigue seleccionado, muévete al panel de Estilos gráficos, guarda un nuevo estilo gráfico y nómbralo "amarilloTexto".
Paso 5
Utilizando la herramienta Texto (T), añade cuatro nuevos fragmentos de texto y utiliza el mismo color y los mismos atributos de Carácter.
Paso 6
Selecciona estos nuevos fragmentos de texto, añade el estilo gráfico "grisTexto" y agrúpalos (Control + G). Muévete al panel Capas y nombra este nuevo grupo como "pantallaFinal".
Paso 7
Duplica tu grupo "pantallaFinal". Ve al panel Capas y nombra este nuevo grupo "pantallaFinalHover". Selecciona el fragmento de texto dentro de este nuevo grupo y añade el estilo gráfico "amarilloTexto".
Paso 8
Vuelve a seleccionar los cuatro grupos con los fragmentos de texto junto con el grupo "marco" y agrúpalos (Control + G). Desplázate al panel Capas y nombra este nuevo grupo como "menúYPantallaFinal". Ahora, céntrate en el panel Capas y asegúrate de que todos tus grupos son visibles. Selecciona todos los grupos, las formas y la malla creada hasta ahora y agrúpalos (Control + G). Muévete al panel Capas y nombra este nuevo grupo como "principal".
9. Crea un motivo simple
Paso 1
Para este paso necesitarás una cuadrícula cada 1px, así que ve a Edición > Preferencias > Guías y cuadrícula e introduce 1 en la casilla Línea de cuadrícula cada. Usando la herramienta Rectángulo (M), crea una forma de 2 x1px y rellénala con R=237 G=28 B=36. Continúa con la herramienta Rectángulo (M), crea un cuadrado de 1px, rellénalo de negro y colócalo como se muestra en la segunda imagen. Vuelve a seleccionar el rectángulo rojo y elimina el color del relleno. Selecciona las dos formas hechas en este paso y arrástralas dentro del panel Muestras para guardarlas como motivo. Una vez que tengas tu motivo puedes eliminar esos pequeños rectángulos de tu mesa de trabajo.
Paso 2
Vuelve a "cuadricular cada 5px", para ello sólo tienes que ir a Edición > Preferencias > Guías y cuadrícula e introducir 5 en la casilla Línea de cuadrícula cada. Usando la herramienta Rectángulo (M), crea una forma de 640 x 15px, rellénala con el degradado lineal que se muestra en la siguiente imagen y colócala encima de tu grupo "principal" como se muestra en la siguiente imagen. Añade un segundo relleno para este rectángulo delgado, baja tu Opacidad al 40%, cambia el Modo de fusión a Luz suave y utiliza ese motivo guardado. Ve al panel Capas y nombra este rectángulo oscuro como "divisor". Duplica tu "divisor", selecciona la copia, arrástrala hacia abajo y colócala debajo del grupo "principal" como se muestra en la siguiente imagen.
10. Crea la barra de puntuación
Paso 1
Enfócate en el panel Capas, abre tu grupo "principal" y duplica la malla existente. Selecciona esta copia, arrástrala fuera del grupo (en la parte superior del panel Capas), abre el menú desplegable del panel Transparencia y ve a Soltar máscara de opacidad. Elimina el rectángulo blanco resultante y selecciona la malla. Arrástrala hacia arriba y colócala aproximadamente como se muestra en la primera imagen. Con la herramienta Rectángulo (M), crea una forma de 640 x 220px, rellénala de blanco y colócala como se muestra en la segunda imagen. Selecciona este rectángulo blanco junto con la nueva malla, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad. Al final las cosas deberían verse como en la tercera imagen.
Paso 2
Con la herramienta Rectángulo (M), crea una nueva forma de 640 x 220px, colócala como se muestra en la primera imagen y simplemente añade el estilo gráfico "textura". Duplica este nuevo rectángulo, selecciona la copia y añade el estilo gráfico "máscara". Vuelve a seleccionar los dos rectángulos hechos en este paso, abre el menú desplegable del panel de Transparencia y ve a Crear máscara de opacidad.
Paso 3
Con la herramienta Rectángulo (M), crea un cuadrado de 105px, rellénalo con R=83 G=93 B=96 y colócalo como se muestra en la siguiente imagen. Añade un trazo de 1pt para esta nueva forma, alinéalo al exterior y establece el color en R=103 G=113 B=116.
Paso 4
Usando la herramienta Rectángulo (M), crea una forma de 15 x 105px y colócala como se muestra en la primera imagen. Cambia a la herramienta Selección directa (A) y céntrate en la parte superior de este nuevo rectángulo. Selecciona el punto de anclaje derecho y arrástralo 10px hacia abajo. Una vez que hayas terminado, rellena esta forma con tu degradado guardado. Asegúrate de que la herramienta Rectángulo (M) sigue activa, crea una forma de 105 x 10px y colócala como se muestra en la tercera imagen. Cambia a la herramienta Selección directa (A) y céntrate en el lado izquierdo de este nuevo rectángulo. Selecciona el punto de anclaje inferior y arrástralo 15px hacia la derecha. Una vez que hayas terminado, rellena esta forma con el degradado guardado. Vuelve a seleccionar tu cuadrado de 105px, haz una copia delante y llévala al frente. Selecciona esta copia, añade el estilo gráfico "sombreado" y céntrate en el panel Apariencia. Selecciona el relleno inferior y ajusta la posición del degradado radial existente como se muestra en la siguiente imagen.
Paso 5
Paso 5Vuelve a seleccionar el cuadrado de 105px junto con las tres formas utilizadas para iluminarlo y agrúpalas (Control + G). Ve al panel de Capas y nombra este nuevo grupo como "marcoIzquierdo". Selecciónalo y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Objeto > Transformar > Reflejar. Marca la casilla Vertical y haz clic en el botón Copiar. Selecciona la copia del grupo volteado resultante, arrástrala hacia la derecha y colócala como se muestra en la tercera imagen. Ve al panel Capas y nombra a este nuevo grupo "marcoDerecho".
Paso 6
Enfócate en "marcoIzquierdo" y elige la herramienta Rectángulo (M). Crea una forma de 15 x 65px, rellénala con R=39 G=170 B=225 y colócala como se muestra en la primera imagen. Asegúrate de que este rectángulo azul está seleccionado y ve a Objeto > Transformar > Rotar. Introduce un ángulo de 90 grados y haz clic en el botón Copiar. Selecciona ambos rectángulos azules y haz clic en el botón Unir del panel Buscatrazos. Selecciona la forma resultante y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 7,5px, haz clic en Aceptar y ve a Objeto > Transformar > Rotar. Introduce un ángulo de 45 grados y haz clic en Aceptar. Céntrate en "marcoDerecho" y elige la herramienta Elipse (L). Crea un círculo de 60px y colócalo como se muestra en la quinta imagen. Rellénalo con Ninguno, pero añade un trazo de 15pt, alinéalo al interior y establece el color en R=29 G=166 B=224.
Paso 7
Selecciona ambas formas azules y ve a Objeto > Expandir apariencia. Selecciona el grupo de formas resultante y conviértelo en un trazado compuesto simple (Control + 8 u Objeto > Trazado compuesto > Crear). Asegúrate de que este nuevo Trazado compuesto está seleccionado y ve a Efecto > 3D > Extrusión y biselado. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
Paso 8
Selecciona el Trazado compuesto azul y ve a Objeto > Expandir apariencia. Desagrupa (Mayúsculas + Control + G) el grupo de formas resultante y aplica las técnicas y los estilos gráficos utilizados para las formas 3D "X" y "O" anteriores.
Paso 9
Con la herramienta Pluma (P), crea un trazado vertical de 45px y colócalo como se muestra en la primera imagen. Añade un trazo de 1pt para este trazado, establece su color en R=113 G=123 B=126 y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Efecto > Estilizar > Sombra paralela. Introduce los atributos que se muestran en la siguiente imagen y haz clic en Aceptar.
Paso 10
Selecciona la herramienta Texto (T) y añade algunos fragmentos de texto como se muestra en la siguiente imagen. Utiliza R=53 G=63 B=66 para el color y luego copia las propiedades que se muestran en los paneles de Caracteres. Una vez que hayas terminado, selecciona todos estos fragmentos de texto y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar. Selecciona todos estos fragmentos de texto junto con la malla, las formas y los grupos que componen esta cara superior y Agrúpalos (Control + G). Muévete al panel Capas y nombra a este nuevo grupo "BarraDePuntuación".
11. Crea la barra de detención
Paso 1
Vuelve a abrir tu grupo "principal" y duplica la malla existente. Selecciona esta copia, suelta la máscara existente y elimínala. Selecciona la malla restante, muévela fuera del grupo, arrástrala hacia abajo y colócala aproximadamente como se muestra en la primera imagen. Usando la herramienta Rectángulo (M), crea una forma de 640 x 70px, rellénala de blanco y colócala como se muestra en la segunda imagen. Selecciona este rectángulo blanco junto con la nueva malla, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad. Al final el aspecto debería ser como el de la tercera imagen.
Paso 2
Con la herramienta Rectángulo (M), crea una nueva forma de 640 x 70px, colócala como se muestra en la primera imagen y simplemente añade el estilo gráfico "textura". Duplica este nuevo rectángulo, selecciona la copia y añade el estilo gráfico "máscara". Vuelve a seleccionar los dos rectángulos creados en este paso, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad.
Paso 3
Con la herramienta Rectángulo (M), crea una forma de 100 x 40px, rellénala con el degradado lineal que se muestra a continuación y colócala como se muestra en la siguiente imagen. Asegúrate de que este rectángulo permanece seleccionado y céntrate en el panel Apariencia. Selecciona el relleno existente y ve a Efecto > Estilizar > Resplandor interior. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Añade un segundo relleno para esta forma, baja su Opacidad al 40%, cambia el Modo de fusión a Luz suave y utiliza tu motivo guardado.
Sigue concentrándote en el panel Apariencia, añade un trazo de 1 punto y selecciónalo. Establece el color en blanco, alinéalo hacia afuera, cambia el Modo de fusión a Luz suave y baja su Opacidad al 50%. Vuelve al panel Apariencia, selecciona todo el Trazado (simplemente haz clic en el texto "Trazado" de la parte superior del panel Apariencia) y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 5px, haz clic en Aceptar y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
Paso 4
Utilizando la herramienta Texto (T), crea el fragmento de texto "DETENER " y colócalo como se muestra en la primera imagen. Utiliza la fuente "Agency FB", establece el tamaño en 15pt, el estilo en Negrita y el "tracking" en 600. Asegúrate de que este fragmento de texto permanezca seleccionado y céntrate en el panel Apariencia. Añade un nuevo relleno, selecciónalo y utiliza el degradado lineal que se muestra en la siguiente imagen. Sigue concentrándote en el panel Apariencia y añade un segundo relleno para este fragmento de texto. Establece el color en blanco, baja su Opacidad al 50%, cambia el Modo de fusión a Superponer y ve a Efecto > Trazado > Desplazamiento. Introduce un desplazamiento de -1px y haz clic en Aceptar. Vuelve al panel Apariencia y añade un tercer relleno. Selecciónalo, añade el mismo degradado lineal que se muestra en la siguiente imagen, pulsa Mayúsculas + Control + E para añadir el mismo efecto de desplazamiento de -1px y luego ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Selecciona todo el texto y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
Paso 5
Selecciona este fragmento de texto junto con la malla y las formas que componen esta parte inferior y agrúpalos (Control + G). Muévete al panel Capas y nombra este nuevo grupo como "barraDetener".
12. Crea los tornillos
Paso 1
Usando la herramienta Elipse (L), crea un círculo de 10px, rellénalo con R=133 G=143 B=146 y colócalo como se muestra en la primera imagen. Asegúrate de que este pequeño círculo permanezca seleccionado y céntrate en el panel Apariencia. Añade un segundo relleno, selecciónalo, establece el color en R=93 G=103 B=106 y ve a Efecto > Convertir en forma > Rectángulo. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Efecto > Distorsionar y transformar > Transformar. Introduce los datos que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Añade un trazo de 2 puntos, establece el color en R=93 G=103 B=106 y alinéalo al interior. Vuelve al panel Apariencia, asegúrate de que todo el Trazado está seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar. Ve al panel Capas y nombra este pequeño círculo como "tornillo".
Paso 2
Multiplica tu forma "tornillo" y distribuye las copias como se muestra en la siguiente imagen, la opción Ajustar a cuadrícula debería facilitar tu trabajo. Selecciona estas copias una por una, céntrate en el panel Apariencia, abre el efecto Transformar existente y cambia aleatoriamente el ángulo utilizado para la rotación. Una vez que hayas terminado, selecciona todas estas formas de "tornillo" y agrúpalas (Control + G). Ve al panel Capas y nombra este nuevo grupo como "tornillos".
Paso 3
Selecciona todas las formas y grupos creados hasta ahora y agrúpalos (Control + G). Ve al panel Capas y nombra este nuevo grupo como "640x990". Esta será la versión del iPhone 4.
13. Crea la segunda versión para el iPhone 5
Paso 1
A continuación, debes crear la versión para el iPhone 5. En primer lugar, para este paso necesitarás una cuadrícula cada 1px, así que ve a Edición > Preferencias > Guías y cuadrícula e introduce 1 en la casilla Línea de cuadrícula cada. Elige la herramienta Mesa de trabajo (Mayús + O), céntrate en el lado derecho de la Mesa de trabajo existente y crea una Mesa de trabajo de 640 x 1136px como se muestra en la primera imagen. Duplica el grupo "640x990", selecciona la copia, arrástrala hacia la derecha y colócala como se muestra en la segunda imagen. Bloquea el grupo original de "640x990" y luego céntrate en el panel Capas y cambia el nombre de la copia del grupo movido a "640x1136".
Paso 2
Vuelve a la "línea de cuadrícula cada 5px", así que simplemente ve a Edición > Preferencias > Guías y cuadrícula e introduce 5 en la casilla Línea de cuadrícula cada. Abre tu grupo "640x1136" y céntrate en el grupo "barraDetener". Primero, selecciona la malla y suelta la máscara existente. Selecciona el rectángulo blanco resultante y arrastra el lado inferior 30px hacia abajo. Al final debería tener 100px de altura. Vuelva a seleccionar este rectángulo blanco junto con la malla, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad.
Paso 3
Sigue centrándote en el grupo de la "barraDetener", selecciona la forma enmascarada y simplemente arrastra el lado inferior 30px hacia abajo. Selecciona el rectángulo redondeado oscuro, hazlo de 160px de ancho y 60px de alto y colócalo como se muestra en la tercera imagen. Selecciona el fragmento de texto "DETENER", aumenta el tamaño de la fuente a 25pt y colócalo como se muestra en la última imagen.
Paso 4
Selecciona el rectángulo "divisor", haz dos copias y colócalas como se muestra en la siguiente imagen.
Paso 5
Selecciona una de las mallas existentes, suelta la máscara y elimínala. Coloca la malla restante como se muestra en la primera imagen y elige la herramienta Rectángulo (M). Crea una forma de 640 x 58px, rellénala de blanco y colócala como se muestra en la segunda imagen. Selecciona este rectángulo blanco junto con la nueva malla, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad.
Paso 6
Usando la herramienta Rectángulo (M), crea una nueva forma de 640 x 58px, colócala como se muestra en la primera imagen y simplemente añade el estilo gráfico "textura". Duplica este nuevo rectángulo, selecciona la copia y añade el estilo gráfico "máscara". Vuelve a seleccionar los dos rectángulos realizados en este paso, abre el menú desplegable del panel Transparencia y ve a Crear máscara de opacidad.
Paso 7
Selecciona la malla y el rectángulo enmascarado que componen esta parte superior y agrúpalos (Control + G). Muévete al panel Capas y nombra este nuevo grupo como "BarraSuperior". Duplica "BarraSuperior", selecciona la copia, arrástrala hacia abajo y colócala como se muestra en la segunda imagen.
Paso 8
Por último, haz unos nuevos "tornillos" y colócalos como se muestra en la siguiente imagen.
¡Felicidades! ¡Ya terminaste!
Así es como debe quedar. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en tus futuros proyectos. ¡Estate atento a Mobiletuts+ para saber cómo puedes crear el juego real!
By
