TestSize es una herramienta online que nos permite testear una página web en varias resoluciones, con el fin de optimizar nuestro diseño lo máximo posible.

Para probar tenemos que introducir la dirección de la página, y escoger una de las resoluciones predefinidas o introducir la que nosotros queramos. Podemos abrir la URL en un marco o en una ventana aparte pulsando el botón: “Open popup“.

Una vez cargada la página, pulsando las teclas + y – subirá o bajará la resolución unos píxeles, y pulsando espacio alternaremos entre las resoluciones ya definidas. La tecla “F” nos servirá para eliminar la cabecera y utilizar todo el espacio para mostrar la web introducida.

Fuente | Wwwhat’s new

Poco a poco todas las marcas importantes van teniendo su espacio en las redes sociales, y sus diseños cada vez son más sofisticados y personalizables. Custom Facebook Page contiene una galería de diseños realizados para páginas hospedadas en Facebook, que nos servirán de inspiración antes de comenzar a trabajar.

La web contiene una serie de mini capturas de la página principal del diseño, pulsando en ellas podremos ver las pantallas interiores, una descripción junto con la URL y los comentarios de los usuarios. Para acceder rápidamente a un diseño podemos navegar por sectores comerciales o usar el buscador de la web. Si hemos realizado una página personalizada a una marca, la podemos enviar para que se añada a la galería, desde la opción: “Submit a page“.

Fuente | Designios

Reflection maker es una sencilla aplicación web que permite crear un efecto de reflejo en una imagen.

Solamente tenemos que escoger el gráfico de Internet o de nuestro PC y seleccionar el tamaño del reflejo y el color de fondo, cuando pulsemos en el botón “generate” se generará el nuevo gráfico que podremos descargar en formato JPG pulsando el botón inferior “Download“. Otra herramienta que realiza un proceso similar: Wet Floor.

Por si os interesa saber como se realiza este proceso en Photoshop, aquí tenéis un manual con los pasos necesarios, y aquí un pequeño script en Javascript llamado Reflection.js 2.0 que permitirá crear este efecto en las imágenes sin necesidad de editarlas.

Fuente | Xyberneticos

CSS Submiter permite promocionar páginas web que estén bien diseñadas. Este tipo de webs suelen estar expuestas en las llamadas “Galerías CSS”, páginas como CSS Manía, Best Web Gallery o CSS Based. Lo que hace esta aplicación es enviar nuestra web a varios de estos sitios, en principio 20, pero se está trabajando en aumentar esta cifra hasta 150.

Para comenzar con el envío hay que rellenar unos cuantos datos: título de la web, dirección, descripción, nombre y apellidos, correo, ciudad, país, tags asociadas con la página y la dirección personal del diseñador. No es un capricho el hecho de tener tantos campos de texto, al pasar por muchos formularios de envío, nos tenemos que asegurar que todos los campos tienen su equivalencia.

Una vez esté todo completado, pulsando el botón “Submit” comenzaremos a navegar por los formularios de envio de las “galerías CSS”, estos se rellenarán sólos, con la información que introdujimos anteriormente, solo tenemos que asegurarnos que todo es correcto, y pulsar en la parte superior el botón: “Next Form” para pasar al siguiente.

Hace unas semanas os hablamos de una web bastante similar: MeeCSS, podéis probar las 2 pero evitad enviar los formularios repetidos u os podrian penalizar.

Fuente | Su programador: David. ¡Gracias!

myFontbook es una aplicación web que permite visualizar todas las fuentes instaladas en el sistema operativo.

Para comenzar pulsaremos “Font Viewer” y esperaremos un tiempo que dependerá del número de fuentes instaladas. Una vez cargado el listado, podremos testear las fuentes, escribiendo un texto y dándole formato. En el panel inferior podremos ver la vista previa y algunas opciones extra para ver la fuente en varios tamaños, visualizar el listado completo de carácteres y comparar la altura mediante guías.

