Share
Este año se ha visto un gran aumento en los diseños de sitios web con estilos grungey / texturados / dibujados a mano. Por naturaleza, tiendo a diseñar una apariencia más limpia, pero pensé que hoy debería probar suerte con el grunge y escribir un tutorial sobre cómo crear una textura de papel simple desde cero en Photoshop y luego casarla con un diseño web para crear un diseño elegante..
Luego, más adelante esta semana, usaremos este mismo diseño web y te mostraré cómo puedes llevar a cabo la remezcla incluso más allá del simple cambio de fondos y combinaciones de colores, que de hecho puedes cambiar todo el estilo de un diseño. Pero primero hagamos nuestro sitio de textura de papel.!
Esta publicación es el día 4 de nuestra sesión de diseño web. Sesiones creativas "Session Day 3Session Day 5"
Hay tres formas diferentes de obtener un aspecto de papel texturado:
Hacer una textura en Photoshop generalmente dará como resultado un aspecto más estilizado que realista, pero tiene sus propios encantos. También significa que no necesitas ninguna imagen externa..
Así que primero comenzaremos un nuevo documento, este lienzo tiene 1200px de ancho x 900px de alto. A continuación llenamos la capa de fondo con un color beige. - # e8e8e2.
Ahora crea una nueva capa en la parte superior y crea los colores de fondo y primer plano: # 979a8f y # cfd1c5 Cuales son las variaciones del color original. Luego ve a Filtro> Render> Nubes
Ahora corremos Filtro> Artístico> Cuchillo de paleta con los ajustes mostrados en la imagen de arriba. El cuchillo de paleta convierte nuestras nubes en manchas ... más o menos, finalmente, esto le dará una ligera sensación arrugada a la textura.
A continuación añadiremos algo de ruido al lienzo. Filtro> Ruido> Añadir ruido utilizando la configuración mostrada. Esto debería hacer que nuestra textura se vea áspera..
Ahora tomamos nuestra ruidosa capa arrugada y la configuramos para Multiplicar y 30%. Esto lo tonificará de vuelta.
Ahora crea una nueva capa en la parte superior y crea los colores de fondo y primer plano: # 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> Render> Nubes
Luego volvemos a ejecutar el Filtro> Artístico> Cuchillo de paleta filtrar.
Y esta vez configuramos la nueva capa para Cubrir y 60%. Esto debería dar un poco más de profundidad a nuestra textura..
¡Y eso es! Esta es nuestra textura.!
Para este tutorial, la textura ligera es perfecta, pero puedes hacer otras variaciones fácilmente con solo mezclar las herramientas. Por ejemplo para hacer esta textura de papel marrón oscuro:
Si las variaciones de color no son suficientes, también puede cambiar la sensación de la textura con el uso de diferentes filtros.. Por ejemplo, aquí hemos hecho una sensación más pergamino tomando nuestra textura ligera y:
Ahora que tiene una textura, por supuesto, puede convertirla en un fondo de azulejos sin problemas.
Para este tutorial usaremos el primero textura que hicimos - la del paso 8.
Así que ahora vamos a crear un diseño de cartera para ir con nuestra textura de papel. Aquí está la estructura aproximada de la página de inicio. Como puede ver, es un poco más complicada la estructura que en el tutorial de diseño web anterior porque esta vez tenemos un diseño dentro del diseño.
Así que nuestra cuadrícula general es una cuadrícula de tres columnas, luego en el panel principal, usamos esa cuadrícula para dividir el área en dos espacios principales, uno es el tamaño de la columna 1 y el otro abarca las dos columnas.
Así que primero vamos a crear un área de trabajo y aligerarla. Así que aquí arrastré dos guías a la pantalla, una a 100px y otra a 1100px, lo que hace que el área en la que estoy trabajando sea exactamente 1000px, lo cual es perfecto..
Luego creamos una nueva capa y dibujamos un gran cuadro blanco como se muestra.
A continuación, vamos a establecer el cuadro blanco de nuevo a 25% opacidad.
Entonces vamos a endurecerlo. Hay muchos pinceles de grunge excelentes, pero para este paso solo usaremos uno de los pinceles estándar de Photoshop. Puedes verlo en la captura de pantalla de arriba con los 60 debajo..
Si este pincel no aparece, haga clic en esa pequeña flecha derecha en la parte superior de la pantalla de pinceles y elija Cepillos de medios húmedos, luego haga clic en Agregar para agregarlos a su conjunto actual.
Así que elige el Herramienta de borrador (E), seleccione el pincel que acabamos de mencionar y luego gire alrededor de los bordes de nuestra forma y simplemente áspelo como lo sienta. He dejado el borde superior intacto como puedes ver.
A continuación, cree una nueva capa justo debajo del cuadro blanco, y dibuje en una Gradiente radial (g) Pasando del blanco a la transparencia. Esto solo va a resaltar dónde colocaremos nuestro logotipo en un segundo. Establecer la capa a Cubrir y 70%.
Ahora agregaremos un poco de "logotipo", en nuestro caso solo una palabra con un buen tipo de letra. 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 irregular (las letras mayúsculas son más gruesas que las minúsculas) y los serifs de losa parecen una especie de máquina de escribir que coincide con nuestro tema de papel.
A continuación, haremos una marca de agua para agregar un poco más de material al fondo. En realidad, puedes volverte loco y agregar toneladas de cosas a la textura de 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.
Ahora vamos a cambiar el modo de fusión a Quemadura de color y 70% y agregaremos un trazo de 1px como se muestra. Note que para Tipo de relleno He usado un Modelo Y luego elegí una textura que tenía colgando. Cuando se combina con una baja opacidad (36%) y el modo de fusión (Multiplicar), esto hace que nuestro contorno se vea como si se hubiera desvanecido en partes..
Ahora moveremos nuestra marca de agua para sentarnos detrás del logo..
A continuación vamos a hacer un pequeño elemento separador horizontal. Así que crea una nueva capa y dibuja en una línea de 1px en el marrón oscuro.
Ahora toma el mismo pincel de borrador y solo repasa la línea borrando pequeños pedazos de él para que se vea apenado. Deshazte también de los bordes para que empiece en el mismo lugar que el cuadro blanco.
A continuación, cree una nueva capa a continuación y dibuje en un cuadro marrón que tenga aproximadamente 3-4 px de altura, como se muestra.
Coloque la caja marrón en Multiplicar y 5%. Esta será una especie de sombra para nuestro separador..
A continuación, cree una nueva capa y esta vez dibuje un cuadro blanco de aproximadamente 20 px por encima de la línea.
Ponga la caja blanca en aproximadamente 50% opacidad y una vez más utilizando nuestro pincel, simplemente borre la parte superior de una manera desordenada.
Ahora repite los últimos tres pasos para dibujar una segunda caja blanca, pero esta vez cuando la borres, borra más para que sea una franja blanca más delgada.
Cuando las dos capas blancas se combinan, darán un aspecto desordenado.
Agrupe estas capas separadoras en un solo grupo de capas.
Ahora podemos duplicar nuestro grupo de capas para tener tres copias para formar nuestra área de cuadrícula horizontal como se muestra.
Aquí acabo de colocar algo de contenido. Como puede ver, he mezclado un poco del tipo de letra de visualización con un tipo de letra HTML normal..
Para el texto normal, realmente he usado Cambria, que es una fuente de Vista. En el CSS, tendría que volver a Georgia de manera predeterminada para las personas que no tienen las fuentes de Vista. Si usted mismo no tiene las fuentes de Vista, puede obtenerlas libremente y legalmente, solo siga estas instrucciones. Hay un par de fuentes limpias, me gusta bastante Calibri también.
Ahora vamos a añadir nuestro panel principal. Así que dibuja en una caja rectangular grande en el color marrón oscuro - # 1e1a19 - y hacerlo usando el Herramienta Rectangular Redondeada (U) con un radio de 5px.
Ahora haga zoom en la esquina superior izquierda y tome una pequeña selección cuadrada y luego rellénela con el mismo color marrón oscuro. No queremos una curva en esta esquina..
Ahora haga zoom en la esquina superior derecha y use la tecla Herramienta de lazo poligonal (L) mientras mantiene presionado shift, haga una selección en ángulo como se muestra y luego presione Borrar.
Ahora en una nueva capa de arriba dibuja en un cuadrado de un color marrón más claro, digamos # 352f2b, y luego realice otra selección en ángulo y elimine la mitad del cuadrado para que quede con un triángulo que está a 1px del borde.
A continuación, cree una nueva capa y vuelva a acercarse a la esquina superior izquierda. Ahora vamos a hacer nuestra forma de pestaña. Hacemos esto usando la herramienta pluma y unos pocos clics muy precisos. En la imagen de arriba, he desactivado todas las capas de fondo para que pueda ver la forma exactamente. Así es como lo haces:
Después de hacer el quinto punto, puedes rellenar el resto de la forma de cualquier forma anterior, ya que simplemente vamos a cortar el borde inferior para que quede perfectamente recto de todos modos.
Una vez que hayas completado la forma, haz clic derecho y elige Haz una seleccion.
Ahora puede rellenar la forma con marrón oscuro para que coincida con el cuadro principal. Luego recorte las brocas adicionales de la parte inferior para que sea agradable y plana y se siente perfectamente en la parte superior como se muestra.
A continuación duplicaremos nuestra capa de pestañas y moveremos la nueva. abajo La pestaña vieja (así que la marrón parece estar en frente). Luego haz clic derecho en nuestra nueva pestaña y elige Opciones de mezcla y dale un Superposición de color de este bonito color naranja rojizo - # cc5630. La razón por la que hacemos una superposición de colores y no solo rellenamos la pestaña con el nuevo color es que si lo hace con el segundo método obtendrá unos pocos píxeles sobrantes que se muestran a través de.
Siguiente mantenga presionada CTRL y haga clic en la primera pestaña luego elija la Herramienta Marco Rectangular y presione la flecha derecha unas cuantas veces hasta que su selección haya avanzado para superponerse con la pestaña naranja. La razón por la que le digo que debe elegir la herramienta de marquesina en este paso es que para mover una selección debe tener una herramienta de selección hacia arriba. Si, en cambio, tuviera seleccionada la herramienta de flecha normal, realmente movería los píxeles y la selección. Prueba ambos y verás lo que quiero decir..
Ahora creamos una nueva capa entre las dos pestañas y completamos nuestra selección con un color naranja más oscuro - # b44724. Luego mantén presionada CTRL y haga clic en la capa de la pestaña naranja, luego haga clic en CTRL-SHIFT-I para invertir la selección y hacer clic en la capa intermedia y pulsar Borrar. Esto debería dejarte solo con la parte naranja más oscura que se superpone a la pestaña naranja.
Como puedes ver, hemos creado una especie de sombra en nuestra segunda pestaña.
Ahora bien, si lo digo, estas pestañas parecen impresionantes, y la razón por la que lo hacen es porque se superponen. Desafortunadamente, esto también hace que sea más difícil trabajar con ellos en HTML. Sin embargo, puede hacer una variedad de cosas con PNG transparentes, o alternativamente simplemente hacer que el texto cambie los colores en los rollovers y no se preocupe por cambiar los colores de las pestañas. De todos modos, todo esto está un poco más allá del alcance de este tutorial. Basta con decir que el menú puede ser un poco difícil de construir.
Así que aquí está nuestro diseño hasta ahora. He añadido un par de pestañas más y les he dado un poco de texto.
Ahora dibujaremos en el área de trabajo destacada. Este será un simple rectángulo blanco donde irá el trabajo. Luego detrás de eso crea otra capa y usa la Herramienta de lazo poligonal (L) para dibujar un tipo de rectángulo estropeado y llenarlo con un color marrón oscuro y oscuro - # 0e0c0c.
A continuación, agregaremos un texto descriptivo a la izquierda y el elemento en sí. Tenga en cuenta que con el texto he usado un marrón oscuro para los dos descriptores (Título del proyecto y Descripción del proyecto), esto hace que se desvanezcan en el fondo, lo que es bueno porque no son tan importantes. El título del proyecto y el texto descriptivo por otro lado se destacan. Estos dos últimos elementos están configurados en un color beige claro seleccionado del fondo con el título más brillante que el texto.
También agregué un tenue gradiente radial a la muestra de trabajo que va del blanco a un beige claro, simplemente porque me encantan los gradientes radiales y no puedo obtener suficiente :-)
Ahora, finalmente, añadiré un par de pequeños garabatos dibujados a mano para terminar el diseño. Para estos he usado los pinceles dibujados a mano excelentes y gratuitos de David Leggett de Tutorial9. Puede agregar pinceles abriendo la paleta de pinceles como se muestra, haciendo clic en la pequeña flecha derecha y seleccionando Cepillos de carga, luego seleccionando el archivo de pincel que descargaste.
Debido a que los pinceles son mucho más grandes de lo que quiero, es importante afilar la capa después de que la hayas cambiado de tamaño. Así que aquí he encogido la flecha hacia abajo y luego ejecutar una Filtro> Afilar> Máscara de enfoque para arreglarlo.
Así que ahí vamos, el diseño final, con un par de variaciones para diferentes páginas. Por supuesto, los diseños finales de PSD están en ThemeForest para la venta, y agregaré la página de inicio PSD al sistema Plus.
Así que esa es mi opinión sobre una textura de papel de diseño. Hay muchos diseñadores que hacen que esto se vea mucho mejor que yo, en particular, echa un vistazo al trabajo de Liam McKay en WeFunction y también echa un vistazo a galerías de diseño como WebCreme y encontrarás muchos diseños grungy y de papel..
Esta publicación es el día 4 de nuestra sesión de diseño web. Sesiones creativas "Session Day 3Session Day 5"
Accentsconagua