23 de Septiembre de 2017
Abr
26

Tutorial: Skin con Continuidad que Simula Bordes en Nuestro Blog

Como me sugirió Markus, escribo un tutorial sobre como hacer un skin como el de éste blog. Necesitaréis un blog (un poco obvio, ¿no? xD), photoshop y algo de paciencia.

He de puntualizar un par de cosas:

  • Soy muy de usar teclas rápidas, así que de movimiento entre menús habrá poco y más indicaciones de pulsar teclas ya que no recuerdo como moverme por los mencionados menús.
  • La resolución que uso es de 1280x1024, pero ésto sirve para cualquiera, ya que los blogs tienen una resolución determinada que no varía.
  • La mayoría de las imágenes puede amplíarse al hacer click en ellas.
  • Hay una gran cantidad de imágenes, y tardarán en cargar todas. Tened un poco de paciencia.


Sin más preámbulos, empezamos Smile.

 

Partimos del blog sin skin:

Necesitaremos una imagen para los bordes, en este caso usaré esta enredadera:

Dependiendo de cómo sea nuestro fondo del blog nos interesará o no que la imagen parezca tener continuidad, aquí entran en juego la suerte de encontrar una imagen que al repetirse la tenga o que debamos simular tal efecto. Este es un ejemplo del segundo (también el más común gracias a nuestro gran amigo Murphy).

Cortamos la imagen para dejarla sin fondo:

Un truquillo para ver que partes de dentro de la imagen se deben borrar es tener de fondo una capa con un color que no nos moleste a la hora de trabajar, de manera que las partes que se van borrando dejan ver ese fondo:

Cuando guardemos la imagen ocultamos esa capa y listo.

Será más cómodo trabajar con una imagen que empiece y acabe en las partes visibles. Para ello con la pulsamos (CONTROL) + (A), copiamos la imagen con (CONTROL) + (C), creamos una nueva imagen (CONTROL) + (N) y pegamos (CONTROL) + (V). Además cómo será los bordes verticales la giramos 90º (Image > Rotate Canvas > 90º CW). Nos debería quedar ésto:

Vamos ahora a darle efecto de continuidad. Hará falta un espacio dónde quepan dos imágenes, así que pulsamos (CONTROL) + (ALT) + (C) y dejamos el panel que aparece como muestro a continuación, salvo el campo Height dónde pondremos un valor algo superior al doble de lo que aparece:

Duplicamos la imagen que tenemos pulsando (CONTROL) + (ALT) + (FLECHA ABAJO) y superponemos la rama de más arriba a la última hoja de la imagen de arriba:

Ocultamos la capa con la enredadera de abajo y borramos la ramita a la que se superpone por la derecha:

 

Arrastramos la capa de la enredadera de abajo, de manera que pase de estar superpuesta a estar bajo la otra:

Ahora agrupamos las dos imágenes, seleccionando la primera capa (empezando por arriba) y pulsando (CONTROL) + (E).

Con la Rectangular Markee Tool (M), nos situamos dónde se unen las dos enredaderas y, dejando algo de espacio entre las hojas, seleccionamos toda la enredadera de arriba:

Cortamos (CONTROL) + (X), pegamos (CONTROL) + (V) y dejamos la parte que hemos pegado de manera que coincida su final con el principio de la enredadera de abajo.

Seleccionamos la capa que contiene la enredadera de abajo y con la Rectangular Markee Tool (M) marcamos parte de la primera hoja y nos pasamos del final de la rama que tiene hacia arriba (para más comodidad ocultamos la otra capa, que luego deberemos volver a mostrar):

Copiamos y pegamos. Llevamos la capa nueva (que debería contener sólo la media hoja y la ramita de antes y estar en primer lugar) hasta que se superponga exactamente con la de la enredadera de arriba:

Ahora, teniendo seleccionada la capa con la enredadera de arriba y de nuevo con la Rectangular Markee Tool (M), seleecionamos y borramos la parte que oculta la capa con la media hoja y la rama que tiene por encima:

Ahora unimos la capa con la media hoja con la enredadera de arriba, ocultamos la capa de abajo y ya tenemos nuestra enredadera con efecto de continuidad al repetirla. Nos queda seleccionarla haciendo click izquierdo mientras mantemos pulsado (CONTROL) en la minivista de la capa:

copiar, crear un nuevo documento, pegar y guardar. Debería quedarnos algo similar a esto:

