Crear botones de suscripción con Photoshop

ByLuis March 30, 2006

Puede que alguna vez te hayas preguntado cómo hacer uno de esos “minibotones” que aparecen en algunos sitios indicando la suscripción RSS, pues es tan sencillo como dar tres pasos en photoshop.
Creamos un archivo nuevo de las dimensiones deseadas, yo para el ejemplo uso una imagen de 22 pixels de ancho por 11 de alto.
Elegimos los colores que vamos a usar, en este caso he escogido dos tonos de naranja, #E39207 y #FFAE00
Seleccionando el color más oscuro, trazamos un borde de 1px de ancho por toda la imagen, seguidamente seleccionamos la herramienta de borrado y quitamos 1px de cada esquina dejando una imagen como esta
El siguiente paso será hacer una selección de toda la parte interior del recuadro y realizar un degradado desde el extremo superior de la imagen hasta el extremo inferior
Solo nos queda añadir el texto, lo hemos hecho píxel a píxel, y tendremos un atractivo botón para decorar nuestra web.

Grafismo | Trucos

Sanscons, iconos modificables mediante CSS

ByLuis March 22, 2006

Una colección interesante de iconos que cambian de color mediante CSS, a parte de la colección, es interesante aprenderse el método y usarlo para tus propios diseños.

El método es sencillo, crear una imagen con el contenido en un color blanco (para que sea más sencillo ajustarlo con otros colores) y poner el fondo transparente, así, si se cambia el fondo mediante CSS, cambiará el fondo del icono.

 <img class="icon" src="icono.gif" alt="icon"/>

 .icon {
background-color:#f00;
}

Sanscons

Vía / Intenta

Javascript | Tutoriales

Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis July 20, 2009

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Grafismo

Optimiza tus imágenes con PngOptimizer

ByLuis March 30, 2006

Si te preocupan cosas como el ancho de banda, el espacio en el servidor o los tiempos de descarga, **PngOptimizer** te enamorará.
Se trata de un software gratuito —solo Windows— que nos permite reducir el tamaño de las imágenes para su uso en la web. Impresiona por el tamaño de la descarga (solo 163 KB) y su facilidad de uso: para optimizar una imagen basta con arrastrarla desde el explorador de archivos hasta la ventana de la aplicación.
Y por el mismo precio —cero euros—, incluye una versión para línea de comandos que te resultará muy útil en procesos por lotes.
Optimicemos, amiguete: PngOptimizer.

Tutoriales | XHTML

Referencia HTML con ejemplos

ByLuis December 4, 2006

Muchas de las veces, cuando estamos realizando pÃ¡ginas web y no usamos un editor HTML completo, nos puede ocurrir que no nos acordamos de una etiqueta HTML, de su utilizaciÃ³n o de sus atributos.
Si te encuentras en esa situaciÃ³n, HTML Playground puede serte de mucha utilidad, ya que te muestra todas las etiquetas HTML, con su descripciÃ³n y un cÃ³digo de ejemplo, el cual se puede visualizar y modificar.

HTML Playground
VÃa / Ajaxian

Grafismo

Novedades de Adobe Photoshop CS3

ByLuis June 20, 2006

Parece que Adobe Photoshop CS3 viene cargada de novedades, entre una de las mÃ¡s importantes es la creaciÃ³n de dos versiones, una Standard y otra Premium, la cual incluirÃ¡ mÃ¡s funcionalidades. Por ejemplo, la nueva versiÃ³n de Camera Raw irÃ¡ incluida en ambas versiones de Photoshop. Vanishing Point estarÃ¡ solo en la versiÃ³n Premium.
A parte de mejoras en la ediciÃ³n de imÃ¡genes, tambiÃ©n aÃ±adirÃ¡ funcionalidades al uso de tabletas grÃ¡ficas al estilo de Corel Painter y darÃ¡ la posibilidad de exportar a CAD.
VÃa / Bitelia

Apache | Grafismo | How to | PHP

Ponle copyright a tus imágenes mediante PHP

ByLuis April 4, 2006

Muchas veces queremos que las personas se descarguen las imágenes que tenemos en nuestras páginas web, pero también queremos que quede bien claro quién es el autor. Para ello podemos editar todas las imágenes que tengamos, o bien que el propio entorno se encargue de poner el copyright por nosotros.

El método es sencillo, modificamos las opciones del Apache para que cuando se acceda a una imagen, lo redireccionemos a un script que se encargará de escribir el texto que queramos.

Similar Posts