El Perro de Papel Idea guardada 1 veces
La valoración media de 1 personas es: Muy buena

Tutoriales Blogger para Dummies: Header y Fondo

Tutoriales Blogger para Dummies: Header y Fondo


VISTO HASTA AHORA:
Presentación.
Tu Idea.
Glosario Básico.
Header y Fondo.
Has llegado hasta aquí, despacio y con buena letra. Parece que tus ideas empiezan a aclararse un poco y entiendes mejor de qué va todo esto. Aun así, sigues pensando que todo es mucho más complicado de lo que te parecía al principio. Tu blog sigue teniendo un aspecto horrible, naranja chillón. Es verlo... ¡y te dan ganas de llorar!
Pero tranquila, vamos a ir paso a paso. No vamos a empezar a poner colores diferentes en tu blog sin antes elegir la parte fundamental de tu nuevo diseño: el header (o cabecera). La parte de arriba dónde irá el nombre de tu blog, será lo primero que vean tus lectores al aterrizar en él y, por lo tanto, será el elemento gráfico alrededor del cual girará el resto del diseño.
Investigando sobre cómo diseñar un header profesional para tu blog te topas por la red con un montón de tutoriales qué te indican las claves para que sea perfecto:

No demasiado alto, tus lectores deben ver al menos un fragmento de la primera entrada. Piensas que 250px de alto estará bien.
Bonito pero que no desvíe la atención de lo realmente importante: tu contenido. Osea, que tiene que notarse que te has tomado tu tiempo en diseñarlo pero sin que reste importancia a tus entradas. Vamos, en resumen, que tú quieres que te lean, no que estén tres horas mirando tu cabecero.
Que la decoración que escojas transmita el tema o idea principal de tu blog. Vamos, que si hablas de cocina no plantes un gato. Eso te ha quedado claro, tú quieres algo bonito pero sencillo, que no sea demasiado ostentoso.
Con la gama de colores y tipografías corporativas.¿Ein? Ya estamos otra vez... ¿qué demonios es eso?




No te preocupes, que es muy sencillo. Antes de empezar a diseñar o cambiar nada, tienes que elegir los colores y tipos de letra que vas a utilizar para tu blog. Esos serán tu paleta de colores y tipografías corporativas. Y una vez las hayas escogido, guárdalas bien. 



Es muy importante ser coherente siempre, si lo que quieres es tener un blog profesional tienes que reforzar tu imagen de marca usando los mismos colores y tipos de letra en cada una de tus campañas, publicaciones, entradas del blog,...

Como siempre, vamos a hacerlo paso a paso, para que no te pierdas y, lo más importante, aprendas a hacerlo tú sola. Daremos forma a tu moodboard corporativo, verás que sencillo es.

RECOPILANDO IMÁGENES INSPIRADORAS



Nadie va a verlas así que no te preocupes por los derechos de autor o el copyright ahora. Navega por internet usando tus palabras clave (aquellas que definen tu idea o el tema de tu blog) y guarda todas las fotos que te resulten inspiradoras.

Por ejemplo, imagina que quieres hacer un blog de decoración, lo tienes muy sencillo. Solo tienes que buscar en google frases como decoración vintage y te aparecen millones de opciones.

Pincha en Imágenes para que te sea más sencillo:



Y empieza a hacer tu colección de imágenes inspiradoras en una carpeta nueva de tu ordenador, para tenerlas todas localizadas.
Yo he escogido éstas:


Imagen 1  //  Imagen 2  //  Imagen 3

¿Y ahora cómo se supone que tengo que pasar eso colores a mi blog? ¿Por transferencia? Porque vamos... ya me dirás tú...
Tranquila, no te aceleres. Vamos a usar un programa para extraer de tres a cuatro colores que te gusten y te hagan sentir identificada y los usaremos para tu diseño.
Sí, claro, que yo no sé usar Potoshop, Corel ni nada de eso... 
No te hacen falta. Si puedes acceder a ellos ¡genial! Los resultados serán más profesionales con diferencia, pero si no te los puedes permitir tampoco te desanimes. Crearemos nuestra paleta de colores con Pixlr ¡que es gratis y online!
Entrar a Pixlr
Selecciona PIXLR EDITOR.


