Diseño 

del Sitio Web Tutorial: Wellknown.as Caso

El mes pasado me encontré con algunos chicos que están trabajando en un
proyecto muy bonito que involucró a una aplicación de iPhone. Así que me invitaron
a diseñar el sitio web, llamado Wellknown.as . Me encantó la idea y empecé a buscar
referencias e inspiración para que pudiera iniciar el diseño en sí.

Así que en este tutorial voy a mostrar un poco de cómo creé usando Fireworks. Por supuesto que
puede hacer lo mismo en Photoshop, los comandos van a cambiar un poco, pero el proceso es
prácticamente el mismo.diseño Referencias

Paso 1
Lo primero que debe hacer es, por supuesto, tiene un concepto en mente de lo que quiere hacer. En mi
caso, los chicos de Wellknow.as me dijeron exactamente lo que querían para el diseño. También utilicé
un marco CSS y la plantilla de fuegos artificiales. Puede descargarlo en http://960.gs/

Paso 2
Con la herramienta Rectángulo (U) crear un nuevo rectángulo con el tamaño del documento. Para el
color utilizar 191D22 sólido y # . A continuación, en el panel Propiedades , haga clic en el Icono
Agregar (+) y seleccione Añadir ruido . Utilice 1 para la cantidad.
Paso 3
Con la herramienta Rectángulo (U) crear otro rectángulo, pero que sea como una banda a partir del
200 píxeles en el eje y. Para el uso del color # 1c202a.
Etapa 4
Haga clic en la opción Agregar y que a la sombra y iluminar> Sombra interior . Utilice 0 para la
distancia, el 40% de la opacidad, 1 para la falta de definición y 270º para el ángulo.
paso 5
Haga clic de nuevo en el icono Agregar y elija Sombrear e iluminar> Sombra . Utilice 0 para la
distancia, el 65% de opacidad, 4 para la falta de definición . El ángulo no se hace ninguna
diferencia porque la distancia es 0.
paso 6
Ahora, de nuevo vamos a añadir un poco de ruido por lo que el rectángulo no tendrá ese color sólido,
pero en su lugar una agradable sensación de plástico.
paso 7Aquí puse la imagen de la derecha iPhone en el centro de la imagen, ya que estaba sentado.
Ellos no quieren mostrar la interfaz de la aplicación en este momento por lo que el ángulo era perfecto.
paso 8
Duplicar la capa y vaya a Modificar> Transformar> Voltear vertical . A continuación, cambiar la
opacidad al 50% y vaya a Modificar> Máscara> Mostrar todo. Con la Gradient Tool (G) seleccionar
el preset blanco y negro y aplicarlo sobre la máscara de capa. Lo que es blanco será visible y lo que es
negro transparente. Por lo tanto, crear el famoso efecto suelo mojado.
paso 9
Añadir un nuevo rectángulo con la herramienta Rectángulo y llenarlo con un degradado usando los
colores blanco para ambos. Sólo cambia las opacidades uno será 100% (1) y el otro 0% (2) . Utilice la
herramienta de degradado (G) para aplicar el gradiente en un ángulo de 90º.
Paso 10
Para crear el efecto de la luz que era muy fácil. Con la herramienta Elipse (U) crear una elipse, a
continuación, utilizar blanco para el color y cambiar el borde de la pluma y de 100 en el valor (1) .
Después de eso, cambiar el modo de fusión de superposición (2).
Paso 11
Ahora duplicar para hacer la luz más fuerte. También añadir diferentes puntos suspensivos para hacer
el efecto de la luz más realista. Otra cosa que es muy importante es jugar con las alteraciones del
medio. Utilice el 50­60% de las nuevas elipses.
Paso 11
Para el lema, solía 35px Arial para el tipo de letra Arial porque es la fuente del iPhone, y un gradiente
de un color gris claro a blanco. También he añadido una sombra utilizando 1px para la Distancia, el
90% de la opacidad , 1 para la falta de definición y 90º para el ángulo.
Paso 12
Con la herramienta Rectángulo redondo (U) crear un rectángulo, llenarlo con gris y cambiar la
opacidad al 80% (1) . El con la herramienta Rectángulo (U) crear otros rectángulos, pero por debajo
de la otra gris. También hacerlo más pequeño (2). De nuevo con la herramienta Rectángulo redondo
(U) crear otro elemento (3). A continuación, seleccione los 2 rectángulos redondos y vaya a Modificar>
Combinar Ruta> ponche . Seleccionar todos los elementos y agruparlos. Después de que añadir un
ruido como en los primeros pasos.
Paso 13
Con la herramienta de línea (N) crear una línea y luego ir a Modificar> Máscara> Descubrir todas .
Seleccione la herramienta de degradado y el preset en blanco y negro con el óvalo para el tipo y la
pintura sobre la máscara de capa. De esa manera los bordes se desvanecen.
Paso 14
Con la herramienta Elipse (U) añadir una elipse en negro y cambiar el borde de la pluma y de utilizar
60 para la cantidad. Luego, con máscara, ocultar la parte de abajo de la línea. Para hacer eso es
súper simple, crear un rectángulo con el área que desea mostrar e ir a Editar> Cortar . A continuación,
seleccione la elipse y vaya a Modificar> Máscara> Pegar como máscara.
Paso 15Repita el mismo proceso para enmascarar la tarjeta de identificación.
Paso 16Ahora vamos a añadir la cuerda de seguridad. Una vez más repetir el mismo proceso para
enmascararlo. También añadir un poco de sombra a la tarjeta y el cordón.
paso 17Coloca algunos iconos en la columna de la izquierda y es el momento de añadir el contenido.
paso 18Hacer visibles las guías para que podamos tener una referencia visual para crear las columnas
y colocar el contenido. Eso será muy importante a la hora de codificar la CSS.
ConclusiónEl diseño está hecho, tengo que hacer algunos ajustes para hacer que el proceso de corte
un poco más fácil, pero tenemos toda la casa­página creada. El proceso de diseño fue bastante simple
incluso las herramientas y filtros que utilizamos, lo más importante era definir el concepto antes de ir a
la herramienta. Lo mismo se podría hacer en Photoshop o una herramienta diferente, sin embargo, con
los fuegos artificiales que tenemos las capacidades de vectores súper útiles y los filtros no destructivos
que hacen el proceso mucho más fácil. También la forma en que podemos jugar con gradientes en los
fuegos artificiales es simplemente insuperable.