Share
Acéptalo, hay una aplicación para casi todo. Con las nuevas aplicaciones viene la innovación en la forma en que podemos presentar nuestros productos móviles a clientes potenciales. Apple nos ha bendecido con una marca bellamente brillante y elegante que, básicamente, crea grandes sitios web para nosotros. Este tutorial lo llevará un paso más allá, incorporando un estilo ilustrativo debajo del brillo de Apple, para reunir una página de destino única en su clase..
Acéptalo, hay una aplicación para casi todo. Con las nuevas aplicaciones viene la innovación en la forma en que podemos presentar nuestros productos móviles a clientes potenciales. Apple nos ha bendecido con una marca bellamente brillante y elegante que, básicamente, crea grandes sitios web para nosotros. Este tutorial lo llevará un paso más allá, incorporando un estilo ilustrativo debajo del brillo de Apple, para reunir una página de destino única en su clase..
Tal vez sea de la vieja escuela, pero todavía me encanta el sitio que se fija en 960px. Es un número redondo tan agradable, divisible por 1, 2, 3, 4, 5, 6, 8, 10 que hace que trabajar con una pseudo-grilla sea mucho más fácil. Este tutorial no es diferente; Así que he creado un nuevo documento que es de 1000 px por 1200 px con directrices que se basan en el centro para un diseño de 960 px por 1200 px..
A continuación, vamos a configurar las columnas que usaremos para el resto del diseño. Elegí 3 columnas, con 40px de relleno entre ellas. Las columnas de izquierda a derecha son 240px, 390px, 240px.
Ya que queremos que nuestro diseño se vea como si estuviera sentado en una estantería, necesitamos algún tipo de papel tapiz para sentarse justo detrás..
Cree una nueva capa y rellene toda la capa con blanco (Shift + F5). A continuación, vaya a las propiedades de su capa y superponga su patrón ornamentado (me estoy saltando la creación del patrón, ya que asumo que todos ya saben cómo hacerlo).
Después de aplicar el estilo de capa, nuestro documento debe verse algo como esto:
Crearemos una nueva capa que abarque todo el documento y aproximadamente 140 px de altura. Usaremos la misma técnica que en el Paso 2, aunque aplicaremos una textura de madera en lugar de la textura ornamentada. Una vez más, hay cientos de sitios que regalan texturas de madera libres de regalías: Búsqueda de Google para texturas de madera libres de derechos
El resultado debería ser algo como esto:
Renombra esta capa 'estante'.
El estante se ve un poco plano, por lo que necesitamos agregar algo de profundidad usando degradados, sombras y resaltes. Agregue nuevos estilos de capa para: Trazo, Sombra y Superposición de degradado de la siguiente manera:
Puede que te estes diciendo que la sombra paralela se ve bastante fea en este momento. Convenido; pero no se verá tan duro una vez que tengamos los libros delante de él. Así es como debería verse tu documento ahora:
A continuación, vamos a crear el borde frontal de la plataforma. Duplique (Comando + J) la capa de "estante" y cámbiele el nombre a "frente de estante". Mueva la capa 'parte frontal del estante' hacia abajo para que la parte inferior de la capa 'estante' se alinee con la parte superior de la capa 'parte superior del estante'. Recorte 20px desde la parte inferior de la capa "parte superior del estante" para que las alturas varíen. Queremos dar la ilusión de que el estante es más profundo que el frente del estante es alto.
A continuación, debemos cambiar algunos de los estilos de capa para la capa 'top of shelf'. Primero, debemos mover la capa 'parte frontal del estante' debajo de la capa 'estante' en su paleta de capas. Luego invertiremos el gradiente (y disminuiremos su opacidad) ya que queremos que la sombra esté en la parte inferior en lugar de en la parte superior. Al hacer esto, crearemos una fuente de luz que se encuentra en la esquina superior frontal del estante, justo donde mostraremos nuestros libros y la captura de pantalla de nuestro iPhone.
Después de aplicar todos los estilos de capa, su imagen debería verse así:
Ahora podríamos detenernos aquí, pero creo que solo falta un poco más de detalles en el estante. Las esquinas aún parecen un poco planas, y queremos que tenga una tonelada de profundidad, por lo que agregaremos algunas líneas de resaltado altas simples de 1 px para darle un impulso adicional de profundidad adicional..
Cree la línea justo debajo del borde de trazo de 2px de la capa del "estante". Luego, puede elegir un color para rellenar (Mayús + F5) que sea más claro que toda la veta de madera del estante, o simplemente rellenar con blanco y ajustar la opacidad. El resultado, te dará ese bit extra de profundidad:
Reutilizaremos nuestro patrón de madera desde la creación del estante de arriba para crear un tipo de "espalda" en nuestra estantería. La idea aquí es hacer que parezca que hemos puesto el iPhone y los libros en la parte superior de la estantería y tener nuestra información complementaria en el interior. Crearemos esta capa debajo de las capas del estante en la pila..
Cree una selección, un relleno con su patrón de madera (Mayús + F5). Cambia el nombre de esta capa por 'parte posterior del estante'.
Debido a que nuestra fuente de luz está dirigida hacia la esquina superior frontal del estante, debemos hacer que la parte posterior sea un poco más oscura para que se vea más como un estante de libros con profundidad, y menos como pisos de madera. Es fácil hacer esto con los estilos de capa; Agregue un estilo de capa "Superposición de color" a su capa 'parte posterior del estante' y establezca el color en Negro. Ajuste la opacidad al 50%, y ahora debería ver la madera más oscura para la parte posterior de la estantería.
Después de un ligero ajuste con la opacidad de mi fondo adornado, tu imagen debería verse así:
Ahora que tenemos todo el documento configurado, así como todas las capas de fondo creadas para el tema, seguiremos adelante y crearemos todos los elementos que se ubicarán sobre el fondo (técnicamente, en el fondo).
Para el logotipo, elegí la fuente Rockwell (es mi obsesión últimamente) a 60px. Crea una nueva capa de texto con texto: "Léelo". Para obtener esa sensación de burbuja, necesitamos agregar algunos estilos de capa para trazo, superposición de degradado, sombra interior, brillo exterior (casi todos los estilos de capa que posiblemente pueda agregar). Aquí están los ajustes:
Una vez que haya aplicado los estilos de capa, alinee su logotipo con la guía más a la derecha. Debería verse algo como esto:
Ahora necesitamos la cinta de marcadores para la "i". Comenzaremos creando una nueva forma (que creé desde cero con la herramienta Lazo poligonal). Rellena tu selección con cualquier color. Debería estar en estas líneas:
Dado que un marcador negro sólido es extremadamente feo, debemos agregarle algo de brillo. Todo lo que necesitamos aquí es una Superposición de Sombra, Trazo y Gradiente para que la cinta se destaque:
Tu cinta de marcadores ahora debería estar así:
Todo lo que queda es agregar la "i", que usaremos la misma fuente (Rockwell) con texto blanco. Agregue una ligera sombra interior (70% de opacidad; 90 grados; Distancia: 1; Estrangulamiento: 0; Tamaño: 1) y debería estar todo listo. También he agregado un patrón a mi marcador, pero esto es básicamente lo que deberías estar viendo:
No te preocupes No es necesario crear todo esto desde cero. La belleza de la web ahora es que hay miles de opciones para ilustraciones en stock, lo que le ahorrará tiempo al final. Encontré los libros en iStockphoto aquí. Estos libros exactos no son del todo críticos para este tutorial, por lo que si lo prefiere, siempre puede pasar a la siguiente sección..
Si eligió comprar los libros, colóquelos en su imagen en la mitad superior de su estante:
Los libros son demasiado planos por sí mismos, así que agregaremos algunas sombras de perspectiva más (como hicimos con las esquinas de los estantes) para que parezcan que están sentados en el estante. Lo primero es lo primero, cambia el nombre de la nueva capa con los libros a 'libros'.
Agregue una Sombra a la capa de 'libros' con la siguiente configuración: Opacidad: 19%; Ángulo: -90; Distancia: 10; Propagación: 10; Tamaño: 15. Para el color, elija un marrón de la capa 'parte posterior del estante'. Aquí usamos marrón porque el negro parece demasiado y no coincide.
Para crear la sombra debajo de los libros, crearemos una nueva elipse negra que abarque todo el ancho de los libros que están en posición vertical. Trataremos el libro inclinado después..
Rasterice la elipse negra y vaya a Filtro> Desenfoque> Desenfoque de Gaussion. Use un radio de 4.7 para obtener la extensión deseada. Ajusta la opacidad de la capa de elipse negra al 70% para suavizarla un poco. El resultado debería verse así:
Repita la misma técnica para el libro inclinado, pero con una elipse mucho más pequeña. Debería verse algo como esto:
Ninguna página de destino de iPhone está completa sin un iPhone grande y brillante, y este tutorial no es una excepción. He usado la plantilla de iPhone de la gran gente de teehan + lax para emular al dispositivo. Elimine las capas que no desee incluir en su iPhone y arrástrelas a su documento. Colóquelo un poco más abajo en el estante superior para dar la ilusión de que el iPhone está más cerca de usted que los libros. Queremos que bonito iPhone de frente y centro.
Obviamente, aquí es donde iría tu captura de pantalla de héroe de tu aplicación. No voy a agregar nada a la mía, pero seguramente será bienvenido a medida que siga el tutorial. Además, usaremos la misma técnica del Paso 6 para agregar una sombra a la parte inferior del iPhone. Su salida, debe parecerse a:
Solo un último artículo (uno de los más importantes) es la etiqueta de precio. Comienza creando un círculo en la esquina superior derecha del iPhone. Cambie el nombre de este círculo a 'etiqueta de precio':
A continuación, aplique los siguientes estilos de capa para Sombra paralela, Biselado y relieve, Superposición de degradado y Trazo. Este será un estilo de capa importante, ya que lo usaremos varias veces durante el resto del sitio para los botones, etc..
Esto crea algo completamente mantecoso:
Agregue un poco de texto para el precio con una sombra de sombra 1px en la parte superior y nuestro adhesivo está listo:
Hasta ahora, esto es lo que hemos creado (se ve bastante bien, y lo mejor de todo: muy único):
Todavía nos falta el botón "Llamar a la acción" para que las personas acudan a la AppStore y compren nuestra aplicación. Vamos a crear ese texto como si estuviera "cincelado" en el frente del estante (con una fuente perfecta).
Así que aquí va: crear un nuevo texto; Utilicé: "Tu colección de libros te encantará por eso". Usé Gotham a 36px para obtener el aspecto deseado. En ese texto, debemos aplicar dos estilos de capa para darle ese aspecto cincelado:
Su resultado deseado, dependiendo de la fuente, debería ser algo como esto:
Ahora necesitamos agregar el botón de AppStore. Utilicé un icono de iPhone de IconFinder.net para recrear el botón "Disponible en la AppStore".
Para crear el botón, cree un nuevo rectángulo redondeado con un radio de borde de 10px. Creé mi rectángulo 240px de ancho por 74px de altura.
Como ya creamos nuestro pequeño y agradable Estilo de capa para los botones cuando creamos la etiqueta de precio en el Paso 7, simplemente podemos copiar el estilo de capa de esa etiqueta y pegar el estilo de capa en nuestra nueva capa de botón. Para hacer esto, haga clic derecho en la capa de la que desea copiar el estilo de capa y elija "Copiar estilo de capa" en el menú emergente. Seleccione la capa a la que desea aplicar este estilo de capa y haga clic derecho, y seleccione "Pegar estilo de capa". Es así de fácil.
Coloque el ícono del iPhone que descargó de IconFinder encima del botón, dándole estilos de capas de:
Agregue el texto de AppStore y reutilice el estilo de capa que creó para el icono de iPhone en el texto. Su resultado debe parecerse a:
Esta es probablemente la parte menos interesante del diseño, pero la más interesante para cualquiera que busque comprar su aplicación. Cree un nuevo encabezado, tamaño 30px texto (utilicé Rockwell nuevamente) e ingrese el texto "Características". ¿Recuerdas las guías que creamos al principio de este tutorial? Los usaremos ahora para nuestras 3 columnas; así que alinee el texto de las Características con la guía de la derecha.
Aplicar algunos estilos de capa a este texto:
A continuación, cree un texto en cursiva a continuación y agregue algunas viñetas. Bastante fácil a la derecha?
Tenemos que mostrar nuestra aplicación. Nuestra captura de pantalla del iPhone no solo tendrá imágenes de nuestra aplicación, sino que también deberíamos mostrar imágenes ampliadas de nuestra aplicación para que la gente sepa exactamente lo que pueden esperar..
Primero, duplicaremos (Comando + J) nuestra capa de texto "Características" del Paso 9. Cambie el texto para leer "Capturas de pantalla" y muévalo para que se coloque en la columna central.
A continuación vamos a crear las capturas de pantalla. Comenzaremos creando la capa de inserción exterior. Comience creando una nueva forma de rectángulo redondeado, 180 px por 180 px con un radio de 10 px. Copie el Estilo de capa del texto cincelado en el Paso 8 y péguelo en su forma de rectángulo redondeado. Duplique la capa (Comando + J) y sepárelos uniformemente dentro de la columna de 390px de ancho:
Ahora crearemos un marcador de posición para las imágenes (obviamente las reemplazará con las capturas de pantalla de su aplicación más adelante). Crea otro rectángulo redondeado, pero esta vez con configuraciones:
Duplique la capa y mueva la capa duplicada sobre la otra captura de pantalla recuadro.
Agregue una Superposición de color a estas dos capas (con el color # f6f3eb) para el marcador de posición.
Por último necesitamos añadir el icono de Zoom. Comience dibujando un círculo en la esquina superior derecha (como hizo con la etiqueta del precio). La mía es de aproximadamente 30px de diámetro.
Pegue el mismo estilo de capa de la etiqueta de precio en el nuevo círculo. He ajustado los colores degradados y el color Trazo para lograr un aspecto ligeramente diferente al verde.
Por último, tenemos que añadir el icono "Zoom". Estoy usando el icono de zoom del increíble conjunto de iconos de Glyphish. A
complete el ícono de zoom, solo necesitamos agregar una ligera sombra interior (aproximadamente 1px) para darle un poco de profundidad.
Duplique el grupo de iconos de zoom que creó y muévalo a la otra miniatura. A medida que ibas a implementar esto, definitivamente sería bueno hacer algo
Haz zoom en estas capturas de pantalla a medida que las haces clic. Tal vez para mis primeros Nettuts :).
Por último, pero no menos importante para la sección principal son los testimonios. He creado el globos de texto A partir de un rectángulo redondeado y una forma personalizada..
Comenzaremos con el rectángulo redondeado. Crea un nuevo rectángulo redondeado con configuraciones:
Ahora elija la Herramienta de forma personalizada y localice la burbuja de diálogo para crear la cola:
Cree un bocadillo de diálogo sobre la capa del rectángulo redondeado, de modo que solo la cola no se solape.
Seleccione ambas capas y combínelas juntas (Comando + E). El resultado debe ser una forma a la que podamos aplicar un poco de estilo a.
Una vez más, copiemos nuestro Estilo de capa de la etiqueta de precio y pegemos el estilo de capa en nuestra burbuja testimonial (la convertiremos en textura de madera en un segundo). Hacemos esto porque queremos la mayoría de los estilos de la etiqueta, como los estilos Biselado, Sombra y Trazo. Simplemente vamos a jugar un poco con la textura y los colores para darle el aspecto correcto. Al reutilizar estilos de capa como este, puede mantener sus diseños consistentes, así como ahorrar un montón de tiempo al no tener que recrear los mismos efectos una y otra vez.
Primero cambiaremos la Superposición de degradado. Necesitamos que sea de un color a transparente (ya que queremos que el grano de madera aparezca por detrás). Elegí que el degradado se desvaneciera a un marrón muy oscuro: # 292115.
Por último, haremos una Superposición de patrón de la textura de la madera para que se mezcle más con el fondo.
Ajusta el color del trazo para que sea un marrón más oscuro (no verde), y ya está todo listo!
Todo lo que necesita hacer ahora es agregar las críticas de los clientes, y tiene una burbuja de testimonios única. Duplicar el grupo testimonial
Y muévelo justo debajo del otro, y eso es todo.!
Comenzaremos creando el contenedor circundante en el que se ubicarán el texto y la forma. Creé un rectángulo redondeado, con un radio de 40px y un ancho de 960px (el ancho de nuestra página). Pegué el estilo de capa del texto del Paso 8 para darle una sensación de inserción. Como mencioné anteriormente, siempre tiendo a reutilizar mis estilos de capa tanto como sea posible, ya que garantiza la consistencia..
Una vez más me dirigí a IconFinder para encontrar el ícono del correo, por suerte para nosotros
El icono de 64px por 64px era exactamente lo que necesitábamos. Coloque ese icono en la esquina izquierda de nuestra recuadro bar - será el ancla
para el boletín y ayuda a equilibrar el botón Enviar.
A continuación, agregue el mensaje "¿Desea recibir las últimas noticias? Únase a la lista de correo". texto. Utilicé el Gotham de nuevo, pero con un tamaño ligeramente más pequeño a 24px. Hacer
el color del texto # 161008 (ya que no queremos que destaque demasiado) y agregue una sombra de 1px marrón claro debajo (una vez más, estamos creando esa profundidad).
¡Guauu! Estamos muy cerca Todo lo que tenemos que hacer es agregar el formulario de correo electrónico y el botón y habremos terminado. Crea otro rectángulo redondeado, con un radio de 20px
(la mitad de lo que es el rectángulo redondeado exterior), y la altura de 40px (para que no tengamos bordes rectos en los dos lados).
Una cosa a tener en cuenta es cuán consistente es el espaciado alrededor del lado derecho. Al reducir a la mitad el radio interior, mantenemos un acolchado constante entre el contenedor exterior y el contenedor interno.
Usando los mismos ajustes preestablecidos para el rectángulo redondeado (radio de 20px, altura de 40px), cree un nuevo botón de rectángulo redondeado. Copie el estilo de capa de nuestros iconos de zoom del paso 10 (el color naranja rojizo). Pega ese estilo de capa en tu nuevo botón. Deberías tener algo como esto:
Todo lo que necesita hacer ahora es agregar el texto "Enviar" y listo.!
Eso es. Hemos creado una página de inicio de iPhone única; fusionar un nuevo estilo ilustrativo con la sensación de iPhone brillante. Este tutorial no es solo para una aplicación de libros, puede cambiar los libros en el estante por casi cualquier cosa (es decir, convertirlo en una mesa para bebidas). Espero que lo hayas disfrutado!
Accentsconagua