Share
Photoshop CS6 es una aplicación de edición de vectores mucho más poderosa que sus antecesoras. En este tutorial, le mostraremos cómo usar estas nuevas funciones para crear una interfaz de aplicación de reproductor de música para iPhone tanto en la resolución original del iPhone como en la retina sin tener que repetir el mismo proceso para ambos diseños. Empecemos!
Los siguientes recursos fueron utilizados durante la producción de este tutorial..
Crea un nuevo archivo. Establezca el ancho en 320px y la altura en 480px.
En este paso vamos a crear el fondo. Hay una nueva forma más fácil de crear formas vectoriales en Photoshop CS6 y vamos a utilizar ese método en todo el tutorial..
Crea un nuevo grupo y llámalo "Fondo". Seleccione la herramienta Rectángulo (R) y, en la barra de opciones, configure el Modo de herramienta en Forma, luego haga clic en el botón que se encuentra justo al lado para elegir el Tipo de relleno de forma. En la lista de tipos de relleno, seleccione el botón Degradado. Establezca todos los valores iguales a los valores que están resaltados en la imagen de abajo. Usa los colores # 3F4042 y # 303133 para el gradiente.
Haga clic en cualquier lugar en el lienzo. Cuando se abra la ventana Crear rectángulo, simplemente haga clic en Aceptar y asegúrese de que las dimensiones estén configuradas en 700x700px. Nombre la capa recién creada "Fondo".
Presione Cmd / Ctrl + A para seleccionar todo el lienzo, seleccione la herramienta Mover (V) y luego, en la barra de opciones, haga clic en los botones Alinear centros horizontales y Alinear bordes inferiores.
Haga doble clic en la miniatura de la capa en la capa "Fondo" y asegúrese de que esté marcada la casilla de verificación Dither. De esta forma obtendrás un degradado suave sin bandas..
Abra statusbar.psd en Photoshop e importe el grupo de la Barra de estado a su PSD en funcionamiento. Utilice el método mencionado anteriormente para alinear el grupo "Barra de estado": presione Cmd / Ctrl + A para seleccionar todo el lienzo y mientras usa la herramienta Mover (V), haga clic en los botones Alinear centros horizontales y Alinear bordes superiores.
Cree un nuevo grupo debajo del grupo "Barra de estado" y asígnele el nombre de "Barra de navegación". Seleccione la herramienta Rectángulo redondeado (U) y configure las propiedades como se muestra en la imagen a continuación. Use # 5F8F1D y # 99B83D para el gradiente. Haga clic en cualquier lugar del lienzo y haga clic en Aceptar cuando aparezca la ventana Crear rectángulo redondeado. Nombra la capa recién creada "Nav Bg".
Alinee la capa horizontalmente al centro y verticalmente justo debajo de la barra de estado como se muestra a continuación.
Seleccione la herramienta Rectángulo (U) y dibuje una forma de rectángulo similar a la que se muestra a continuación, pero asegúrese de que esta forma cubra solo la parte inferior de la capa "Nav Bg". Usé la opción Sin color para el tipo de relleno de forma.
Usando la Herramienta de selección de ruta (A), seleccione la forma recién creada. Presione Cmd / Ctrl + C para copiar la forma al portapapeles. Ahora seleccione la capa "Nav Bg" en el panel Capas y presione Cmd / Ctrl + V. Ahora la forma se pega en la capa "Nav Bg".
Con la Herramienta de selección de ruta (A) aún activada, haga clic en el botón Operaciones de ruta en la barra de opciones y luego seleccione Restar forma frontal.
Ahora haga clic nuevamente en el botón Operaciones de ruta y luego seleccione Combinar componentes de forma.
Usando la herramienta de selección directa (A), seleccione los dos puntos inferiores y muévalos hasta que la altura de la forma sea 43px.
Aplique el siguiente estilo de capa a la capa "Nav Bg":
Usando la herramienta Rectángulo redondeado (U), dibuje una forma con las propiedades que se muestran a continuación. Utilice el color sólido para el tipo de relleno de forma. Nombra la capa recién creada "Configuración Bg".
Aplicar el siguiente estilo de capa:
Mueva "Settings Bg" para que esté alineado verticalmente con el centro de "Nav Bg" y horizontalmente 6px desde el borde derecho del lienzo.
Abra icons.psd y mueva la capa "Configuración" a su PSD. Alinee el ícono horizontalmente y verticalmente al centro de "Configuraciones Bg".
Aplicar el siguiente estilo de capa:
Usando la herramienta Rectángulo redondeado (U), dibuje una forma con las propiedades que se muestran a continuación. Utilice el color sólido para el tipo de relleno de forma. Nombra la capa recién creada "Back Bg".
Usando la herramienta Agregar punto de anclaje, agregue un punto de anclaje en el lado izquierdo del rectángulo y 14px debajo del borde superior.
Usando la herramienta Convertir punto, haga clic en el mismo punto de anclaje.
Ahora seleccione la Herramienta de selección directa (A) y mueva el punto 10px a la izquierda.
Con la Herramienta de selección directa (A) aún activada, seleccione los dos puntos de anclaje que están resaltados en la imagen de abajo y muévalos 1px hacia la izquierda. Luego seleccione la herramienta Convertir punto y haga clic en cada uno de los dos puntos de anclaje.
Alinee la forma verticalmente al centro de "Nav Bg" y 6px horizontalmente desde el borde izquierdo del lienzo.
Ahora que hemos terminado con el dibujo de la forma, podemos agregarle un estilo. Haga clic derecho en la capa "Configuración Bg" y seleccione Copiar estilo de capa, luego haga clic derecho en la capa "Atrás Bg" y seleccione Pegar estilo de capa.
Agregue texto al botón usando los parámetros de la imagen de abajo. Utilicé la fuente Helvetica Neue. Alinee el texto al centro de la forma y copie el estilo de capa desde la capa "Configuración".
Agregue el texto del título usando los parámetros de la imagen de abajo y alinéelo con el centro de la barra de navegación.
Cree un nuevo grupo debajo del grupo "Barra de navegación" y asígnele el nombre de "Posición". Seleccione la herramienta Rectángulo (U) y configure las propiedades como se muestra en la imagen a continuación, luego haga clic en algún lugar del lienzo. Use # 2E2F30 y # 494A4C para el gradiente. Nombra la capa "Posición Bg".
Coloque la forma debajo de la barra de navegación, pero asegúrese de que haya un espacio de un píxel entre ellas. Alinea la forma horizontalmente al centro del lienzo.
Aplique el siguiente estilo de capa a la forma:
Seleccione la herramienta Rectángulo redondeado (U) y configure las propiedades como se muestra en la imagen a continuación, luego haga clic en algún lugar del lienzo. Establece el radio a un valor más alto. Utilicé 50px.
Nombra la capa "Posición vacía" y alinéala, tanto horizontal como verticalmente, al centro de la capa "Posición Bg".
Aplicar el siguiente estilo de capa:
Seleccione la herramienta Rectángulo redondeado (U) y configure las propiedades como se muestra en la imagen a continuación, luego haga clic en algún lugar del lienzo. Use # 85AD2A, # A0D028 y # B6D028 para el gradiente. De nuevo, configura el Radio a un valor más alto. Nombre de esta capa "Posición completa".
Alinee la forma como se muestra en la imagen de abajo, pero asegúrese de que haya un espacio de dos píxeles en todos los lados entre la forma y la capa "Posición vacía".
Aplique el siguiente estilo de capa a la forma:
Seleccione la herramienta Elipse (U) y configure las propiedades como se muestra en la imagen a continuación, luego haga clic en algún lugar del lienzo. Use # 444547 y # 5C5E61 para el gradiente. Nombre de esta capa "Manejar".
Alinee esta forma de modo que cubra el borde derecho de la capa "Posición completa".
Aplicar el siguiente estilo de capa:
Seleccione de nuevo la herramienta Elipse (U) y configure las propiedades como se muestra en la imagen a continuación, luego haga clic en algún lugar del lienzo. Use # 636669 y # 38393B para el gradiente. Nombre de esta capa "Círculo de mango".
Alinee la forma con el centro de la capa "Mango".
Añadir texto por el tiempo. Utilice Helvetica Neue, Bold. El tamaño es de 10 puntos y el color # B2B2B2. Alinee el texto como se muestra en la imagen de abajo.
Crea un nuevo grupo y llámalo "Controles de reproducción". Usando la herramienta Elipse (U), dibuje un círculo con dimensiones de 50x50 px. No preste atención a los otros parámetros. Nombra la nueva capa "Play Bg".
Expanda el grupo "Posición", haga clic con el botón derecho en la capa "Mango" y seleccione Copiar atributos de forma en el menú.
Vuelva al grupo "Controles de reproducción", haga clic con el botón derecho en la capa "Reproducir Bg" y seleccione Pegar atributos de forma en el menú. Esta es una nueva característica en Photoshop CS6. De esta manera, en lugar de configurar todos los atributos para el tipo de relleno de forma, como los colores degradados, el ángulo, etc., estamos copiando esos atributos de la capa "Manejar", ya que estamos usando los mismos valores para la capa recién creada..
Alinee la capa horizontalmente con el centro del lienzo y verticalmente 20px debajo de "Posición Bg".
Aplicar el siguiente estilo de capa:
Haga clic derecho en la capa "Play Bg" y seleccione Duplicate Layer. Nombra la nueva capa "Fast Backward Bg".
Usando la herramienta de selección de ruta (A), haga clic en la capa "Fast Backward Bg" y cambie las dimensiones en la barra de opciones a 34x34px.
Alinee la capa verticalmente al centro de "Play Bg" y horizontalmente 8px a la izquierda.
Duplique "Fast Backward Bg" y nombre la nueva capa "Fast Forward Bg". Alinee la capa igual que la anterior, pero esta vez en el lado derecho.
Crea una nueva forma de círculo con los parámetros de la imagen de abajo. Use # 46484A y # 2C2D2E para el gradiente. Asegúrese de que la capa recién creada esté debajo de todas las otras capas en el grupo "Controles de reproducción".
Nombra la capa "Playback Bg" y alinéala horizontal y verticalmente al centro de "Play Bg"
Duplique "Playback Bg" y reduzca el tamaño a 48x48px, utilizando el método que usamos en el Paso 12. Alinee la capa con el centro de "Fast Backward Bg".
Ahora duplique la capa de nuevo y alinéela con el centro de "Avance rápido Bg".
Importe las capas "Retroceso rápido", "Reproducir" y "Avance rápido" desde icons.psd. Alinee los iconos como se muestra en la imagen de abajo.
Seleccione las tres capas de iconos manteniendo pulsado Cmd / Ctrl en el teclado y haciendo clic en cada capa en consecuencia. Ajusta la opacidad al 85%..
Importe las capas "Altavoz" y "Repetir" desde icons.psd. Alinee los iconos como se muestra a continuación.
Los iconos importados están rellenos de color sólido, pero vamos a aplicarles un degradado. Usando la Herramienta de selección de ruta (A), seleccione la capa "Altavoz" y configure los parámetros de la imagen a continuación. Usa los colores # 6B6C70 y # 797B80 para el gradiente.
Copie los atributos del icono del altavoz con la opción Copiar atributos de forma y péguelos en el icono de repetición.
Aplique el siguiente estilo de capa al altavoz y repita los iconos:
En este paso vamos a colocar las carátulas del álbum en nuestro diseño. Después de la importación, los convertiremos en objetos inteligentes y reduciremos el tamaño de los objetos inteligentes en un 50%. Estamos haciendo esto porque en el paso final del tutorial el archivo cambiará de tamaño a la resolución de la retina. De esta manera no perderemos la calidad de las imágenes de trama después de cambiar el tamaño a retina.
Abra albumcover-02.jpg e importe la imagen a su PSD.
Convierta la capa en objeto inteligente yendo a Capa> Objetos inteligentes> Convertir a objeto inteligente. Presione Cmd / Ctrl + T en el teclado para transformar la capa. Reducir el tamaño al 50%. Nombre de esta capa "Centro de portada del álbum".
Alinee la capa horizontalmente con el centro del lienzo y verticalmente 20px debajo de la capa "Play Bg".
Usando la herramienta Rectángulo redondeado (U), dibuje una forma con los parámetros que se muestran a continuación. Establece el tamaño a 180x180px. No use color para el tipo de relleno de forma y establezca el radio a 3px.
Alinee la forma exactamente encima de la imagen de portada del álbum.
Ahora aplique la forma a la imagen de portada del álbum arrastrando el cursor del mouse desde la miniatura de la capa del rectángulo redondeado a la miniatura de la capa "Centro de portada del álbum", mientras mantiene presionadas las teclas Cmd / Ctrl + Alt en su teclado. Una vez que haya terminado de copiar, elimine la capa con el rectángulo redondeado, ya que ya no lo necesitamos.
Abra albumcover-01.jpg e importe la imagen a su PSD, conviértala en un objeto inteligente y cambie su tamaño al 50%. Alinee la cubierta verticalmente con el centro de la capa "Centro de cubierta del álbum" y horizontalmente 40px a la izquierda. Nombra la capa "Album Cover Left".
Usando la herramienta Rectángulo redondeado (U), dibuje una forma con los parámetros que se muestran a continuación. Esta vez establece el tamaño a 160x160px. No use color para el tipo de relleno de forma y establezca el radio a 3px.
Copie la forma del rectángulo redondeado a la capa "Álbum cubierta izquierda" utilizando el mismo método para la cubierta central. Una vez que haya terminado, elimine la capa con el rectángulo redondeado.
Abra albumcover-03.jpg e impórtelo a su PSD. Repita el mismo procedimiento que usamos para la cubierta izquierda, pero esta vez alinee la imagen en el lado derecho como se muestra a continuación.
Aplique el siguiente estilo de capa a la cubierta central:
Copie el estilo de capa de la cubierta central y péguelo en las otras dos cubiertas. Ahora seleccione las capas de cubierta izquierda y derecha y establezca el Relleno en 50%.
Inserte un texto para el título de la canción en reproducción. Colócalo unos pocos píxeles debajo de la cubierta central..
Inserta otra línea de texto para el autor de la canción en reproducción. Alinear ambas líneas al centro.
Usando la herramienta Rectángulo (U), dibuje una forma con los parámetros que se muestran a continuación. Use # 292A2B y # 38393B para el gradiente.
Alinee la forma con la esquina inferior izquierda del lienzo.
Usando la herramienta Agregar punto de anclaje, agregue dos puntos de anclaje y establezca las distancias como se muestra en la imagen.
Seleccione los dos puntos de anclaje que están resaltados en la imagen y muévalos 6px hacia arriba.
Usando la herramienta de selección directa (A), arrastre las líneas de dirección para que se vean similares a las que se muestran a continuación..
En este paso completaremos el fondo de la barra de pestañas duplicando y duplicando la ruta que creamos en el paso anterior.
Duplique la capa y gírela horizontalmente yendo a Edición> Transformar ruta> Voltear horizontalmente.
Mueva la capa duplicada exactamente a la esquina inferior derecha del lienzo. Un aviso importante: asegúrese de que no haya espacios entre las dos formas.
Ahora seleccione ambas capas como se muestra en la imagen, haga clic con el botón derecho y seleccione Combinar formas.
Esta debe ser la forma resultante. Como puede ver, hay una línea vertical en el centro de la forma. Esto significa que tenemos dos formas en una capa que no están completamente fusionadas.
Con la Herramienta de selección de ruta (A), haga clic en la capa de forma, haga clic en el botón Operaciones de ruta en la barra de opciones y seleccione Combinar componentes de forma. Ahora tienes las dos formas completamente fusionadas. Nombra esta capa "Tab Bar Bg".
Si seleccionamos la Selección Directa (A), notaremos que hay algunos puntos de anclaje innecesarios que se crearon durante la fusión de las formas. Siempre trata de mantener tus caminos limpios de puntos innecesarios..
Para eliminar estos puntos de anclaje, seleccione la herramienta Eliminar punto de anclaje y haga clic en los dos puntos de anclaje respectivamente.
Aplique el siguiente estilo de capa a "Tab Bar Bg":
En este paso, crearemos guías que nos ayudarán a alinear los iconos de la barra de pestañas más fácilmente..
Con la herramienta Rectangular Marquee (M), realice una amplia selección de 60 px a partir del lado izquierdo del lienzo.
Ahora arrastre una guía desde la regla izquierda y colóquela en el borde derecho de la selección. Asegúrese de que la opción para ajustar las guías esté activada. Puede encontrar esto yendo a Ver> Ajustar a> Guías.
Repita el procedimiento anterior para colocar las otras guías. Establece las distancias como se muestra en la imagen de abajo.
Arrastre dos guías horizontales desde la regla superior y configure las distancias como se muestra en la imagen.
Arrastre la capa "Inicio" desde el archivo icons.psd.
Con la herramienta Rectangular Marquee (M), haga una selección que se ajuste a las guías como las que se muestran a continuación.
Con la herramienta Mover (V), haga clic en los botones Alinear centros verticales y Alinear centros horizontales en la barra de opciones.
Escriba el texto "Inicio" con los siguientes parámetros:
Alinee el texto verticalmente cerca de la guía inferior y horizontalmente al centro del icono.
Repita el paso 21 para los otros iconos y el texto (Favoritos, Listas de reproducción y Buscar). Usa la imagen de abajo para referencia.
Usando la herramienta Rectángulo (U), dibuje una forma con los parámetros de la imagen de abajo. Use # 5F8F1D y # 99B83D para el gradiente.
Alinee la forma de modo que su borde superior toque la guía horizontal superior y horizontalmente al centro de la barra de pestañas. Nombra la capa "Now Playing Bg".
Aplicar el siguiente estilo de capa:
Arrastre la capa "Reproducción en curso" desde el archivo icons.psd y cambie el color de relleno de la capa a # 000000.
Aplicar el siguiente estilo de capa:
Alinee el ícono horizontalmente al centro de "Now Playing Bg" y verticalmente algunos píxeles debajo de su borde superior.
Escriba el texto "Reproduciendo ahora" con los siguientes parámetros:
Alinee el texto de nuevo horizontalmente al centro del botón y verticalmente unos píxeles debajo del icono. Copia el estilo de capa desde el icono de Reproducción en curso..
Hemos terminado con la creación de todos los elementos del diseño. Pero nos queda un paso final, y es escalar el archivo a la retina.
La escala a la resolución de la retina es muy fácil y solo toma un paso. Vaya a Imagen> Tamaño de imagen y configure los valores como se muestra a continuación. Asegúrese de que todos los parámetros resaltados estén configurados exactamente igual que en la imagen.
Este debería ser el resultado después de cambiar el tamaño de la imagen a la resolución de la retina..
Propina:Siempre intente dibujar los elementos en sus diseños con formas vectoriales, tal como lo hicimos en este tutorial. De esa manera, puede personalizarlos fácilmente y no perderá calidad cuando escale a la retina.
En este tutorial, le mostramos cómo crear una interfaz de aplicación de iPhone en Photoshop utilizando sus nuevas capaci
Accentsconagua