Hoy os hablo del nuevo proyecto en el que estoy participando (y no solo con la creación del blog o la imagen publicitaria).

  "ESCRITURA ENTRE LAS NUBES", se ha creado como un rincón literario. No es la clásica página con referencias a libros ya conocidos o de descargas. Este blog es un punto donde todos aquellos escritores que quieren pueden encontrar editores, publicidad e información. Cubre proceso literario, desde su gestación hasta su destino final (incluyendo mi parte que es maquetación y diseño de las portadas) .

A esto se añaden talleres de técnicas narrativas, escritura creativa y escrituterapia para todas las edades.

Eligiendo color (2)

 

Hoy vamos a continuar con la entrada que publiqué hace unos días sobre como eliges colores que combinen a la hora de realizar un diseño y las diferentes herramientas que hay en la Red que te pueden ayudar en ello.

Si no leíste la primera parte puedes verla en: http://alicia-caudevilla.blogspot.com.es/2012/12/eligiendo-color-para-nuestro-diseno.html

1º) COLORS ON DE WEB

Este sitio web está dedicado a la teoría del color y el uso de los colores en el diseño. Si eres un blogger y necesitas ideas para un esquema de color o un diseñador en busca de un poco de inspiración color, las herramientas que aquí se presentan te darán un punto de partida. Este sitio le dará a los diseñadores web una mejor comprensión de la teoría del color y la importancia de los colores que se aplica al diseño web.

2º) PICTACULOUS

Esta excelente herramienta de los creadores de MailChimp, te permite subir una imagen y generar un esquema de color con los colores de la misma. Se integra con algunas de las otras herramientas que aparecen en la lista, con lo que resulta una mezcla de Kuler y COLOURlovers. También hay un práctico descarga Adobe Swatch para tu tema, por lo que es una manera rápida y fácil de agarrar los colores que necesitas para complementar una foto.

3º) CONTRAST-A

Se trata de una herramienta de color un tanto inusual e intrigante, ya que está diseñado para ayudar a asegurarse de crear WCAG compatibles con esquemas de color por lo que permite una vista previa de los niveles de contraste y simular la ceguera al color, reducción de la visión y ceguera clínica. Hay también un valioso conjunto de enlaces a guías (en mucho más fáciles de usar términos que el documento de especificación en sí)

Eligiendo color (1)

 

Una cosa que nos suele preocupar muchas veces al diseñar es "¿De que color lo hago? ¿Con qué lo combino?" Como hace poco me recordó alguien en el Twitter, a veces nos liamos y no sabemos que colores usar o tendemos a usar siempre los mismos.

Hoy os voy a dejar una serie de páginas que te ayudaran a elegir color, a combinarlos y a probar diferentes mezclas que en ningún momento se te habrían ocurrido.

1º) WEBSAFECOLORS

Nos muestra una paleta de colores combinables con su código HTML y RGB. En la parte superior hay un desplegable que da paso a la selección por colores.

2º) KULER

Tal vez es la herramienta más conocida para la elección de una gama de colores. Contiene una gran variedad de combinaciones subidas por los usuarios, comentarios sobre ellas, variaciones sobre alguna de las subidas, etc. Incluye un buscador de las mas populares o por colores.
Una vez has seleccionado tu favorita puedes ir, pulsando el botón que se te indica a continuación. a la pantalla donde vienen todas las características de dichos colores. Tiene plugins disponibles para todas las principales herramientas de Adobe como Photoshop, Illustrator e InDesign.
 

3º) COLOR EXPLORER

Este es posiblemente una de las mas completas herramientas disponibles en la web ya que ofrece una amplia gama de posibilidades para diseñar, personalizar y analizar sus paletas de colores.

Bajo mi punto de vista, una de las mejores utilidades que trae es la posibilidad de subir una foto y que te de los colores principales de la misma para trabajar con ellos. 

Aunque hay otras herramientas muy útiles como son la posibilidad de crear una paleta a juego con tu color elegido

O las diferentes Bibliotecas de color usando los sistemas mas comunes (W3C, Toyo, Trumatch, etc.) y las herramientas de conversión para ayudarte a cambiar entre los diferentes sistemas,

Menú con efecto balanceo para Blog o Web

Navegando hoy por una de esas páginas que me gusta seguir (redeando.blogspot.com), encontré un modelo de menú que os puede dar vida a vuestro Blog o Web. Es muy sencillo de instalar. Solo tienes que copiar el código que os pongo a continuación en el sitio de tu web donde quieres que aparezca.

Quieres sustituir el típico menú horizontal que tiene Blogger por este? Es fácil de instalar. 

Añade un gadget justo debajo de la cabecera o en la posición donde quieres que vaya tu menú. El gadget elegido debe ser de HTML/Java.

