Tutorial: Cómo diseñar una interfaz de usuario de Chatroom IPhone
En este tutorial vamos a diseñar una interfaz de usuario de iPhone para un foro y una aplicación móvil basada en chat.
La aplicación incluye un puñado de elementos de la interfaz táctil diaria, como botones, campos de entrada y gestos táctiles.
Cubriremos varias herramientas de Photoshop, estilos de capas y, por supuesto, abordando cualquier restricción de diseño; además de hacer que el diseño sea perfecto como un píxel y lo suficientemente hermoso para ser digno de un lugar en la pantalla de un iPhone.
El diseño se creó utilizando Photoshop CS5.5, sin embargo, todas las versiones recientes de Photoshop funcionarán maravillosamente.
Requisitos de pantalla de la aplicación
Solo vamos a crear una pantalla en este tutorial. La pantalla va a ser la pantalla de chat principal para una aplicación basada en chat, muy similar a una sala de chat pública pero en su teléfono. Los requisitos de esta pantalla son:
- Un encabezado: esta es la sala de chat en la que se encuentra actualmente.
- Un botón atrás / cerrar / temas - para volver a la pantalla anterior.
- Un botón de personas: muestra quién se encuentra actualmente en la sala de chat.
- Una lista de mensajes: los mensajes deben tener avatar y marca de tiempo.
- Una forma de ver los perfiles de los usuarios y los mensajes de informes.
- Un campo de texto para escribir tus mensajes.
- Un botón de enviar para publicar tus mensajes.
Planificación, bocetos y wireframing
Al igual que con cualquier proyecto de interfaz de usuario, la planificación, el boceto y el wireframing de su interfaz son esenciales. A menudo descarta cualquier idea tonta (¡aunque no parezca una tontería en tu cabeza!) Antes de unir conceptos digitales y maquetas. Lo que podría parecer una solución brillante para solucionar un problema en su cabeza, en última instancia, no funcionaría en la práctica real, y es por eso que el wireframing antes de comenzar un proyecto es un paso tan importante.
Tome un bolígrafo y su libreta favorita y comience a dibujar.
Como puede ver en la imagen de arriba, pasé solo unos minutos armando tres conceptos diferentes; por lo general, este proceso lleva días o incluso semanas, pero como solo estamos diseñando una pantalla y el propósito de la aplicación es simple, dibujarlos no debería tomar mucho tiempo. En su mayoría son muy similares, pero cada uno tiene sus diferencias únicas, que resumiré a continuación.
Bosquejo A
Inspirada en la interfaz de usuario original de Twitter para iPhone, esta interfaz de usuario permite a los usuarios deslizar un mensaje para ver más opciones, como "Ver perfil" y "Informar usuario", una forma divertida y que ahorra espacio para permitir más contenido en esta pantalla. Jugué con la idea de tener un botón de configuración en la barra de navegación en esta pantalla, pero decidí seguir mi regla normal de "Menos es más": es poco probable que el usuario acceda a la configuración cada vez que use la aplicación, por lo que no es necesaria aquí.
Boceto B
Este concepto es un poco más compacto, con los botones "Ver perfil" y "Informar usuario" como iconos estáticos a la derecha de los mensajes. Jugué con la idea de no tener un botón "Enviar" aquí, y en su lugar utilizo el botón de enviar en el teclado de iOS. Decidí no hacerlo, ya que la mayoría de las aplicaciones (incluidas las aplicaciones estándar de iOS, como los mensajes) tienen el botón de enviar por el teclado y el botón de enviar adicional al lado del campo de entrada de texto. Me gusta mantener mis interfaces consistentes con otras en la App Store.
Boceto C
Sketch C es el boceto que he decidido seguir: en lugar de un botón de retroceso, tenemos un botón de cierre. Creo que esto hace que sea más obvio que una vez que haga clic en Cerrar, ya no será parte de esa conversación (a diferencia de las aplicaciones de mensajería, donde regresa, y puede volver para ver todos los mensajes anteriores). El botón de personas muestra una lista de usuarios actualmente en la sala de chat, y he vuelto a adoptar la idea de tener la diapositiva para ver más elementos (como la aplicación de Twitter) para permitir al usuario ver el perfil del usuario o informar sobre ellos.
¡Con esto hecho, es hora de pasar a juntar algo en Photoshop!
Paso 1: barra de estado y navegación
Antes de seguir con este paso, debemos crear nuestro documento. El tamaño de pantalla estándar del iPhone (a resolución Retina) es de 640 px de ancho y 960 px de alto con una resolución de 326 ppp. Tiendo a comenzar siempre con un fondo blanco en mis diseños.
El primer paso es colocar la barra de estado predeterminada de iOS. La barra de estado es la barra en la parte superior de tu iPhone que te dice información importante, como tu señal, portadora, hora y duración de la batería. Aquí hay tres opciones: una barra negra, una barra negra de baja transparencia o la barra plateada.
Si desea que el diseño de su aplicación se vea como el verdadero negocio, puede tomar la barra de estado del kit Retina iPhone GUI PSD encontrado aquí . Simplemente descargue y abra el PSD, y arrastre la barra que desea sobre su documento PSD. Colóquelo en la parte superior de su lienzo.
La barra de navegación es la siguiente en nuestra lista de tareas pendientes. La barra de navegación estándar tiene 86 px de alto y abarca todo el ancho de tu iPhone (640 px). De nuevo, puede arrastrar este elemento desde el kit de PSD antes mencionado, o puede crearlo manualmente (mi opción preferida ya que no hay estilos adjuntos). Seleccione la herramienta Forma de rectángulo y coloque un rectángulo de 640 x 86 px en su lienzo.
Paso 2: botones de la barra de navegación
Refiriéndonos a nuestros wireframes, tenemos dos botones en nuestra barra de navegación. Seleccione la herramienta de forma de rectángulo redondeado (recuerde siempre utilizar herramientas de forma para las formas en el diseño de la interfaz de usuario, ¡hace que sea mucho más fácil escalar nuestro documento para obtener resoluciones más bajas!). He utilizado dimensiones de 100 x 50 píxeles con un radio de esquina de 6 píxeles.
Coloque esta forma en los lados izquierdo y derecho de la barra de navegación y colóquelos de forma agradable.
Paso 3: selección de estilo
Es hora de comenzar a elegir nuestro estilo de diseño. Esta aplicación permitirá a las personas chatear y conocer gente nueva, y permitirá que las personas se diviertan haciéndolo. Por esa razón, creo que un esquema de color divertido y peculiar y la tipografía aquí es importante para ayudar a transmitir ese punto.
Seleccione la herramienta Tipo y elija un tipo de letra que coincida con la imagen que tiene en su cabeza. Elegí el burbujeante Arial Rounded MT Bold . Escriba el nombre de su tema (elegí "Diseño de interfaz de usuario") y alinéelo al centro de la barra de navegación.
Continuando con el divertido tema que hemos seleccionado para la aplicación, es hora de elegir algunos colores. Yo personalmente uso Amantes del color para ayudar a inspirar mis elecciones de color cuando estoy diseñando. En este caso particular busqué "diversión" y en cuestión de segundos me presentaron muchas opciones diferentes y paletas inspiradoras para usar como base para mi diseño.
Terminé eligiendo uno llamado Cuarto de jugar . Es importante pensar qué colores necesitará al seleccionar una paleta; Me parece que elegir algo ligero, algo oscuro, y algo brillante siempre es un buen punto de partida. Es importante tener un buen contraste en su diseño.
Paso 4: Estilo de barra de navegación
Ahora vamos a regresar a nuestra barra de navegación y darle el color que se merece. Seleccione la capa de la barra de navegación (¡espero que haya mantenido sus capas organizadas!), Haga clic derecho y seleccione Opciones de fusión. Este es el hogar de las herramientas de Photoshop más poderosas cuando se trata de crear diseños de interfaz perfecta de píxeles. Desde aquí puede agregar sombras, degradados, patrones y alimentaciones, con la capacidad de copiar y pegar estos estilos en otras capas.
En primer lugar vamos a agregar un degradado a nuestra barra, por lo tanto, haga clic en Superposición de degradado. Seleccioné el color turquesa como el que quiero usar para mi barra de navegación. Es brillante y tiene un poderoso impacto, y hará que nuestro diseño sea fácil de recordar. Aplique un gradiente de ángulo de 90 grados yendo desde la luz (arriba) a la oscuridad (abajo).
Ahora haga clic en el panel Trazo. Cambie el tamaño de su trazo a 2 en lugar del predeterminado 3. Un consejo es intentar siempre evitar los números impares en el diseño de la IU, especialmente en los dispositivos móviles. Esto solo generará más trabajo tanto para el diseñador como para el desarrollador cuando se trata de escalar el trabajo (¡no puede haber ni medio pixel ni medio pixel!).
Cambia el tipo de relleno de tu trazo al degradado y asegúrate de que el trazo va a aparecer en el exterior de tu forma. Seleccione un color turquesa oscuro para la parte inferior de su trazo y negro para la parte superior. Como el trazo se encuentra en el exterior de nuestra barra de navegación, la parte negra del trazo no se mostrará en la parte superior de la barra de estado y, por lo tanto, todo el usuario podrá ver el trazo en la parte inferior.
Seleccione el panel Sombra interior y aplique una sombra blanca de opacidad del 15% en su barra. Aparecerá en la parte superior de la barra y le dará un toque encantador, haciendo que parezca más 3D. Le di a mi sombra una distancia de 2px y un tamaño de 3px.
Ahora es el momento de realmente hacer que nuestra barra de navegación destaque. Al usar patrones, podemos agregar mucha profundidad a nuestro diseño. Estoy usando un patrón de cuadrícula blanco en mi barra de navegación. Si desea utilizar este patrón, puede descargar una colección de ellos gratis en Píxeles premium .
Paso 5: Sombreado de tipografía
Para darle profundidad a nuestra tipografía, abra el panel de opciones de fusión y aplique una sombra paralela. Cambia el ángulo a -90 (asegúrate de que Usar estilo global no esté marcado aquí; de lo contrario, todas las sombras de tu diseño cambiarán a -90) y usarás el mismo color que usaste para la parte inferior de tu barra de navegación. Dale a la sombra una distancia de 2px y baja el tamaño a 0px. Esto le da una sombra clara de corte sobre su texto al instante, haciéndolo más interesante.
Paso 6: estilo del botón de la barra de navegación
Ahora vamos a aplicar algunos estilos increíbles a nuestros botones de barras de navegación. Queremos que estos botones se vinculen bien con nuestra barra de navegación, pero al mismo tiempo deben destacarse lo suficiente como para que el usuario reconozca al instante que son botones. Para hacer esto, vamos a utilizar más estilos de capa para darles un efecto 3D sorprendente.
Abra el panel de opciones de fusión y haga clic en superposición de degradado. Dale a tu botón un degradado claro (arriba) a oscuro (abajo) usando colores de la barra de navegación. El color de la luz fue seleccionado del punto culminante de mi barra de navegación, y el color oscuro fue seleccionado del trazo inferior de mi barra de navegación.
Seleccione el panel de trazo y cambie el tamaño de su trazo a 2px, con una posición exterior. Cambie el tipo de relleno a degradado y el ángulo a 90 grados. Cambia los colores del degradado de claro (arriba) a oscuro (abajo), basando los colores en los colores que ya usaste para la barra de navegación y los botones. Inmediatamente puede ver que este trazo le da a su botón un aspecto 3D, como si saliera de la barra de navegación en lugar de estar encima de él.
Para abigarrar el botón un poco más y hacerlo aún más atractivo visualmente, vamos a agregar un brillo interno al botón. Haga clic en el panel de brillo interior y cambie el modo de fusión a la pantalla. Deje caer la opacidad al 20% y asegúrese de que el ruido esté configurado en 0%. Cambia el brillo amarillo predeterminado a blanco y asegúrate de que el tamaño todavía esté configurado en el valor predeterminado de 5 píxeles. ¡Esto debería darle a tu botón un agradable brillo interior, haciendo que el botón se vea realmente tangible!
Ahora vamos a agregar una sombra interna para que nuestro botón sea un poco más realista. Cambie la opacidad al 15% y seleccione negro como color. Baje la distancia a 2px y el tamaño a 4px. Ahora cambie el ángulo a -90 grados (asegurándose de que la opción Usar luz global no esté seleccionada). Esto le da a la parte inferior de su botón una ligera sombra, ocultando algo del resplandor interior inferior que acabamos de aplicar. En la vida real, esta área estaría sombreada por lo que era importante ocultar el resplandor interno aquí.
Para finalizar el diseño de nuestro botón vamos a agregar una sombra paralela. Seleccione el panel de sombra y cambie el color a blanco con una opacidad del 25%. Esta sombra va a actuar como un resaltado debajo de nuestro trazo, por lo tanto, cambie la distancia a 4px (2px para cubrir el área de trazo, y 2px que se verá debajo del trazo).
Paso 7: Etiquetas de botones
Un botón sin su etiqueta no tiene sentido, así que ahora vamos a pasar un poco de tiempo para terminar nuestros botones. En primer lugar, haga clic derecho en su botón de estilo y seleccione la opción Copiar estilo de capa. Ahora haz clic derecho en tu botón sin estilo y selecciona la opción Pegar estilo de capa.
Vamos a continuar trabajando en nuestro botón derecho primero. Este botón se etiquetará como "Personas" y queremos utilizar un ícono de más de 2 personas. Por el bien de este tutorial, voy a utilizar iconos creados por el estudio creativo Yummygum; puedes encontrar el paquete que utilicé en IconSweets.com - Utilizaré íconos de este paquete durante el tutorial.
Usando la misma fuente que utilizó para el título de la barra de navegación, escriba la etiqueta de sus botones. Cambie el tamaño y colóquelo en su botón, y luego coloque el icono de su elección (o haga el suyo) en su documento. Coloque estas dos capas por igual sobre su botón. He espaciado mis capas de modo que haya 15px a cada lado de ellas y el botón, y 10px entre el icono y el texto. Pegue el estilo de la capa del texto del tema de la barra de navegación tanto en su icono como en la etiqueta del botón. Si necesita cambiar el tamaño de la longitud de su botón, use la Herramienta de Selección Directa para seleccionar los 4 puntos de anclaje a la derecha, y luego arrastre. Puede mantener presionada la tecla Mayús para mantener esta modificación en línea recta.
Repita este proceso con el botón en el lado izquierdo de la barra de navegación, esta vez usando un ícono cruzado y la palabra "Cerrar". Para agregar un poco más de estilo a mis botones reduje la opacidad de las dos formas de fondo al 95%, esto permite que brille un poco del patrón de cuadrícula debajo de él.
Paso 8: barra de campo de texto
Ahora es el momento de prestarle atención al resto de nuestra pantalla. Agarra la herramienta de forma rectangular y usando las mismas dimensiones de nuestra barra de navegación (640 x 86px) coloca una forma en tu lienzo. Colóquelo en la parte inferior de la pantalla.
Paso 9: el fondo
Ahora vamos a trabajar en el fondo de nuestro diseño. Abra el panel de opciones de fusión para su capa de fondo y elija un patrón para llenarlo. Usé un patrón oscuro con líneas verticales que lo atraviesan Patrones sutiles - puedes descargar el conjunto completo de patrones que recomiendo.
Si desea agregar algunos de sus propios colores al patrón que ha elegido, puede hacerlo utilizando el estilo de superposición de colores. Apliqué un marrón (de mi paleta de colores que elegí antes) al 35%. Esta opacidad es lo suficientemente baja para que su textura / patrón se muestre lo suficientemente alta como para teñir el color o el fondo.
Ahora que tenemos un fondo oscuro, verá que el punto donde nuestra barra de navegación se encuentra con nuestra imagen de fondo no se ve tan bien. Puede solucionarlo fácilmente aplicando un estilo sombreado a su barra de navegación, que lo hará parecer como si estuviera sobre su fondo.
Vuelva a abrir el panel de opciones de fusión para su barra de navegación y seleccione el panel sombreado. Asegúrese de que el negro esté seleccionado y cambie la opacidad al 25%. Aumente tanto la distancia a 6 píxeles como el tamaño a 10 píxeles y haga clic en Aceptar. Es posible que deba experimentar con estas opciones, ya que los resultados variarán según el color y el tipo de textura / patrón que haya seleccionado para su fondo.
Paso 10: Mensajes
Ahora que tenemos completa la barra de navegación superior y de fondo, nos concentraremos en obtener el contenido principal de la aplicación. Seleccione la herramienta Forma de rectángulo y coloque un rectángulo en su lienzo. El ancho que utilicé fue de 600 px, lo que permite mostrar 20 píxeles en cada lado de la forma. Utilicé una versión mucho más ligera del color amarillo / crema de la paleta de colores que elegí antes.
Seleccione la herramienta de forma de rectángulo redondeado y cambie las dimensiones a 80 x 80px, y el radio a 6px. Coloque la forma (que se utilizará como nuestra forma de avatar) en su lienzo y colóquelo correctamente. Para mantener mi diseño consistente, he permitido que 20 píxeles se coloquen entre los bordes de la forma del fondo del mensaje y la forma de mi avatar.
Usando la herramienta de texto, escriba su nombre y un mensaje; Utilicé Arial Rounded MT Bold para mi nombre y Arial normal para mi mensaje texto-formatee su texto para que se ajuste perfectamente a su cuadro de fondo de mensaje.
Ahora vamos a agregar un poco de estilo a nuestro mensaje usando solo color; Cambié el color de mi nombre a un turquesa oscuro (muy parecido al negro) y un turquesa lavado inspirado en mi barra de navegación.
Luego inserté una foto mía yendo a Archivo> Lugar. Una vez insertado, cambié el tamaño de la imagen y la coloqué sobre mi caja de avatar negra que creamos anteriormente. Para guardar el corte de la imagen, y también para darle la opción de mover o cambiar el tamaño de su avatar en una fecha posterior, haga clic derecho sobre él y seleccione la opción Crear máscara de recorte. Esto vinculará tu imagen de avatar a tu caja negra de avatar y solo mostrará lo que está sobre la caja negra. Al utilizar la herramienta Mover, encontrará que aún puede mover y cambiar el tamaño de esta imagen.
Usando otro ícono de IconSweets, creé una pequeña y agradable marca de tiempo. Tuve que reducir el tamaño de mi icono; puede hacerlo yendo a Edición> Transformar> Transformación libre y cambiando las dimensiones (en píxeles o porcentaje). Usé el 70% en ancho y alto para mantener las proporciones. Agregué un poco de texto, y listo. Asegúrese de seleccionar un color que sea fácil de leer pero que no llame la atención.
Paso 11: mensajes duplicados
Duplique sus cuadros de mensajes uno debajo del otro, dejando un espacio de 2 px entre cada cuadro de fondo. Puedes hacer esto haciendo clic y arrastrando tus capas sobre el ícono Nueva Capa, o alternativamente puedes presionar Cmd + Shift + Flecha Abajo al mismo tiempo para duplicar y empujar las capas hacia abajo.
Cambia todo el contenido en tus cuadros de mensaje, como si fuera una conversación real. Si necesita cambiar el tamaño de sus cuadros de fondo, use la Herramienta de Selección Directa y cambie su tamaño usando los puntos de anclaje. Esto mantiene todos los bordes agradables y nítidos.
Paso 12: estilo del mensaje
Una vez hecho esto, ahora podemos concentrarnos en dar vida a nuestros buzones de mensajes. Abra el panel de opciones de fusión y seleccione el panel de sombra. Cambie el modo de fusión a normal y seleccione blanco como su color. Aumente la opacidad al 80% en lugar del estándar del 75% y dé a la sombra una distancia de 2px. Esto ocultará el espacio de 2 píxeles que quedamos entre cada uno de los fondos del cuadro de mensaje.
Copie y pegue el estilo de capa anterior en todas las capas de fondo del cuadro de mensaje. Deberías terminar con algo como arriba.
Paso 13: Agregar esquinas redondeadas
Para hacer que nuestro diseño sea más interesante, y también para agregar más profundidad, vamos a agregar esquinas redondeadas al final de nuestros mensajes y hacer que parezca como si se tratara de un montón de papel.
Selecciona la herramienta Rectángulo redondeado y dale un radio de 10px. Cambia el ancho a 600px (o el ancho que utilizaste para los fondos del cuadro de mensaje) y una altura que no exceda la altura del fondo del cuadro de mensaje inferior. Usé un color brillante aquí para que sea fácilmente visible.
Usando la Herramienta de Selección Directa, seleccione el contenido de su capa de forma vectorial (la caja redondeada que acabamos de dibujar) y vaya a Editar> Copiar. Haga clic en la capa de forma vectorial del fondo de su cuadro de mensaje inferior y vaya a Editar> Pegar. Esto pegará el contenido de la capa de forma en su otra capa de forma. Ahora puede eliminar la forma que dibujamos en el paso anterior. Aún deberías ver la forma visible.
Abra las opciones de fusión del fondo del cuadro de mensaje inferior y aplique una sombra paralela. Cambia el color a negro, la opacidad al 25%, la distancia a 1px y el tamaño a 3px. Esto creará una agradable sombra sutil.
Duplique esta capa y empuje hacia abajo 5px. Vuelva a colocar la capa para que quede debajo de su original. Deberías terminar con algo similar a la siguiente. Como puede ver, esta es una manera simple de crear un aspecto de papel superpuesto.
Repite el paso de nuevo para que tengas tres hojas de papel en lugar de solo dos. Es posible que desee darle a su pieza de papel inferior una sombra ligeramente más notable.
Paso 14: barra de navegación sombreada
Probablemente habrás notado que, al diseñar nuestros cuadros de mensaje, escondimos la mayor parte de la sombra paralela que nuestra barra de navegación estaba proyectando en nuestro fondo. Para reemplazar esto, puede colocar sus mensajes debajo de la barra de navegación (la opción fácil pero poco realista) o completar el siguiente paso.
Seleccione la herramienta Rectangular Marquee Tool y dibuje una línea delgada en la parte superior de sus mensajes similar a la anterior. Rellenar con negro en una nueva capa.
Ve a Filtro> Desenfocar> Desenfoque gaussiano y aplica el desenfoque. Esto actuará ahora como una sombra: simplemente recorta cualquier parte del desenfoque que se superponga a los bordes del fondo del cuadro de mensaje.
Paso 15: botones de perfil e informe
En referencia a nuestros wireframes, habíamos decidido permitir a los usuarios deslizar un mensaje hacia la izquierda para revelar más botones. En este caso, esos botones permiten al usuario ver el perfil de carteles de mensajes o informar el cartel del mensaje.
Seleccione las capas que componen uno de sus mensajes (estoy eligiendo el mensaje de Homer Simpsons) y usando la tecla Mayús y las teclas de flecha, empuje su mensaje 10px a la izquierda. Usando la herramienta de texto, escriba sus etiquetas, y luego seleccione algunos íconos para corresponder con esas etiquetas. Elegí una persona individual para el perfil y un objetivo para el informe (como si los estuvieras derribando, ¡pensé que era muy divertido!).
Para darle más profundidad a esta área, agregué una sombra negra a los íconos y al texto.
Paso 16: barra de campo de texto
La barra de campo de texto es uno de los elementos más importantes en esta pantalla. Los usuarios deben poder ingresar sus mensajes con facilidad y sin confusión (por lo que eliminé el botón de envío oculto en los conceptos iniciales del boceto).
Para comenzar, ubique su capa de fondo y copie los estilos de capa. Pegue estos estilos de capa en la capa de barra de campo de texto que creamos anteriormente. Abra las opciones de fusión para esta capa y seleccione el panel de trazos. Aplica un trazo de 2px en el exterior de la forma con negro sólido como color. Como el trazo está en el exterior y la forma toca tres bordes del lienzo, solo se mostrará el trazo en la parte superior de la forma.
Ahora seleccione la pestaña sombreada interior y cambie el modo de fusión a normal, el color a blanco, la opacidad al 10% y la distancia a 2 píxeles. Asegúrese de que el ángulo esté configurado en la luz global predeterminada (90 grados) y haga clic en Aceptar. Esto nos da una buena iluminación debajo de nuestro trazo negro. Con estas dos simples líneas de 2px aplicadas, nuestra barra de campo de texto ya se ve bien separada del resto del fondo, ¡aunque tiene el mismo fondo!
Seleccione la herramienta Rectángulo redondeado. Dale a tu herramienta un radio alto, utilicé 50px; esto le dará extremos muy redondos (circulares). Coloque una forma en su barra, utilicé 460x54px como mis dimensiones. Asegúrese de que el lado izquierdo de la forma de su campo de texto esté a 20px de distancia del lado izquierdo de su lienzo para mantener el espacio de diseño consistente.
Llena la forma con un color oscuro (utilicé un marrón seleccionado de un píxel oscuro en el fondo) y luego abro el panel de estilos de capa. Aplique una sombra paralela de 2 píxeles a su campo de texto con una opacidad del 10%.
Haga clic en el panel sombreado interno y aplique una sombra interior a la forma del campo de texto. Esto le dará mucha más profundidad y lo hará ver como si estuviera cortado en el fondo de las barras. Use negro con un modo de mezcla de multiplicar y una opacidad del 25%. Usé 5px como mi distancia y 10px como mi tamaño, aunque es posible que desee experimentar aquí.
Usando la herramienta de texto y equipado con Arial Rounded MT Bold, escriba "Escribir un comentario ..." y colóquelo en su cuadro de campo de texto. Abra las opciones de fusión para su nueva capa de texto y aplique una sombra paralela negra con una opacidad del 75%, una distancia de 2px y un tamaño de 3px.
Paso 17: botón de campo de texto
Vuelva a seleccionar la herramienta de forma de rectángulo redondeado y utilizando la misma configuración de radio y la altura que utilizamos anteriormente, coloque una forma en el fondo de la barra de campo de texto. Cambiar el tamaño de la longitud de su botón para que se sienta 10px desde su campo de texto y 20px desde el borde derecho del lienzo.
Haga clic con el botón derecho en su nueva capa de forma de botón y seleccione las opciones de fusión. Seleccione el panel de superposición de degradado y aplique un degradado de claro (arriba) a oscuro (abajo). Usé el magnífico color amarillo que estaba en la paleta de colores que seleccioné anteriormente.
Para mantener la consistencia de nuestro diseño, aplicaremos un trazo a nuestro botón que lo hará parecer como si saliera del fondo, al igual que lo hicimos con los botones en la barra de navegación. Esta vez usé el negro sólido en lugar de un trazo de degradado ya que el fondo es mucho más oscuro y no está lleno de un degradado. Usé un trazo de 2px en el interior de mi figura con 100% de opacidad.
Seleccione la herramienta de texto y escriba "Enviar" en su botón. Abra las opciones de fusión para su nueva capa de texto y aplique una sombra paralela marrón a su texto con una distancia de 1px y tamaño de 3px.
Y con eso terminado, ¡ya terminamos! Nos encantaría ver sus resultados, así que siéntase libre de publicarlos en la sección de comentarios a continuación. Si desea ver el diseño a resolución completa, puede ver que aquí .