“Una imagen en Sprite es un conjunto de imágenes agrupadas en una sola imagen”

Sin sprite lo que hacemos es usar un archivo por cada imagen que queremos mostrar y si tenemos, por ejemplo, 3 iconos serían 3 archivos diferentes:

• 3 Peticiones al servidor, una por cada archivo
• Cada petición tiene un tiempo de espera aparte del tiempo de descarga
• Tenemos que crear 3 imágenes

Con sprites lo que intentamos es unir todas esas imágenes en una sola:

• Una sola petición al servidor
• Hemos creado UNA SOLA imagen
• Podemos estructurar mejor nuestro CSS

Pero… De verdad optimizan el tiempo de descarga?

Veamos.

Tenemos una web con 3 imágenes, y los test arrojan los siguientes resultados:
Requests: 4 (3 imágenes y el .HTML)
Peso total de la página: 6.2kB
Tiempo de descarga: 162ms
Tiempo usado por tipo de contenido:

• Imagenes 73.77%
• HTML 26.23%

Ahora las mismas pruebas con una sola imagen (Sprite):

Requests: 2 (1 imagen y el .HTML)
Peso total de la página: 5.3kB -.9kB de diferencia-
Tiempo de descarga: 157ms -5ms más rápido-
Tiempo usado por tipo de contenido:

• Imagenes 50.34%
• HTML 49.66%

Aunque puede parecer que al diferencia es muy pequeña, no olvidemos que hacemos test con una y 3 imágenes y un HTML sin más HTTP requests que las hechas por las imágenes. Imaginaros esto en una web completa, con todas sus imágenes y calculad cuanto podemos ahorrar a un móvil en cargar el contenido si optimizamos con sprites.

Crear un sprite no es complicado si trabajamos con el todopoderoso Photoshop, tenemos que aprender a utilizar las guías y darle a cad sprite las medidas que queremos. Si somos diseñadores sabemos que las proporciones se mantendrán, si no sois diseñadores, ya sabéis que hay que mantenerlas ;)

Esto quiere decir que tendremos 2 o 3 tamaños de imágenes cuando mucho y un solo sprite si nos organizamos bien.

Existe un plugin para Photoshop llamado GuideGuide que nos facilita la creación de patrones de guías. Pero nosotros empezaremos con un sprite bastante sencillo de 3 secciones de 50px x 50px cada una para utilizarlo como iconos un menú de 3 items de navegación:

Nuestro objetivo es que el elemento muestre solo una parte de ese fondo, la parte correspondiente al item en la navegación. Que el menú PacMan tenga la imagen correspondiente, el menú Fantasma la imagen correspondiente y lo mismo para Robot.

Con background-position podemos especificar el lugar de esa imagen:

li {
	background: url(sprite.png) #f6e2b9 no-repeat 0 0; //en el origen
	padding: 1em 0 1em 46px;
	display: block;

}

Y en este caso tendremos todas las listas li los primeros 50px verticales y los primeros 50px horizontales de nuestra imagen sprite.png. Si nos fijamos, he dejado 50px de padding izquierdo para que el texto no se monte sobre la imagen del sprite – y he usado el box-sizing:border-box -

CSS “mide” las imágenes de arriba-izquierda a abajo-derecha, lo que quiere decir que la esquina superior izquierda es la posición cero y a partir de ahí podemos modificar su posición en un sistema de coordenadas xy. En nuestro sprite si queremos mostrar la segunda imagen, si tenemos que miden 50px cada una, debemos “subir” un poco el fondo: exactamente 50px. Pero si “subimos” la imagen para que muestre las coordenadas x0 y50px debemos usar un valor negativo, o de lo contrario la imagen baja: 50px es 50px a partir del borde superior del contenedos, -50px es 50px ANTES del borde superior del contenedor.

Si queremos asignar diferentes coordenadas para la imagen solo tenemos que cambiar el posicionamiento del background. La manera más fácil en mi opinión para realizar esto, es asignando clases:

li {
	padding: 1em 0 1em 46px;
	display: block;

}

.pacman {
	background: url(sprite.png) #f6e2b9 no-repeat 0 0; //coordenadas 0(x) 0(y) la imagen 
}

.fantasma {
	background: url(sprite.png) #f6e2b9 no-repeat 0 -50px; //coordenadas 0(x) -50px(y) la imagen 
}

.robot {
	background: url(sprite.png) #f6e2b9 no-repeat 0 -100px; //coordenadas 0(x) -100px(y) la imagen 
}

Y en nuestro HTML asignamos esa clase al elemento donde queremos que se muestre la imagen:

<ul>
		<li class="pacman">PacMan</li>
		<li class="fantasma">Fantasma</li>
		<li class="robot">Robot</li>
</ul>

Aquí podéis ver el código funcionando y si os interesa jugar con la posición en codepen, podéis ver el código.

Eso es básicamente un Sprite, pero podemos ir más lejos: Podemos usar sprites para crear efectos hover, e imaginad lo fácil que debe ser crear en Photoshop un sprite con su versión hover en vez de tener que crear, en nuestro caso, 6 imágenes independientes.

Es doblar el tamaño del canvas – solo el ancho, ya que el largo será el mismo – y duplicar las imágenes. Ya solo queda agregarles los efectos que queramos.

Como vemos nuestra rejilla se amplía, ahora para acceder a la versión “hover” tenemos que mover el fondo también horizontalmente: Si queremos obtener el pacman, las coordenadas son 0 0, si queremos el :hover del pacman, las coordenadas son -50px 0. Para el fantasma normal las coordenadas son 0 -50px y para el hover son -50px -50px y finalmente para el robot, las coordendas son 0 -100px y -50px -100px para el :hover status.

Ahora crearemos las mismas clases que antes pero con una versión :hover y las coordenadas dichas.

li {

	padding: 1em 0 1em 46px;
	display: block;
	background-color: #f6e2b9;
	-webkit-border-radius: 2em;
	border-radius: 2em;
	width: 100%;
	max-width: 50px;
	margin: 0 1em;
	height: 50px;
	width: 50px;
	-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .3);
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .3);
	cursor: hand;
	cursor: pointer;

}

li:hover {
	-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);

}
.pacman {
	background: url(sprite-hover.png) no-repeat 0 0; 
	
}

.pacman:hover {
	background: url(sprite-hover.png) no-repeat -50px 0; 

}

.fantasma {
	background: url(sprite-hover.png) no-repeat 0 -50px; 

}

.fantasma:hover {
	background: url(sprite-hover.png) no-repeat -50px -50px;

}

.robot {
	background: url(sprite-hover.png) no-repeat 0 -100px;

}
.robot:hover {
	background: url(sprite-hover.png) no-repeat -50px -100px; 

}

y el HTML: (en este caso, obvio el texto, son unos simples botones)

<ul>
		<li class="pacman"></li>
		<li class="fantasma"></li>
		<li class="robot"></li>
	</ul>

De nuevo, si queréis jugar con el código en Codepen: http://codepen.io/Wakkos/full/DpoAJ

La idea de todo esto es entender el funcionamiento de los Sprites y sobretodo porque es importante implementarlos, pero si sois muy vagos y pasáis de todo este rollo de calcular las coordenadas, crear grids y todo eso, podéis ir a generadores de sprites y que ellos trabajen mientras os tomáis un café:

SpritePad: En mi opinión es uno de los más fáciles que he visto. Antes de que pierdas tiempo investigando como se usa te doy el tip que les falta: arrastra la imagen a la ventana.

SpriteBox: Sin duda el más completo.

Espero que ahora entendamos un poco mejor los Sprites!

UPDATE:

Quique (CkGrafico) nos ha creado un script para ver como manejar sprites grandes con jQuery sin tener que calcular todos los posicionamientos: http://codepen.io/Wakkos/pen/rFlzg. Dadle las gracias y seguidle en Twitter!

Seguramente me habréis escuchado/leído decir esto antes: Tener una web sin tratarla como un vendedor más, es como imprimir tarjetas de presentación y dejarlas guardadas en el cajón. Nadie las va a ver. Ese es el principal argumento para convencerlos: Ellos quieren hacer una web por un motivo, normalmente para dar a conocer su marca o vender un producto, y responsive design o un “diseño adaptable” aumenta el rango de esa estrategia, y ese aumento es exponencial.

Exponencial.

Esa es la palabra clave. ¿Hace 5 años cuántos de los clientes de tu cliente tenían smartphone? Y pregúntale cuántos tienen ahora un smartphone. El mismo puede hacer un pequeño sondeo y ver que la navegación móvil se incrementa.

Brad Frost publicó un slide que resume muy bien la situación:

No sabemos en que va a parar internet. No sabemos si mañana la gente navegará desde la nevera, desde una superficie en 3D o desde envoltorios de caramelo, por ello debemos crear webs que se adapten a todo! Cuando diseñamos una web, diseñamos una experiencia para que el usuario (cliente o potencial cliente) se quede con la imagen de la empresa grabada en el cerebro. Eso requiere un esfuerzo por nuestra parte y dinero por parte del cliente y no debe permitir que ese dinero/esfuerzo se pierda solo porque el usuario está en una tablet o un smartphone.

Llegados a este punto donde sabemos como diseñadores que la web es flexible – y lo será más aún – pero nuestro cliente no lo entiende (recordad que el no es diseñador, tenemos que mostrarle la parte comercial de todo esto), voy a remitirme a uno de los tweets con los que me habéis ayudado a “convencer clientes”:

@Wakkos Yo creo que no hay nada mejor que enseñarle dos webs, una con y otra sin responsive, en dos o más dispositivos, volteando alguno.

5 October, 2012 8:39 via webReplyRetweetFavorite

@DonMithParaTi

Mith

Visualmente es la solución para que lo entienda: Le enseñamos una de las peores webs que he visto:
http://www.centrocomercialcamaretas.com/

Y luego el enseñamos
http://responsivewebdesign.com/robot/

Y visualmente entenderá a que nos referimos. Debemos reforzar que esto nos permite acentuar lo que el cliente considera importante: la jerarquía de su estrategia offline de marketing puede ser trasladada a su web sin importar donde navegue el usuario.

Quique también aportó algo interesante:

@DonMithParaTi @Wakkos Decir que no hay alternativa que si quieren algo que les dure mucho ha de ser así que ya no se hacen las webs de ants

5 October, 2012 8:45 via webReplyRetweetFavorite

@CKGrafico

Quique Fdez. Guerra

Claramente esto se aproxima al ejemplo que propone Brad Frost: estamos creando una web que el cliente va a controlar sin importar que dispositivos salgan, sin importar como cambien las tendencias de navegación y sin importar lo que nos ha traido de cabeza desde que internet existe: la resolución.

Estamos permitiendo al cliente que las únicas actualizaciones de las que deba ser objeto, son las que el proponga en el contenido. Y como normalmente les ofrecemos la web en un CMS, el será dueño de su web!

Todos estos motivos ya deberían haber convencido a tu cliente que Responsive es lo que necesita.   Si no es así, siempre podemos seguir el consejo de Alfredo:

@Wakkos [modo chiste: on] ¿No se le podría decir que está avalado por Chuck Norris? [modo chiste: off]

5 October, 2012 9:10 via TweetDeckReplyRetweetFavorite

@ByteLovers

Alfredo de la Calle

Lo que ha hecho Microsoft es simplemente un ajuste de anchuras, no se readapta nada en la web y quiero dejar claro que no es por tirar contra Microsoft, me caen bien y ayudan mucho a los desarrolladores aunque deberían pensar en contratar otros diseñadores. La web original ya tiene sus defectos: Poca jerarquización de las Fuentes, listas, listas everywhere! Sin órden alguno.

Si bajamos un poco (la página está estructurada en 3 bloques principales) veremos como las inconsistencias son más acentuadas. Un breve vistazo por encima: En amarillo tenemos los espacios en blanco que desequilibran todo, los márgenes superiores e inferiores del contenido del recuadro azul son anárquicos, las guías… Bueno lo de las alineaciones es un poco “abstracto” por no encontrar una palabra mejor.

Este tipo de incidencias son entendibles en alguien empezando, en alguien aprendiendo. A pesar de que @rainypixels es un excelente diseñador, creo que hay ciertos errores básicos en el rediseño, el explica en su blog el proceso, y aunque no es muy educativo técnicamente hablando, es interesante de leer.

Lo que no me gusta, es que llamen “responsive design” a la nueva adaptación que han hecho. Si vemos la web en diferentes dispositivos solo veremos como las columnas se reducen, manteniendo los mismos errores arriba mencionados más otros que no deberían tener en dispositivos portátiles.

Los márgenes siguen siendo independientes, sin consistencia entre unos y otros: observad como For Home tiene un margen superior y Downloads tiene otro. Sin contar con que no se alinea por ningún lado con el botón de “For Work”.

las listas se comportan de una manera no apta para móvil, están alineadas a la izquierda y dejan un hueco tremendo, causando desequilibrio, ¿teniendo mediaqueries para solucionar esto de muchas maneras, porqué tomaron la desición de hacer… nada!?

Responsive Design nos enseña que una web que se vea en móvil no es lo mismo que una web adaptada a móvil, que provee una experiencia en dispositivos móviles. Entonces ¿Porqué simplemente reducen unas fotos a todo color y bien definidas de 420px a 90 px? ¿Creen que vamos a disfrutar de todos los detalles de la fotografía a esa 90px?

No.

Podrían haber colocado el texto debajo, así en resoluciones pequeñas se aprecian más las fotos.

Entre las fotos y las imágenes del slideshow el peso de la web es BASTANTE considerable para los que aún no contamos con 4G. Son 30 imágenes que pesan un total de 1383 KB. Eso es mucho para una web, http://www.stuffandnonsense.co.uk/ una web de un estudio de diseñadores donde se supone que encontraremos muchas imágenes, pesa solo 659 KB menos de la mitad. La misma página de Windows de Microsoft, no adaptada a diferentes resoluciones (No Responsive Design) pesa solo 849 KB.

El principal problema es no ponerse en la piel del que navega en móvil.

• Un slideshow en móvil: ¿Porqué y para qué?
• Full resolution images a 90px
• Ninguna adaptación de los bloques, simplemente cambiar su tamaño
• Ningún respeto por nuestra transferencia: pesa mucho
• No hay jerarquización de los textos, lo que dificulta observar las diferentes áreas

Por esas razones no me gusta la web de Microsoft, todos los que dan una palmadita en la espalda a MS por haber pasado a Responsive, creo que no llevan muy claro lo que Responsive es.

Pero es solo mi opinión.

<table>
</table>

Este es un elemento semántico de HTML donde metemos datos tabulares como una tabla de precios o un reporte financiero, el display:table nos deja organizar como tablas pero sin meterse con la semántica, y por favor no lo utilicemos para mostrar datos tabulares, para eso tenemos las tablas o el display: grid si preferimos una solución en CSS. Contamos con una serie de propiedades para que nuestros elementos se comporten como tablas sin que tengamos que dañar su semántica natural:

div {
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}