Tu ventana de gadget debe estar así. Que se lea "Formato RTF". Entonces copias el código que te paso. Sustituye las almohadillas (#) por las urls que desees y donde pone enlace y subenlace por los textos que creas conveniente.

<div id="containerbalanceo"> <ul id="menubalanceo"> <li><a href="#">enlace</a>   <ul> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> </ul> </li> <li><a href="#">enlace</a>   <ul> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> </ul> </li> <li><a href="#">enlace</a>   <ul> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> </ul> </li> <li><a href="#">enlace</a>   <ul> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> </ul> </li> <li><a href="#">enlace</a>   <ul> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> <li><a href="#">subenlace</a></li> </ul> </li> </ul> </div> <style> #containerbalanceo {   position: relative;   width: 96%; } #containerbalanceo:after {   content: "";   display: block;   clear: both;   height: 0; } #menubalanceo {   position: relative;   float: left;   width: 100%;   padding: 0 20px;   border-radius: 3px;   box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);   background: #cccccc; background: -moz-linear-gradient(top,  #cccccc 0%, #9e9e9e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#9e9e9e)); background: -webkit-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%); background: -o-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%); background: -ms-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%); background: linear-gradient(to bottom,  #cccccc 0%,#9e9e9e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#9e9e9e',GradientType=0 ); } #menubalanceo, #menubalanceo ul {   list-style: none; } #menubalanceo > li {   float: left;   position: relative;   border-right: 1px solid rgba(0,0,0,.1);   box-shadow: 1px 0 0 rgba(255,255,255,.25);   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   -ms-perspective: 1000px;   -o-perspective: 1000px;   perspective: 1000px; } #menubalanceo > li:first-child {   border-left: 1px solid rgba(255,255,255,.25);   box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25); } #menubalanceo a {                 font-family:century gothic;   display: block;   position: relative;   z-index: 10;   padding: 13px 20px 13px 20px;   text-decoration: none;   color: rgba(75,75,75,1) !important;   line-height: 1;   font-weight: 600;   font-size: 20px;   letter-spacing: -.05em;   background: transparent;   text-shadow: 0 1px 1px rgba(255,255,255,.9);   -webkit-transition: all .25s ease-in-out;   -moz-transition: all .25s ease-in-out;   -o-transition: all .25s ease-in-out;   -ms-transition: all .25s ease-in-out;   transition: all .25s ease-in-out; }         #menubalanceo > li:hover > a {                 font-family:century gothic;   background: #333;   color: #00DFFC !important;   text-shadow: none; } #menubalanceo li ul  {   position: absolute;   left: 0;   z-index: 1;   width: 200px;   padding: 0;   opacity: 0;   visibility: hidden;   border-bottom-left-radius: 4px;   border-bottom-right-radius: 4px;   background: transparent;   overflow: hidden;   -webkit-transform-origin: 50% 0%;   -moz-transform-origin: 50% 0%;   -o-transform-origin: 50% 0%;   -ms-transform-origin: 50% 0%;   transform-origin: 50% 0%; } #menubalanceo li:hover ul {   padding: 15px 0;   background: #333;   opacity: 1;   visibility: visible;   box-shadow: 1px 1px 7px rgba(0,0,0,.5);   -webkit-animation-name: swingdown;   -webkit-animation-duration: 1s;   -webkit-animation-timing-function: ease;   -moz-animation-name: swingdown;   -moz-animation-duration: 1s;   -moz-animation-timing-function: ease;   -o-animation-name: swingdown;   -o-animation-duration: 1s;   -o-animation-timing-function: ease;   -ms-animation-name: swingdown;   -ms-animation-duration: 1s;   -ms-animation-timing-function: ease;   animation-name: swingdown;   animation-duration: 1s;   animation-timing-function: ease; } @-webkit-keyframes swingdown {   0% {    opacity: .99999;    -webkit-transform: rotateX(90deg);   }   30% {      -webkit-transform: rotateX(-20deg) rotateY(5deg);    -webkit-animation-timing-function: ease-in-out;   }   65% {    -webkit-transform: rotateX(20deg) rotateY(-3deg);    -webkit-animation-timing-function: ease-in-out;   }   100% {    -webkit-transform: rotateX(0);    -webkit-animation-timing-function: ease-in-out;   } } @-moz-keyframes swingdown {   0% {    opacity: .99999;    -moz-transform: rotateX(90deg);   }   30% {      -moz-transform: rotateX(-20deg) rotateY(5deg);    -moz-animation-timing-function: ease-in-out;   }   65% {    -moz-transform: rotateX(20deg) rotateY(-3deg);    -moz-animation-timing-function: ease-in-out;   }   100% {    -moz-transform: rotateX(0);    -moz-animation-timing-function: ease-in-out;   } } @-o-keyframes swingdown {   0% {    opacity: .99999;    -o-transform: rotateX(90deg);   }   30% {      -o-transform: rotateX(-20deg) rotateY(5deg);    -o-animation-timing-function: ease-in-out;   }   65% {    -o-transform: rotateX(20deg) rotateY(-3deg);    -o-animation-timing-function: ease-in-out;   }   100% {    -o-transform: rotateX(0);    -o-animation-timing-function: ease-in-out;   } } @-ms-keyframes swingdown {   0% {    opacity: .99999;    -ms-transform: rotateX(90deg);   }   30% {      -ms-transform: rotateX(-20deg) rotateY(5deg);    -ms-animation-timing-function: ease-in-out;   }   65% {    -ms-transform: rotateX(20deg) rotateY(-3deg);    -ms-animation-timing-function: ease-in-out;   }   100% {    -ms-transform: rotateX(0);    -ms-animation-timing-function: ease-in-out;   } } @keyframes swingdown {   0% {    opacity: .99999;    transform: rotateX(90deg);   }   30% {      transform: rotateX(-20deg) rotateY(5deg);    animation-timing-function: ease-in-out;   }   65% {    transform: rotateX(20deg) rotateY(-3deg);    animation-timing-function: ease-in-out;   }   100% {    transform: rotateX(0);    animation-timing-function: ease-in-out;   } } #menubalanceo li li a {                 font-family:century gothic;   padding-left: 15px;   font-weight: 400;   color: #00DFFC !important;   text-shadow: none;   border-top: dotted 1px transparent;   border-bottom: dotted 1px transparent;   -webkit-transition: all .15s linear;   -moz-transition: all .15s linear;   -o-transition: all .15s linear;   -ms-transition: all .15s linear;   transition: all .15s linear; } #menubalanceo li li a:hover {   color: rgba(0,223,252,1);   border-top: dotted 1px rgba(255,255,255,.15);   border-bottom: dotted 1px rgba(255,255,255,.15);   background: rgba(0,223,252,.02); } </style>

Sigue mi Blog

Hoy he activado el apartado de seguidores. Cuando empecé a crear este blog, me daba cosa que, al ser nuevo y no tener información y no estar yo muy segura de si lo sacaría de nuevo adelante o no, hubiera gente que decidiera seguirlo y se lo encontrara  abandonado.

Hoy puedo decir que me lo estoy tomando en serio y que, no se si os gustará, pero intento compartir con todos la información que me llega. 

Como hacerun banner para tu web, blog, Facebook ...

Con esta página podrás diseñar de una forma rápida y sencilla un banner de entrada para donde tu quieras, con el fondo que elijas y el tamaño que desees. Como el ejemplo que pongo a continuación

Haz una prueba en: http://www.mybannermaker.com/
 
 
 

Como ves, viene unido a un enlace a su web. Es Obligatorio, por no decir justo para los dueños del programa, que pongas el enlace pero, si donde va tu banner no queda bien, puedes recortarlo y ponerlo a un ladito un poco más disimulado.

 
 
Algo así :)
Que dejas espacio en medio y escribes
y poco a poco queda disimulado

