Poderoso Saber http://www.poderososaber.com Fri, 31 Dec 2010 09:25:16 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Lineas Brillantes o con Resplandor en Photoshop http://www.poderososaber.com/lineas-brillantes-o-con-resplandor-en-photoshop/ http://www.poderososaber.com/lineas-brillantes-o-con-resplandor-en-photoshop/#comments Tue, 16 Feb 2010 01:37:31 +0000 Roy http://www.poderososaber.com/?p=22 Hola blogueros, en esta ocasión vamos a realizar un efecto muy chulo con el photoshop, haremos líneas con brillo o resplandor que quedan muy bien.

Empezaremos creando un nuevo proyecto de 1200 x 800, para después utilizarlo como fondo de pantalla, ustedes pueden darle el tamaño en que lo necesiten.

Rellenaremos de un color azul en este caso utilizase un degradado radial y una interpretacion de nubes con los siguientes colores: #2749c2, #112362 y #050b20.

Ahora creamos una capa nueva y seleccionamos la herramienta del pincel para definir el pinciel a un tamaño de 21px no importan los colores con los que quede predefinido, una vez definido el pincel, hacemos algunos trazos con la herramienta pluma, algo así:

Ya que tengan su marca del trazo damos clic derecho aun con la herramienta pluma seleccionada y elegimos la opción contornear trazo y tenemos mucho cuidado que la opción de simular presión este activada.

Ahora nos vamos a las opciones de fusión de la capa en donde esta nuestro trazo y nos vamos a superposición de colores y elegimos color blanco con 100% de opacidad.

Después determinamos una sombra paralela con modo de fusión “Sobreexposición Lineal” el siguiente color,  #728cdf y las siguientes características: Distancia, extensión en ceros y un tamaño de 17px.

Ahora nos queda determinar el resplandor exterior, a cual le pondremos modo de fusión “Trama” con color #0090ff, con opacidad al 80% y un tamaño de 95px.

Y listo solo nos queda repetir el trazo, recuerden hacer cada trazo en una capa nueva y solo copien el estilo de la capa que creamos hace un momento. Esto lo lograran dando clic derecho en la capa que acabamos de terminar y seleccionamos copiar estilo de capa y con el mismo método lo copiamos a las nuevas capas que vayamos creado.

Espero  haya sido de su agrado este pequeño tutorial y no olviden dejar sus comentarios y sugerencias. Aquí les dejo la imagen final. Saludos y felices trazos.

PSD de ejemplo: Descarga archivo de ejemplo



]]> http://www.poderososaber.com/lineas-brillantes-o-con-resplandor-en-photoshop/feed/ 1 Menú con imagen para cada estado con CSS. http://www.poderososaber.com/menu-con-imagen-para-cada-estado-con-css/ http://www.poderososaber.com/menu-con-imagen-para-cada-estado-con-css/#comments Thu, 04 Feb 2010 04:35:21 +0000 Roy http://www.poderososaber.com/?p=7 Hola a todos mis fieles lectores, que en este momento solo cuento con uno osease yo jajaja, voy comenzando con este blog y poco a poco irá levantando vuelo.

Ahora pasemos a lo interesante, muchas veces al estar haciendo un menú para nuestras páginas con botones que cambian de imagen cuando esta el puntero encima (hover), nos topamos con la gran sorpresa de que al subirlo al servidor en el momento que debería hacer el cambio de imagen, pues pusimos nuestro puntero sobre el botón, no se muestra o se tarda un momento en aparecer la imagen secundaria (tiempo de descarga de la imagen secundaria), entonces optaríamos por hacer un precargador de imágenes, aquí les tengo otra opción.

Lo que vamos a hacer es meter nuestras dos imágenes en una sola de esta forma:

En nuestro codigo solo haremos un <div> para colocar el menú y dentro de este una lista, que cada punto de la misma <li>,  será cada uno de nuestros botones que el link lo haremos con el texto solo pondremos la imagen del botón como fondo del <div>, de esta manera:

<html >
<head>
   <link href="styles.css" rel="stylesheet" type="text/css" />
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>..::Poderoso Saber::..</title>
</head>
<body>
   <div>
      <ul>
         <li>
            <a href="#">  HOME  </a>
         </li>
      </ul>
   </div>
</body>
</html>

Solo nos resta agregar el efecto con la hoja de estilo, esto nos evitara el error ya que cuando cargue la imagen para el link inactivo estará cargando al mismo tiempo la que es para el estado hover, esto lo haremos personalizando el estado de nuestros botones, a y a:hover, y simplemente cambiaremos la posición en y de la imagen de fondo para cada uno de los estados y listo. En la hoja de estilo quedaría de esta forma:

.botonera ul
{
   list-style:none;
   float:left;
}
.botonera li
{
   float:left;
   padding-left:5px;
   width:80px;
   height:30px;
}
.botonera a
{
   width:80px;
   height:22px;
   text-align:center;
   display:block;
   padding-top:8px;
   outline:none;
   font-size:10px;
   text-transform:uppercase;
   color:#999;
   background:url(img/bgboton.png) no-repeat 0 0;
}
.botonera a:hover
{
   color:#CCC;
   background:url(img/bgboton.png) no-repeat 0 -30px;
   text-decoration:none;
}

Les  dejo un archivo de ejemplo muévanle a la hoja de estilo para que comprendan exactamente como funciona. Por favor cualquier duda o comentario no duden en dejarlos vale y espero que les sea muy util.

Menu con CSS



]]> http://www.poderososaber.com/menu-con-imagen-para-cada-estado-con-css/feed/ 0