Share
A la mayoría de las aplicaciones móviles les falta ese detalle extra de diseño que podría ayudarlas a destacar entre la multitud de App Store. Si bien no hay un reemplazo para tener un diseñador talentoso que pule los píxeles de su aplicación durante horas y horas, el propósito de esta serie es enseñarles a aquellos con experiencia limitada en Photoshop y un presupuesto bajo o no cómo hacer que las aplicaciones brillen!
Esta serie está dirigida al desarrollador que no tiene el presupuesto para contratar a un diseñador profesional. Le enseñará cómo crear elementos llamativos con un conocimiento y esfuerzo muy limitados de Photoshop..
En esta publicación, nos centraremos en modificar los archivos PSD existentes para obtener el aspecto que está buscando para su aplicación.
Si eres programador, ¿has leído alguna vez el código de otra persona para saber cómo lograron una tarea en particular? Casi todos los programadores lo hacen, y el diseño de aprendizaje no es diferente. Al igual que en el mundo del desarrollo, hay muchos sitios web llenos de PSD con los que puedes experimentar y aprender. Algunos de estos sitios incluso le permiten alterar los PSD y usarlos en su propio trabajo. La palabra clave es alterar. Si bien muchos de los PSD a los que me refiero podrían ser copiados y utilizados comercialmente sin modificaciones, aconsejaría no hacerlo. No aprenderá de esa manera, y no lanzará un diseño que sea verdaderamente único para su aplicación.
Como se mencionó, hay cientos de sitios que ofrecen PSD gratuitos. Sin embargo, si está buscando crear un proyecto del mundo real, el truco consiste en encontrar los sitios que le permitirán reutilizar esos PSD en su propio trabajo. A menos que simplemente navegue con fines educativos, por lo general solo reviso sitios que brindan tanto trabajo de alta calidad como términos de uso flexibles. A continuación están mis cinco sitios relacionados con PSD favoritos:
El punto aquí es simple: como desarrollador, es probable que carezca de la habilidad necesaria para crear aplicaciones extremadamente pulidas por su cuenta. Sin embargo, puede combinar rápidamente los diseños de otros para crear su propia sensación única con muy poco conocimiento de Photoshop.
Usando la técnica de "Mashup" de PSD discutida anteriormente, estaremos diseñando una barra UINavigation personalizada utilizando una PSD de www.pixelbeam.net. Iban a alterar Varios elementos en el PSD para crear nuestra propia sensación única..
Descarga la PSD aquí y abre el archivo en Photoshop.
Crea un nuevo proyecto de 640 x 88..
Ahora use el botón Organizar documentos para dividir la pantalla entre ambos proyectos.
Para esta parte del proceso, asegúrate de que la opción Auto-Select Layer esté seleccionada. Esto significa que Photoshop seleccionará automáticamente la capa del elemento en el que acaba de hacer clic. Esto ayuda cuando se navega a través de PSD más grandes. Puedes desactivarlo cuando sea necesario durante este proyecto.
Con la herramienta Mover, seleccione la viñeta activa que se muestra arriba. Notarás que Photoshop seleccionó automáticamente esa capa..
Mientras aún se encuentra en el modo de pantalla dividida, arrastre la capa de viñetas activa a la pantalla de su barra de UINavigation. Notará que su capa y estilos de capa se han copiado a su proyecto UINavigationBar.
Ahora haga doble clic en la miniatura de la capa. Esto abrirá el selector de color. Desde aquí puedes cambiar el color de la bala..
Copie el Color de bala # 567200 y configúrelo como su color de primer plano.
Use la herramienta Paint Bucket Tool para llenar su proyecto con el color # 567200.
Haga clic derecho en la capa de viñeta activa. Seleccione Copiar estilo de capa.
Haga clic derecho en su capa UINavigationBar y seleccione Pegar estilo de capa.
Seleccione el fondo del área de la diapositiva. Al igual que en el Paso 6, Photoshop seleccionará automáticamente la capa (debe seleccionarse Auto-Select Layer). Ahora mueva la capa a su proyecto UINavigationBar.
Pase el mouse sobre el estilo de capa "Superposición de patrón". Haga clic y arrástrelo a su capa UINavigationBar.
Asegúrate de que todas las capas excepto la capa UINavigationBar sean invisibles.
Haga doble clic en el estilo de capa Superposición de patrón. Aparecerá el cuadro de estilo de capa de Superposición de patrón. Baje la opacidad a 8..
Si desea integrar una barra UINavigation personalizada en su proyecto, puede revisar el código de muestra en este proyecto github.
Tómese un tiempo para mirar a través de la PSD. Rápidamente se dará cuenta de que un buen diseño es difícil y consume mucho tiempo. Al mismo tiempo, vale la pena el trabajo duro para la estética final lograda.. Si tiene el presupuesto para un gran diseñador, le recomiendo que busque y contrate uno.. Si no tiene el presupuesto, mezcle sus propios elementos de diseño utilizando diferentes PSD. También recomiendo estudiar diseños que se encuentran en sitios como Creattica Mobile, Pattrns y Beautiful Pixels.
Espero que encuentre útil este tutorial. Si creas algo increíble, envíame un tweet a @williamherring.
*La imagen de vista previa para esta publicación fue creada modificando el Leatherly - Plantilla de una página que se puede encontrar aquí. El UINavigationBar fue creado modificando el Simple control deslizante oscuro tema que se puede encontrar aquí.
Accentsconagua