Cómo extraer colores fuera del Photoshop

ByLuis March 24, 2006

¿Cuántos minutos trabajas al día con Photoshop y te has visto en la situación de querer saber un color de otra web y tener que usar el Colorzilla de Firefox o directamente imprimir pantalla, pegarla en Photoshop y usar el eyedropper.?
Pues Photoshop, en cualquier versión, ya trae la opción y es el mismo Eyedropper (el icono del cuentagotas). Tan solo hay que clickarlo y dejarlo pulsado arrastrando el cursor hasta donde queremos obtener el color. Cuando lo tengamos, soltamos el click y aparecerá el color como color de primer plano.
Vía / Genbeta

Apache | Grafismo | How to

Protege tus imágenes con Apache

ByLuis March 31, 2006

Una de las cosas más molestas con las que te puedes encontrar al mantener un sitio, es ver cómo tus imágenes estan siendo utilizadas en otros sitios que las enlazan directamente a tu servidor, esto es molesto por dos motivos, evidentemente el uso de material gráfico de tu propiedad sin tu consentimiento, y la carga extra que sufre la conexión de tu página.
Para los que usamos Apache existe una fácil solución combinándolo con mod_rewrite, el método se basa en crear un fichero .htaccess que contenga una serie de reglas, que literalmente le indicarán al servidor que las imágenes solo se mostrarán si la petición viene del dominio propio.
Las reglas a añadir son las siguientes. Solo tendrás que sustituir el texto example.com por el nombre de tu dominio:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/?.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]

css | Grafismo | XHTML

Recursos para crear bordes redondeados

ByLuis March 30, 2006

Para aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.

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

css | Trucos

Cinco consejos sobre CSS

ByLuis May 31, 2006

Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cÃ³mo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.

Organiza tus estilos segÃºn el siguiente formato: primero reune las que correspondan a los contenedores y layouts, despuÃ©s las cabeceras (<h1>..<h6>), seguido irÃa los pÃ¡rrafos y los enlaces, y por Ãºltimo todas las listas (navegaciÃ³n, …).
No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defÃnelo contenido por bloques (por ejemplo: #contenido a {..}).
Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una lÃnea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un cÃ³digo mÃ¡s limpio.
En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma funciÃ³n que quieres mostrar, por ejemplo, en vez de usar una capa para el tÃtulo, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
Nombra los estilos segÃºn su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips
VÃa / SkimCSS

Grafismo

Color toy: generador de esquemas de color

ByLuis October 19, 2006

Ya hemos hablado en otras ocasiones de aplicaciones que nos ayudan a generar esquemas de colores. Ayer mismo yo necesitaba una, pero por problemas de conexiÃ³n durante todo el dÃa no pude acceder a ninguna para que me ayudara.

Â¿QuÃ© tiene de especial Color Toy?, su sencillez, no tiene rueda de colores, ni puedes elegir si quieres colores anÃ¡logos o en contraste. Simplemente introduces un color y te da un esquema de colores, rÃ¡pido y sencillo.
Color Toy
VÃa / Infected-FX

Grafismo

Encontrar un color para el diseño

ByLuis July 25, 2006

Al menos a mÃ me ocurre que cuando estoy empezando con un diseÃ±o, y tengo que basarme en una imagen, me paso bastante tiempo buscando los colores que vayan con la imagen. Normalmente uso un editor de imÃ¡genes, realizo la pixelaciÃ³n de la imagen y voy buscando que los colores sean representativos. Esto puede ser sencillo con esta rÃ¡pida y cÃ³moda aplicaciÃ³n on line, que nos permite enviar una imagen, seleccionar el tamaÃ±o de los cuadrados de la pixelaciÃ³n y ver quÃ© cÃ³digos tienen los colores. TambiÃ©n se podrÃa usar la entrada que explicamos sobre fondo de pantalla calculado de una imagen, pero esta opciÃ³n nos permite optar a varios colores.

Color Palette Generator
VÃa / Maestros del Web

Similar Posts