Lo que hemos hecho en estos pasos ha sido hacer que la rama con la que empieza la enredadera sea la misma que con la que termina estando una parte abajo y otra arriba, de manera que al repetirse dará el efecto de que es una única rama y la enredadera no se corta.

Ahora, queda la parte sencilla, aplicarlo el borde al blog.

Necesitamos la imagen de fondo, en este caso esta, no pongo directamente la imagen ya que no se vería al ser idéntica que el fondo xD. Ocupa toda la anchura del blog, en caso de que la vuestra no lo haga tendréis que hacer éste paso con las distintas imágenes que tengáis a ambos lados del blog.

Abrimos la imagen con photoshop y hacemos doble click sobre la minivista en la capa y aceptamos, así haremos pueda tener transparencia el fondo. Ampliamos la imagen, de nuevo con (CONTROL) + (ALT) + (C), pero dando ahora más espacio horizontal (Width), hasta los 1280:

Pulsamos (CONTROL) + (ALT) + (FLECHA IZQUIERDA) para duplicar la capa del fondo y superponemos la nueva capa de manera que el dibujo continúe. Realizamos lo mismo por la derecha. Debería quedarnos finalmente algo así:

Seleccionamos ahora la capa del centro, sin deseleccionarla seleccionamos uotra capa y pulsamos (SUPRIMIR), después lo mismo con la otra capa, de manera que nos quede el dibujo central (que es el "cuerpo" del blog) y los bordes. Después ocultamos la capa del cuerpo de blog y unificamos las otras dos capas (CONTROL) + (E) teniendo las dos seleccionadas o estando sobre la superior:

Ahora vamos a File > Place > abrimos la imagen de la enredader que hicimos antes y pulsamos (INTRO) para importarla a nuestra imagen. Si el programa no nos la reescala para que se ajuste a la altura del documento lo haremos nostros pulsando (CONTROL) + (T) y modificando su tamaño manualmente con el ratón. La ponemos al lado, de manera que acabe justo con el dibujo:

Ahora hacemos click izquierdo sobre la minivista en la capa de la enredadera y seleccionamos después la del borde sin haber quitado la selección. Pulsamos (L) y mientras mantenemos pulsado (SHIFT) vamos seleccionando todo el borde que queda desde la mitad hasta la izquierda de la enredadera, dejando fuera las partes del dibujo que se ven entre los espacios de las hojas:

Pulsamos después (SUPRIMIR) para borrar la parte sobrante del borde izquierdo:

Realizamos de nuevo todo esto desde el Place pero además justo depués de importar la enredadera de nuevo vamos a Edit > Transform > Flip Horizontal y cambiamos izquierda por derecha. Al final debería quedar algo así:

Queda únicamente el motivo del fondo. Unificamos todas las capas como ya sabemos y pulsamos (CONTROL) + (SHIFT) + (N) y aceptamos para crear una nueva capa, que arrastreremos hacia el último lugar:

Pulsamos (G) y nos aseguramos de que el símbolo que se nos ha marcado en la barra de herramientas de la izquierda sea un cubo. Si es un rectángulo mantenemos click izquierdo sobre él y seleccionamos el cubo.

Con la capa vacía seleccionada, hacemos click izquierdo, no importa para nada el color. Llegados a este punto, necesitamos un motivo (pattern en inglés). Podemos encontrar bastantes buscando en google. Una vez en nuestro disco duro, los dejamos dentro de la carpeta Presets/Patterns de dónde tengamos instalados photoshop.

Hacemos click en en el circulo con una f bajo las capas y seleccionamos Pattern Overlay:

En la ventana que se nos abre, clickamos en el dibujo que se ve al lado de donde pone "pattern". Vemos una flecha pequeña, hacemos click en ella y seleccionamos "load pattern", lo que nos abre un explorador de archivos donde seleccionaremos el archivo con los motivos que queremos usar:

Seleccionamos el motivoque queramos usar y dejamos las opciones tal y como vienen. Vemos como ha aparecido el motivo por toda la capa.