Además disponemos de un panel lateral donde poder asignar etiquetas a las fuentes, votarlas y acceder rápidamente a nuestras favoritas y a las que han sido añadidas recientemente. Para que las preferencias no se pierdan, nos deberemos de registrar en la aplicación, aunque si solo queremos echar un vistazo rápido, no hará falta.

Fuente | Bitelia

PunyPNG es una utilidad al estilo de Smush It, que permite comprimir imágenes sin perder calidad, algo muy útil para enviarlas por correo o publicarlas en Internet.

El funcionamiento es muy simple, pulsamos el botón: “Upload images” y escogemos las imágenes que queremos optimizar, se aceptan los formatos GIF, JPG y PNG de 500kb como máximo. En unos segundos el servidor nos las devolverá optimizadas indicando el tamaño que nos hemos ahorrado en bytes, el nuevo tamaño y el tanto por ciento que ha conseguido eliminar.

Pulsando “Download” podremos bajar las imágenes, y si hemos optimizado varias a la vez, aparecerá una nueva opción para descargar todas juntas en un archivo ZIP.

Fuente | Softwarelogia

Stripe Designer es una utilidad muy similar a Stripe Generator o Stripemania, que permite crear fondos rayados para usarlos en diseños web 2.0.

Hay disponibles cerca de 200 fondos para elegir, con posibilidad de editarlos y ver como quedan encima de una imagen, también podemos crear nuevos fondos desde cero de las dimensiones que queramos, desde 4×4 píxeles hasta 32×32. Una vez guardado en formato GIF lo podremos importar en Photoshop u otro programa de diseño y usarlo para rellenar zonas grandes.

Fuente | Wwwhat’s new

MeeCSS permite promocionar tu página web y enviarla a más de 100 galerías, donde se exponen los mejores diseños maquetados con CSS. Por si no conocéis este tipo de páginas, algunas de las más famosas son: CSS Beauty, CSS Drive o CSS Vault.

Para proceder con el alta deberemos de marcar las galerías a las que queremos enviar la página pulsando el botón “Submit“, después introducir los datos de la web, nuestros datos personales y finalmente pulsar el botón: “Submit your site“. Hay que aclarar que el proceso no es automatizado, tendremos que ir sitio por sitio rellenando el formulario de envío específico. Aquí tenéis un vídeo donde se explica mejor como se realiza un alta.

Si estáis orgullosos de vuestra página web recien diseñada y queréis promocionarla, MeeCSS es una buena forma de darla a conocer y conseguir visitas extra.

Fuente | Criterion

En términos de diseño web, un patrón o en inglés pattern, es un gráfico que se utiliza para rellenar áreas, y puede ser importado fácilmente por programas de diseño gráfico como Adobe Photoshop. La página que os presentamos: PatternWall muestra una colección de unos 200 de estos gráficos listos para descargar.

Los patrones están distribuidos todos en una misma página, no hay paginador, simplemente pulsando en las miniaturas podremos descargar el gráfico deseado en formato JPG. En la parte inferior izquierda hay un botón llamado “Hide Cardboard” que permite ocultar los elementos del entorno web y poder visualizar la totalidad de items.

Los patrones son gratuitos y pueden ser usados para uso personal o comercial.

Fuente | Chica Blogger

CSSTXT permite definir estilos de texto con CSS, sin necesidad de escribir código, solamente escogiendo las opciones deseadas a golpe de click.

Lo primero que podemos escoger es el formato del texto: subrayado, negrita, itálica… incluso varios estilos simultáneos, después pasaremos a  ajustar el espaciado entre letras o palabras, tamaño de fuente, altura de línea, y tamaño del borde, finalmente configuraremos el tipo de fuente, alineación, estilo del borde y colores. Hay escondidas unas opciones avanzadas que permiten definir el elemento al cual se va a aplicar el estilo, y los tamaños de margen.

Cuando ya tengamos los estilos definidos pulsando “Generate” aparecerán dos cajas de texto con el código fuente, una para novatos y otra para expertos, que podremos copiar e incorporar a nuestra página web.

Fuente | Killer Startups