Aqui está el resultado final:

Espero que disfrutes el tutorial:

Ahora vamos a crear una malla metálica, es un tutorial muy corto y sencillo el cual no tiene pierde, en caso de que no le sigan la corriente por algún motivo, deja un comentario avisandolo y trataré de solucionarlo lo antes posible.

Aquí está la imagen de lo que habrás creado al final del tutorial:

Como has visto, no es algo que parezca complicado, y a la vez muy llamativo.

Bueno, empezemos!

Paso 1

Para empezar creamos un nuevo trabajo en Photoshop (Archivo > Nuevo…) con dimensiones 600 px de ancho y 500 px de alto, con fondo de color #4a4a4a. Tendremos lo siguiente:

Paso 2

Ahora oprimimos en el teclado la combinación de teclas Ctrl+’ (control + tilde) para mostrar las guias donde colocaremos los circulos mas adelante, por ahora tenemos:

Paso 3

Muy bien, ya tenemos los cimientos donde trabajaremos, ahora elegimos la herramienta Pluma (P) pulsando la letra “P” del teclado y configurandola de la siguiente forma ilustrada:

Paso 4

Ahora como ya tenemos las guias necesarias para el posicionamiento de los circulos que serán los agujeros de la malla y la herramienta Pluma configurada de la forma necesaria, empezamos creando un circulo de tamaño tal que no se vea muy grando y que luzca bien para una malla, yo arrastré el cursor aproximadamente 1cm, ahora con un circulo hecho, podemos empezar posicionandolo de tal forma que el centro quede en una de las intersecciones de las guias como sigue:

Para crear los demás circulos seleccionamos la herramienta Selección de trazado (A) y hacemos clic en el circulo que tenemos y luego en el teclado la combinación Ctrl+C para copiarlo, seguida de la combinación Ctrl+V para pegar una copia del circulo, ten en cuenta que la copia se pegará encima del otro circulo, para moverlo de esa posición le damos clic derecho del mouse y en el menú que aparece elegimos la opción Transformación libre de trazado, y arrastramos el circulo hasta otra intersección de la malla como se muestra arriba hasta llenar completamente el lienzo, es mejor que lo hagas hasta salirte lo suficiente del liezo.

Ya con todo el liezo lleno de circulos y algo afuera tambien, seleccionamos la capa de los circulos (la actual) y elegimos la herramienta Mover (V), y la configuramos de la siguiente forma:

Con esto, ya tenemos la malla en sí, ahora vamos a darle el aspecto de malla realista metálica.

Paso 5

Debemos darle el aspecto necesario a los circulos para que parezcan tener profundidad como una malla, hacemos doble-clic en la siguiente flecha 1 y le asignamos el color #262525, mostrados en la siguiente imagen:

Con esto hemos logrado colorear los circulos del color necesario para el fondo, ahora vamos a darle algo de efecto de profundidad.

Paso 6

Hacemos doble-clic en la capa para que nos aparezca el cuadro de diálogo Estilo de capa, usaremos solo dos estilos, la Sombra paralela, con la siguiente configuración:

Y la Sombra interior, con la siguiente configuración:

Al darle ok al cuadro, verán que ya tiene mas aspecto de malla, pero falta un pequeño toque para agregarle oscuridad, esto la hará ver un poco mas real.

Paso 7

La oscuridad necesaria para terminar la malla metálica nos la soluciona la herramienta Degradado (G), la elegimos de la paleta de herramientas, hacemos clic en el degradado que aparece arriba en su barra de configuración y la configuramos como se muestra:

Ahora seguidamente en su barra de configuración nos aseguramos de elegir lo siguiente:

Ahora colocamos el cursor lo mas centrado posible en el lienzo y lo arrastramos un poco mas afuera del lienzo y soltamos, ya habremos terminado la malla.

Paso 8

Ya tenemos la malla metalica, se ve bien!

Aqui elegí unas dimensiones de liezo pequeñas para el tutorial, pero puedes elegir las tuyas propias para hacer un wallpaper, todo a tu imaginación.

Espero que te haya gustado!

El uso de la porpiedad @font-face es muy sencilla de usar, como podrás ver en el siguiente código el uso es el siguiente:

@font-face {
font-family: "Museo";
src: url(URL DEL ARCHIVO FUENTE/museo.otf);
}

En este caso la extensión del archivo fuente es “.otf”, pero hay otros tipos de extensiones como “.ttf” que es True Type Font, pero yo personalmente me gusta mas usar las tipo OpenTypeFont o “.otf” por que nos ofrecen más calidad de bordes en las letras. Una vez ya hemos llamado la fuente a su dirección específica, podemos darle uso en el mismo CSS de esta forma:

p {
font-family: "Museo";
}

Debes tener en cuenta que cuando la aplicamos (en este caso a los párrafos solamente), deben coinsidir el nombre que le colocamos al momento de llamarla, en este caso “Museo”. Ya con este podrás observar la fuente que hallas utilizado, es algo que CSS nos ofrece para mejorar nuestros sitios, personalizarlos y darles estilo, la intención del CSS.