Nos interesa ahora que quede más ocuro el motivo que el contenido del blog para que no resalte el fondo sobre el contenido del blog. Para ello, creamos dos capas y las situamos entre la de los bordes y la del motivo. Con la herramiento de llenado de antes, es decir el cubo (G), llenamos la de abajo con un verde similar al de las hojas del dibujo del blog (#0d570c) y la superior con negro:

Ahora, para oscuerecer la capa con el motivo, seleccionamos la capa verde y, en el recuadro que vemos bajo layers, seleccionamos "Hard Light", dejamos "Fill" y "Opacity" ambas al 100%.

En la capa negra en el recuadro bajo layers seleccionamos también "Hard Light", "Opacity" lo ajustamos hasta que nos guste (en mi caso a 42%) y "Fill" al 100%.

Ya casi hemos acabado, deberíamos ver algo tal que así:

Seleccionamos todas las capas menos la de los bordes, hacemos click derecho sobre alguna de ellas y seleccionas "Convert into new Smart Object", lo que nos lo junta todo en un única capa. Después en esa nueva capa hacemos click derecho y seleccionamos "Rasterize Layer" para hacerla editable.

Sobre la capa con los bordes y con la Rectangular Markee Tool (M), marcamos la mayor parte de la zona donde se ve el motivo entre los dos bordes, seleccionamos la capa del motivo y pulsamos (SUPRIMIR) para borrar esa zona.

Ya tenemos nuestro borde listo para ser guardado (recomiendo hacerlo como gif), subirlo y ponerlo de skin. No hay que olvidar marcar la opción "Repetir Verticalmente" cuando editemos el diseñor del blog.

Deberíamos haber quedado al así:

 

Debo decir que he tardado casi el doble de lo que debería haber tardado gracias a que cuando me equivoco tiro mucho de control + z para deshacer y pierdo la última media hora de escritura del blog Evil or Very Mad, por lo que voy haciendo borradores en cuanto lo recuerdo.

Espero que os sirva, si hay cualquier duda preguntad Wink. En breve abriré una cuenta para ingresar dinero y cof cof cof...Angel

5
Valoración media: 5 (9 votos)

10 Comentarios:

Wow! Pedazo de tuto

En unos días quizá ponga bordes de estos yo también, vaya curro que te has pegado, pero seguro que se te recompensa de una manera u otra... ejem... Markus, por ahí detrás he oído portada o algo...

vaya currada

Que currada te has pegado.

Eso si, con lo vago que soy... no se si me pondre a ello xD Tal vez dentro de un tiempo, porque la verdad es que keda muy bien.

Saludos. 

¡Hay que hacer que salga en portada!

Te ha quedado perfecto, gracias por el tutorial con el que lo ilustras perfectamente.

A ver si podemos conseguir que éste artículo vaya a portada.

Un saludo. 

¡Jodo, menuda paciencia tuviste!

Y yo que con mi skin, ya me pareció complicado, y mira que es simplote, y tú, menuda currada.

markus, ya sabes donde deberías poner este tutorial... empieza por port y acaba por ada... Wink

Menuda currada de tutorial,

Menuda currada de tutorial, y todo explicado a la perfección. Normal que tengas el pedazo diseño que tienes, ¡si eres un crack!

Yo seguramente cambie mi fondo porque no me termina de convencer el que tengo ahora, pero antes tengo que pensar que voy a poner...ainsss.

Pd - estoy completamente de acuerdo, te mereces una portada como una catedral.

Vaya cinco estrellas más

Vaya cinco estrellas más que merecidas, muy buen tutorial y no sé si te lo he comentado ya, pero me encanta el diseño que le has hecho a tu blog.

EStoy flipando con el

EStoy flipando con el diseño que has hecho. Es muy elegante y es distinto a todo lo que he visto hasta ahora.

Felicidades!!!

Chapó

Eres un artista. Esto ya lo he visto aplicado en otros blogs, pero donde primero lo vi fue en el tuyo y al principio me quedé flipado pensando cómo lo habías hecho xD luego ya caí, pero la verdad es que está currado y queda niquelao.

Gran tutorial, quizá un día me anime a hacer algo parecido.

Ayuda con el codigo para la skin

Hola como estás. Estoy impresionado con el diseño de tu web. No solamente tiene un gusto exiquisito sino que además se nota que sabes de programación! Una combinacion que todos quisieran tener. Y es por eso que te dejo este comentario, porque no se como o dónde poner la skin dentro del codigo. O que puedas dejarme un link donde explique esto puede ser? No importa si está en inglés. Te agradezco desde ya lo que me has enseñado con respecto a estos bordes. Sería bueno ahora que sé hacerlos, cómo hacer que mi blog lo muestre. Saludos!!