Spanish (Español) translation by Kelly Gianella (you can also view the original English article)
Este año se ha visto un gran aumento en los diseños de sitios web con estilo grunge / texturizado / dibujado a mano. Por naturaleza, tiendo a diseñar un aspecto más limpio, pero pensé en probar mi mano en el grunge hoy y escribir un tutorial sobre la creación de una textura de papel simple desde cero en Photoshop y luego casarlo con un diseño web para crear un diseño limpio.
Más adelante, esta semana, tomaremos este mismo diseño web y te mostraré cómo puedes llevar la remezcla aún más allá de cambiar los fondos y los esquemas de color, que de hecho puedes cambiar todo el estilo de un diseño. ¡Pero primero vamos a hacer nuestro sitio de textura de papel!
Parte 1 - Creación de una textura de papel
Hay tres maneras diferentes de conseguir un aspecto de papel con textura:
- Escanea tu propio papel Echa un vistazo al tutorial de Bittbox sobre el tutorial para hacer una textura de papel sucia.
- Utilizar la textura de otra persona Hay un montón de sitios que enumeran las texturas alrededor, echa un vistazo a estos enlaces: Bittbox | TextureKing | Psdtuts+ Texturas
- Hazlo en Photoshop ¡Esto es lo que vamos a hacer!
Hacer una textura en Photoshop suele dar un aspecto más estilizado que realista, pero tiene su encanto. También significa que no necesitas ninguna imagen externa.
Paso 1
Así que primero empezaremos un nuevo documento, este lienzo tiene 1200px de ancho x 900px de alto. A continuación rellenamos la capa de fondo con un color beige - #e8e8e2.
Paso 2
Ahora crea una nueva capa en la parte superior y haz tus colores de primer plano y fondo: #979a8f y #cfd1c5 que son variaciones del color original. Luego ve a Filtro > Renderizar > Nubes
Paso 3
Ahora ejecutamos Filtro > Artístico > Cuchillo de paleta con los ajustes mostrados en la imagen de arriba. La cuchilla de paleta convierte nuestras nubes en manchas... más o menos, eventualmente esto dará una ligera sensación de arruga a la textura.
Paso 4
A continuación añadiremos algo de ruido al lienzo mediante Filtro > Ruido > Añadir Ruido utilizando la configuración mostrada. Esto debería hacer que nuestra textura se vea áspera.
Paso 5
Ahora tomamos nuestra capa ruidosa y arrugada y la ponemos en Multiplicar y 30%. Esto le devolverá el tono.
Paso 6
Ahora cree una nueva capa en la parte superior y haga sus colores de primer plano y de fondo: #42433e y #cfd1c5 - que es una versión más oscura del último conjunto para que tengamos más contraste esta vez. Luego ve a Filtro > Renderizar > Nubes
Paso 7
A continuación, volvemos a ejecutar el filtro Filtro > Artístico > Cuchilla de paleta.
Paso 8
Y esta vez ponemos la nueva capa en Superposición y 60%. Esto debería dar a nuestra textura un poco más de profundidad.
¡Y ya está! ¡Esta es nuestra textura!
Paso 9
Para este tutorial la textura clara es perfecta, pero puedes hacer fácilmente otras variaciones simplemente jugando con las herramientas de mezcla. Por ejemplo, para hacer esta textura de papel marrón oscuro:
- Toma la versión de la luz y presiona CTRL-U para alterar el Tono/Saturación, ajusta los deslizadores a -30, -10 y -5 respectivamente.
- Duplique la capa y pulse CTRL-Mayúsculas-U para convertirla en blanco y negro
- A continuación, todavía en la capa de blanco y negro, vaya a Edición > Ajustes > Brillo/Contraste y vaya a -30 y +30 respectivamente
- Ahora pon la capa en blanco y negro en Superposición
- A continuación, crear otra capa en la parte superior y llenarlo con #beac93 luego cambiar esa capa a Multiplicar.
- Duplicar la capa Multiplicada
- Luego duplica la capa en blanco y negro y llévala a la parte superior. Ajústala a Superposición y 20% y gírala 90' para conseguir un poco más de profundidad en la textura.
Paso 10
Si las variaciones de color no son suficientes, también puedes cambiar la sensación de la textura con el uso de diferentes filtros. Por ejemplo, aquí hemos creado una sensación más apergaminada tomando nuestra textura ligera y:
- Coge la primera capa de ruido y ejecuta Filtro > Textura > Texturizador y usa Lienzo, 75% y 2 para tus ajustes
- Coge la segunda capa de ruido y ejecuta el mismo filtro
- Ahora duplica la segunda capa y gírala 90', manteniéndola en Superposición y 60%.
- Crear una nueva capa en la parte superior y rellenarla con blanco - #ffffff
- Ejecuta un Filtro > Textura > Texturizador y esta vez utiliza Lienzo, 200% y 16, luego establece esta capa en Superposición y 20%.
- Ahora creamos otra capa encima y de nuevo la rellenamos con blanco, esta vez cambiamos el modo de fusión de la capa a Color y 53% para conseguir nuestra textura un poco más blanca.
Notas de textura del documento final
Ahora que tienes una textura puedes, por supuesto, convertirla en un fondo de mosaico sin fisuras.
Para este tutorial vamos a utilizar la primera textura que hicimos - la del paso 8.
Parte 2 - Creación del diseño del sitio web
Así que ahora vamos a crear un diseño de cartera para ir con nuestra textura de papel. Aquí está la estructura aproximada para la página de inicio. Como puedes ver es una estructura un poco más complicada que en el anterior tutorial de maquetación web porque esta vez tenemos un diseño dentro del diseño.
Así que nuestra rejilla general es una rejilla de tres columnas, luego en el panel principal, hemos utilizado esa rejilla para dividir el área en dos espacios principales, uno es del tamaño de la columna 1 y el otro abarca las otras dos columnas.
Paso 13
Así que primero vamos a crear un área de trabajo y aclararla. Así que aquí he arrastrado dos guías en la pantalla, una a 100px y otra a 1100px - que hace que el área que estoy trabajando en exactamente 1000px que es perfecto.
Luego creamos una nueva capa y dibujamos un gran cuadro blanco como se muestra.
Paso 14
A continuación, volveremos a poner el cuadro blanco al 25% de opacidad.
A continuación, vamos a darle un toque más áspero. Hay un montón de pinceles de grunge, pero para este paso vamos a utilizar uno de los pinceles estándar de Photoshop. Puedes verlo en la captura de pantalla de arriba con el 60 debajo de él.
Si no te aparece este pincel, sólo tienes que hacer clic en la flechita de la derecha en la parte superior de la pantalla de pinceles y elegir Pinceles para medios húmedos, y luego hacer clic en Añadir para agregarlos a tu conjunto actual.
Paso 15
Así que escoge la herramienta Borrador (E), selecciona el pincel que acabamos de mencionar y luego ve alrededor de los bordes de nuestra forma y simplemente hazlo más áspero como te parezca. He dejado el borde superior intacto como puedes ver.
Paso 16
A continuación, cree una nueva capa justo debajo de la caja blanca, y dibuje un Gradiente Radial (G) que vaya del blanco a la transparencia. Esto sólo va a resaltar el lugar donde colocaremos nuestro logotipo en un segundo. Poner la capa en Superposición y 70%.
Paso 17
Ahora añadiremos un pequeño "logotipo", en nuestro caso una palabra en un tipo de letra bonito. La fuente que he elegido aquí es Egyptian710 BT, que es una fuente bastante conocida y adecuada para nuestros propósitos porque tiene un aspecto muy desigual -las letras mayúsculas son más gruesas que las minúsculas- y las serifas en forma de tabla parecen una especie de máquina de escribir, lo que va con nuestro tema del papel.
Paso 18
A continuación haremos una marca de agua para añadir un poco más de cosas en el fondo. En realidad puedes volverte loco y añadir toneladas de cosas en la textura del fondo, pero nos conformaremos con una sola marca de agua.
Así que aquí he escrito la palabra Folio en una fuente aleatoria (HumstSlab712 Blk) y la he puesto en este color - #c5c6ba.
Paso 19
Ahora vamos a cambiar el modo de fusión a Color Quemado y 70% y vamos a añadir un trazo de 1px como se muestra. Fíjate que para el Tipo de Relleno he utilizado un Patrón y luego he elegido una textura que tenía por ahí. Cuando se combina con una opacidad baja (36%) y el modo de fusión (Multiplicar), esto hace que nuestro contorno se vea como si se desvaneciera en partes.
Paso 20
Ahora moveremos nuestra marca de agua para que se sitúe detrás del logotipo.
Paso 21
A continuación vamos a hacer un pequeño elemento separador horizontal. Así que crear una nueva capa y dibujar en una línea de 1px en el marrón oscuro.
Paso 22
Ahora coge el mismo pincel de borrar y repasa la línea borrando pequeños trozos para que se vea deteriorada. También deshazte de los bordes para que empiece en el mismo lugar que el cuadro blanco.
Paso 23
A continuación, cree una nueva capa debajo y dibuje un cuadro marrón de unos 3-4px de altura, como se muestra.
Paso 24
Poner la caja marrón en Multiplicar y 5%. Esto será una especie de sombra para nuestro separador.
Paso 25
A continuación cree una nueva capa y esta vez dibuje un cuadro blanco de unos 20px de altura por encima de la línea.
Paso 26
Establece el cuadro blanco a un 50% de opacidad y, una vez más, usando nuestro pincel, borra la parte superior de forma desordenada.
Paso 27
Ahora repite los tres últimos pasos para dibujar un segundo cuadro blanco, pero esta vez cuando lo borres, borra más para que sea una franja blanca más fina.
Cuando las dos capas blancas se combinen, darán una especie de relieve desordenado.
Agrupe estas capas separadoras en un único grupo de capas.
Paso 28
Ahora podemos duplicar nuestro grupo de capas para tener tres copias que formen nuestra área de cuadrícula horizontal como se muestra.
Paso 29
Aquí sólo he colocado algo de contenido. Como puedes ver, he mezclado un poco el tipo de letra de la pantalla con un tipo de letra normal de HTML.
Para el texto normal he utilizado Cambria, que es una fuente de Vista. En el CSS se puede poner por defecto Georgia para los que no tienen las fuentes de Vista. Si tú mismo no tienes las fuentes de Vista, puedes conseguirlas de forma gratuita y legal, sólo tienes que seguir estas instrucciones. Hay un par de fuentes limpias, me gusta bastante Calibri también.
Paso 30
Ahora vamos a añadir nuestro panel principal. Así que dibujar en un cuadro rectangular grande en el color marrón oscuro - # 1e1a19 - y hacerlo con la herramienta Rectángulo redondeado (U) con un radio de 5px.
Paso 31
Ahora haz un zoom en la esquina superior izquierda y toma una pequeña selección cuadrada y rellénala con el mismo color marrón oscuro. No queremos una curva en esta esquina.
Paso 32
Ahora haz un acercamiento a la esquina superior derecha y usando la Herramienta Lazo Poligonal (L) mientras mantienes pulsada la tecla Mayúsculas haz una selección en ángulo como la que se muestra y luego pulsa Suprimir.
Paso 33
Ahora, en una nueva capa, dibuje un cuadrado de un color marrón más claro, digamos #352f2b, y luego haga otra selección en ángulo y elimine la mitad del cuadrado para que quede un triángulo que esté a 1px del borde.
Paso 34
A continuación creamos una nueva capa y volvemos a acercarnos a la esquina superior izquierda. Ahora vamos a hacer la forma de nuestra pestaña. Lo hacemos con la herramienta pluma y unos cuantos clics muy precisos. En la imagen de arriba he desactivado todas las capas de fondo para que puedas ver la forma exactamente. Así es como se hace:
- Comienza en el punto inferior izquierdo y haz clic en un solo punto en
- A continuación, mantén pulsado SHIFT para obtener una línea recta y haz clic en el siguiente punto a lo largo de la línea, mantén pulsado el botón del ratón mientras haces clic para que el punto tenga asas y arrastra un poco hacia arriba. Esto significará que el siguiente punto en el que hagas clic tendrá una curva entre ellos.
- Ahora haz clic en la tercera posición y de nuevo mantén pulsado el botón del ratón y también mantén pulsada la tecla SHIFT para arrastrar los tiradores hacia fuera en ángulo recto. Deberías ser capaz de conseguir esa curva perfecta. El hecho de tener un desplazamiento asegura que los ángulos sean agradables y precisos, por lo que sólo es cuestión de conseguir el tamaño y la posición correctos. Puede que te cueste unas cuantas veces, pero lo bueno es que puedes pulsar CTRL-Z para deshacer si no lo haces bien, y si necesitas retroceder más de un paso, sólo tienes que pulsar CTRL-ALT-Z
- A continuación, mientras mantienes pulsada la tecla SHIFT, haz clic en el cuarto punto, de nuevo manteniendo pulsado el ratón y arrastrando hacia la derecha para que aparezcan las asas. Esta manija se puede ver en la imagen de arriba (porque es uno de los dos últimos puntos antes de que la captura de pantalla). Como puedes ver, el asa debe estar totalmente recta - esto se asegura manteniendo pulsada la tecla shift.
- Por último, mantén pulsada la tecla SHIFT y haz clic en el quinto punto y vuelve a arrastrar hacia la derecha. Esto le dará esa impresionante curva final.
Paso 35
Después de hacer el quinto punto, puedes rellenar el resto de la forma de cualquier manera, porque de todos modos vamos a cortar el borde inferior para que quede perfectamente recto.
Una vez que haya completado la forma, haga clic con el botón derecho y elija Hacer selección.
Paso 36
Ahora puedes rellenar la forma con marrón oscuro para que coincida con la caja principal. A continuación, recorta los trozos sobrantes de la parte inferior para que quede bien plana y se asiente perfectamente en la parte superior, como se muestra.
Paso 37
A continuación duplicaremos nuestra capa de la pestaña y moveremos la nueva por debajo de la antigua pestaña (para que el marrón parezca estar delante). A continuación, haz clic con el botón derecho del ratón en nuestra nueva pestaña y elige Opciones de fusión y dale una Superposición de color de este bonito color naranja rojizo - #cc5630. La razón por la que hacemos una superposición de color y no rellenamos simplemente la pestaña con el nuevo color es que si se hace el segundo método se verán algunos píxeles marrones sobrantes.
A continuación, mantén pulsada la tecla CTRL y haz clic en la primera pestaña, luego elige la herramienta Marquesina Rectangular y pulsa la flecha hacia la derecha unas cuantas veces hasta que tu selección se haya desplazado hasta superponerse con la pestaña naranja. La razón por la que digo que debes elegir la herramienta de marquesina en este paso es que para mover una selección debes tener una herramienta de selección arriba. Si en lugar de eso tuvieras seleccionada la herramienta de flecha normal, moverías los píxeles al mismo tiempo que la selección. Pruebe ambos y verá lo que quiero decir.
Paso 38
Ahora creamos una nueva capa entre las dos pestañas y rellenamos nuestra selección con un color naranja más oscuro - #b44724. A continuación, mantén pulsada la tecla CTRL y haz clic en la capa de la pestaña naranja, luego haz clic en CTRL-Mayúsculas-I para invertir la selección y haz clic en la capa del medio y pulsa Eliminar. Esto debería dejarte sólo la parte naranja más oscura que se superpone a la pestaña naranja.
Paso 39
Como puedes ver, hemos creado una especie de sombra en nuestra segunda pestaña.
Ahora bien, si lo digo yo, estas pestañas se ven increíbles, y la razón por la que lo hacen es porque se superponen. Por desgracia, esto también hace que sea más difícil trabajar con ellas en HTML. Sin embargo, puede hacer una variedad de cosas con PNGs transparentes, o alternativamente hacer que el texto cambie de color en los rollovers y no preocuparse de cambiar los colores de las pestañas. En cualquier caso, todo esto va más allá del alcance de este tutorial. Basta con decir que el menú puede ser un poco difícil de construir.
Paso 40
Así que aquí está nuestro diseño hasta ahora. He añadido un par de pestañas más y les he dado algo de texto.
Paso 41
Ahora dibujaremos el área de trabajo destacada. Esto será un simple rectángulo blanco donde irá el trabajo. A continuación, cree otra capa y utilice la herramienta Lazo Poligonal (L) para dibujar una especie de rectángulo torcido y rellénelo con un color marrón oscuro - #0e0c0c.
Paso 42
A continuación, añadiremos un texto descriptivo a la izquierda y el propio artículo. Observe que en el texto he utilizado un color marrón oscuro para los dos descriptores (Título del proyecto y Descripción del proyecto), lo que hace que se desvanezcan en el fondo, lo que es bueno porque no son tan importantes. Por otro lado, destacan el título del proyecto y el texto descriptivo. Estos dos últimos elementos se presentan en un color beige claro elegido como fondo, siendo el título más brillante que el texto.
También he añadido un tenue degradado radial a la muestra de trabajo que va del blanco al beige claro, simplemente porque me encantan los degradados radiales y no me canso de ellos :-)
Paso 43
Ahora, por último, añadiré un par de pequeños garabatos dibujados a mano para rematar el diseño. Para ello he utilizado los excelentes pinceles gratuitos de David Leggett de Tutorial9. Puedes añadir pinceles abriendo la paleta de pinceles como se muestra, haciendo clic en la pequeña flecha de la derecha y eligiendo Cargar pinceles, y luego seleccionando el archivo de pinceles que hayas descargado.
Como los pinceles son mucho más grandes de lo que quiero, es importante afinar la capa después de haberla redimensionado. Así que aquí he encogido la flecha hacia abajo y luego ejecutar un Filtro> Enfoque> Máscara de desenfoque para arreglarlo.
El diseño
Así que ahí vamos, el diseño final, con un par de variaciones para diferentes páginas. Los diseños PSD finales son, por supuesto, en ThemeForest para la venta, y voy a añadir la página de inicio PSD para el sistema Plus.
Conclusiones finales
Esta es mi versión de un diseño con textura de papel. Hay muchos diseñadores que hacen este aspecto mucho mejor que yo, en particular, echa un vistazo al trabajo de Liam McKay en WeFunction y también echa un vistazo a las galerías de diseño como WebCreme y encontrarás un montón de diseños sucios y de papel.
By
