Escrito por Gallego el 13 Marzo 2007

¿Otra entrada en el blog sobre Last.fm? Pues sí, pero es que cada día descubro nuevas opciones y posibilidades en este estupendo servicio, y creo que algunas son lo suficientemente interesantes como para escribir sobre ellas. Además, tampoco quiero que nadie se queje de que todos los tutoriales que publico tratan de Photosohop, pues no era ésa mi intención cuando inicié dicha sección.

Quienes tengáis cuenta propia en Last.fm ya sabréis que la columna izquierda de nuestra página puede ser editada para darle un toque más personal a la misma, y en estos menesteres he llegado a ver de todo: desde la típica descripción personal, hasta enormes surtidos de GIFs animados, pasando por los célebres escudos para atestiguar un determinado número de canciones oídas. Pero una idea que he visto en pocas cuentas, y que me ha gustado mucho, es la de dedicar dicha columna a poner las portadas de nuestros discos favoritos.

Creo que esta opción, además de ofrecer un resultado muy elegante, es también una buena forma de compartir nuestras preferencias musicales con aquellas personas que visiten nuestra cuenta. Para que os hagáis una idea de qué estoy hablando, podéis visitar mi página personal clickando en la imagen:

¿Os gustaría saber cómo hacerlo? Bien, pues veréis que es muy fácil. Lo primero será, cómo no, decidir qué discos queremos poner en la barra lateral, y hacernos con sus portadas. Por lo general, prácticamente cualquier carátula puede ser conseguida en las secciones de Last.fm para cada grupo, escribiendo en el navegador: http://www.last.fm/music/GRUPO, cambiando “GRUPO” por el nombre de la banda que deséeis, y teniendo en cuenta que los espacios se representan con el signo “+”.

Lo siguiente será almacenar las imágenes en algún directorio online, como ImageShack. Para no tener problemas con Internet Explorer (siempre jodiendo), tendréis que redimensionar las carátulas a un tamaño menor al del ancho de la columna, u os la romperán por completo en el navegador de Microsoft. Así pues, al subir las imágenes, marcad la opción “Resize” y seleccionad “150×112 (Thumbnail)”. Si preferís redimensionarlas a mano, recomiendo darles un tamaño de 150×150 píxeles.

Una vez almacenada la imagen en dicho host gratuito, o en cualquier otro que tengamos a mano, entraremos a “Preferencias” (parte superior derecha de nuestra página en Last.fm), donde podremos editar nuestra columna personal en la casilla “Sobre tu persona”. Ahí, por cada disco que queramos añadir, tendremos que introducir un código BBCode como el siguiente:

