Share
En primer lugar, apoyamos a Dan Wiersema (mi amigo y director creativo en Guifx) por ser el cerebro detrás de este tutorial. Concept y wireframe fueron desarrollados por él. También me ayudó a resolver los pliegues en términos de calificar mi trabajo de principio a fin..
En este tutorial, crearemos una interfaz de menú principal para un juego de iPhone ficticio. Pasaremos por la configuración de Photoshop para mostrar con precisión el tamaño de la pantalla de destino, la configuración de un marco de alambre para el proyecto, la creación de un fondo, la creación de un logotipo, la creación de la textura de roca para la barra lateral y la textura de madera para la caja de juegos guardada y los botones . También agregaremos la creación de vegetación para el detalle y buena medida. Esto va a ser largo, así que la paciencia es una virtud. Además, el café ayuda.!
Echa un vistazo a la imagen que estaremos creando..
Dirígete a pxcalc.com y sigue las instrucciones. Hacer esto le permitirá ver el diseño en su tamaño final: el tamaño real de la pantalla real del iPhone, en su propia computadora.
Cree un nuevo documento con un ancho de 480px por 320px de altura, con una resolución de 164.83 píxeles / pulgada. Ajuste el modo de color a RGB 8bit.
Recomiendo crear una estructura de alambre para su proyecto como la de la imagen de abajo. La mejor manera de hacer esto es hacer clic derecho con la herramienta de zoom seleccionada y elegir el tamaño de impresión. Si siguió el Paso 1, ahora verá su documento con el tamaño exacto que tendrá el usuario final en su iPhone. Esto le ayuda a determinar qué tan grandes deben ser los botones para funcionar suficientemente en un dispositivo de pantalla táctil. Nota: intente hacer clic físicamente en la pantalla y recuerde tener en cuenta los dedos gruesos.
Utilice la herramienta Rectángulo y arrastre las guías de colocación aproximadas para los diversos elementos. Mantenga el color de las formas blanco y agregue un trazo interior negro de 1px. También es una buena idea burlarse del concepto con lápiz y papel. Incluso si no eres un buen artista a mano alzada (no lo soy, pero sigo haciéndolo), los bocetos de servilletas te ayudan a mantener tus ojos en el premio.!
Crea una nueva capa y llámala "Fondo". Establezca el color de primer plano en # 5e1114 y su fondo en # 140306. Seleccione la herramienta Degradado y, con la configuración que se muestra debajo, arrastre de arriba a abajo como indica la flecha.
A la capa "Fondo", aplique los siguientes estilos de capa.
Restaure los colores de fondo y fondo a negro y mientras hace clic en la tecla D de su teclado. Crea una nueva capa y llámala "bg_clouds". Ahora ve a Filtro> Render> Nubes. Establezca el modo de fusión de esta capa en Superposición. Frótalo en áreas al azar con la herramienta Borrador, configúralo en una opacidad del 30-50% con un pincel suave para crear resaltados interesantes. Intenta hacer coincidir mi resultado a continuación.
Descarga esta imagen de sxc.hu (Gracias Javier González). Llame a la capa "castillo", cambie su tamaño y colóquela aproximadamente en el centro superior del escenario. Establezca el modo de fusión de la capa en Multiplicar y la Opacidad en 60%. Utilice la herramienta Borrador para borrar los bordes ásperos. A continuación se muestra mi resultado después de este paso..
Bien, hasta ahora todo bien. Vamos a empezar a crear nuestro logo. Toma tu herramienta de lápiz y crea el contorno de la cabeza de un dragón. Para hacer esto, puedes trazar una imagen de dragón al azar o hacer tu propia imagen. Sin embargo, este terminará con algunos efectos de estilo de capa de alta resistencia, así que trata de mantener la forma bastante simple.
Hay una gran variedad de formas y dingbats gratuitos que puedes usar en su lugar, si no quieres dedicar tiempo a rastrear o encontrar una cabeza de dragón. Donde hay voluntad hay un camino.
Duplica tu forma 2 veces (capa> capa duplicada ...), de modo que tengas 3 capas de cabeza de dragón. Nombra la inferior "dragon_1", la del medio "dragon_2" y la superior "dragon_3".
Es hora de hacer brillar nuestro dragón. Esta técnica se basa en gran medida en el tutorial de Elliot AKA TrueLovePrevails sobre cómo replicar el estilo del logotipo de warcraft, por lo que le deseamos un gran gracias por desarrollar esta fantástica técnica y por permitirme usarla. Haga clic aquí para visitar el tutorial original.
Aplique los siguientes estilos de capa a cada capa respectivamente, comenzando con la capa "dragon_1"
Ahora aplique los siguientes estilos de capas a "dragon_2" y establezca la Opacidad de relleno de esta capa en 0%.
Y nuevamente a "dragon_3" y establezca la Opacidad de relleno de esta capa en 0%.
Correcto, el dragón se ve bien - verifica El siguiente es el texto..
Dirígete a Fontcraft.com y descarga o compra Scurlock. Scurlock es gratuito como fuente de demostración, así que asegúrese de leer los términos de uso y compre una licencia si desea usar esta fuente con fines comerciales.
Seleccione su Herramienta de Tipo y establezca el tamaño a 60pt. Escribe el texto "Dragón". Haga clic derecho en la capa y seleccione Convertir en forma. La razón de esto es que queremos eliminar el subrayado de la "o". Para ello utilizamos la herramienta de selección directa. Active la máscara vectorial haciendo clic en la miniatura y seleccione todos los nodos del subrayado, luego presione eliminar en el teclado. Si no puede obtenerlos todos de una vez, mantenga presionada la tecla Mayús para agregar a la selección.
A continuación, toma la Herramienta de selección de ruta y haz clic en "o". Vaya a editar> Transformación libre y arrastre el nodo central inferior hacia abajo para que la "o" parezca que pertenece al resto del texto. Ahora duplica la capa dos veces, tal como hicimos con la cabeza de dragón. Nombre las capas de la parte inferior y suba "dragontext_1", "dragontext_2," y dragontext_3 "respectivamente.
Ocultemos la capa de "castillo" por ahora, ya que es de poca importancia para el diseño, y principalmente causa un poco de distracción al diseñar.
Haz clic derecho en la capa "dragon_1" y selecciona "copiar estilo de capa". Ahora haga clic derecho en la capa "dragontext_1" y seleccione Pegar estilo de capa. Haga clic derecho en la capa "dragon_2" y seleccione Copiar estilo de capa. Ahora haga clic derecho en la capa "dragontext_2" y seleccione Pegar estilo de capa. Cambie la opacidad del modo de sombra en bisel y realce al 43%.
Seleccione "dragontext_3" y establezca la opacidad de relleno en 0%. Luego aplica los estilos que se muestran en la imagen de abajo. Cuando termine, repita los Pasos 9 y 10 para el texto "Tormenta" (nombrando las capas stormtext_ #) y coloque el texto aproximadamente como se muestra a continuación.
Comando: haga clic en la miniatura de la máscara vectorial de la capa "dragontext_2" para cargar la selección. Verás aparecer a las hormigas marchando alrededor de tu texto. Asegúrese de que "dragontext_2" sea su capa activa, ya que esto asegurará que coloquemos la capa de ajuste que estamos a punto de crear justo por encima de "dragontext_2".
Ahora haga clic en el botón Crear nueva capa de relleno o ajuste que se encuentra debajo de la paleta de capas. De la lista, seleccione Balance de color y aplique los ajustes a continuación. Luego, haga clic en Comando + D para deseleccionar. Ahora haz lo mismo para la capa "swordtext_2".
Los detalles hablan por sí mismos, así que vamos a agregar más texto para un efecto adicional. Escribe "Scroll of the Wicked" usando la fuente Scurlock nuevamente, con un tamaño de 18.5 pt. Para el texto "Desplazamiento" y "Despejado", establezca el tamaño del texto en 14.5 pt. Para "del texto", use # C9C9C9 como color de texto y aplique los siguientes estilos de capa.
Esperemos que todavía estés conmigo. Vayamos a la barra lateral..
Con la herramienta Pluma, cree una forma de bloque como la de la imagen de abajo. Sé creativo aquí. No hay correcto o incorrecto cuando se hacen cosas como esta, así que simplemente formen una figura sin prestar demasiada atención a los detalles. Duplica esta capa y llama a la superior "sidebar_base". Nombra el de abajo "sidebar_perspective". Ahora aplique los siguientes estilos de capa a la capa "sidebar_base".
Empuje la capa "sidebar_perspective" 6px a la izquierda, haga clic con el botón derecho y seleccione Rasterize Layer.
Configure la herramienta de grabación con los ajustes a continuación, y pinte el borde de la perspectiva, teniendo en cuenta la fuente de luz del boceto del concepto, donde es menos probable que la luz la golpee. Con la herramienta Dodge, pinta las áreas opuestas. Al hacer esto para las texturas de piedra, encuentro que es efectivo aplicar un poco en lugar de un trazo, ya que esto crea la ilusión de una superficie rugosa. Finalmente, dale a la capa una sombra..
Descarga este conjunto de pinceles por Lee Richardson. Cree una nueva capa encima de "sidebar_base" y asígnele el nombre de "sidebar_texture_1". Ahora, pulse Comando y haga clic en la capa "sidebar_base" para cargar la selección de forma. Sin soltar Command, presione Mayús para agregar a la selección y haga clic en la capa "sidebar_perspective". A continuación, tome la herramienta Pincel y seleccione el segundo pincel del conjunto que acaba de descargar. Con el color de primer plano configurado en negro, haga clic una vez dentro de la selección y presione Comando + D en su teclado. Establece la opacidad de esta capa en 50%.
Establezca el color de primer plano en # 160A02 y cree otra capa. Nombra éste, lo adivinaste, "sidebar_texture_2". Repita el proceso desde el Paso 15, esta vez con el cuarto pincel del conjunto. Es más pequeño, por lo que necesitará dos clics para cubrir toda la superficie. Con esta capa seleccionada, vaya a Filtro> Desenfoque> Desenfoque gaussiano. Establézcalo en un radio de 1.5 luego haga clic en Aceptar. Deberías tener algo como la imagen de abajo..
Añadamos algunas imperfecciones a la superficie de la roca. Crea una nueva capa y llámala "grietas". Seleccione la Herramienta de pincel y varíe entre un radio maestro de 2px a 5px, Dureza de 60% a 80%, y mantenga la Opacidad del pincel a 55%. Trata de no preocuparte por conseguirlo. Correcto. El estilo de capa hará la mayor parte del trabajo, y la forma más rara puede resultar excelente. Cuando esté satisfecho con las grietas, aplique el siguiente estilo de capa y sea aún más feliz.
Crea una capa más, esta encima de la capa "grietas", y llámala "edge_bumps". Seleccione la herramienta de lápiz con un diámetro maestro de 1px y dibuje algunas imperfecciones en color negro a lo largo de la línea resaltada a continuación. establezca la opacidad de la capa en 76%, luego aplique el siguiente estilo de capa a la capa.
Crea una nueva capa sobre la capa "edge_bumps". Comando-clic en la capa "sidebar_perspective". Agarre cualquiera de los pinceles de salpicadura predeterminados de Photoshop y aplíquelos por el borde, mientras mantiene la opacidad del pincel en un 55%. Copie el estilo de capa de la capa "edge_bumps" y péguelo en esta capa. Ajusta las capas de Opacidad al 55%..
Vamos a pasar a la creación de la madera. Haz una forma como la de abajo para nuestro gran tablero de juegos de madera guardado. Establece el color de la forma en # 463118. Llame a la capa "saved_games_base" y aplíquele los siguientes estilos.
Con la herramienta de lápiz, intente replicar la forma que ve a continuación y colóquela debajo de la capa "saved_games_base". Los bordes importantes se resaltan en rojo. Denomínelo "saved_games_perspective" y establezca el color de esta forma en # 14100D. Además, aplique una sombra como se muestra.
Descarga la primera textura de este conjunto de texturas de cgtextures.com. Colóquelo en su escenario y redimensione / gírelo hasta que le guste cómo se ve. Colóquelo encima y sobre la capa "saved_games_base" y cámbiele el nombre a "wood_texture_1". Comando + clic en "saved_games_base", luego Comando + Mayús + clic en "saved_games_perspective" para agregar a la selección. Seleccione "wood_texture_1" y haga clic en el botón Agregar máscara de capa, ubicado debajo de la paleta de capas. Establezca este modo de fusión de capas en Luz suave.
Duplique esta capa una vez, llámela "wood_texture_2", establezca el modo de fusión en Superposición y Opacidad en 15%.
Repita los pasos 20-22 para los botones. Intente variar un poco el gradiente y use reflejado en lugar de radial. Para mantener un registro de sus capas, es posible que desee agregar las capas de botones a un grupo. Intenta hacer coincidir los resultados que se muestran a continuación.
Vamos a aligerar las cosas un poco. seleccione la capa superior del documento y haga clic en Crear nueva capa de relleno o ajuste, como lo hicimos en el Paso 11 para el texto. Esta vez, seleccione niveles de la lista y arrastre el nodo central a 1.39, que está un poco a la izquierda.
Comando-clic en la capa "stormtext_1", ahora presione Comando-shift y haga clic en las capas "dragontext_1" y "dragon_1". Seleccione la miniatura de la capa de niveles y vaya a Editar> Rellenar, y complete la selección con negro. Ahora el texto y la cabeza de dragón no se verán afectados por la capa de niveles.
A continuación, agregaremos una capa de ajuste de brillo / contraste, utilizando exactamente el mismo método que usamos para los niveles, incluso asegurándonos de que "Dragon Storm" SOLO TEXTO este tiempo no se ve afectado por esta capa al enmascararla. Ajusta el brillo a 25 y el contraste a 35..
Con la herramienta Rectángulo, sobre la capa "wood_texture_2", crea una forma cuadrada como en las imágenes de abajo. Nombre a esta capa "inset_rim", ahora duplique esta capa y llame a la superior "inset_base".
Aplique los siguientes estilos respectivamente, comenzando con "inset_rim" y utilizando una opacidad de relleno del 0%.
Para "inset_base", use la misma configuración y una opacidad de relleno del 60%.
Duplique tanto "inset_rim" como "inset_base" dos veces y colóquelas como se muestra en la parte inferior de las imágenes a continuación..
Descargar "Livingstone" por PrimaFont desde dafont.com. Escriba todo el texto que ve a continuación, utilizando #ECDECB como color de texto. El tamaño no es muy importante, solo trata de hacer coincidir aproximadamente lo que se muestra a continuación. Luego aplique el siguiente estilo a todas estas capas de texto.
Establezca el color de primer plano en # 636363 y cree una nueva capa debajo de los botones. Usando su herramienta de pincel ajustada al 85% de dureza con un diámetro maestro de 1px, pinte un O Forma, como en la imagen de abajo. Ver la selección de hormigas marchando. Duplíquelo y coloque las copias como se muestra..
Realice el paso anterior para todas las áreas en la imagen que tiene cadenas y aplique el siguiente estilo a todas las capas. Habrá muchas capas, así que usa grupos para hacer un seguimiento de ellas.
Hagamos visible la capa "castillo" de nuevo. Ya que estamos avanzando hacia la etapa de detalle de este proyecto, es bueno tener una visión clara de cuál será el resultado final..
Ahora, con la herramienta de lápiz otra vez, con el negro ajustado al color de primer plano, cree una forma como la que se encuentra dentro del cuadro de juegos guardados a continuación. Hágalo principalmente cuadrado, pero corte las esquinas para darle una forma más interesante. Llame a esta capa "tableta". Aplicar los siguientes estilos de capa:
Vuelva a utilizar la fuente Livingstone, escriba el texto que ve en la tableta de piedra de juegos guardados a continuación y aplique los siguientes estilos de capas. Cuando haya terminado, duplique la tableta completa y colóquela en el segundo cuadro, como se muestra en la imagen a continuación..
Establezca el color de primer plano en # 2E343A y, con su herramienta de lápiz, cree una forma de diamante pequeño (aproximadamente 10 px por 10 px). Esta va a ser la base de nuestros remaches. Nombra la capa "rivet_inset" y duplicala dos veces. Nombra la capa de remache central "rivet_base" y la superior "rivet_style". Agregue los siguientes estilos respectivamente, comenzando con "rivet_inset".
Ahora aplique los siguientes estilos de capa a la capa "rivet_base".
Ahora aplique los siguientes estilos de capa a la capa "rivet_style".
Ahora duplique el remache completo tres veces y coloque uno en cada esquina de la caja del juego guardado, como en la imagen de abajo.
Cree 4 círculos pequeños (aproximadamente 4px por 4px) en la base de la caja de juegos guardados, usando la herramienta elipse y # CCB55A como color de primer plano. Estos serán los indicadores de página que se encuentran a menudo en las aplicaciones de iPhone. A los tres primeros, aplicar estos estilos..
Cambie el color del cuarto círculo a # FFA200 haciendo doble clic en la miniatura de color de forma. Luego aplica el siguiente estilo.
Es hora de sumergirse en el último y probablemente el paso más difícil. De hecho, este podría ser otro tutorial completo en sí mismo, pero trataré de mantenerlo básico. Trataré de explicar esto lo mejor que pueda usando imágenes, pero será un aprendizaje haciendo experiencia para cualquier persona nueva en esta técnica..
Opcionalmente, también puede agregar una máscara de desenfoque a la hoja si desea detalles más nítidos. Los ajustes se realizarían en las líneas de Cantidad 50%, Radio 0.5px y umbral de 0 niveles.
Agrega vegetación, aquí y allá para que se vea más interesante. Usted podría ir incluso más lejos que yo y agregar algunos en el cuadro de juegos guardados también. Muchas gracias por seguir este tutorial y espero que hayas aprendido algunas técnicas nuevas. A continuación se muestra el resultado final..
Accentsconagua