¿Cansado de que ningún diseño de los que la red te ofrece se ajusten a lo que tu quieres? Eso ya no te supondrá un problema para ti ya que con poco esfuerzo y a través de los videotutoriales de la web illasaron.com podrás crear tu template desde 0 y a tu gusto.

Por ahora la serie de artículos para crear templates de Joomla tiene 8 capítulos 

Espero que os sean útiles.

1. Comprensión de estructuras de las plantillas. Link AQUI.
2. Creación de nuestra primera plantilla. Link AQUI.
3. Personalización de plantillas. Link AQUI.
4. Personalización de módulos. Link AQUI.
5. Regiones Opcionales. Link AQUI.
6. Personalizar Menús. Link AQUI.
7. Meter menús en pestañas. Link AQUI.
8. Menús con imágenes y Breadcrumbs. Link AQUI.
9. Creación Plantillas Joomla. Dar estilo a Noticias multipágina. AQUI
10. Creación Plantillas Joomla. Embeber Módulos en Contenido. AQUI

  

Nota: información sacada de  Juan A. Chaves en http://ayudajoomla.com 

Como hacer botones para tu web o blog

Si lo tuyo no es el diseño gráfico, puedes utilizar los botones que nos ofrece DaButtonFactory.

Esta web nos permite crear, botones personalizados, y que luego podemos descargar como imagen (JPG, PNG, GIF), u obtener el código CSS correspondiente.

Puede personalizarse por medio de la fuente, estilo, color, tamaño, forma, sombras y gradientes, entre otras opciones. La vista previa del botón se va actualizando a medida que seleccionamos las distintas opciones.


Haz una prueba en: http://dabuttonfactory.com/