14 agosto 2013

Haz tus propios botones para redes sociales.

Hola, soy Rocío y les traigo la entrada de Edición y diseño de la semana :D perdonen no subir mi seccion la semana pasada pero se me presentaron algunas cosas y no pude ;3; en fin.
Para ésta entrada les enseñaré a hacer sus propios botones para redes sociales personalizados como quieran, ya que aunque existen varios sitios donde pueden encontrar botones de distintos colores y diseños siempre podemos hacerlos nosotros mismos para que así queden mejor con el diseño de nuestro blog.



Lo primero que haremos será buscar el logo original de la red social que queremos para usar como base, simplemente buscamos en google images ''redsocial logo'' y nos saldrán un montón de opciones, seleccionen una que sea simple y no tenga sombras o relieves para que así sea fácil de editar.

Ahora les daré algunas ideas de como modificar sus logos, empezaremos con una fácil: Cómo cambiarle el color.

Ya que seleccionamos un logo en la página lo copiaremos y pegaremos en un nuevo documento en photoshop para esto simplemente Archivo>nuevo>ok.




Y ahora lo que haremos será ir a imagen>ajustes>Tono/Saturación (perdonen si mi traducción no es del todo acertada, la verdad ni idea de como viene en español...xD pero por eso las imagenes ilustrativas)
Se nos abrirá un cuadro de ajustes donde jugamos con el color y la intensidad hasta tener un resultado que nos guste y le damos ok y listo.
Sí, muy básico y fácil :D pero siempre es bueno mencionarlo.
Lo ultimo que haremos será modificar el tamaño del logo porque está muy grande como para ponerlo, queremos que sea pequeño.

Lo que haremos será ir en el menú superior a imagen>Tamaño de imagen(image>image size) y se abrirá un menú en el que cambiaremos los valores...a mi me gustan pequeños, a final de cuentas son logos no necesitan ser grandes, masomenos unos 50x50px :D está de un tamaño perfecto.
-Para abrir éste menú también pueden usar el comandor ctrl+alt+I y se abrirá-
Resultado final
Lo primero que haremos será separar nuestro logo en partes, por esto al principio les dije que era importante que fuera el logo más liso que encontraran para que en éste paso no tuvieran problemas.
Otra vez con nuestra buena herramienta de varita mágica seleccionaremos primero la parte flanca que define el logo la ''F'' de facebook y una vez seleccionado daremos click a ctrl+J lo que hará que esta parte se separe y cree una nueva capa solo con lo seleccionado y con la parte azul hacemos lo mismo.

Lo que nos traerá como resultado que nuestras capas se vean como la derecha, la capa original completa, la capa de la parte azul, sin la ''f'' en blanco y la pura ''f''

Ahora lo único que hace falta es buscar la imagen que queramos usar, en éste caso pondremos la imagen en la parte que sería lo azul del logo, pero si prefieren hacerlo al revés, que la imagen se encuentre en la F también se puede y es el mismo procedimiento solo cambiando de capa.
Una vez seleccionada nuestra imagen la pegaremos en nuestro documento y posicionaremos la capa que la contiene ARRIBA de la capa que es la parte azul recortada. -de la siguiente forma-





Y ya lo único que tenemos que hacer es; posicionadas en la capa de la imagen que vamos a utilizar dar click en ctrl+alt+G al mismo tiempo y la imagen tomará la forma recortada y no se saldrá de los bordes y ya lo único que haremos será cambiarle el tamaño al logo como les enseñé antes.
-Como se muestra en el gif-
Resultado Final



Ahora lo que haremos será poner de fondo una imagen predeterminada, por si no queremos que sea el simple cuadrado que trae el logo original, lo que haremos es solo dejar la capa que contiene la letra ''F'' en blanco y borrar las otras, ya no las necesitamos.
Ahora crearemos una nueva capa y la posicionaremos abajo de la F que tenemos, de la siguiente forma >>
y lo ultimo que necesitamos hacer es trazar la figura que nos interesa o bien agregar alguna que encontremos por internet, un png, render o como sea.