Y abre tu primera imagen.
Pincha en el cuentagotas de la barra de herramientas de la izquierda y haz click sobre uno de los colores de la fotografía que te gusten.


¿Ves el cuadrado azul de la parte de abajo de tu barra de herramientas? Esa es la tonalidad de azul que has escogido. Si te gusta, perfecto, sino, puedes seguir probando hasta encontrar el color que estés buscando.
Una vez lo hayas encontrado, haz click encima del cuadrado azul. Verás ésto:


Asegúrate de marcar la opción WEB de las pestañas superiores y copia el código alfanumérico de la derecha. Ese código es el que hará que ese azul aparezca en tu web, es un código HEX que se usa en las páginas webs para representar los diferentes colores.
Con tu código copiado ve a Archivo -> Nueva imagen y selecciona un nombre para tu archivo, por ejemplo: Paleta de Colores.


Las medidas ahora no importan, puedes dejar las predeterminadas. Vamos a usar esta nueva imagen para crear nuestra paleta de colores corporativa extrayendo los colores elegidos de las diferentes fotografías que hemos encontrado en internet.
La arrastramos dónde no moleste y seleccionamos la herramienta Forma:


Escogemos ELIPSE de la barra de herramientas superior que aparecerá al hacer click sobre la herramienta forma y trazamos un circulo en nuestra página en blanco. Si te fijas el elipse aparece en negro, es el color predeterminado de relleno que teníamos marcado.


Tenemos dos opciones para cambiarlo:

Antes de trazar el elipse: haciendo click en el color de Rellenar Figura (barra de herramientas superior) y pegando nuestro código de color azul escogido o haciendo click directamente en el cuadro de color de la barra lateral izquierda si lo tenemos seleccionado en ese momento.


Pincha en OK y la próxima elipse que dibujes será de tu azul.



Después de trazar el elipse: Con la herramienta Bote de Pintura de la barra de herramientas lateral izquierda.


Haces click en la caja de color inferior, añades tu código de color y pinchas encima de la elipse que quieras colorear:


Haciéndolo de esta segunda forma nos aparece una línea negra alrededor de nuestro círculo de color ¿la ves?

Eso es porque, por defecto, las formas se dibujan con un trazado exterior (un borde) del color predeterminado. Pero eliminarlo es muy sencillo. Solo tienes que modificar el valor del borde antes de trazar tu elipse y ponerlo a cero.


Repetimos los mismos pasos hasta conseguir de tres a cuatro colores que nos identifiquen y, sobre todo, que sean compatibles. Puedes echar un vistazo a estas entradas:
Cómo elegir la paleta de colores de tu blog
Combinaciones de colores para tu blog
Psicología del Color
Yo he escogido dos fríos y dos cálidos para crear contrastes.


¡Ya tienes tus cuatro colores! Estupendo. Recuerda apuntar y guardar bien los códigos que has escogido.
¿Y ahora qué?ESCOGER LA TIPOGRAFÍA ADECUADA PARA TU BLOG



Vamos a necesitar un tipo de letra que pueda usarse en todos tus diseños para el blog y que, a la vez, esté disponible para que puedas usarla directamente en tu blog. Es muy importante tener este detalle en cuenta antes de elegir la letra que te identifique.
Como con los colores, seleccionaremos tres o cuatro tipografías que serán las que usarás para todo. Así seguirás reforzando coherentemente tu imagen de marca ¿te parece? ¡Perfecto! Allá vamos.
Llegados a este punto te recomiendo echar un vistazo a mi ebook gratuito Diseñar la entrada perfecta, te será de gran ayuda para entender la importancia que tienen las tipografías en tu web.
Ver Ebooks Gratuitos
Primero vamos a mirar los tipos de letra disponibles en Blogger:
Plantilla -> Personalizar -> Avanzado