Son bastantes explícitos de por sí, display:table nos mostrará el elemento como una tabla (necesario para que los otros elementos anidados se comporten como tal), tenemos display:table-cell que se comporta como una celda y así con el resto. Si quieres puedes ver una descripción de todas ellas.

Veamos un ejemplo:

#wrap {
display : table;
border-collapse : collapse;
width:90%; }

section {
display : table-cell;
width:62%;
border:1px solid #f2e1bf; }

aside {
display : table-cell;
width:38%;
border:1px solid #f2e1bf; }

Ver HTML

Tenemos un body declarado como tabla y dos elementos declarados como celdas, sin necesidad de flotarlos o de declararlos como inline-block. Hasta aquí no es más que otra manera de alinear elementos, cierto?

Pero veamos que puede hacer en nuestro Responsive Design: Anteriormente cuando yo quería que un elemento se fuera a la parte superior, como por ejemplo una barra de navegación lateral pasara a la parte superior, simplemente le daba un width:100%. Eso me obligaba a tener un HTML estructurado concretamente para ello, pero ahora puedo pasarla a la parte superior sin importar el HTML porque al comportarse como tabla puedo asignarle otra propiedad de elemento de tabla: table-header-group.

@media only screen and (max-width: 699px) {

aside {
display : table-header-group; }

section {
display : table-row; }

}

Ver HTML
*Haz esa cosa con el navegador que solo hacemos los geeks de estirarlo y reducirlo de tamaño para ver como va fluyendo el diseño

Magnífico, huh? podemos organizar cambiando las propiedades de tabla de cada elemento sin necesidad de adaptar el HTML para ello. Y por si no os habíais dado cuenta: table-cell muestra los elementos a la misma altura! Nunca habéis sufrido el incordio de columnas de diferente altura gracias a su contenido y lo horrible que era dejarlas todas al mismo tamaño? pues con displa:table-cell las deja todas al mismo alto, siempre basado en la altura de la “celda” con mayor contenido, por ejemplo:

<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

Normalmente y con float-left o display:inline-block, estos elementos flotarán uno al lado del otro, pero el alto de cada uno dependerá de su contenido:

Sin embargo con display:table-cell todas las capas o “articles” en este caso, estarán a la misma altura y con el mismo tamaño:

Ver Código

Maravilloso.

Para acabar, lo dicho arriba: deberíamos utilizar más el display:table, su mezcla con mediaqueries es brutal. Cheers!

Os podéis descargar el PDF: unidades válidas para CSS

CSS

Agregar la información relativa al tema. Agregar al inicio del archivo style.css

/* 
Theme Name: Nombre Tema
Theme URI: www.misitio.com
Description: descripcion del tema
Version: 1
Author: Wakkos
Author URI: direccion web autor
*/

Includes

Funciones para incluir “partes” de nuestra plantilla: el header, el footer y el sidebar. De esta manera si se modifica un contenido en el header, por ejemplo, no tenemos que hacer esa modificación en todas las plantillas de nuestro tema.

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Para incluir archivos "extras" debemos utilizar <?php include (TEMPLATEPATH . '/nombre_archivo.php'); ?>

Direcciones y URL’s

Funciones para acceder a diferentes URL’s de WordPress

<?php bloginfo('template_url'); ?> /*imprime la URL del tema: http://dominio.com/wp-content/themes/tema   */

<?php bloginfo('stylesheet_url'); ?> /*imprime la URL a la hoja de estilos del tema: http://dominio.com/wp-content/themes/style.css  */

Información sobre la Web

Es recomendable leer todos los parámetros y ejemplos de la función <?php bloginfo(); ?> ya que con ella podemos imprimir muchos datos de la web.

Parámetro Valor que imprime

name                 = Nombre del Blog
description          = Just another WordPress blog
admin_email          = admin@example

url                  = http://example/home    [usar home_url('/')]
wpurl                = http://example/home/wp [usar site_url('/')]

stylesheet_directory = http://example/home/wp/wp-content/themes/child-theme
stylesheet_url       = http://example/home/wp/wp-content/themes/child-theme/style.css
template_directory   = http://example/home/wp/wp-content/themes/parent-theme
template_url         = http://example/home/wp/wp-content/themes/parent-theme

atom_url             = http://example/home/feed/atom
rss2_url             = http://example/home/feed
rss_url              = http://example/home/feed/rss
pingback_url         = http://example/home/wp/xmlrpc.php
rdf_url              = http://example/home/feed/rdf

comments_atom_url    = http://example/home/comments/feed/atom
comments_rss2_url    = http://example/home/comments/feed

charset              = UTF-8
html_type            = text/html
language             = en-US
text_direction       = ltr
version              = 3.1

Inclusiones Obligatorias

Si queremos que nuestro tema permita el correcto funcionamiento de plugins de terceros, debemos activar los siguientes “hooks” de esta manera WordPress permite a los plugins imprimir información en el header o el footer:

<?php wp_head(); ?> Debemos colocarlo en el <head></head> de nuestro encabezado.

<?php wp_footer(); ?> Debemos colocarlo justo antes de la etiqueta </body>

Más adelante iremos viendo más funciones y opciones de configuración en WordPress!

También os podéis descargar el .PDF: propmediaqueries

Barra de marcadores

Japonés

Curso de Lengua Japonesa Gunkan por Juan José Ferres Serrano

Denshi Jisho – Online Japanese dictionary

Tae Kim’s Japanese guide to Japanese grammar

Kirai – Un geek en Japón by Héctor García — Enlaces para aprender Japonés

Alla en el chorizonte: 2006/07

WiseStamp for Chrome 3.9.4.0

Ilustración: Caperucita Roja | Cool Village Diseño Web

Digital Arts

hatsukoi on deviantART

FrealaF on deviantART

cesar nandez

Ephemeral Portraits Cut from Layers of Wire Mesh by Seung Mo Park | Colossal

Wow

Dark Legacy Comics

La Armería de World of Warcraft

LaCuerda_ Curso de Guitarra – ProgramaMusicovery _ interactive webRadioThinkGeek __ Stuff for Smart MassesVOIG.com _ MMOvie_ Installment 1Zeitgeist -Official Release in Spanish (subtítulos en español)

Hotel jobs – Caterer.comJobsite Search Resultsreed.co.uk – web JobsWeb Designer Photoshop Job in Burgess Hill, South East/Southern UKOfertas de empleo – CompuTrabajoTecnoempleo.com – Portal de Empleo Especializado en Informática Telecomunicaciones y TecnologíasStratos :: TrabajoOpcionempleo.com – Empleos & Carreras profesionales en EspañaDirectorio de empresas | Comercio internacional | Noticias economicas | Bolsa de trabajoBolsa de trabajo. Ofertas de empleo en Turismo y Hostelería | Turijobs.comMiles de trabajos y ofertas de empleo | Infoempleo.comSPAINBuscar ofertas – Canal de Empleo StartPeopleLaboris.net- Bolsa de empleo más eficaz. Ofertas de trabajo, búsqueda de curriculumsEmpleo OnlineJobs in Scotland Employment RecruitmentTrabajo Freelance – El punto de encuentro laboralUnique España – USG PeopleEMPLEO EN TURISMO – Trabajo en Hostelería y Turismo, Bolsa de trabajo hotel, ofertas de trabajo hosteleria, empleo hosteleriaTecnoempleo.com – programador freelance .net – MadridJobrapido | Trabajo Freelance, empleoProgramador Web Freelance Barcelona – Bolsa de TrabajoExperteer – Mis Objetivos ProfesionalesTrabajo freelance ilustracion Madrid (ciudad), Ofertas de empleo freelance ilustracion Madrid (ciudad). Trabajo, ofertas de empleoProgramador PHP c/expreriencia Full time, excelente propuesta | La web del FreelanceDashboard | Freelancify

LogoPond – Identity Inspiration -Business Cards Observer – Unique Business Card Design Inspiration50 Awesome And Creative Business Cards | 1stwebdesignerThe 75 Hottest Business Card Designs You’ve Ever Seen! | Ever-Real Web 2.0 Design Advice BlogMOO | Personaliza tarjetas de visita, MiniCards, postales y otros productos… | moo.com100 Best Illustrator Tutorials of All Time (From Newbie to Pro)

Dynamic Drive DHTML(dynamic html) & JavaScript code librarydinamic TAbSuper Simple Contact Form Maker – The super simple way to make a PHP contact form for your websiteSubasta php – Sistema de subastas en php – phpAuctionRegistro y reconocimiento de usuarios con PHPAñadir iconos de fechas y burbujas con números de comentarios en los link hacia tus post « XyberneticosComo crear un sistema para subir imágenes usando Dreamweaver, PHP y MySQL « Blog de JuaniquillojQuery Tooltip | Easy jQuery Tooltip with CSS & jQuery | Tooltip jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh TanakaFun with HTML5 Forms | Think VitaminRecopilación de 45 trucos para WordPress | emenia.esGmail – Inbox – wakkos@gmail.comVertical sliding nav made with CSSDeaxon’s CSS playgroundMiniAjax.com / Highlighting Rich Experiences on the WebGoodbye, headaches. Hello, menus!How to Create a WordPress Options Panel | Nettuts+10 Premium jQuery Slider Plugins | CreativeFanComprehensive Static FBML Guide – Adding, Testing & Troubleshooting | HyperArtsjQuery TOOLS – The missing UI library for the Webhttp://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/ no está disponible.jQuery Masonry · David DeSandrojQuery Form Framework – jFormer100 Awesome CSS/Javascript Plugins and Coding Techniques | Top Design Magazine – Web Design and Digital ContentCSS clearfixCreating a Prestashop 1.4 theme from scratch – Part 3 (Framework Overview) – CalloSmart Blogs40 Exceptional jQuery Photo Gallery and Slider | Free and Useful Online Resources for Designers and Developers10 Handy WordPress Comments Hacks – Smashing Magazine50 Excellent Tutorials for Web Development Using CSS3 | DzinepressTake Your Design To The Next Level With CSS3 – Smashing MagazineThe ultimate HTML5 resource guide | Webdesigner DepotHTML5 Snippets

Five simple steps to better typography : Journal : Mark Boulton40 Free High Quality Hand-drawn Fonts | GraphicsTypetester – Compare fonts for the screenDownload free fonts @ fontspace.comGreat Fonts for Web 2.0Outlaw Design Blog » 63 Must have Grunge FontsTypeNow.net Themed Fonts Download Free Movie and Music Fonts10 Elegant High-Quality Fonts for Your DesignsDesktop and @font-face fonts | Fontspring

BrushKing – Free Photoshop BrushesPhotoshop Brushes | Brushes Download | Free Photoshop Brushes | Gradients | IconsPhotoshop BrushesFree Photoshop Brushes at Brusheezy!

71+ Free PSD Resources | Presidia CreativeTiled backgrounds designerAdobe Photoshop Tutorials – Best Of | Tutorials | Smashing MagazinePhotoshop Tutorials – PSDTUTSPS HEROPhotoshop PatternsVideo tuts adobePSDfreebee.com – Free PSD GraphicsPanosFX.com – HomeRepeat Patterns45 Step-by-Step Tutorials on Web Design with Photoshop – Psdtuts+18 Absolutely Stylish Designs Using Photoshop Brushes and How to’s | NoupeFree Photoshop Tutorials and ResourcesWorth1000.com _ Photoshop Contests _ Are you Worthy™ _ home pageFOTOYOP – Soluciones para Photoshop GratisRoyalty Free Vector Graphics | VectorStock®50 Must-Read Resources For Incredible Web Design3D Models | CreativeFanThe Top 15 Places to Download Free Cliparts and Vector Stock Images | CreativeFan35+ Nature Tutorials for Photoshop | Vandelay Design BlogGraphics | creaTTor.comFREE PSD FILES | Free PSD resources like textures, icons, buttons, backgrounds and many many more.. | Page 3

Efecto HDR en simples pasos | Diego Mattei BlogTutorials – Page 1 _ Planet PhotoshopPhotoshop Tutorials, Tips- PhotoshopCafe Homepage – The free resource for Photoshop Users, Photoshop 7 to Photoshop CS3Rain Drops – ©photoshopTechniques.comPhotoshop Text Effects Round-Up_ 51 Text Effect Tutorials Every Designer Should See _ Design Vitalityphong » tutorials [ photoshop, flash, pov-ray & polar graphing tutorials ]Manga Tutorial Worth1000.com13 Tutorials for PSD to XHTML Conversion | PSDVIBE – Tutorials and ResourcesA Cool Lighting Effect In Photoshop – PSDTUTSWatercolour / Ink Blot Effect – PSDTUTSMaking a Grungy Business Card – Luxa – Photoshop Tutorials, Videos, Brushes, Tips & Tricks35 Photoshop Tutorials Inspired by Apple | Vandelay Website DesignRing of fire Photoshop tutorial25 Amazing Photoshop Drawing Tutorials – psdfan.com -Realistic Chrome and Glossy Plastic Text Effect40 Photoshop Tutorials for Lighting and Abstract Effects | Vandelay Website Design50 Photoshop Tutorials For Sky and Space Effects | Tutorials | Smashing Magazine41 Nicest Photoshop Photo Effects [Photoshop Tutorials]Using Lighting, Atmospherics and Digital Illustration Techniques for Matte Painting – The Making of Golden Sunrise in a Fairy Land by Stas Lobachev35 Fresh Photo Effect Photoshop Tutorials – Noupe Design Blog – StumbleUponTutorial Photoshop: Efecto texto metal erosionado – Taringa!Curso de CSS3

HomeFree Vector Wallpapers Download Cool Vector Wallpapers for Free[CG Textures] – The worlds largest free texture siteStripe Generator – ajax diagonal stripes background designerFree .Eps Vector Graphics | Free Vector GraphicsRecursos 2D.com: abstractot/g – clever°frankePrint Work | Jorge Restrepo | WONKSITEBest of Brochure Design – Cool Samples and Examples of Brochures : Graphic Design Blog & Graphics News BlogGraphic-ExchanGE – a selection of graphic projects40 Tremendos sitios web de restaurantes | Recursos para Diseñadores Gráficos y Web | Creativos OnlineCreate a Trendy Typographic Poster DesignGlowing Light Text Effect Layered PSD | WebTreats ETC40 Great Examples of Facebook Fan Page Designs | inspirationfeed.comVector Art by sergio Stefano | Design Inspiration + Visual Art Inspiration | DesignflavrPage not found « Graphic Fetish | Daily Creative Inspiration and Resources

crowdSPRING / How it Works99designs » Leading Designer Marketplace for Logo Designs and More…GRAPHIC DESIGN FREELANCE JOBS: FREELANCE GRAPHIC DESIGN JOBSGuru.com – Find Freelancers for Hire. Get Your Project Done.Freelancit.com Comunidad online para freelanceOfertas de empleo – Foros del WebDatos profesionales – InfoLancer.netSell Services :: Global Freelancers at FreelanceGlobal.comProyectos FreelancesJobrapido | Trabajo, empleoEncuentra profesionales freelance. Encuentra ofertas de trabajo freelance – InfoLancer.netDomestikacomunidad de diseñadores online | concursos de diseño grafico onlineNo Agencies Please – Freelance Jobs and ProjectsFind Freelance Jobs & Freelancers – iFreelance.comCraigslist > CitiesDesign Jobs | Graphic Design, Web Design & Interior Design Jobs | Design Week JobsCreative Circle – Job Search Results PageMashable JobsWork From Home Web Design Jobs – Work From Home Web Design JobsTelecommute Job List | Free list of telecommute jobs5 Resourceful Online Communities For Freelancers : Technology :: American Express OPEN ForumFreelanceSwitch | Freelance Jobs, Freelance Forum & DirectoryJob Board | Abduzeedo | Graphic Design Inspiration and Photoshop TutorialsAll Design Jobs – Smashing JobsDesign Job Search ResultsProgrammerMeetDesigner – where web developers find web designersCreative Jobs and Freelance Opportunities on BehanceProfesores de pintura (sin experiencia) en Pekín | Trabajo en China – Ofertas de trabajo para trabajar en China, estudiar chino y conseguir un trabajo en China.Authentic Jobs ~ Full-time and freelance job opportunities for web, design, and creative professionals

==cubik==Tutorial9 – Tutorial Bliss.Facebook: Las 12 Mejores Formas de Personalizar tus Páginas – Asistencia Virtual en Argentina – Novedades, Ideas y Comentarios sobre Asistencia VirtualThe Wilderness DowntownCSS3 . Info – All you ever needed to know about CSS3All There Is To Know About HTML5 and CSS3 | Design your wayFICOD 2009 Blog

Web Site Prototype | Web Prototyping & Designing Interactions | WebBizDesigns23 Inspiring Mac Related Websites | InspirationRecibidos (141) – sombrereraloca@gmail.com – GmailUseful HTML5 Boilerplate Templates and Tutorials – DesignModoA Rundown of CSS3 Units and their uses | InsertHTML

jQuery validation plug-in – main demojQuery UI – Configure your downloadJQuery File Upload Plugin Script – Demo – UploadifyWeb Design Questionnaires, Project Sheets and Work Sheets – Smashing MagazineHiTask: TourQuickBooks Online ® — Free Accounting Software for BusinessSecure source code hosting and collaborative development – GitHubSimple Online Time Tracking, Timesheet and Invoicing Software – HarvestKDE Projects

CSS3 GeneratorDesktop and @font-face fonts | Fontspring#66f517 on 0to2550to255Font Tester – CSS Font Comparison ToolSpritebox – Create CSS from Sprite ImagesWhatTheFont! « MyFontsGoogle Web FontsDynamic Drive- FavIcon GeneratorCss Text ShadowCSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator@Font Face | CSS @Font Face | CSS 3.0 @Font FaceHTML 5 Templates, HTML 5 canvas, HTML5 video, HTML 5 XHTML, HTML 5 tagGoogle Web FontsModernizrHTML5 Boilerplate – A rock-solid default template for HTML5 awesome.CSS3 Click Chart | CSS3 Browser Support and InformationColllor – Turn one color into many alternative onesLoading CSS spinners and bars generator for AJAX & JQuery

Recopilación de 45 trucos para WordPress | emenia.esHow to Create a WordPress Options Panel | Nettuts+Goodbye, headaches. Hello, menus!10 Handy WordPress Comments Hacks – Smashing MagazineHacks, Snippets and Articles | WordPress Snippets5 ejemplos de cómo consultar y mostrar las imágenes adjuntas a un post en WordPress | Mundo IdibayMeta Box Script For WordPress – Deluxe Blog TipsGolden Apples Design | Front-end file uploads in WordPressPlantillas WordPress Gratis estilo Pinterest – Frogx.ThreeUseful WordPress Tools, Themes and Plugins | Smashing WordPressWordPress › Humans TXT « WordPress Plugins

HTML5 Word Cloud: Text AnalyzerFun with HTML5 Forms | Think VitaminTake Your Design To The Next Level With CSS3 – Smashing Magazine50 Excellent Tutorials for Web Development Using CSS3 | DzinepressKeyframe Animation Syntax | CSS-TricksHTML5 Rocks – TutorialsHTML5 Rocks – A resource for open web HTML5 developers10 awesome HTML5 audio players | CatsWhoCode.comCSS Sprites Revisited | Smashing CodingAll The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuerymaps.stamen.comIcon Fonts are Awesome

40 Website Design Layout Tutorials that Yield Professional Results | CreativeFanMeeCSS – CSS Gallery submission helper. CSS Gallery list.Web design inspiration from siteInspireCSS Mania · Since 2004CSS Gallery | The CSS website AwardsTop 10 Resources for Design Inspirationcss.maxdesign.com.au – CSS resources and tutorials for web designers and web developersglish.comEstadoBeta » Archivo » El pie de página al pie de la páginafooterStick › Code › Learn Fireworks/Code › qrayg.comCSS Beauty | CSS Design, News, Jobs, Community, Web StandardsThe Layout Reservoir – BlueRobotCSSeasy.com – Learn CSS the modern wayA CSS Sticky FooterCSS Vault » The Web’s CSS Gallery & SiteCSS ManiaCSS Drive- Categorized CSS gallery and examples.Unmatched Style | CSS Web Design Inspiration and CSS Gallery10 Examples of Beautiful CSS Typography and how they did it… » – Web Design Marketing Podcast & BlogThe Paragraph & Typography Guide » DivitoDesignCSS Gradient Text EffectSimple Double Quotes101 Typography Resources for Web Designers | Vandelay Website DesignThe Great Website Design Gallery Roundup by CSS-Tricks101 CSS Techniques Of All Time- Part 1Download free CSS templates – Free CSS TemplatesOpen Source Web Design – Download free web design templates.Go2Web20.net – The complete Web 2.0 sites directorywg:Fun with Drop ShadowsIndice – Recursos CSS – araudi.netPrimary CSSCSS Layout: A collection of 224 Grid and CSS Layouts715 Awesomely Simple and Free CSS Layouts | Design ShackGirlieMac! Blog | Mac, iPhone, Safari and beyond11 Killer CSS3 Text Effects to replace PhotoshopFresh and Useful HTML5 Tutorials, Techniques and TricksNueva pestañaDissection of Holy Websites: Modern Church Web Design Trends & Inspiration | Onextrapixel – Showcasing Web Treats Without A Hitch60 weird and wonderful typography examples // Current60 Mind-Blowing Hand Drawn Website Designs for Your Inspiration30 Exceptional CSS Navigation TechniquesSmart Columns w/ CSS & jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanakahttp://www.cssmenusamples.com/page/23 no está disponible.40 Killer Minimalist Blog Designs | SpyreStudios5 Awesome Things That You Can Do with CSS3 | Web Designer AidShowcase of Vibrant Colors in Web Design | Vandelay Design BlogThe Latest Trends in Web Design | Web Design | instantShiftI PLAN WEBSITES ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲Top 5 Web Design Mistakes Small Businesses Make25 Creative examples of CSS Based Web Designs30 Examples of Effective Font Replacement in Web Design | Inspiration400+ Mega Collection of Pink Web Design Inspiration | Mustified21 Ejemplos de web con scroll Parallax | Recursos para Diseñadores Gráficos y Web | Creativos OnlineUseful HTML5/CSS3 Snippets | SplashnologyTips & Tricks: How to create animated tooltips with CSS3SpritePad – Create and edit css spritesThe 30 CSS Selectors you Must Memorize | Nettuts+

List of Web Safe Fonts – Font TesterFive simple steps to better typography : Journal : Mark Boulton40 Free High Quality Hand-drawn Fonts | GraphicsTypetester – Compare fonts for the screenDownload free fonts @ fontspace.comGreat Fonts for Web 2.0Desktop and @font-face fonts | Fontspring10 Elegant High-Quality Fonts for Your DesignsTypeNow.net Themed Fonts Download Free Movie and Music FontsOutlaw Design Blog » 63 Must have Grunge Fonts

Buy HTML & CSS (design and build websites) a book about designing and building websites11870.com – estadísticas de Cool VillageUseful legal documents and contracts for designers – WebDesignShockcómo hacer un bot en Twitter que responda automáticamente a nuestras menciones | Guerrilla Social Media Marketing MurciaUseful Web Design Proposal Resources, Tools and AppsAbmp3.com – Music Search & Free Mp3 DownloadGantz 1 – 10 ~ Volumen 1 ~ Manga online › MoarManga.comUsing multiple Domains with WordPress MU | WPWebHostWordPress › Support » WordPress 3.0 and Domain MappingCsv de Atributos con combinacion (Size,Color e imagen) – PrestaShop Forums

Barra de marcadores

Japonés

Curso de Lengua Japonesa Gunkan por Juan José Ferres Serrano

Denshi Jisho – Online Japanese dictionary

Tae Kim’s Japanese guide to Japanese grammar

Kirai – Un geek en Japón by Héctor García — Enlaces para aprender Japonés

Alla en el chorizonte: 2006/07

WiseStamp for Chrome 3.9.4.0

Ilustración: Caperucita Roja | Cool Village Diseño Web

Digital Arts

hatsukoi on deviantART

FrealaF on deviantART

cesar nandez

Ephemeral Portraits Cut from Layers of Wire Mesh by Seung Mo Park | Colossal

Wow

Dark Legacy Comics

La Armería de World of Warcraft

LaCuerda_ Curso de Guitarra – ProgramaMusicovery _ interactive webRadioThinkGeek __ Stuff for Smart MassesVOIG.com _ MMOvie_ Installment 1Zeitgeist -Official Release in Spanish (subtítulos en español)

Hotel jobs – Caterer.comJobsite Search Resultsreed.co.uk – web JobsWeb Designer Photoshop Job in Burgess Hill, South East/Southern UKOfertas de empleo – CompuTrabajoTecnoempleo.com – Portal de Empleo Especializado en Informática Telecomunicaciones y TecnologíasStratos :: TrabajoOpcionempleo.com – Empleos & Carreras profesionales en EspañaDirectorio de empresas | Comercio internacional | Noticias economicas | Bolsa de trabajoBolsa de trabajo. Ofertas de empleo en Turismo y Hostelería | Turijobs.comMiles de trabajos y ofertas de empleo | Infoempleo.comSPAINBuscar ofertas – Canal de Empleo StartPeopleLaboris.net- Bolsa de empleo más eficaz. Ofertas de trabajo, búsqueda de curriculumsEmpleo OnlineJobs in Scotland Employment RecruitmentTrabajo Freelance – El punto de encuentro laboralUnique España – USG PeopleEMPLEO EN TURISMO – Trabajo en Hostelería y Turismo, Bolsa de trabajo hotel, ofertas de trabajo hosteleria, empleo hosteleriaTecnoempleo.com – programador freelance .net – MadridJobrapido | Trabajo Freelance, empleoProgramador Web Freelance Barcelona – Bolsa de TrabajoExperteer – Mis Objetivos ProfesionalesTrabajo freelance ilustracion Madrid (ciudad), Ofertas de empleo freelance ilustracion Madrid (ciudad). Trabajo, ofertas de empleoProgramador PHP c/expreriencia Full time, excelente propuesta | La web del FreelanceDashboard | Freelancify

LogoPond – Identity Inspiration -Business Cards Observer – Unique Business Card Design Inspiration50 Awesome And Creative Business Cards | 1stwebdesignerThe 75 Hottest Business Card Designs You’ve Ever Seen! | Ever-Real Web 2.0 Design Advice BlogMOO | Personaliza tarjetas de visita, MiniCards, postales y otros productos… | moo.com100 Best Illustrator Tutorials of All Time (From Newbie to Pro)

Dynamic Drive DHTML(dynamic html) & JavaScript code librarydinamic TAbSuper Simple Contact Form Maker – The super simple way to make a PHP contact form for your websiteSubasta php – Sistema de subastas en php – phpAuctionRegistro y reconocimiento de usuarios con PHPAñadir iconos de fechas y burbujas con números de comentarios en los link hacia tus post « XyberneticosComo crear un sistema para subir imágenes usando Dreamweaver, PHP y MySQL « Blog de JuaniquillojQuery Tooltip | Easy jQuery Tooltip with CSS & jQuery | Tooltip jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh TanakaFun with HTML5 Forms | Think VitaminRecopilación de 45 trucos para WordPress | emenia.esGmail – Inbox – wakkos@gmail.comVertical sliding nav made with CSSDeaxon’s CSS playgroundMiniAjax.com / Highlighting Rich Experiences on the WebGoodbye, headaches. Hello, menus!How to Create a WordPress Options Panel | Nettuts+10 Premium jQuery Slider Plugins | CreativeFanComprehensive Static FBML Guide – Adding, Testing & Troubleshooting | HyperArtsjQuery TOOLS – The missing UI library for the Webhttp://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/ no está disponible.jQuery Masonry · David DeSandrojQuery Form Framework – jFormer100 Awesome CSS/Javascript Plugins and Coding Techniques | Top Design Magazine – Web Design and Digital ContentCSS clearfixCreating a Prestashop 1.4 theme from scratch – Part 3 (Framework Overview) – CalloSmart Blogs40 Exceptional jQuery Photo Gallery and Slider | Free and Useful Online Resources for Designers and Developers10 Handy WordPress Comments Hacks – Smashing Magazine50 Excellent Tutorials for Web Development Using CSS3 | DzinepressTake Your Design To The Next Level With CSS3 – Smashing MagazineThe ultimate HTML5 resource guide | Webdesigner DepotHTML5 Snippets

Five simple steps to better typography : Journal : Mark Boulton40 Free High Quality Hand-drawn Fonts | GraphicsTypetester – Compare fonts for the screenDownload free fonts @ fontspace.comGreat Fonts for Web 2.0Outlaw Design Blog » 63 Must have Grunge FontsTypeNow.net Themed Fonts Download Free Movie and Music Fonts10 Elegant High-Quality Fonts for Your DesignsDesktop and @font-face fonts | Fontspring

BrushKing – Free Photoshop BrushesPhotoshop Brushes | Brushes Download | Free Photoshop Brushes | Gradients | IconsPhotoshop BrushesFree Photoshop Brushes at Brusheezy!

71+ Free PSD Resources | Presidia CreativeTiled backgrounds designerAdobe Photoshop Tutorials – Best Of | Tutorials | Smashing MagazinePhotoshop Tutorials – PSDTUTSPS HEROPhotoshop PatternsVideo tuts adobePSDfreebee.com – Free PSD GraphicsPanosFX.com – HomeRepeat Patterns45 Step-by-Step Tutorials on Web Design with Photoshop – Psdtuts+18 Absolutely Stylish Designs Using Photoshop Brushes and How to’s | NoupeFree Photoshop Tutorials and ResourcesWorth1000.com _ Photoshop Contests _ Are you Worthy™ _ home pageFOTOYOP – Soluciones para Photoshop GratisRoyalty Free Vector Graphics | VectorStock®50 Must-Read Resources For Incredible Web Design3D Models | CreativeFanThe Top 15 Places to Download Free Cliparts and Vector Stock Images | CreativeFan35+ Nature Tutorials for Photoshop | Vandelay Design BlogGraphics | creaTTor.comFREE PSD FILES | Free PSD resources like textures, icons, buttons, backgrounds and many many more.. | Page 3

Efecto HDR en simples pasos | Diego Mattei BlogTutorials – Page 1 _ Planet PhotoshopPhotoshop Tutorials, Tips- PhotoshopCafe Homepage – The free resource for Photoshop Users, Photoshop 7 to Photoshop CS3Rain Drops – ©photoshopTechniques.comPhotoshop Text Effects Round-Up_ 51 Text Effect Tutorials Every Designer Should See _ Design Vitalityphong » tutorials [ photoshop, flash, pov-ray & polar graphing tutorials ]Manga Tutorial Worth1000.com13 Tutorials for PSD to XHTML Conversion | PSDVIBE – Tutorials and ResourcesA Cool Lighting Effect In Photoshop – PSDTUTSWatercolour / Ink Blot Effect – PSDTUTSMaking a Grungy Business Card – Luxa – Photoshop Tutorials, Videos, Brushes, Tips & Tricks35 Photoshop Tutorials Inspired by Apple | Vandelay Website DesignRing of fire Photoshop tutorial25 Amazing Photoshop Drawing Tutorials – psdfan.com -Realistic Chrome and Glossy Plastic Text Effect40 Photoshop Tutorials for Lighting and Abstract Effects | Vandelay Website Design50 Photoshop Tutorials For Sky and Space Effects | Tutorials | Smashing Magazine41 Nicest Photoshop Photo Effects [Photoshop Tutorials]Using Lighting, Atmospherics and Digital Illustration Techniques for Matte Painting – The Making of Golden Sunrise in a Fairy Land by Stas Lobachev35 Fresh Photo Effect Photoshop Tutorials – Noupe Design Blog – StumbleUponTutorial Photoshop: Efecto texto metal erosionado – Taringa!Curso de CSS3

HomeFree Vector Wallpapers Download Cool Vector Wallpapers for Free[CG Textures] – The worlds largest free texture siteStripe Generator – ajax diagonal stripes background designerFree .Eps Vector Graphics | Free Vector GraphicsRecursos 2D.com: abstractot/g – clever°frankePrint Work | Jorge Restrepo | WONKSITEBest of Brochure Design – Cool Samples and Examples of Brochures : Graphic Design Blog & Graphics News BlogGraphic-ExchanGE – a selection of graphic projects40 Tremendos sitios web de restaurantes | Recursos para Diseñadores Gráficos y Web | Creativos OnlineCreate a Trendy Typographic Poster DesignGlowing Light Text Effect Layered PSD | WebTreats ETC40 Great Examples of Facebook Fan Page Designs | inspirationfeed.comVector Art by sergio Stefano | Design Inspiration + Visual Art Inspiration | DesignflavrPage not found « Graphic Fetish | Daily Creative Inspiration and Resources

crowdSPRING / How it Works99designs » Leading Designer Marketplace for Logo Designs and More…GRAPHIC DESIGN FREELANCE JOBS: FREELANCE GRAPHIC DESIGN JOBSGuru.com – Find Freelancers for Hire. Get Your Project Done.Freelancit.com Comunidad online para freelanceOfertas de empleo – Foros del WebDatos profesionales – InfoLancer.netSell Services :: Global Freelancers at FreelanceGlobal.comProyectos FreelancesJobrapido | Trabajo, empleoEncuentra profesionales freelance. Encuentra ofertas de trabajo freelance – InfoLancer.netDomestikacomunidad de diseñadores online | concursos de diseño grafico onlineNo Agencies Please – Freelance Jobs and ProjectsFind Freelance Jobs & Freelancers – iFreelance.comCraigslist > CitiesDesign Jobs | Graphic Design, Web Design & Interior Design Jobs | Design Week JobsCreative Circle – Job Search Results PageMashable JobsWork From Home Web Design Jobs – Work From Home Web Design JobsTelecommute Job List | Free list of telecommute jobs5 Resourceful Online Communities For Freelancers : Technology :: American Express OPEN ForumFreelanceSwitch | Freelance Jobs, Freelance Forum & DirectoryJob Board | Abduzeedo | Graphic Design Inspiration and Photoshop TutorialsAll Design Jobs – Smashing JobsDesign Job Search ResultsProgrammerMeetDesigner – where web developers find web designersCreative Jobs and Freelance Opportunities on BehanceProfesores de pintura (sin experiencia) en Pekín | Trabajo en China – Ofertas de trabajo para trabajar en China, estudiar chino y conseguir un trabajo en China.Authentic Jobs ~ Full-time and freelance job opportunities for web, design, and creative professionals

==cubik==Tutorial9 – Tutorial Bliss.Facebook: Las 12 Mejores Formas de Personalizar tus Páginas – Asistencia Virtual en Argentina – Novedades, Ideas y Comentarios sobre Asistencia VirtualThe Wilderness DowntownCSS3 . Info – All you ever needed to know about CSS3All There Is To Know About HTML5 and CSS3 | Design your wayFICOD 2009 Blog

Web Site Prototype | Web Prototyping & Designing Interactions | WebBizDesigns23 Inspiring Mac Related Websites | InspirationRecibidos (141) – sombrereraloca@gmail.com – GmailUseful HTML5 Boilerplate Templates and Tutorials – DesignModoA Rundown of CSS3 Units and their uses | InsertHTML

jQuery validation plug-in – main demojQuery UI – Configure your downloadJQuery File Upload Plugin Script – Demo – UploadifyWeb Design Questionnaires, Project Sheets and Work Sheets – Smashing MagazineHiTask: TourQuickBooks Online ® — Free Accounting Software for BusinessSecure source code hosting and collaborative development – GitHubSimple Online Time Tracking, Timesheet and Invoicing Software – HarvestKDE Projects

CSS3 GeneratorDesktop and @font-face fonts | Fontspring#66f517 on 0to2550to255Font Tester – CSS Font Comparison ToolSpritebox – Create CSS from Sprite ImagesWhatTheFont! « MyFontsGoogle Web FontsDynamic Drive- FavIcon GeneratorCss Text ShadowCSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator@Font Face | CSS @Font Face | CSS 3.0 @Font FaceHTML 5 Templates, HTML 5 canvas, HTML5 video, HTML 5 XHTML, HTML 5 tagGoogle Web FontsModernizrHTML5 Boilerplate – A rock-solid default template for HTML5 awesome.CSS3 Click Chart | CSS3 Browser Support and InformationColllor – Turn one color into many alternative onesLoading CSS spinners and bars generator for AJAX & JQuery

Recopilación de 45 trucos para WordPress | emenia.esHow to Create a WordPress Options Panel | Nettuts+Goodbye, headaches. Hello, menus!10 Handy WordPress Comments Hacks – Smashing MagazineHacks, Snippets and Articles | WordPress Snippets5 ejemplos de cómo consultar y mostrar las imágenes adjuntas a un post en WordPress | Mundo IdibayMeta Box Script For WordPress – Deluxe Blog TipsGolden Apples Design | Front-end file uploads in WordPressPlantillas WordPress Gratis estilo Pinterest – Frogx.ThreeUseful WordPress Tools, Themes and Plugins | Smashing WordPressWordPress › Humans TXT « WordPress Plugins

HTML5 Word Cloud: Text AnalyzerFun with HTML5 Forms | Think VitaminTake Your Design To The Next Level With CSS3 – Smashing Magazine50 Excellent Tutorials for Web Development Using CSS3 | DzinepressKeyframe Animation Syntax | CSS-TricksHTML5 Rocks – TutorialsHTML5 Rocks – A resource for open web HTML5 developers10 awesome HTML5 audio players | CatsWhoCode.comCSS Sprites Revisited | Smashing CodingAll The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuerymaps.stamen.comIcon Fonts are Awesome

40 Website Design Layout Tutorials that Yield Professional Results | CreativeFanMeeCSS – CSS Gallery submission helper. CSS Gallery list.Web design inspiration from siteInspireCSS Mania · Since 2004CSS Gallery | The CSS website AwardsTop 10 Resources for Design Inspirationcss.maxdesign.com.au – CSS resources and tutorials for web designers and web developersglish.comEstadoBeta » Archivo » El pie de página al pie de la páginafooterStick › Code › Learn Fireworks/Code › qrayg.comCSS Beauty | CSS Design, News, Jobs, Community, Web StandardsThe Layout Reservoir – BlueRobotCSSeasy.com – Learn CSS the modern wayA CSS Sticky FooterCSS Vault » The Web’s CSS Gallery & SiteCSS ManiaCSS Drive- Categorized CSS gallery and examples.Unmatched Style | CSS Web Design Inspiration and CSS Gallery10 Examples of Beautiful CSS Typography and how they did it… » – Web Design Marketing Podcast & BlogThe Paragraph & Typography Guide » DivitoDesignCSS Gradient Text EffectSimple Double Quotes101 Typography Resources for Web Designers | Vandelay Website DesignThe Great Website Design Gallery Roundup by CSS-Tricks101 CSS Techniques Of All Time- Part 1Download free CSS templates – Free CSS TemplatesOpen Source Web Design – Download free web design templates.Go2Web20.net – The complete Web 2.0 sites directorywg:Fun with Drop ShadowsIndice – Recursos CSS – araudi.netPrimary CSSCSS Layout: A collection of 224 Grid and CSS Layouts715 Awesomely Simple and Free CSS Layouts | Design ShackGirlieMac! Blog | Mac, iPhone, Safari and beyond11 Killer CSS3 Text Effects to replace PhotoshopFresh and Useful HTML5 Tutorials, Techniques and TricksNueva pestañaDissection of Holy Websites: Modern Church Web Design Trends & Inspiration | Onextrapixel – Showcasing Web Treats Without A Hitch60 weird and wonderful typography examples // Current60 Mind-Blowing Hand Drawn Website Designs for Your Inspiration30 Exceptional CSS Navigation TechniquesSmart Columns w/ CSS & jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanakahttp://www.cssmenusamples.com/page/23 no está disponible.40 Killer Minimalist Blog Designs | SpyreStudios5 Awesome Things That You Can Do with CSS3 | Web Designer AidShowcase of Vibrant Colors in Web Design | Vandelay Design BlogThe Latest Trends in Web Design | Web Design | instantShiftI PLAN WEBSITES ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲Top 5 Web Design Mistakes Small Businesses Make25 Creative examples of CSS Based Web Designs30 Examples of Effective Font Replacement in Web Design | Inspiration400+ Mega Collection of Pink Web Design Inspiration | Mustified21 Ejemplos de web con scroll Parallax | Recursos para Diseñadores Gráficos y Web | Creativos OnlineUseful HTML5/CSS3 Snippets | SplashnologyTips & Tricks: How to create animated tooltips with CSS3SpritePad – Create and edit css spritesThe 30 CSS Selectors you Must Memorize | Nettuts+

List of Web Safe Fonts – Font TesterFive simple steps to better typography : Journal : Mark Boulton40 Free High Quality Hand-drawn Fonts | GraphicsTypetester – Compare fonts for the screenDownload free fonts @ fontspace.comGreat Fonts for Web 2.0Desktop and @font-face fonts | Fontspring10 Elegant High-Quality Fonts for Your DesignsTypeNow.net Themed Fonts Download Free Movie and Music FontsOutlaw Design Blog » 63 Must have Grunge Fonts

Buy HTML & CSS (design and build websites) a book about designing and building websites11870.com – estadísticas de Cool VillageUseful legal documents and contracts for designers – WebDesignShockcómo hacer un bot en Twitter que responda automáticamente a nuestras menciones | Guerrilla Social Media Marketing MurciaUseful Web Design Proposal Resources, Tools and AppsAbmp3.com – Music Search & Free Mp3 DownloadGantz 1 – 10 ~ Volumen 1 ~ Manga online › MoarManga.comUsing multiple Domains with WordPress MU | WPWebHostWordPress › Support » WordPress 3.0 and Domain MappingCsv de Atributos con combinacion (Size,Color e imagen) – PrestaShop Forums

Estaremos cumpliendo un programa bastante interesante para llegar a controlar al máximo el diseño adaptable o Responsive Design:

Algo está pasando
Nuevas maneras de navegar por internet
Responsive Design NO es diseño móvil – ¿y qué es?

Dispositivos
Para quien diseñar
Resoluciones a tener en cuenta

Diseño Fluido
Concepto
Técnicas para lograrlos

Diseño Adaptable
Concepto
Técnicas para lograrlos

Diseño `Responsive´
Concepto
Técnicas para lograrlos

Ancho Máximo y Ancho Mínimo
La variable importante: resolución
Adaptar bloques en base al ancho
Ancho en IE
Float y Display: inline-block

Unidades de medida
Adoremos lo relativo
Calculo de medidas
Margin & Paddings flexibles

Imágenes
Popiedades
Imágenes Flexibles
Fondos Fexibles

Tipografía
Tamaños relativos de fuentes
Uso de fittext.js

Navegación Móvil
Navegación Adaptable
Algo de jQuery

Media Queries
Definiendo resoluciones
Condicionales
Un mundo con viewports

Media Queries II
Ejercicios y pruebas
God Like: no media queries

Frameworks & grids
Initialzr
Boilerplate
Frameless

Animaciones
Animar cambios del CSS
CSS3 y animaciones de Mediaqueries

Efectos de texto con Mediaqueries
Layouts adaptables
Diseñar antes de programar

Canvas
Jugar fuera del canvas

Soluciones
“Adaptar” webs
Herramientas online

Ejercicios de diseño
Conceptualizar una web adaptable.
Definir las herramientas.

El curso lo dará Wakkos (si, el hizo que esta web fuera Adaptable =P) y si os interesa inscribiros (aún queda alguna entrada) podéis hacerlo en la web de Escuela.It: http://escuela.it/cursos/responsive-web-design/.

Quiero dejar aquí varias de las opciones con las que se pueden contar (y se DEBEN contar con ellas, en mi opinión) al discutir vuestra web con el diseñador.

CMS

Si una tendencia es importante y es casi ya una norma más que una opción, es el dinamismo. Las webs deben “moverse”. Beneficia a nuestra empresa, beneficia nuestro posicionamiento en buscadores y beneficia el control que ejercemos sobre ella.
Un CMS (Content Management System) es simplemente una herramienta de edición de nuestra web, con el podemos agregar, editar o eliminar entradas, publicar contenido multimedia, organizar nuestra web en categorías o contenido estático (páginas).
Y aquí quiero hacer un inciso y recordar que vuestra web es similar a vuestra tarjeta de presentación: Vosotros no la guardáis en un cajón cuando se imprimen! Vosotros intentáis repartirlas, dejarlas a la gente que conocéis, a gente que pregunta, en la barra del bar, etc… Con la web ocurre igual! no podemos mandar a que nos diseñen una web y dejarla ahí para decir “tengo web”, no! Vuestra web debe ser un vendedor más, queremos que los potenciales clientes nos encuentren cuando busquen un producto que ofrecemos, nuestra web debe ser dinámica.

Tenemos varias opciones a la hora de elegir un CMS.

Para webs dinámicas:
WordPress
Drupal
Joomla

Para tiendas Online
Prestashop
Magento

Estas son las más populares pero hay muchas más y todas gratuitas no dejéis que para una web relativamente sencilla os quieran vender un CMS propio si no es indispensable por X o Y característica que no se encuentra en los ya existentes.

Responsive Design

es quizás la tendencia más recurrente hoy en día por los diseñadores web gracias a las ventajas que aporta tanto al cliente final como al mismo diseñador: Consiste en reagrupar elementos de la web basándose en la resolución para poder visualizara correctamente independientemente de la resolución, recordemos que si intentamos comprimir una web a 3 columnas en un iPhone, no podremos leer nada a no ser que hagamos Zoom, tampoco es igual si el iPhone lo tenemos en widescreen (horizontal). las resoluciones varían. Esto anteriormente se solucionaba creando otra web para dispositivos y mostrando una web u otra según la resolución detectada, un completo desastre, engorroso y caro.

Con responsive design podemos tener la misma web reorganizada para todas las resoluciones sin que el usuario se pierda el contenido que nos interesa, por ejemplo podemos tener para desktop una web:

Y reorganizarla en una tablet:

La misma web, legible aunque la resolución disminuya. podemos encontrar una galería llena de ejemplos de Responsive Design en http://mediaqueri.es/. Reducid el tamaño de vuestro navegador para poder apreciar como varían los elementos de las webs.

Redes Sociales

Todos sabemos de sobra la importancia de las redes sociales para nuestro negocio (y si no, podéis revisar en PuroMarketing). Cada estrategia de marketing en redes sociales es diferente y por ello debes ser capaz de gestionar que contenido de tu web va a que red social, que debe ir a Facebook, que a Twitter, que a Google Plus y así.

Por ejemplo en CoolVillage hacemos que la sección BLOG se publique en una sección de Facebook, que todas las entradas vayan al muro por medio de RSS, a Twitter con un plugin de WordPress llamado Twitter Tools y de la misma manera tenemos configurado LinkedIn para que nuestros contenidos se publiquen automaticamente. Tu también deberías poder administrar la viralidad de tu contenido.

Hosting & Dominios

siempre SIEMPRE deben estar a nombre del cliente. Debes tener los datos, hacer el contrato, poder cambiarlos y administrarlos cuando lo necesites. Que tu diseñador te recomiende o te ofrezca el servicio de hosting & dominio no impide que TU tengas esos datos, aunque yo siempre recomiendo que el cliente sea el que haga los contratos y me deje los datos para yo trabajar, pero son sus datos y su contrato con su compañía favorita.

¿Qué compañías dan buen servicio de Hosting & Dominios? Como casi todo, depende de la experiencia previa, pero siempre me viene a la mente esa filosofía de Mejorandola que aconseja usar el comercio del barrio: las empresas relativamente pequeñas son quienes asistencia personal te van a ofrecer.

En España me gusta mucho DataCity y fuera de España tenemos a Neolo o la estadounidense Namecheap pero seguro que hay muchas más que funcionen bien, buscad llamad y preguntad, probad….

Recuerda estos puntos a la hora de crear tu web, y exígelos a tu diseñador!
Y si necesitáis asesoría para crear vuestra web, ponte en contacto con nosotros, es gratis! -.Al contratar a un diseñador web para que cree nuestra web debemos tener en cuenta tecnologías y tendencias de las cuales podemos aprovecharnos. Y debemos exigirle que las utilice! Muchos clientes quieren dejar todo en manos del diseñador, pero son ellos los que conocen su negocio mejor que nadie, saben que público puede acceder y contactarles por medio de la web.

Quiero dejar aquí varias de las opciones con las que se pueden contar (y se DEBEN contar con ellas, en mi opinión) al discutir vuestra web con el diseñador.

CMS

Si una tendencia es importante y es casi ya una norma más que una opción, es el dinamismo. Las webs deben “moverse”. Beneficia a nuestra empresa, beneficia nuestro posicionamiento en buscadores y beneficia el control que ejercemos sobre ella.
Un CMS (Control Management System) es simplemente una herramienta de edición de nuestra web, con el podemos agregar, editar o eliminar entradas, publicar contenido multimedia, organizar nuestra web en categorías o contenido estático (páginas).
Y aquí quiero hacer un inciso y recordar que vuestra web es similar a vuestra tarjeta de presentación: Vosotros no la guardáis en un cajón cuando se imprimen! Vosotros intentáis repartirlas, dejarlas a la gente que conocéis, a gente que pregunta, en la barra del bar, etc… Con la web ocurre igual! no podemos mandar a que nos diseñen una web y dejarla ahí para decir “tengo web”, no! Vuestra web debe ser un vendedor más, queremos que los potenciales clientes nos encuentren cuando busquen un producto que ofrecemos, nuestra web debe ser dinámica.

Tenemos varias opciones a la hora de elegir un CMS.

Para webs dinámicas:
WordPress
Drupal
Joomla

Para tiendas Online
Prestashop
Magento

Estas son las más populares pero hay muchas más y todas gratuitas no dejéis que para una web relativamente sencilla os quieran vender un CMS propio si no es indispensable por X o Y característica que no se encuentra en los ya existentes.

Responsive Design

es quizás la tendencia más recurrente hoy en día por los diseñadores web gracias a las ventajas que aporta tanto al cliente final como al mismo diseñador: Consiste en reagrupar elementos de la web basándose en la resolución para poder visualizara correctamente independientemente de la resolución, recordemos que si intentamos comprimir una web a 3 columnas en un iPhone, no podremos leer nada a no ser que hagamos Zoom, tampoco es igual si el iPhone lo tenemos en widescreen (horizontal). las resoluciones varían. Esto anteriormente se solucionaba creando otra web para dispositivos y mostrando una web u otra según la resolución detectada, un completo desastre, engorroso y caro.

Con responsive design podemos tener la misma web reorganizada para todas las resoluciones sin que el usuario se pierda el contenido que nos interesa, por ejemplo podemos tener para desktop una web:

Y reorganizarla en una tablet:

La misma web, legible aunque la resolución disminuya. podemos encontrar una galería llena de ejemplos de Responsive Design en http://mediaqueri.es/. Reducid el tamaño de vuestro navegador para poder apreciar como varían los elementos de las webs.

Redes Sociales

Todos sabemos de sobra la importancia de las redes sociales para nuestro negocio (y si no, podéis revisar en PuroMarketing). Cada estrategia de marketing en redes sociales es diferente y por ello debes ser capaz de gestionar que contenido de tu web va a que red social, que debe ir a Facebook, que a Twitter, que a Google Plus y así.

Por ejemplo en CoolVillage hacemos que la sección BLOG se publique en una sección de Facebook, que todas las entradas vayan al muro por medio de RSS, a Twitter con un plugin de WordPress llamado Twitter Tools y de la misma manera tenemos configurado LinkedIn para que nuestros contenidos se publiquen automaticamente. Tu también deberías poder administrar la viralidad de tu contenido.

Hosting & Dominios

siempre SIEMPRE deben estar a nombre del cliente. Debes tener los datos, hacer el contrato, poder cambiarlos y administrarlos cuando lo necesites. Que tu diseñador te recomiende o te ofrezca el servicio de hosting & dominio no impide que TU tengas esos datos, aunque yo siempre recomiendo que el cliente sea el que haga los contratos y me deje los datos para yo trabajar, pero son sus datos y su contrato con su compañía favorita.

¿Qué compañías dan buen servicio de Hosting & Dominios? Como casi todo, depende de la experiencia previa, pero siempre me viene a la mente esa filosofía de Mejorandola que aconseja usar el comercio del barrio: las empresas relativamente pequeñas son quienes asistencia personal te van a ofrecer.

En España me gusta mucho DataCity y fuera de España tenemos a Neolo o la estadounidense Namecheap pero seguro que hay muchas más que funcionen bien, buscad llamad y preguntad, probad….

Recuerda estos puntos a la hora de crear tu web, y exígelos a tu diseñador!
Y si necesitáis asesoría para crear vuestra web, ponte en contacto con nosotros, es gratis! -.

Dinos que te parece!

Illustration made in Photoshop. Nothing “too fancy” just brushes and strokes!

 Cartel diseñado para la fiesta AntHill en Soria, con el gran DJ @djValdiTV

Cartel Completo

This one was made lont time ago with the ol’ good Image Ready.

Grab the PSD: planet_psd

And make your tests!

Jugando con Photoshop:

Hemos logrado esto con el antiguo Image Ready! Podéis descargar el PSD: planet_psd

Se pueden hacer cosas chulas!

Miles de capas y otro tanto de té.

Tengo una imágen de 4″ x 4″ que quiero meter en el área de una postal de 4″x6″

Y la postal excede en horizontal 2 pulgadas:

Vamos a seleccionar nuestra herramienta de recorte (C) para recortar la imagen a proporción de 6×4″, en las opciones configuramos la proporción del recorte: 6 in x 4 in:

Y arrastramos a lo largo de la imagen

Pero en este caso no quiero perder todo el aire que le da el cielo. Se ve muy apretada para una postal y no me gusta; vamos a renombrar la capa a “chica” y arrastramos con la herramienta de recortar la imagen completa, que cubra de arriba hasta abajo de manera que sobresalga el recorte un tercio aproximadamente de la imagen (y así cumplir las medidas reales de 6″x4″) y aceptamos para agrandar el lienzo sobre el cual trabajamos a las medidas exactas.

Tip: Normalmente no podrás arrastrar más allá del tamaño de la imagen la herramienta de recortar, debes primero cubrir la imagen, soltar el ratón y modificarla luego. (estirarla en este caso)

Ahora tenemos una imagen de 6″x4″ que se nos corta y debemos rellenar la porción de la imagen que falta.

Para ver las diferencias entre un “cortado” normal y el cortado con Content Aware vamos a duplicar la capa “chica” y vamos a Free Transform (Edit -> Free Transform o cmd/ctrl+T) y estiramos la imagen en horizontal para rellenar esa porción de imagen vacía. Podemos ver que el resultado es una imagen estirada que ningún cliente va a aceptar como buena.

Ahora hagámoslo bien: escondemos la capa estirada y trabajemos sobre la capa original (la capa “chica”) y seleccionamos Content Aware Scale (Edit -> Content Aware Scale o alt+shif+cmd/ctrl+C) y estiramos de la misma manera. Antes de aceptar, podemos ver como Photoshop se encarga de estirar el fondo, pero intenta dejar a la chica en proporción al original. Sin embargo aún le agranda los brazos. Porqué? porque el contraste con el fondo no es suficiente para que Photoshop lo tome en cuenta 100% como “zona segura” al hacer el escalado.

Presionamos Escape para no aceptar los cambios y vamos a ver una característica muy interesante de content aware scale, vamos a crear una “zona segura” de ser ampliada en el cambio de tamaño. En nuestro caso la zona más importante a tener en proporción es la chica, así que vamos a seleccionarla con la herramienta de Quick Selection Tool (W). Nada extremadamente preciso, una pasada sobre ella y poco más:

Una vez seleccionada guardamos la selección en “Select -> Save Selection” le ponemos  el nombre “chica” y deseleccionamos (cmd/ctrl+D)

Entonces es cuando procedemos a hacer el escalado con Content Aware (edit -> Content Aware Scale) y antes de cambiar nada, seleccionamos arriba, en las opciones dodne pone “protect” la selección que guardamos antes:

Y ahora si, estiramos hacia la derecha para rellenar el espacio vació de nuestra imagen y vemos como nos estire lo que nos estire, la chica se queda intacta.

Y así tenemos una imagen que no estaba hecha para proporciones de 6×4 encajar perfectamente sin dañar los elementos que nos interesan!En este tutorial seguimos trabajando con Photoshop Content Aware y el escalado de imágenes y vamos a hacer lo contrario que en el anterior: en vez de contraer una imagen porque tenemos un espacio más pequeño, vamos a “estirarla” a un área mayor.

Tengo una imágen de 4″ x 4″ que quiero meter en el área de una postal de 4″x6″

Y la postal excede en horizontal 2 pulgadas:

Vamos a seleccionar nuestra herramienta de recorte (C) para recortar la imagen a proporción de 6×4″, en las opciones configuramos la proporción del recorte: 6 in x 4 in:

Y arrastramos a lo largo de la imagen

Pero en este caso no quiero perder todo el aire que le da el cielo. Se ve muy apretada para una postal y no me gusta; vamos a renombrar la capa a “chica” y arrastramos con la herramienta de recortar la imagen completa, que cubra de arriba hasta abajo de manera que sobresalga el recorte un tercio aproximadamente de la imagen (y así cumplir las medidas reales de 6″x4″) y aceptamos para agrandar el lienzo sobre el cual trabajamos a las medidas exactas.

Tip: Normalmente no podrás arrastrar más allá del tamaño de la imagen la herramienta de recortar, debes primero cubrir la imagen, soltar el ratón y modificarla luego. (estirarla en este caso)

Ahora tenemos una imagen de 6″x4″ que se nos corta y debemos rellenar la porción de la imagen que falta.

Para ver las diferencias entre un “cortado” normal y el cortado con Content Aware vamos a duplicar la capa “chica” y vamos a Free Transform (Edit -> Free Transform o cmd/ctrl+T) y estiramos la imagen en horizontal para rellenar esa porción de imagen vacía. Podemos ver que el resultado es una imagen estirada que ningún cliente va a aceptar como buena.

Ahora hagámoslo bien: escondemos la capa estirada y trabajemos sobre la capa original (la capa “chica”) y seleccionamos Content Aware Scale (Edit -> Content Aware Scale o alt+shif+cmd/ctrl+C) y estiramos de la misma manera. Antes de aceptar, podemos ver como Photoshop se encarga de estirar el fondo, pero intenta dejar a la chica en proporción al original. Sin embargo aún le agranda los brazos. Porqué? porque el contraste con el fondo no es suficiente para que Photoshop lo tome en cuenta 100% como “zona segura” al hacer el escalado.

Presionamos Escape para no aceptar los cambios y vamos a ver una característica muy interesante de content aware scale, vamos a crear una “zona segura” de ser ampliada en el cambio de tamaño. En nuestro caso la zona más importante a tener en proporción es la chica, así que vamos a seleccionarla con la herramienta de Quick Selection Tool (W). Nada extremadamente preciso, una pasada sobre ella y poco más:

Una vez seleccionada guardamos la selección en “Select -> Save Selection” le ponemos  el nombre “chica” y deseleccionamos (cmd/ctrl+D)

Entonces es cuando procedemos a hacer el escalado con Content Aware (edit -> Content Aware Scale) y antes de cambiar nada, seleccionamos arriba, en las opciones dodne pone “protect” la selección que guardamos antes:

Y ahora si, estiramos hacia la derecha para rellenar el espacio vació de nuestra imagen y vemos como nos estire lo que nos estire, la chica se queda intacta.

Y así tenemos una imagen que no estaba hecha para proporciones de 6×4 encajar perfectamente sin dañar los elementos que nos interesan!

Cool, eh?Nueva ilustración hecha por @madhatter_lady y su Wacom Cintiq21UX

Mola, eh?

Muchas veces tenemos una imagen que es perfecta para una composición (Web, Revista, Anuncio de prensa) pero resulta muy grande para el área donde debemos introducirla.

Por ejemplo yo tengo la siguiente imagen:

Mide 500px x 340px  y necesito ponerla en una web donde el espacio que tengo es de 250px x 340px entonces tengo un problema, ya que el alto es el mismo pero el ancho no, no puedo simplemente reducirla de tamaño sin perder la escala:

Hagamos la prueba:

Por seguridad, dupliquemos la capa de la imagen, una vez duplicada presionemos cmd/ctrl + T y arrastremos del nodo que está en el lateral derecho hasta que tenga 250px de ancho.

Tip: La paleta INFO (view ->info) nos dice el tamaño de una selección a medida que la vamos cambiando, útil para ver el tamaño a la que debemos dejar la imagen:

No es el resultado deseado, ya que se estrechan los contenidos, el barco se “aplasta” las personas también….

Lo voy a dejar ahí para referencia y volvemos a duplicar la capa original para hacerlo de otra manera: Content-Aware Scale.

Este le dice a Photoshop que mantenga las zonas de alto contraste en la imagen para que no se vean afectadas por cambios de tamaño, en nuestro caso el bote, las personas el barco con lo que no perderían proporcionalidad.

Vamos a Edit -> Content-Aware Scale (alt+cmd/ctrl+shif+C) y reducimos el tamaño tal como lo hicimos con el free transform (cmd/ctrl + T) anteriormente.

Podemos ver como ahora las personas y el bote -las zonas de más contraste en la imagen- han mantenido su proporción a medida. Simplemente de las mejores herramientas en Photoshop: Content Aware. Abajo podemos ver la imagen Original y las dos reducciones de imagen que hicimos, cual es mejor?

Click para descargar original

Click para descargar original

Vamos a abrir ambas imágenes en un mismo documento en capas diferentes: un truco en Photoshop CS5 es abrir la primera imagen y la segunda arrastrarla desde la carpeta que la contiene hasta Photoshop, y la insertará en la imagen abierta como una capa.

Intentaremos llevar los ciclistas a la playa, pero no tenemos la imagen de la playa completa, está cortada. Así que el primer problema es “rellenar” esas zonas en blanco y para eso usaremos la nueva característica de Photoshop CS5: Content Aware y es más sencillo/rápido que ponernos a clonar o a dibujar incluso:

• Tracemos una selección rectangular que cubra la imagen y deje la zona blanca “descubierta”

• Tenemos la selección de la imagen, pero queremos rellenar lo blanco, así que vamos a seleccionar lo inverso: cmd/ctrl + I o Select -> Inverse.
• Vamos a rellenar con Content Aware: shit + backspace o Edit -> Fill y usamos Content Aware para completar las zonas blancas con la imagen que la rodea.

Y con eso tenemos las zonas blancas de la imagen rellenas con el contenido de la foto.

Esta me parece una de las características mas increíbles de Photoshop CS5, pero más adelante veremos otros tutoriales para conocerla a fondo. Vamos a extraer a los ciclistas del atardecer para colocarlos en esta foto:

Seleccionamos la capa de los ciclistas y el atardecer y vamos a Select -> Color Range que es una herramienta que nos selecciona rangos de coolres y en esta imagen con seleccionar los negros, nos basta para obtener nuestras siluetas.

dejamos la opción que viene por defecto (select) y seleccionamos la opción de “Localizar clusters de colores”. Jugamos ahora con la suavidad o “Fuzziness” del rango de colores dando click con el gotero en la imagen: Un click con el gotero en la zona más negra, la central, y ajustamos la suavidad para que no se pierdan las ramas que salen en la parte izquierda.

Para poder visualizarlo mejor en la parte inferior de la ventana de Rango de Colores tenemos para seleccionar previsualizaciones, pues selecciona Grayscale (Escala de Grises) para poder ver en la imagen los cambios.

Consejo: Como los negros de esta imagen no son “negros negros” (varían según nos desplazamos a la izquierda o la derecha entre grises oscuros) podemos seleccionar la herramienta de gotero con un simbolo de + para agregar las diferentes tonalidades: hacemos click en la zona de la derecha, la del centro y la de la izquierda.

Una vez que estemos satisfechos con la definición de las ramitas, aceptamos:

Ahora vamos a crear la máscara para trabajar, asegurémonos de tener el panel de máscaras visible: Ver -> Máscaras (View -> Mask) y agregamos una máscara según la selección que tenemos. Color Range funciona bien, pero redefinir la selección con la herramienta de Máscara es aún mejor.

Lo que vamos a hacer es hacer zoom en la parte que más conflictos nos da para seleccionar: las ramas Vamos a darle a Mask Edge para redefinir y lo que vamos a hacer es seleccionar Smart Radius y jugar con el para definir los bordes de la imagen:

Vemos como salen más ramitas de la nada! xD En realidad lo que hacemos es ajustar la máscara para que deje pasar mas información de la imagen.

Las opciones que vamos a tocar esta vez para redefinir la máscara son el Radio que como hemos visto nos ayuda a definir los bordes, Shit Edge para ampliar el rango de desenfoque y suavizar los bordes y lo que me aprece más importante: Decontaminating Colors nos quita ese halo del color rojo que tiene la foto original para que se integre más aún en la imagen de la playa:

Para que veamos un antes y un después de redefinir la máscara:

Y la imagen final:

No confundamos estos ajustes con los que vienen con Photoshop de toda la vida bajo el menú Imagen – Ajustes.

Estos ajustes son permanentes, no podemos cambiarlos más adelante u ocultarlos. Por ejemplo, si elegimos Niveles y aplicamos un cambio a la imagen, digamos que la aclaramos mucho, estamos cambiando el documento y cuando volvamos a ajustar los niveles, el histograma que obtenemos será completamente diferente al original y puede que imposible de volver a reajustar los niveles:

Por el contrario, si agregamos una capa de ajuste, elegimos niveles y hacemos el mismo cambio que realizamos anteriormente, obtenemos el mismo resultado pero el histograma no cambia. Podremos ver una nueva capa en el panel de Capas y ocultarla para notar como la imagen original sigue intacta:

Si hacemos click en la capa de fondo, veremos como el panel de ajustes vuelve a su posición normal: todas las opciones. Pero si hacemos click de nuevo en la capa que contiene el ajuste, la ventana mostrará los últimos ajustes que hicimos y, lo que supone toda la ventaja de esto, cambiarlos. Hay un pequeño botón en la parte inferior del panel que te permite reiniciar los ajustes para eliminar todo cambio hecho a la capa:

Las capas de ajuste aparte de tener una pequeña ventanilla en el panel en vez de una ventana en el medio de la pantalla (lo cual es muy práctico para trabajar) te permiten agregar muchos ajustes independientes a tu imagen, no solo uno. Podemos agregar también una capa de ajuste de blanco y negro sin perder la información de color de la imagen original; tendríamos dos: ajuste de niveles y ajuste de blanco y negro. Podemos borrar una, o ajustarlas independientemente.

Ya que las capas de ajuste son eso: capas, lo primero que se nos pasa por la cabeza es ajustar la opacidad, de nuestro ejemplo borremos la capa de ajuste de niveles y ajustemos la opacidad presionando la letra V y la letra 8 para establecer el porcentaje de opacidad a 80%.

Otro de los “juegos” interesantes son los Blendig Modes o Fusión, la cambiamos a Overlay y obtendremos un contraste de colores muy fuerte.

Por último lo que considero la característica más versátil en una capa: máscaras. Presionamos la B para seleccionar la herramienta pincel y seleccionamos la máscara de la capa de ajuste en mi ejemplo voy a pintar los toldos verdes que ponen Grimoldi para ocultar totalmente la capa de ajuste en esa zona y dejarlo como en el original, si nos pasamos de pintura podemos presionar X e intercambiar el color frontal por el trasero para pintar con blanco la máscara y corregir. Si no tenemos Blanco y negro, podemos presionar D para establecerlos como nuestros colores.

También podemos ajustar niveles por zonas, por ejemplo esas imágenes que salen claras arriba y oscuras en otras zonas:

Creando un degradado en la máscara de la capa de niveles de negro a blanco, de arriba a abajo (el negro oculta la capa de ajuste) podemos cambiar solo la parte inferior de la imagen:

Hemos visto que nuestras capas de ajuste son bastante versátiles: podemos re-ajustarlas en cualquier momento, ajustar la opacidad, ocultarlas, cambiar el modo de fusión y cada Capa de Ajuste tiene una máscara que podemos modificar para ocultar ciertas zonas de ajuste.

Veamos el mini (miiiiini) tutorial:

Uno de los procesos que más utilizo a la hora de dar dramatismo a fotografías de rostros es de lo más simple: duplicar la capa, aplicar un desenfoque y cambiar el blending a Hard Light. Obtenemos gracias al Hard Light mas rango de tonos y el Desenfoque nos da esa sensación de haber sacado la foto con un filtro de Vaselina.

Simple eh?

Veamos algunos ejemplos:

Blur: 7px opacidad de la capa: 85%

Un poco más sutil:

Blur: 5px Opacidad de la capa: 45%

Acentuado:

Blur: 12px opacidad: 75%

Probemos con un Lens Blur

Utilizando este canal para no desenfocar los ojos y darle protagonismo a Adriana Lima (sin gafas, en la foto)

Opacidad: 100%

A veces ir por el lado simple nos arregla las cosas sin perder tanto tiempo.

• Creamos un documento nuevo (600×400 px es buena medida para empezar)
• Cargamos una forma libre llamada “Film” – película en español, corregidme si me equivoco ya que el Photoshop en Español no es mi fuerte. Seleccionad “Append” cuando os pregunte si queréis remplazar la lista actual de formas.

• Selecciona la segunda forma que te ha agregado y simplemente arrastra para crear una nueva capa de forma (Shape Layer) con la forma de nuestra tira de película.

• Vamos a agregar 4 imágenes al documento, para ello uso el MiniBridge de PS CS5 navego hasta mi carpeta y selecciono los 4 archivos a introducir con ALT + click o Cmd/ctrl click:

• Arrastramos esos 4 archivos al documento y podemos notar que no los pone los 4 a la vez sino uno por uno, esto nos da tiempo de ajustarlos dentro de cada “hueco” de la película:

Técnicamente ya lo tenemos, pero vamos a jugar un poco con el archivo: vamos a acoplar todas las capas (las 4 imágenes y la película) en una sola: click en la capa de la película y shift (may.) + click en la capa superior de las imágenes, de manera que todas queden seleccionadas. Presionamos cmd/ctrl + E para acoplarlas. Nos queda un documento con dos capas: el Background y la película. Dupliquemos la capa de la película.

Arrastramos la capa nueva justo debajo de la capa existente y seleccionamos Edit -> Transform -> Flip Vertical (Edición -> Transformar -> Reflejo Vertical) y bajamos la opacidad a un 30% en esa capa.

Ahora quedaría bien si borramos un poco la capa copia en la parte inferior para dar la impresión de desvanecimiento. Si estáis seguros de lo que hacéis, unas simples pinceladas con la herramienta de borrar con un pincel bastante difuminado y grande bastará: 150 px de diámetro y 0% de Hardness (Dureza?):

La otra opción por si queremos probar, borrar o corregir es crear una máscara a la capa y probar con gradientes en la máscara de negro a blanco. Particularmente, con una Wacom basta y sobran las pinceladas.

Bueno! un último toque: vamos a acoplar las dos capas que tenemos (seleccionamos ambas y presionamos cmd/ctrl + E) vamos a ir a Edit -> Transform -> Warp y en las opciones seleccionamos “Flag” (Bandera)

Aceptamos y listo:

Es un tutorial sencillo pero el resultado puede impresionar con un poco de creatividad.

En Photoshop solo tenemos que seleccionar una u otra herramienta (subexponer o sobreexponer) y aplicar a la imagen para aclarar u oscurecer.

Sobre y subexponer trabajan muy bien en imágenes en blanco y negro ya que en realidad solo tocamos tonos de color, así que usaremos una imagen en blanco y negro como ya se dijo una vez en TodoTutoriales.es

Click para ver tamaño original

Agreguemos un poco de “drama” a la imagen dándole ligeramente más intensidad a los brillos y oscureciendo las sombras. Básicamente vamos a aumentar los contrastes pero con la precisión que nos da un pincel: podremos seleccionar ciertas áreas para resaltar y otras dejarlas como están.

Empecemos por las luces, seleccionemos la herramienta de Dodge o subexposición (O en el teclado) y vemos que nos salen 3 opciones a elegir en el rango de luces: Sombras, Mediotonos y Luces:

Su significado es literal. Si queremos aclarar las sombras (a la derecha del histograma), mediostonos (al centro del histograma) o luces (a la ziquierda del histograma). Nosotros queremos agregar mas contraste y rango de tonos (mas blancas las luces y mas oscuras las sombras) así que seleccionaremos Highlights y bajaremos la exposición a 10% para las nubes.

Recomiendo en vez hacer trazos con el pincel de Dodge dar solo “puntadas” elegir un pincel que cubra el área y dar un click o dos, en las zonas pequeñas ir con cuidado y hacer pequeños trazos con un pincel pequeño, Yo lo hice solo sobre las partes blancas de las nubes. Luego subiremos la exposición a 20% y daremos un par de toques con un pincel grande en las zonas claras del mar. El resultado es el siguiente:

Click para ver en Grande

Genial, no? ya vemos como esas nubes y ese mar van obteniendo dramatismo, pero hay que aumentar más el rango de tonos, y ya hemos forzado las luces al límite así que toca aumentar las sombras: a oscurecerlas. Selecciona la herramienta de Burn (Sobreexponer) y tal como hicimos con la herramienta Dodge, seleccionamos el rango de luces que queremos oscurecer. Las sombras y un 10% de exposición son buenos valores para empezar.

Vamos a oscurecer las sombras de las nubes y las zonas donde no aclaramos en el mar (en los bordes y el centro). Juguemos con la exposición para oscurecer un poco más o menos, el gusto tiene mucho que hacer aquí! Yo obtuve la siguiente imágen:

Click para ver en grande

Comparad con la primera y veréis exactamente donde apliqué yo mis Dodges and Burns!

Tened en cuenta que cuando se aumenta el rango de tonos siempre obtendremos algo de ruido, hay varias técnicas para deshacernos del ruido, y por otro lado pueden aparecer “manchas” en vez de simples aclarados, jugad con el porcentaje de exposición. Ambos factores se pueden evitar si trabajamos con la imagen a 16bits en vez de a 8 bits ya que Photoshop cuenta con más información con que trabajar.

Ya que esta técnica es ideal para resaltar elementos de una imagen (oscurecer el fondo para resaltar un rostro, aclarar la cara, etc.) no es buena idea meterse con los medios tonos porque le quitaremos profundidad a la imagen.

Dragons and Princess are several illustration where the topic is, yeah, I’m a genious: Dragons and PrincessParte de una serie de ilustraciones que tiene en “top secret” @MadHatter_Lady. He conseguido robarle la primera de ellas y es probable que muera por ello, pero vale la pena si los mortales podemos apreciar esto:

Dragones y Princesas son variasilustraciones donde los protagonistas son: Dragones y Princesas (si, soy un genio).

Si se vuelve a descuidar, le robaré algún otro!

Vemos que tenemos las esquinas superior izquierda e inferior derechas enfocadas ya que están cercanas al foco de la foto, y vamos a intentar desenfocarlas con Photoshop.

Seleccionemos el fondo (yo lo hice con la Quick Selection Tool) no tiene que ser exacto, ya veis en el ejemplo de abajo que no es necesaria mucha precisión y creamos una nueva capa a partir de la selección (cmd/ctrl + J)

Creamos una nueva capa y a hacer un degradado de negro a blanco. Esa capa será una máscara para acentuar el desenfoque:lo que sea negro NO estará desenfocado  y el blanco la zona donde se aplicará desenfoque, yo acabé con el siguiente degradado:

Vamos a irnos a la capa con el degradado, seleccionamos todo (cmd/ctrl A) copiamos (cmd/ctrl C) y nos vamos a la paleta de canales, creamos uno nuevo y pegamos (cmd/ctrl V) y deseleccionamos (cmd/ctrl D) con eso tenemos nuestra base para aplicar el degradado. En mi caso el nuevo canal es “Alpha 1″

Ahora la parte interesante: vamos a aplicar un desenfoque, pero no un desenfoque gaussiano, vamos a aplicar un desenfoque de lente (Lens Blur) a la capa que creamos con comando/control J. Lens Blur se acerca más al tipo de desenfoque que podría dar una cámara que Gaussian Blur.

Las opciones de Lens Blur no suelo tocarlas, el valor que de verdad importa es “Radio” que es el que va a dar la amplitud de nuestro desenfoque y la fuente (source) que debe ser nuestro canal Alpha creado:

Y obtendremos nuestra imagen desenfocada:

Si quedan bordes cortados o mal ajustados cargad la selección que creamos (cmd/ctrl click sobre la capa) e invertid la selección (cmd/ctrl I) y borrais (backspace/delete) un par de veces.

Para entrenar un poco intentad con diferentes degradados, aquí os dejo otra foto para contrastar:

Para empezar debemos elegir una imagen de alta resolución a la que valga la pena hacer zoom (imagenes de poca resolución no sale rentable, ya que pierden resolución con un zoom)

click imagen (+2 MB)

Muy bien, vamos ir a Archivo -> Exportar -> Zoomify (FIle – Export – Zoomify) y veremos que tenemos varias opciones; las que trae por defecto suelen ser las mejores porque están basadas en la imagen que hemos elegido. Podemos elegir el tipo de plantilla para el archivo HTML. La calidad de las imágenes (la mejor si queremos que el usuario aproveche la aplicación) y el tamaño de la tabla donde va a ir insertado.

Una vez que aceptamos, Zoomify crea una carpeta con las secciones del zoom (65 en mi caso) y un archivo flash para darle uso e insertarlo donde queramos  – No olvidemos el archivo HTML del que podemos obtener el código. Listo para subir a la web y ya.

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" WIDTH="400" HEIGHT="400" ID="theMovie"> 

<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=DSC01763_img&zoomifyNavigatorVisible=false">

<PARAM NAME="BGCOLOR" VALUE="#ffffff">

<PARAM NAME="MENU" VALUE="FALSE">

<PARAM NAME="SRC" VALUE="DSC01763_img/zoomifyViewer.swf">

<EMBED FlashVars="zoomifyImagePath=DSC01763_img&zoomifyNavigatorVisible=false" SRC="DSC01763_img/zoomifyViewer.swf" BGCOLOR="#ffffff" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="400" HEIGHT="400" NAME="theMovie"></EMBED>

</OBJECT>

Puedes ver el ejemplo en Vivo

Crear marco

Crear borde insertado

Redondear esquinas

Crear Marco:

Esta acción nos crea un marco con el color trasero de nuestra paleta, así que si quieres el marco blanco, solo presiona la letra D en Photoshop.  En el proceso se te preguntará por el ancho del marco.

Crear Borde Insertado:

Creamos un borde interno insertado en la imagen, es bastante sencillo pero lo utilizo mucho en diseño web. El proceso preguntará por la distancia del borde, debemos colocar la misma distancia las dos veces que lo pregunte.

Redondear Esquinas

Este proceso lo uso mínimo 100 veces al día! El radio de la curva se lo daremos al definir el filtro Gaussian Blur (Desenfoque Gaussiano) cuando la acción lo pregunte. Muy útil para botones =D

Descarga el pack de 3 acciones: Pack Acciones Photoshop

Os hablo de que el otro día tenía muchas imágenes en JPG un viaje con la cámara digital de un amigo, y quería ponerlas en una web, todas con el mismo ancho por razones de estética;  la cámara de mi amigo era un desastre con fotos bajo nubes, así que decidí aplicarle autolevels de Photoshop, que trabaja bastante bien.

Para ello abrimos una imagen para tenerla como base y sobre ella grabar la acción. Lo primero que hice fue crear una acción nueva, en la paleta de acciones, el icono de nuevo en la parte inferior y nombrarla “Resize and Autolevels”.

Luego aplico autolevels (ctrl + L) y ajusto el ancho a 500 px – Este es el paso donde puedes agregar el proceso que necesites aplicar a tu lote de imágenes!

Todo esto mientras la acción se graba, con cuidado de no realizar ninguna otro comando en photoshop, ya que quedará reflejada en la acción que estamos grabando.

Ahora que tenemos nuestra imagen corregida de color y ajustado el tamaño, presionamos el botón de “Detener” – Stop – en la paleta de acciones y cerramos la imagen SIN GUARDAR los cambios.

Vamos a crear ahora el proceso por lotes File -> Automate -> Batch

Seleccionamos nuestra acción “Resize and Autolevels” en Set y Action

Set selecciona la carpeta de las posibles diferentes carpetas en la paleta de acciones y Action selecciona la Acción en concreto a aplicar. En Source tenemos que elegir donde están nuestros archivos, podemos trabajar con archivos ya abiertos en photoshop, pero yo elijo directamente la carpeta donde tengo las 300 fotos. También hay varias opciones para elgir, en una acción pueden haber comandos de Abrir y Cerrrar registrados, puedes seleccionar saltarlos asi no duplicas una apertura de archivo o el Guardarlos como, en nuestro ejemplo nos da igual, no tenemos ni abrir ni guardar en la acción que creamos, de igual manera tengo seleccionada la opción de suprimir advertencias de perfiles de color. Como destino elijo una carpeta nueva, podemos elegir tambien simplemente guardarlos, asi nos guarda los cambios en las imagenes, para prevenir males mayores prefiero guardar una copia en otra carpeta.

Las demás opciones nos permiten jugar con el nombre de las imágenes, numerarlas, ponerles diferentes prefijos al nombre, etc…

NOTA: Si seleccionamos la opción Override action “Save As” command tendremos que ajustar una por una cada una de las imagenes al momento de guardar como JPG si no son JPG. Podemos evitar esto si en la acción agregamos también el comando SAVE AS con los parámetros que mas nos gustan: Osea, después de aplicar el autolevels y ajustar el tamaño, buscamos “save for Web” y guardamos la imagen. Así nos repetirá ese “save for Web” con todas las imágenes en el proceso de lote.

La ejecutamos y ya tendremos una copia de todas las imágenes ajustadas en nuestra nueva carpeta.

Que se puede aplicar en las acciones a poner en procesos de lotes? casi de todo:

Ajustes de tamaño

Ajustes de colores

Cambiar tipo de imagen (JPG TIFF GIF etc)

Cambiar el modo (CMYK RGB B/W)

Incluso cambiar solo el nombre y agregarle una secuencia numérica

y muchos mas, es una herramienta útil que pocas veces utilizamos y que tenemos ahi mismo =)

Then we adapted it to WordPress.Web diseñada para un gran emprendedor de Soria: Animatik, organización de eventos. Intentamos darle un aire medieval a la web con ornamentos y colores fuertes. La web está basada en WordPress, con lo que su contenido es dinámico y administrable por Animatik.

1º Matas unas moscas, con cuidado.
2º Déjalas secar al sol 1 hora.
3º Toma las moscas, agarrate lápiz y papel…y ¡deja fluir tu imaginación!

ç

La creatividad tiene muchas formas de expresión ;)

ver/watch Original Size

Empecemos por decir que SEO no es una ciencia y no siempre sumar dos estrategias dan el mismo resultado. Son ya 10 años desde que pareció el término de SEO y a pesar de toda la documentación disponible, sigue siendo un tema “oscuro” para algunos.   Una de las cosas que más ha evolucionado estos 10 años relativas al SEO es la inteligencia de los motores de búsqueda, de hecho el Bot de Google es tan inteligente que prácticamente “navega” la web como un humano: sabe decidir que sitio es relavante con respecto a que tema y cual es una granja de links. Si quereis evitar que Skynet despierte, ya sabeis por donde empezar…

Sabemos que los elementos más importantes para un ranking alto es contenido + backlinks, pero hay otro elemento sin el cual ninguno funciona: Lógica. Lógica quiere decir que si tu sitio es un bar, no puedes tener un ranking alto en restaurantes ni por el hecho de estar ambos en el mismo campo: Alimentos y Bebidas. Por eso es bueno preguntarnos siempre si tiene lógica que nuestro sitio tenga ranking en palabras concretas (no hacemos nada que salga de primero en restaurantes si tenemos un Bar) Estás cubriendo ampliamente y en profundidad en tu web las palabras claves que quieres meter en ranking? Y de ser así, tienes tu sitio organizado para que los motores de búsqueda lo entiendan?   En el 95% de los casos donde no funciona todo el sistema de Backlinks (y hablamos de miles de dólares invertidos anualmente en una web por backlinks en un alto Page Rank) es culpa del contenido y la estructura de la web.

Crear un contenido estructurado es solo lógica pero aunque suene trillado, vemos muchos websites que obvian esto. Para seguir con el ejemplo anterior, si quieres entrar en ranking con bebidas y comidas tal vez debas crear una página con ambos productos y una breve descripción de cada uno luego para cada producto crea una página con una descripción más amplia incluyendo tal vez algún video e imagen. Para que funcione aún mejor podríamos dividir esas páginas en subproductos (bebidas alcohólicas, refrescantes, etc…) Esta estructura no solo nos ayudará en nuestro ranking por Bebidas (o bares) sino que nos empujará el ranking en Hostelería, ya que el tema está expuesto de una manera que los motores de búsqueda lo tengan fácil para “navegar”.   Este concepto no es para nada nuevo, pero aún así muchas web lo ignoran.

Ahora, no estamos diciendo que simplemente con estructurar la web va a lanzar tus rankings al espacio. Solo decimos que no deberías pensar en BackLinks sin antes haber estructurado todo de una manera SEO-Friendly, osea: Tener en cuenta el In Site SEO antes de ir a por el Off Site SEO.

La web ha evolucionado en los últimos 10 años: de páginas de texto puro a aplicaciones interactivas y desafortunadamentealgunos navegadores (en realidad solo hablo de IE) ya no soportan estas características. Entonces porque no se motivan a las empresas a actualizar? Aún veo empresas con IE 6 y reclamando que su web no es apta para IE6. Vamos, hay muchas opciones:

Google Chrome

Safari

Firefox

Opera

Internet Explorer 7+

Además cada vez menos compañías ofrecen soporte para IE6:

• Google no desarrolla ya aplicaciones válidas para IE6. (Google DOCS y Google SITES no se pueden apreciar desde IE6)
• WordPress acaba de quitar el soporte para IE6.
• Microsoft mismo no da soporte a IE6

Entonces porque no actualizar a un navegador más actualizado y asegurarse la mejor experiencia en internet? Creo que hablo en nombre de todos los diseñadores y desarrolladores cuando le doy las gracias a grandes como WordPress y Google por quitarse ese lastre de encima (y Microsoft que TAMPOCO da soporte a IE6, parte del agradecimiento desde aquí). Recientemente tuvimos un cliente que insistía que su sitio funcionara perfectamente en IE6. Esto requiere esfuerzo y tiempo extra para llevar a cabo, por ende la factura sube y el cliente se molesta, es un proceso redundante. En CoolVillage hemos decidido decir no a ese tipo de peticiones.

Se argumenta que todo depende de la cantidad de usuarios, aún hay sitios que tienen IE6 como el navegador mayoritario entre sus visitantes y abandonar esa parte de la audiencia puede ser determinante para una empresa. Como diseñadores, intentamos las empresas tengan la mejor imagen posible para que los clientes sientan confianza. Programando para IE6 es casi imposible que como empresa que te veas interesante a los ojos de tus clientes, y que te veas actualizado ni hablar. Meterse en una guerra competitiva con otras empresas cuando apuntas a medios desactualizados no es buena idea.
Podemos mantenernos actualizados con la cantidad de gente que usa IE y sus versiones gracias a w3school y como dato importante sólo un 1.3% de un total de 21.7% de usuarios de IE usa IE7. Creo que ya es hora de dejarlo.

Como Mac User (Fanboy dicen algunos) estoy muy contento de no tener nada que ver con IE ya que no es solo el 6, sino el 7 y el 8 los que no soportan estándares modernos como CSS3 y HTML5, recomiendo a todos utilizar FireFox o Chrome, incluso la versión de IE9 es una buena opción; en palabras de Steve Jobs “It just works”.

Elegante, eh?

Lo primero que debe tener una web para jugar a tu favor es dinamismo: No hagas una web estática, básicamente de lo que se trata esto de WEB 2.0 es de interactuar y de ofrecer contenido, pon un blog en tu web, una sección de preguntas y respuestas interactivas o incluso una página para comentarios de los clientes.

A muchas empresas no les gusta esa opción por los problemas que pueda generar con sus clientes descontentos, pero si haces las cosas bien no hay porque temer y esto ayudará a tu web en muchos aspectos:

1-. A Google le gusta las páginas que se mueven: mientras más actualices con palabras claves en tus temas más tendrá Google en cuenta tu web.

2-. Al generar contenido constantemente generas un motivo a tus clientes para volver.

3-. Creas confianza en tu empresa y un canal de comunicación con tus clientes y, sobretodo, posibles clientes.

Un canal de comunicación.

De esto es de lo que se tratan las redes sociales, de crear un canal de comunicación sólido con potenciales clientes. Tu empresa puede tener una imagen y no transmitirla por lo que debes crear una buena estrategia de marketing en Facebook, Twitter y demás social networks (incluida esa sección dinámica de la que hablamos al principio).

Son acciones complicadas que muchas veces requieren ayuda profesional y no hablo de un Social Media Expert: personalmente jamás contrataría a un “Community Manager” ya que estoy de acuerdo con quien dice que estamos cometiendo el mismo error que en la era de los .com: pon uno en tu empresa y eso te dará credibilidad. Mentira.

Pero para que nos sirve tener 5.000 fans y 10.000 “followers”? Es la norma básica de la publicidad: Donde cuesta más un anuncio en la tele? en un canal regional o en uno nacional? El nacional seguro lo verá mucha más gente que el regional y este mismo efecto se traduce a esa carrera por obtener seguidores en las redes o blog. Con una diferencia: tu eliges tus seguidores y cuando promociones tu empresa en Facebook o Twitter irá dirigido a tus seguidores, quien de verdad está interesado en el producto.
Una promoción bien llevada en internet puede generarte la misma cantidad de clientes que con medios convencionales con mucha menos inversión. Gaby Castellanos habla en su Blog de la eficacia de vender o gestionar compras gracias a la influencia de tu empresa en las redes sociales.

Con un incremento tan elevado en tu target gracias a Internet, vas a dejar que tu web siga siendo un trozo de papel escondido? Promociónala!

Diseño del cartel de las fiestas de primavera basado en los espectáculos que recorrerán la ciudad: Moros y Cristianos, Gigantes y Cabezudos, Malabares, Pirotecnia…

El diseño tiene influencias de Art Nouveau en sus motivos ornamentales vegetales como guiño a la primavera y algo de inspiración del pintor Mucha en las protagonistas del cartel con sus tintas planas y rebordes acentuados.Diseño del cartel de las fiestas de primavera basado en los espectáculos que recorrerán la ciudad: Moros y Cristianos, Gigantes y Cabezudos, Malabares, Pirotecnia…

El diseño tiene influencias de Art Nouveau en sus motivos ornamentales vegetales como guiño a la primavera y algo de inspiración del pintor Mucha en las protagonistas del cartel con sus tintas planas y rebordes acentuados.

En Cool Village tenemos siempre unas pestañas abiertas en nuestro Chrome (planteando pasarnos a Firefox4) que nos facilitan el proceso de diseño web: Fuentes, Diagramación, Colores, Efectos CSS y más… SOn servicios gratuitos que se encuentran en internet y a los cuales nos hemos acostumbrado hasta casi no trabajar sin ellos.

Color Scheme Designer

Esta herramienta nos facilita elegir colores. Cuando un cliente quiere un determinado color, tenemos que saber con qué colores se puede complementar la web: colores de links, fondos y demás elementos. Andrea como buena Licenciada, se sabe de memoria que colores son complementarios, opuestos, cálidos, etc… pero yo tengo memoria de pez y esta herramienta es genial para decirme  que colores combinan y cuales no, antes hacía webs verdes con azul! (tengo que listarla en el post anterior).

CSS3 Generator

Si eres de los que le gusta el Copy&Paste y odias escribir todo ese código, recargar la web, ver como queda, volver a guardar, recargar, etc. aquí tienes un generador de código CSS3, ajustas los valores y el generador te va dando el resultado en el área de previsualización.Te permite crear código CSS3 para:

• Sombras a cajas
• Sombras a texto
• Bordes redondeados
• RGBA (Colores con transparencia)
• @font-face (fuentes predeterminadas)
• Múltiples columnas dentro de una caja
• Box Resize y Box Sizing
• Outline (borde exterior)
• Transiciones
• Transformar (distorsión, cambiar de ángulo, tamaño, etc…)

Font Springs

Fontspring te permite bajar fuentes gratuitas o de pago y te genera el código crossbrowser @font-face para tu web, muchas opciones entre las fuentes y puedes comprar fuentes sin necesidad de una suscripción.

0 a 255

Es quizás la herramienta que más utilizamos: le decimos un color en hexadecimal y nos pone toda la gama de negro a blanco para poder hacer links del mismo color pero más oscuros, o fondos sobre contenedores de la misma gama de colores. Un simple click y ya tienes el código hexadecimal copiado al portapapeles.

Font Tester

Font Testes es un generador de estilos de fuentes en CSS, tienes 3 áreas para editarlas por separados y editar los estilos. Puedes copiar el código listo para pegar en tu elemento CSS. Además tiene  el lujo de mostrarte un previsualizador de web safe fonts (algunas no tan ‘safe’) para que elijas que fuentes quieras testear. una herramienta muy completa.

Y de regalo, nuestra herramienta estrella:

What The Font (WTF)

¿Alguna vez te ha llegado un cliente con “quiero esa fuente”? o “me lo hizo un chico pero no se que fuente es”? en esos casos suele ser Comic Sans, pero si alguna ves no es Comic Sans aquí tenéis una herramienta con la que con solo subir una imagen de la fuente, te dice (la mayoría de las veces) que fuente es. Eso si, intenta hacer caso a sus consejos para subir la imagen, debe tener buena resolución y que se vean los detalles.

A nosotros estas 5+1 herramientas nos vienen de perla mínimo una vez al día cada una. Y vosotros cuales usais?

¿Quién no ha visto una web y ha dicho “mis ojos mis ojos”? todos por seguro. Sabemos ya lo importante que es la presencia en internet, lo que puede ayudar a tu empresa a posicionarse en este siempre competitivo mercado pero entonces, porque hay tantas empresas que dejan de invertir los recursos apropiados en su presencia online?

Los casos no suelen limitarse a empresas pequeñas, hemos visto casos de grandes compañías que se niegan a invertir en una web en condiciones y aún estamos buscando los motivos, no pensamos que sea por desconocimiento, a estas alturas de la vida, de la importancia de internet para tu empresa.  Hay empresas que se niegan a crear una web, entendible si tienes la filosofía de “Internet es una moda pasajera” pero hay otras – lo cual es peor – que han invertido en su web y le dan la misma importancia que un tríptico en la caja de reciclaje. Creemos que una web debe ser dinámica, debe llegar al público y no esperar a que el público le llegue, tiene que usar las herramientas que internet ofrece para expandirse: Google, Redes Sociales, buen diseño, usabilidad, gancho, etc…

¿Pero de verdad hay empresas que no se dan cuenta que su web es parte importante de la estrategia comercial? por supuesto. Hay muchas webs con puntos que pueden ser reforzados para formar parte del engranaje de marketing de la empresa, webs con errores básicos en su usabilidad y contenido.

Estrategia: Debemos tener en cuenta que una web es como una tarjeta de presentación y no sirve de nada crearla y dejarla guardada en un cajón. Debe tener una estrategia de expansión: SEO, Redes Sociales, boca a boca, o cualquier método preferido; pero hacer una inversión en una web para no darle difusión es tirar el dinero.

Diseño: Como es el caso de la ropa los diseños de las webs deben cumplir con la tendencia actual, ser creativos; patrones de texturas agresivas como fondo ya no se llevan, botones que arropan el texto y dificultan su lectura tampoco. Para referencia tenemos estos 25 ejemplos de diseños CSS.

Contenido: El contenido debe acompañar el desarrollo de la web. El sitio web debe “moverse” y actualizar el contenido periódicamente. Las ventajas de este dinamismo son principalmente la fidelización del público y la implementación SEO (a Google le encantan las webs que se mueven).

Expansión: La web tiene que aprovechar los medios que ofrece la red para expandirse. Debe aprovechar el impulso que dan las redes sociales y promover tu empresa, siempre se ha dicho que el boca a boca es la mejor publicidad y ahora está al alcance de nuestras manos ponerlo a prueba.

Código: Igualmente esto está muy dicho, pero aún hace falta recordarlo: Diseños Tableless, usa CSS, diagrama con capas y usa estilos en archivos externos. Recuerda que cada línea de código es tiempo de carga así que optimiza tu CSS y HTML para el tiempo de carga, crossbrowser y W3C válido.

En resumen tenemos una web para sacarle provecho, para que nuestra empresa le saque provecho, no podemos ni debemos crearla y dejarla ahí esperando que alguien venga y la visite. Eso no genera ganancias a nuestra empresa.

Sin embargo hay varias empresas que prefieren no actualizar ni “retocar” los errores en sus webs corporativas y hemos visto muy al límite de lo permitido, desde efectos predefinidos en photoshop y fuentes como Comic Sans hasta diagramaciones sin lógica alguna. UNA LOCURA! xD

Esta es una web de un Centro Comercial (Centro Comercial Las Camaretas) importante en Soria, España y se puede ver que el diseño peca de obsoleto.

Si, es Comic Sans.

Podemos aplicar todos los fallos arriba enumerados para mejorar esta web, que obviamente no aporta ningún desempeño en el papel del Centro Comercial como empresa.

La siguiente web (http://www.extintoresdelcastillo.com/) está hecha en flash totalmente, lo que impide su desarrollo en campañas de SEO o expansión en redes sociales:

Hay una web muy atractiva para ver ejemplos de diseños que no debemos hacer: Los peores webs sites del 2010. Podemos pasarnos por ahí a reirnos un rato, pero sobretodo a tomar ejemplos de lo que NO debemos hacer.

Y vosotros que opinais? Vale la pena tener una web sin que se le pueda sacar provecho? Renta tener una web aunque sea con errores básicos de concepción?

Diseño minimalista para la fotógrafa soriana Teresa Buberos, adaptado a WordPress para que pueda gestionar su contenido.

Diseño de Landing Page, una pestaña para videos y en general FanPage de la cuenta de Rocka Sonora en Facebook, el diseño del fondo de Twitter así como el de Youtube

Pero si la cosa es así, porque cada dia cuesta más crear un diseño? espero no ser el único al que la parte creativa le toma más tiempo que la ejecución de un proyecto! bueno, miento, eso era antes. Porque señores yo, lo confieso, ROBO TODAS MIS IDEAS!ninguna idea es mia!! es extraida, modificada y adaptada de algún proyecto similar que me gustó mucho y por esa razón en mis Marcadores de Chrome tengo el 90% de webs que me gustan contra un 10% de webs que me proporcionan herramientas para el diseño. Pero es que básicamente para herramientas utilizo 3 o 4 y para “Robar” utilizo unas 100.

Robar. Estoy robando bajo una patética excusa de inspiración? o es moralmente aceptable el tomar “ideas” o “conceptos” prestados de otras personas y ejecutarlos de manera diferente para que parezcan tuyos? no me malinterpreteis yo a veces me curro mis conceptos, todos los tutoriales que vendrán a esta web son mios o creados entre amigos, pero eso es crear soluciones a problemas, no es crear una obra de arte. Vamos, que me siento estafado, YO QUIERO MI CREATIVIDAD! tal como la tenia van Gogh, como la tiene Bill Gates, si, porque la creatividad no son solo brochazos o tirar trozos de yeso en una escultura, también es idearte una forma de desarrollar tu empresa.

Poseo un poco de técnica y ejecución, si me tiro mierda también he de reconocer donde tengo cualidades, estos tutoriales dejan claro que la teoría la tengo estudiada , pero es una teoría que aprendí de otros. Son técnicas que desarrollé por problemas que encontraba en esas teorías, y hablamos solo de Photoshop, HTML, CSS o Javascript muchas de esas técnicas son obsoletas con los filtros o programas pre-construidos encontrados hoy dia. Osea, no es un gran logro.

Pero vamos a la parte positiva de todo esto, y es lo que os puede servir algún dia a vosotros si pasais por esta crisis de non-creativity life. Mis Favoritos! Olé xD

Tengo una sección de CSS que siempre reviso para hacerme una idea de como quiero que esté diagramada la web, eso si no la tengo ya definida por haberla robado en otra web en cuyo caso la reviso para pillar directamente el layout que mas me conviene xD

http://www.csseasy.com/

http://www.bluerobot.com/web/layouts/

http://www.glish.com/css/

http://www.araudi.net/

Y algo que hago muy a menudo, es mientras agarro sueño o me tomo un café, es revisar tutoriales de efectos de diversas webs, así veo un poco como se lo curran otros y que podría hacer yo con eso. Que webs visito para eso? Pues para código:

http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html

http://www.dynamicdrive.com/

http://css.maxdesign.com.au/

http://www.darioferrer.com/

Y para diseño:

http://elitebydesign.com/50-must-read-resources-for-incredible-web-design/

http://www.smashingmagazine.com/

http://www.hongkiat.com/blog/41-nicest-photoshop-photo-effects-photoshop-tutorials/

http://bgpatterns.com/

http://psdtuts.com/

http://pshero.com/

http://vandelaydesign.com/blog/design/photoshop-lighting-effects/

http://designreviver.com/tutorials/50-excellent-body-enhancement-photoshop-tutorials

http://wydstudios.com/blog/mega-tutoriales-para-photoshop-mas-de-100/

http://www.photoshoproadmap.com/Photoshop-blog/2008/04/01/100-wonderful-photo-effects-photoshop-tutorials

http://www.colourlovers.com/

http://www.photoshopstar.com/

Y muchos mas, pero son estos los que más reviso, los que más recursos tienen. Tengo otra sección interesante de técnicas específicas que me gustan, pero son para casos concretos: como crear gotas de agua, como crear superposición de texto con CSS y cosas por el estilo. Todas para robar, TODAS!

Es culpa de mi madre o mi padre que me dieron estos genes cutres y me obligan a robar =(

Ahi os lo dejo, porsi os quereis unir al club.

Saludos!

UPDATE: Aparte de estos links, también he publicado mi lista de Bookmarks para que os sirvan de referencia y apoyo.

Pequeña viñeta con Wakkos y Sombrerera al mas puro estilo “Real Life”! (click para ver en grande)

=D

Imagen vectorial de uno de mis tantos dibujos de Alicia y el Sombrerero Loco, haz click para ver en grandote!

Design and layout (CSS, JavaScript y some API from Google for Google Maps) The slideshow was made with a premade script: Jon Design Smooth Gallery.

Diseño y diagramación (CSS, JavaScript y alguna API de Google para el Google Map) aunque para llos slideshow de imágenes nos pareció genial el Script de Jon Design Smooth Gallery. Totalmente gratuito y adaptable a nuestro proyecto.

Estos diseños fueron realizados para el bar La Pinta, en Soria, para darles un poco de imagen interna al bar. Aún faltan por terminar algunos otros, pero de momento, estos están ya colocados en el Bar.

Fueron dibujados y luego digitalizados y tratados (en Photoshop, obvsly xD)

Tarjeta de presentación para una compañía de Las Vegas,

Era complicado ya que lo que es el ratón va troquelado y a ese tamaño pocas imprentas lo hacían.

El diseño ganó el concurso en  99designs después de varios intentos:

intento3

intento 2

Intento 1

Con la nueva gerencia del camping quisieron darle una imagen diferente al típico tríptico con logo y mapa que tenían anteriormente, así que buscamos salidas con verdes y pequeños “znippets” del camping en sí.

Cliente: Camping fuente del Botón

Diseño: Tríptico A4, 4+4 colores, a dos caras.

Técnica mixta. Cuadro empezado con acuarelas y café, finiquitándolo en Photoshop

Viva la Experimentación!!!!

A la Sombrerera siempre me han gustado las mujeres rollizas.

Esta ilustración fue hecha en digital con Photoshop con un tableta a media marcha