En la barra de herramientras iremos a la figurita que es como una mancha de pintura, la herramientra ''shape/forma'' y daremos click, en el menú superior de la herramientra seleccionamos las siguientes opciones y elegimos la figura que más nos guste, photoshop trae éstas figuras predeterminadas pero en internet hay muchas que pueden descargar para utilizar.
Yo utilizaré ésta de gatito porque bueno, me gustan los gatos...
-Fíjense bien en la esquina superior derecha la parte punteada esté seleccionada, para que así su forma tenga un color solido.

Y ahora solo procedemos a trazar nuestra figura, acomodamos la letrita en donde mejor les paresca, cambiamos el tramaño de la letra si es necesario: esto pueden hacerlo posicionándose en la capa de la letra y dan ctrl+T y les saldrá el cuadro para cambiar el tamaño.Si quieren cambiar el color, agregar una textura etc etc a cualquiera de los elementos es muy facil, lo único que tienen que hacer es click derecho sobre la capa que quieren modificar, les abrirá una pestaña y dan click en la opción Blending Options/Opciones de Fusión y se abrirá una ventana con una graaaan cantidad de opciones para personalizar, solo experimenten y modifiquenla a su antojo.

Resultado final
Por ultimo les enseñaré como agregar varios botones uno al lado del otro como estan en aquí en el blog, porque si los agregan como imagen individuales lo que pasará es que estarán uno al lado del otro.
Lo que harán es ir a la configuración de su blog para agregar un nuevo gadget de HTML y el codigo que utilizaran será el siguiente.
<a href="Aquí el link a tu red social" target="_blank"><img border="0" src="Aquí el link de tu logo" /></a>
Entonces lo que tendrán que hacer es primero subir todos sus logos ya del tamaño adecuado a algún servidor de imagen como photobucket o tinypic y conseguir el link necesario para llenar su código.
Sustituir lo rojo por el link al que llevará al dar click al botón osea, el de sus red social y en la parte naranja irá el link de la imagen.
>>aquí<< un tutorial de como subir y tomar su link para imagenes en photobucket.
Una vez sustituidos los valores nos quedará de la siguiente forma.
<a href="http://rocioeufemia.tumblr.com/" target="_blank"><img border="0" src="Aquí el link de tu logo" /></a>
 
y ya su botón queda así (siganme en tumblr, por cierto haha!)

Lo ultimo que tendrán que hacer es poner éste código repetidas veces modificando los datos para cada red de la siguiente forma:
 <a href="Link de tu tumblr" target="_blank"><img border="0" src="Imagen de botón" /></a><a href="Link de tu facebook" target="_blank"><img border="0" src="Imagen de botón" /></a>
Recuerden no dejar espacios entre códigos, de otra forma se separaran y tomen en cuenta que éste codigo no solo puede ser utilizado para los botones de redes sociales si no para botones de secciones o créditos etc.
Espero les haya gustado el tutorial de hoy de recuerden que yo solo les doy las bases y el creer cosas bonitas depende ya de su creatividad y visión <3
¿Quieren más entradas para modificar plantillas? ¿Tips para entradas? o cositas como ésta?
si les interesa que les ayude con una plantilla en particular dejenme el link para checarla y el siguiente tutorial sea de eso.

Recursos utilizados:   




7 comentarios :

  1. Excelente Tuto! Uno de los mejores del Blog...
    Gracias Rocio :)

    ResponderEliminar
  2. wow me encanto!!! tendre que intentarlo haber si me sale *-* deberias hacer un tutorial para hacer las firmas como la que pones al final de tu post :3

    saludos

    ResponderEliminar
  3. me encanto, hace mucho que quiero agregar botones de redes sociales a mi blog
    gracias Rocio por compartir este post <3 Estoy de acuerdo con Annie deberías hacer un tutorial para crear firmas :3

    ResponderEliminar
  4. Muy buenos los tips, muchas gracias por compartirlos ♥

    ResponderEliminar
  5. *w* gracias por el tutorial !! esta genial ♥ !!
    me pondre a hacer los mios ~**+

    ResponderEliminar
  6. Woooo eres una capa!! me encanto!! yo que no se mucho de esto! me servirá muchoo!! Gracias!! :D

    www.limaglam.blogspot.com

    ResponderEliminar
  7. fantástico, se super entendió, muchas gracias :)

    ResponderEliminar

Gracias por Leer Blogger's México