Si seleccionas Título del Blog puedes ver a la derecha todas las fuentes predeterminadas de Blogger que puedes usar y cómo quedaría la vista previa de tu header usando cada una de ellas.
De momento solo vamos a escoger de tres a cuatro tipos de letra que nos gusten, más adelante volveremos al diseñador de plantillas para configurar nuestro blog por completo. Vamos paso a paso ¿recuerdas? Y ahora estamos con la cabecera y el fondo.
Necesitamos diferentes tipos de letra para:
TÍTULO del blog: el nombre de nuestro blog. Esta puede ser una letra más decorativa. Yo he seleccionado la Pacífico.
TÍTULO de las entradas: Tiene que leerse claramente, es lo que hará que tus visitas lean la entrada o no. Si es bonita pero no se lee bien... no es un buen reclamo. Yo he seleccionado la Lobster.


TÍTULO de los gadgets: te recomiendo usar la misma que para el título de tus entradas, así mantienes cierto equilibrio en tu diseño. De nuevo la escogida es la Lobster.


TEXTO de tus entradas: La más importante en tu blog. Tiene que ser un tipo de letra clara y legible, olvídate de los tipos de letra escritos a mano...
¡¿Por qué?! Sí son con los que más me identifico...
Pues porque lo más importante de tu blog es tu contenido, quieres que te lean y si escoges la fuente Homemade Apple, por ejemplo, lo tienes complicado. Mira:


Texto de la página: Homemade Apple



Texto de la página: Molengo

¿Cuál lees mejor y te cuesta menos trabajo seguir el hilo?
Ya, pero... la otra es más bonita...
Pues puedes usarla para los títulos. Pero recuerda siempre que tú escribes para que te lean y recuerden lo que has escrito, no para que piensen: ¡vaya! que letra más bonita... pero no entiendo ni jota de lo que me cuenta esta tía.
Cuando tengas tus tipos de letra definidas, puedes pinchar en el botón naranja de arriba a la derecha para guardar los cambios en tu plantilla. Así no tendrás que volver a repetirlo luego.
Ya que estamos en el Diseñador de Plantillas, puedes escoger también el tipo de letra para tus pestañas / páginas. Las que aparecerán en el menú superior y guiarán a tus visitas por los temas principales de tu blog.
TEXTO de la pestaña: Como ya tenemos nuestros tres tipos de letra, tenemos que usar una de las ya seleccionadas. Puedes utilizar la misma que usarás en el header, así se diferencia de los títulos de tus entradas y de los gadgets de la barra lateral. La mía era Pacífico.


Guarda de nuevo los cambios ¡y listo! Ya tienes tus colores y tipografías corporativas. Ahora solo tienes que descargarlas en tu ordenador y usarlas para diseñar tu cabecero.
Puedes buscarlas en esta web:
FontsquirrelDISEÑAR EL HEADER Y FONDO PARA TU BLOG



Puedes diseñar tu cabecero en Pixlr, el programa que hemos usado para extraer los colores de nuestras fotogafías, o en Photoscape, que es un programa gratis y tienes un tutorial muy sencillo en el siguiente enlace:
Diseñar la cabecera de tu blog con photoscape
MUY IMPORTANTE: utiliza tus colores corporativos y la tipografía que has escogido. Que para algo nos hemos pegado este trabajazo tú y yo ¿eh?
TIPS PARA ESCOGER TU TIPO DE FONDO:

Color blanco o lisos y claros: ¿Qué por qué? Volvemos a lo mismo. Quieres que te lean. Si le pones un fondo estridente de mil colores... desvías la atención sin necesidad. El blanco y los colores lisos nunca pasan de moda y facilitan la lectura. Por algo los libros son de papel blanco con letra negra ¿no crees?
Si prefieres usar un fondo decorativo, puedes encontrar un montón listos para usar en mi sección de descargas gratis:Fondos para Blogger

Muy importante: asegúrate que es tipo patrón (seamless), es decir, sin cortes. Que se continúa si pones uno al lado del otro por los cuatro lados del diseño. Hay fondos muy monos pero no son tipo patrón y aparecen cortados al subirlos a blogger.