[URL=http://www.last.fm/music/Tool/Ænima]Ænima[/URL]
[IMG]http://img396.imageshack.us/img396.jpg[/IMG]

Cambiando la dirección que sigue a "URL=" por la página en Last.fm del disco en cuestión, o cualquier otra que nosotros deseemos que se abra al pinchar en el texto. A continuación, entre dicho corchete y "[/URL]" pondremos el nombre del disco. Por último entre "[IMG]...[/IMG]" tendrá que ir la dirección en que esté almacenada la carátula deseada. Sobre este código básico se pueden incluir más detalles, como poner el nombre del grupo, la fecha del disco, etc. Ya sabéis que simplemente tendréis que usar la etiqueta "[URL=]" para enlaces, y la etiqueta "[IMG]" para imágenes.

Escrito por Gallego el 02 Marzo 2007

Siguiendo con mi exitosa colección de tutoriales de diseño con Photoshop, los cuales no sé si habrá alguien que se digne a seguir, vuelvo esta vez con una propuesta estética muy de moda, y por la que muchas veces me han preguntado. Seguro que habéis visto alguna vez fotografías totalmente en blanco y negro, excepto algún elemento que se deja en color para resaltar ¿verdad?

Es un recurso que se estila mucho, y a pesar de lo que pudiera parecer, darle este toque tan atractivo a nuestras propias imágenes es francamente fácil, y no tiene por qué llevaros más de cinco minutos de reloj. ¡Y no me estoy marcando ningún farol, os lo aseguro! Simplemente, seguid los pocos pasos que a continuación escribiré, y veréis lo fácil que resulta. De hecho, podría ser todavía más fácil de como vamos a ver, pero os lo explicaré de forma que podáis sacarle mucho más juego a la imagen tratada. Arrancad el Photoshop, que empezamos:

• 1 - Como es de rigor, lo primero será cargar en el programa aquella imagen sobre la que queramos trabajar. Para el ejemplo he usado la foto de un llamativo girasol, sobre la cual he aplicado la Herramienta Varita mágica, situada en la barra de herramientas, concretamente en la segunda fila y segunda columna:

  

  Con dicha herramienta activada, iremos seleccionado la parte de la imagen que queramos conservar en color. Tras el primer click no se seleccionan todos los pétalos del girasol, por lo que hemos de ir haciendo Click derecho > Añadir a la selección o bien Click derecho > Extender hasta tener seleccionado todo lo que así deseemos.

  

• 2 - Una vez seleccionado el girasol por completo (o el objeto que vosotros hayáis elegido), hacemos sobre él Click derecho > Capa vía copiar, con lo que en el menú de capas, situado en la parte inferior derecha del programa, ahora nos aparecerá una segunda capa, en la que sólo se mostrará el girasol. En dicha columna, seleccionamos la capa original, simplemente clickando en ella:

  

• 3 - Finalmente, nos vamos a la barra superior y seleccionamos Imagen > Ajustes > Desaturar, y el color de la capa primaria desaparecerá, quedando ésta en blanco y negro. El girasol de la segunda capa, por su parte, quedará con el color original, por lo que ya habremos obtenido el efecto que buscábamos:

  

Os dije que era fácil, y podía haber sido más sencillo aún, pues el segundo paso era prescindible. Sin embargo, he preferido incluirlo en el tutorial porque así, una vez separado el objeto (en este caso el girasol) en una capa independiente, podemos seguir aplicándole efectos para personalizar aún más el trabajo. Por ejemplo, podríais ajustar las curvas de color, aplicarle filtros de cualquier tipo, etc. Eso ya lo dejo para vosotros. ¡Experimentad!

Escrito por Gallego el 03 Febrero 2007

Ya sabemos que Internet, como tantas otras cosas, tampoco escapa a las modas estéticas, y la consabida web 2.0 ha traído consigo unos patrones de diseño basados en la simplicidad de formas, los colores claros, los efectos de reflejo, etc. Precisamente éstos últimos se han convertido en verdaderas estrellas a la hora de adornar los logotipos de miles de blogs y webs de todo tipo.

Como podéis ver, yo mismo he hecho uso de un reflejo bastante discreto bajo el nuevo logotipo de esta bitácora, que no se diga por ahí que aquí no estamos adaptados a las últimas tendencias. Y ahora vosotros diréis: “claro, a mí también me gusta ese efecto, pero a saber cómo lo hago”. Bueno, primero de todo cerrad el Paint, y arranquemos algo más decente con lo que trabajar. ¿Qué tal el Photoshop? Veréis cómo conseguir unos resultados de diseñador profesional nos lleva unos pocos pasos:

• 1 - Como siempre, lo primero será crear una nueva imagen, para el caso tomemos como ejemplo de 300 x 150 píxeles. Mediante la herramienta de texto, escribamos aquello con lo que deseemos trabajar, usando alguna fuente mínimamente elegante, no como ésta. En el ejemplo yo he utilizado la MyriadPro, que podéis descargar en versión Regular o Light. Resulta igualmente recomendable no emplear minúsculas con “rabo” por debajo de la línea normal de texto, como ‘p’, ‘q’ o ‘j’.

  

• 2 - A continuación, nos vamos hasta la sección donde se encuentran las capas (por defecto, en la parte inferior derecha de la ventana) y en la capa correspondiente al texto hacemos Click derecho > Duplicar capa, tal y como se muestra en la siguiente imagen. Se nos abrirá una ventana en la que deberemos pulsar OK para confirmar el duplicado de capa:

  

• 3 - Una vez hecho esto, nos vamos a la barra superior y seleccionamos Edición > Transformar > Voltear vertical con lo que habremos girado la capa que duplicamos en el paso anterior:

  

  Así pues, lo siguiente será clickar directamente sobre el texto girado y, sin soltar el botón, arrastrar hacia abajo para que se desplace hasta dejarlo tal que así:

  

• 4 - Antes de seguir trabajando sobre la imagen, será necesario echar un vistazo a los colores que tenemos seleccionados en la paleta. Lo normal es que tengáis como color principal el mismo que empleasteis para el texto (en el ejemplo el azul claro) y de secundario el blanco. De no tenerlo puesto así, será necesario que lo hagáis para poder seguir avanzando:

  

• 5 - Hecho esto, volvemos al menú de capas en la parte inferior derecha del área de trabajo, para hacer Click derecho > Opciones de fusión en la capa duplicada, que se encontrará en la parte superior de la lista de capas:

  

  En la ventana que se nos abrirá, nos dirigimos en la columna izquierda a la opción Superposición de degradado. Ahí tendremos que clickar en el Degradado (indicado con un 1 en la siguiente imagen), abriéndosenos así una nueva ventana en la que marcaremos el primer estilo de degradado que se encuentra en dicho menú (indicado con un 2 en la imagen):

  

  Aceptando se nos cerrará esta segunda ventana, y volveremos a encontrarnos en la opción Superposición de degradado. Así pues, activamos la casilla Revertir (situada a la derecha del Degradado, anteriormente indicado con un 1) y veremos cómo el texto ya muestra un reflejo bastante próximo a lo que deseamos. Pero para terminar de dejarlo “al pelo”, sin cerrar la ventana Estilo de capa, hacemos click en la propia imagen, en el reflejo que hemos creado, y sin soltar el botón del ratón arrastramos hacia arriba hasta dejarlo tal que así:

  

• 6 - ¿Os gusta cómo está quedando? Pues tranquilos que vamos ya con el último paso, y veréis lo espectacular que resulta. Cerramos la ventana Estilo de capa haciendo click en OK. Vale, pues ahora volvemos al menú de capas de la parte inferior derecha, en la que tendremos tres capas, para hacer click en la que se encuentra en medio, cuyo nombre será el del texto que hayamos escrito. Ahora seleccionamos la Herramienta Marco Elíptico, que se encuentra donde os muestro en la imagen (hacer click derecho en el botón para que se despliegue este menú).

  

  Con dicha herramienta seleccionada, aplicamos una selección similar a la que estoy realizando en la imagen superior, cubriendo aproximadamente la mitad inferior del texto. Finalmente, nos vamos al menú superior y seleccionamos Capa > Nueva capa de ajuste > Brillo/Contraste. Se nos abrirá un primer menú en el que seleccionaremos OK, y un segundo en el que ajustaremos el Brillo hasta donde mejor veamos conveniente (para el ejemplo, yo lo pongo a +40). Finalmente, tendremos un logotipo tan amañoso como el que sigue:

  

Y si ya queréis darle el último toque de “distinción 2.0″, podéis agregarle una de esas chapas estrelladas en la parte superior derecha, para lo que podéis seguir este otro tutorial que escribí hace unas semanas. Éstos son pasos básicos que dan un resultado concreto, pero naturalmente podéis modificarlos en cualquier momento para adaptar el logotipo a vuestro gusto. ¡A ver qué conseguís hacer, artistas!

Escrito por Gallego el 15 Diciembre 2006

Ante la aceptación que pareció tener el primer tutorial que escribí, destinado a explicar la creación de chapas informativas en Photoshop, he decidido lanzarme de nuevo a la acción, y preparar un nuevo artículo con el que iros enseñando algunos truquillos para poder manejar un poco mejor cada día este interesante pero laborioso programa de edición de imagen.

Atendiendo a la petición que desde los comentarios del anterior tutorial me hacía MjWoman, voy a daros las orientaciones básicas para crear un banner mínimamente atractivo, el cual podréis luego emplear para poner en vuestra página web, documentos cuya presentación queráis mejorar, etc. Vamos, para lo que se os pueda ocurrir.

Ya de paso os digo que si alguno de vosotros también quiere que escriba algún tutorial en concreto, no tiene más que pedirlo, bien comentando aquí mismo o enviándome un email, y si veo que el asunto resulta viable e interesante, me pondré sobre ello. Naturalmente, estos pasos que aquí os doy podéis alterarlos en cualquier punto, para así conseguir un resultado más personalizado a vuestros gustos. Así pues, arrancamos el Photoshop y empezamos a trabajar:

• 1 - Lo primero será crear un nuevo documento, pulsando en Archivo > Nuevo..., y determinando en la ventana que se abrirá unas dimensiones acordes a nuestras necesidades. Para este ejemplo he usado 350 x 150 pixeles:

• 2 - Seleccionamos la Herramienta rectángulo redondeado, y el color que queramos que tenga el banner. Como podéis ver, yo he optado por el verde oscuro:

• 3 - Tras dibujar un rectángulo del tamaño que deseemos, toca ponerle algunos efectos para hacerlo más atractivo. Para ello, vamos a Capa > Estilo de capa > Opciones de fusión.... Primero aplicaremos Sombra paralela con 70% de opacidad, distancia 5 px, extensión 0% y tamaño 5 px. También seleccionamos Bisel y relieve, con Estilo bisel interior, profundidad 30%, tamaño 3 px y profundidad 0 px. Deberíamos tener algo así:

• 4 - Ahora, mediante la Herramienta de texto, escribimos el texto que queremos que aparezca en el banner. Para el ejemplo yo he empleado la fuente Elegance, la cual podéis descargar aquí, con tamaño 14 pt. y color blanco:

• 5 - Una vez escrito, y asegurándonos de que esté la capa del texto seleccionada (lo estará si no pincháis en ningún otro sitio), volvemos al menú Capa > Estilo de capa > Opciones de fusión..., donde esta vez seleccionaremos Trazo, de tamaño 4 px, posición Fuera y con un color verde pastel. Para el ejemplo yo he usado el #72B562. Aceptando tendremos algo así:

• 6 -Como se han quedado unos huecos muy feos en los espacios entre letras como la C y la O, vamos a rellenarlos, ¿no os parece? Para ello primero hemos de unir todas las capas (después de esto, no será posible editar el texto), lo cual se hace pulsando Capa > Combinar visibles. Una vez hecho esto, seleccionamos la Herramienta cuentagotas, y la utilizamos sobre el verde pastel que aplicamos como Trazo al texto:

  

  Con esto, habremos seleccionado dicho verde como color para trabajar. Ahora, activando el Bote de pintura, iremos aplicándolo en cada uno de los espacios que hayan podido quedar en los interiores de las letras:

  

  Vemos como ahora el resultado es ligeramente más atractivo, sin esos espacios en verde oscuro entre las letras:

• 7 - ¿Me seguís aún? Espero que sí, porque ya estamos terminando. Para darle el toque definitivo de glamour, lo primero será emplear la Herramienta Varita Mágica y pinchar en la zona de color verde oscuro, para seleccionar sólo la base del banner:

  

  Ahora seleccionamos la Herramienta pincel, y desplegando el menú de selección de Pincel como se muestra en la imagen, nos vamos hasta el que tiene forma de estrellas:

  

  Manteniendo como color de trabajo el verde pastel que antes seleccionamos haciendo uso del Cuentagotas en el paso 6, empezamos a dibujar estrellas de diferente diámetro (éste se selecciona en el menú desplegable de antes), y por fin tendremos un banner tan majo como éste que paso a mostraros:

Escrito por Gallego el 30 Noviembre 2006

Durante los últimos días he estado dándole muchas vueltas al Photoshop, ese programa que todos conocemos, pero que pocos saben manejar realmente bien. Entre tutoriales e investigación por cuenta propia, he conseguido hacer alguna que otra cosa medianamente decente, como esa “chapa informativa” (no sé cómo llamarla) de color verde que aparece en la parte superior derecha de este blog.

Hacer un distintivo como ése es bastante sencillo en realidad, así que se me ha ocurrido iniciar una nueva sección para ChochitoPelao, la cual he tenido a bien llamar Tutoriales (no, no me calentado mucho la cabeza con el nombre). Así pues, en este primer tutorial intentaré explicar de la mejor manera posible cómo crear dichas chapas con Photoshop, las cuales hacen mucho bonito en una web, si se saben utilizar. Así pues, si estamos todos listos, empezamos:

• 1 - Empezamos por seleccionar la Herramienta Polígono. Si en la zona de la barra de herramientas correspondiente os aparece otro icono, no os preocupéis, pues simplemente habréis de hacer click derecho y se os desplegará un menú como éste:

• 2 - En la barra superior, seleccionamos los siguiente criterios antes de dibujar el objeto, aunque éstos pueden variarse al gusto de cada uno:

• 3 - En cualquier momento podemos modificar el color del objeto desde la pestaña de Capas, en la parte inferior derecha de la ventana. Cuanto más llamativo sea el color, mejor resultado dará:

• 4 - Ahora toca darle un poco de profundidad al dibujo. Para ello hacemos click en Capa > Estilo de capa > Opciones de fusión. Aquí aplicaremos primero una Sombra paralela con opacidad de 75%, distancia 5 px, extensión 0% y tamaño 10 px. A continuación, seleccionamos Trazo con color blanco y tamaño 3 px. Deberíamos tener algo así:

• 5 - El siguiente paso será hacer click sobre la capa del objeto (en el mismo sitio donde le cambiábamos el color) manteniendo la tecla Control pulsada, de forma que veremos como la parte interior de la estrella pasará a estar seleccionada. Ahora hacemos Capa > Nueva > Capa, con lo que habremos creado una nueva capa en la que podremos trabajar. Lo siguiente será seleccionare la herramienta Degradado:

• 6 - Teniendo la opción Degradado activada, seleccionamos el Degradado radial (el segundo botón que aparece), y desplegando el menú contextual que se muestra en la imagen, seleccionamos Color frontal/Transparente (también el segundo botón). Es importante que tengamos seleccionado el color de pincel blanco:

• 7 - Ahora aplicamos el Degradado en la zona que nos interese. Para el ejemplo, yo lo he marcado en la parte superior derecha de la chapa, con una opacidad del 70 %:

• 8 - Para terminar, escribimos el texto que deseemos y le aplicamos una Sombra paralela básica, seleccionándola en la pestaña estilos:

  

  Con la fuente Arial Black, el resultado final será éste:

Por si todo esto se os hace muy pesado y queréis adelantar, aquí os dejo el archivo editable en formato PSD para que hagáis uso libre de él, aunque imagino que os interesará seguir todos los pasos y aprender cómo hacerlo vosotros mismos. Naturalmente, también podéis disponer de este tutorial para uso personal en cualquier momento.

Y ya para terminar, nos queda el código necesario para la inserción de la chapa en nuestra página web. Para que se vea de forma fija en la esquina superior derecha, como tengo yo puesta ahora mismo la mía, simplemente pegáis entre <body> y </body>:

<div style="position:absolute;top:0;right:0;float:right"><img src="dirección de la imagen" /></div>