Y si quieres diseñarlo tú misma, puedes hacerlo en Pixlr o Photoscape teniendo muy en cuenta que debe poder repetirse. En el Curso Diseña el Blog de tus Sueños (aquí) vemos cómo hacerlo y en el Manual Diseño Gráfico para Bloggers (aquí) también, por si quieres aprender a hacerlo tú sola.

Con un poco de práctica, creatividad y paciencia puedes hacer tú sola diseños muy chulos y completamente personalizados. Así puedes aplicarle tus colores corporativos sin problema y no tener que meter un fondo con un color que no aparece en tu paleta.

Yo he escogido un fondo liso y blanco, vamos a ver cómo instalarlo.

Volvemos al Diseñador de Plantillas y entramos en: Avanzado -> Fondos



Y en fondo exterior seleccionamos el color blanco (#ffffff). Si quieres usar uno de tus colores corporativos solo tienes que meter el código en la cajita, dar a Intro y se cambiará automáticamente.
Para usar un fondo tipo patrón se hace en otro sitio pero también dentro del Diseñador de Plantillas:
Fondo -> Imagen de Fondo -> Subir Imagen


Buscas la imagen de fondo que has descargado o diseñado tu misma y si te gusta el resultado, solo tienes que hacer click en Listo.


Y recuerda pinchar en Aplicar al Blog (botón naranja de arriba a la derecha) antes de salir del Diseñador.
DETALLES DE INSTALACIÓN
A veces al instalar la cabecera te puede pasar algo así:


¿Ves la línea naranja que aparece enmarcándola? Si te sucede esto es porque sobra espacio y tu header no está bien adaptado a las medidas.
¿Otra vez a diseñarlo? Ay no... ¡que locura!
Que no, mujer, hay otra forma más sencilla de hacerlo. Desde el Diseñador de Plantillas:
Avanzado -> Fondos -> Fondo de la cabecera.
Ponlo del mismo color que el fondo de tu header, en mi caso blanco. Y problema solucionado.


¿Ves que fácil ha sido, agonías? Si en realidad cuando te acostumbras no es para tanto, mujer.¡Tu blog ya va cogiendo forma!



Pero todavía quedan detalles por pulir. Aunque sea tu primer blog, queremos que quede bien bonito ¿verdad?
Pues en la SIGUIENTE MISIÓN de Tutoriales Blogger para Dummies veremos:

Configuración Básica del Blog: tipos de letra y colores.La publicaré el domingo 31 de mayo.

Y te prometo que será sencillo ¿vale? Que no quiero que te vuelvas loca y tires la toalla antes de empezar.

¿Y tú? ¿Tienes ya tu propio blog? 

Puedes compartir con nosotras cómo diseñaste tu cabecero y escogiste tu fondo ¡aprender juntas es mucho más divertido!

* Puedes enlazar tu entrada en los comentarios del blog *









¡EMPEZAMOS EN JULIO!

APRENDE A PROGRAMAR Y DISEÑAR BLOGS BONITOS, ORIGINALES Y OPTIMIZADOS PARA TI Y TUS AMIGAS

QUIERO SABER MÁS SOBRE ESTE CURSO TAN CHULO





Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

internet blog blogger para dummies ...

Tutoriales Blogger Dummies: La Sidebar

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Header y Fondo. Configuración Básica. Las apariencias. La sidebar. ¿Qué? ¿estás contenta con los avances? ¡Porque son muchos! Cuando empezamos, el pasado 11 de abril, no tenías ni idea de lo que era un blog... ¡y mira ahora! Lo has hecho todo tú solita. Vale que yo te he ido acompañando pasito a pasito para que no te pierdas... ¡pero lo ha ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Tu Idea

Un buen día se te enciende la bombilla mientras lees un blog de cocina para aprender a hacer tarta de manzana y decides que tú también quieres compartir lo que sabes con el resto del mundo a través de internet. Vale, sabes que quieres hacer tu blog en blogger ya que es la plataforma que usan la mayoría de blogs que lees. Pero ¿y ahora qué? Vamos por pasos.EL TEMA DE TU BLOG Lo más importante si qu ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Configuración Básica

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Header y Fondo. Configuración Básica. ¿Ya estás más relajada? Tu blog ya va cogiendo forma ¿verdad? Y lo más importante no es eso, sino que lo estás haciendo tú sola, es la mejor forma de hacer las cosas. Así, si vuelves a tener la genial idea de abrir un blog... ¡ya sabes los pasos a seguir! ¿No es estupendo? Algo positivo teníamos que sa ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: Glosario Básico para ser Blogger

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Seguro que si recuerdas tu primer día como blogger... has sonreído al leer la frase de la imagen. Y es que todas hemos empezado de cero. Ya sabes, nadie nace aprendido. Y todo se aprende con la práctica. Así que si llevas poco tiempo en este mundo blogger o estás pensando en abrir tu propio blog, seguro que este tutorial soluciona muchas ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: La Plantilla HTML

Para no tener ni idea de cómo hacer un blog de blogger cuando empezamos esta serie de tutoriales, tu blog no está nada mal ¿no crees? Limpio, profesional, cuidado... si has seguido todos los pasos que hemos ido viendo, puedes estar muy satisfecha del trabajo y horas invertidas en poner tu blog bien bonito tu sola. Puedes repasar lo que llevamos visto aquí: VISTO HASTA AHORA: Presentación. Tu Idea. ...

internet blog blogger para dummies ...

Tutoriales Blogger para Dummies: El Diseño de tu Blog

VISTO HASTA AHORA: Presentación. Tu Idea. Glosario Básico. Header y Fondo. Configuración Básica. Las apariencias. ¡Genial! ¿Eres consciente de todo lo que has avanzado ya? Has pasado de no tener ni idea de qué es un blog a tener una idea clara, entender los términos básicos necesarios para desenvolverte con soltura en este nuevo mundo digital y además has empezado a personalizar y configurar tu nu ...

internet blog fotografía ...

Fotografía y tutoriales para crafters: el fondo

¡Buenos días! ¿Qué tal va la semana? Espero que muy chachi. Yo estoy de vuelta otro mes con mi tema favorito: la fotografía. El mes anterior hablé del espacio donde realizar la fotografía de nuestra manualidad, si te lo perdiste pincha aquí. Así que continuamos con los consejos y trucos, esta vez toca el fondo que vamos a utilizar para realizar la fotografía. Se pueden utilizar el fondo que queram ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: Buenas Prácticas

Hemos llegado al final de esta serie de tutoriales para crear un blog en blogger para Dummies. Si has seguido el paso a paso de las 9 entradas ¡seguro que ya tienes un blog estupendo con el que adentrarte en este universo blogger! No solo hemos visto cómo personalizarlo y ponerlo a nuestro gusto, sino que hemos empezado desde la base: cuando surge la idea y tenemos que seleccionar la temática y no ...

BLOG blogging twordpress ...

Wordpress para Dummies: Primeros pasos en Wordpress.org

Wordpress.org es un mundo aparte. Llevo ya casi dos años investigando a fondo la plataforma y, aunque mi blog sigue en blogger dónde tengo todo lo que necesito, el área de cursos y el blog privado los he pasado allí por las facilidades que ofrece. En este blog tenemos una sección especial sobre Wordpress que puedes consultar siempre que lo necesites desde el correspondiente banner de la barra late ...

internet blog descargas ...

Botones subir elegantes y sencillos para blogger

En temas de diseño, la mayoría de las veces, la elegancia va de mano de la sencillez. A mí me encantan los colores brillantes pero eso no tiene porqué chocar con un diseño elegante, profesional y cuidado. Ya he compartido contigo un montón de botones subir para el blog pero... ¡nunca son suficientes! Sobre todo teniendo en cuenta que hasta que damos con nuestro diseño ideal... ¡seguro que nuestro ...