Cómo hacer una imagen dinámica php

Seguro que no lo recordaréis, pero hace tiempo hice un tutorial sobre como hacer una imagen que cambia cada vez que actualizas. Lo que sucede es que ese tutorial ya no sirve, porque por cuestiones de servidores malos y cambios en código, el código que allí aparece ya no funciona.

Así que, aquí lo tenéis, otro tuto sobre como hacer una imagen que cambia cada vez que la actualizas, una imagen dinámica. Gracias a @_rayko_ de elotrolado.net por su ayuda T_T. Comencemos.




Necesitarás:
El bloc de notas de windows o similiar
Un servidor para subir archivos. Por mi parte usaré 000webhosting.
Las imágenes que quieres usar
En cuanto lo tengas todo, empezamos.

1- Consiguiendo el código
Con el bloc de notas abierto, copia el siguiente código y pegalo. Es un código más sencillo que el que antes usaba.


<?php $ruta = "./imagenrot/"; $files = scandir($ruta); unset($files[0]); unset($files[1]); shuffle($files); header("Content-type: image/jpg"); readfile($ruta.$files[0]); ?>

2- Imagenes

Cómo hacer una imagen dinámica php

Este tutorial ya no es funcional. Por favor, entra aquí para ver uno mejor

He recibido unos cuantos emilios preguntandome como he hecho para que la imagen que veis aquí abajo cambie cada vez que actualizas la página. Es muy sencillo realmente, y hay distintas formas, pero yo uso la siguiente que me permite seleccionar imagenes específicas. Pues, sin más, comencemos.




Necesitarás:
Un servidor donde poder subir archivos. Recomiendo por ejemplo lycos tripod, o multimania, que es el que yo uso.
Un programa para escribir.
Las imágenes que quieres usar
Y, ahora que lo tenemos todo, pasemos a empezar.

1- Consiguiendo el código
Abre el programa tipo bloc de notas, y pega lo siguiente:



<?php function imagenaleatoria ( $array ) { $total = count($array); $call = rand(0,$total-1); return $array[$call]; } $imagenes = array ( "acloud.gif", ); header("Content-type: image/gif"); readfile(imagenaleatoria($imagenes)); exit; ?>

2- Elige tus imágenes.
Ten en cuenta que este código está pensado para imágenes con extensión .gif. Si quieres añadir otro tipo de imagenes (como por ejemplo .png o .jpg), tendrás que cambiar en la línea de código donde pone ("Content-type: image/gif"), la palabra gif por la extensión de las imagenes que usarás.

3- Eligiendo imágenes.
¿Ves donde pone "acloud.gif",? Bien, pues cada vez que añadas una línea similar, tendrás una imagen nueva. La cosa es copiar y pegar hasta la coma, y luego cambiarle el nombre a la imagen por el de la nueva imagen. Puedes repetir ese proceso todas las veces que quieras, cada nombre representa una de las imágenes, y se elegirá una aleatoriamente para mostrarse cada vez que actualices.

4- Guardar y subir
En cuanto lo tengas hecho, guárdalo con el nombre que quieras, pero con extensión ".php". Nada de ".doc" o ".pdf". Solo "nombreimagen.php"

Ahora, solo queda subir este archivo .php a nuestro servidor, así como las imágenes, y situar el archivo y las imagenes en una carpeta que llamarás "imagenes". Puedes cambiar el nombre de la carpeta por otro si cambias en el archivo .php la parte donde pone $imagenes por cualquier nombre de la carpeta donde subirás tus archivos.

5- Mostrar
Como último paso, probemos la imagen. Tienes que copiar la ruta donde has subido el archivo .php, por ejemplo el mío se llama tocamela esta en animally/imagenes, por tanto, la dirección es http://usuarios.multimania.es/animally/imagenes/tocamela.php Adelante, probad el link, y actualizadlo. La imagen cambiará.

Espero que os sirva de algo, si hay dudas comentadlas.

Qué escribir en el blog si no sabes qué escribir

Llevo ya unos días que no tengo ni idea de que deciros. Además, no solo no sé qué deciros, sino que no he tenido tiempo para ello, porque están bombardeandonos a exámenes. Así que, se me ha ocurrido deciros que hacer cuando por lo que sea, no sabes de que hablar en tu blog si te quedas atascado.

¡Hola! Soy una imagen que no tiene nada que ver con este artículo ni con la realidad, ¡alabadme!

▲ Cambia el tema de tu blog, aunque solo sea durante una entrada, y habla sobre algo que nada o poco tenga que ver con el resto.

▲ Pon una ayuda, un tutorial. Puede ser sobre cualquier cosa, desde un código algebraico matemático supercomplejo que se acaba de descubrir y quieres mostrar paso a paso como se puede llegar a ese código, hasta un tutorial sobre como abrir una puerta, pasando por tutoriales de photoshop, de funciones del blogs, etc. Esto mismo es una ayuda para todos el que no sepa que decir. También puedes explicar como has hecho algo y quieres mostrarlo al resto paso a paso, como por ejemplo como has vencido al malo maloso de ese juego tan difícil.

▲ Haz una opinión de algo, de cualquier cosa, opina sobre ese juego nuevo que te has comprado, sobre esos altavoces que se te han roto, sobre otros blogs. Es interesante dar tu opinión sobre temas que crees solo te conciernen a ti, más veces de las que crees muchos coinciden contigo.

▲ También, puedes criticar negativamente algo. A poder ser, de forma constructuva. ¿Que a todos les gusta fumar porros y a ti no? Pues critícalo, habla de porqué no te gusta, y pon ejemplos de porqué a nadie debería gustarle.

▲ Analiza algo. Ojo, que analizar no es lo mismo que opinar o criticar y decir que te gusta o no, por muy razonadas que estén tus opiniones. Puede ser de cualquier cosa, desde un videojuego, hasta una nueva funcion de internet, explicando de que va, luego sus pros y contras, y evitando las notas, porque la gente tiende a guiarse por el cuatro o el ocho con el que has calificado algo y pasa de leer tu currada, con lo que su visión se basa en un número y no en las caracteristicas de lo que has analizado. Todos conmigo, no a las notas.

▲ Habla de ti e inspírate en lo que te pasa. Hay mucha más gente de la que crees que se interesa por que te pasa durante tu día a día. Además, quizás te pase algo interesante que te lleve a hacer una opinión de algo o te de una idea de que hablar.

▲ Pregúntale a los lectores, hazles partícipes. Puedes conseguirlo haciendo una encuesta de algo, haciendo un listado, un top de lo que quieras...

▲ Reflexiona sobre antes y ahora, es decir, haz una entrada nostálgica, como por ejemplo sobre los Tois de Bollycao, o lo bien que te lo pasabas con un trompo y ahora ningún chaval sabe qué es.

▲ Cambia como haces tus entradas. Por ejemplo, en vez de escribirla, háblala, haz un video aunque nos salga tu cara, u opinina doblando un personaje de una peli o algo.

▲ Invéntate cualquier cosa, una historia paranóica, una tira cómica, inicia un meme, muestra una idea sobre como podría ser y que pondrías en la nueva consola que va a salir...¡lo que quieras!

▲ Y claro, por último, te queda la opción de no escribir nada. Pero ten cuidado, si tienes acostumbrados a los lectores a leerte a diario, esta opción se limita a quizás como mucho 3 días sin escribir, así que cuidado con abusar de esto.

Pues con esto damos por acabada otra entrada. De recomendado visionado es este otro artículo en el que se habla de como aumentar las visitas de tu blog, que muy seguramente es complementario a este.

¿Alguna idea más?

Slideshow de artículos destacados

Pase de imagenes con links a entradas que creas importante, también se podría llamar así.


Como vereis, he añadido ahí al lado un script dinámico, un pase de imagenes, un slideshow, pero con links hacia entradas que más relevancia creo que tienen. En realidad, es fácil de hacer, todo es cuestión de ponerse un rato con css y html...pero os lo simplificaré para que podais añadirlo en vuestro blog. Está hecho con jquery, con el plugin s3slider, y es válido para Blogger, Gamefilia, Wordpress, y cualquier web. Además pesa poco.

Preparativos
Antes de hacer nada, os recomiendo que tengais un dominio web, en mi caso uso tripod, podeis usar los links de mi dominio pero no lo recomiendo. Necesitas descargar este archivo, y subir a tu dominio los archivos “jquery.js” y “s3Slider.js”. Una vez hecho esto, copia los links de la ubicación de esos archivos.

HTML
Ahora empezamos con HTML. En primer lugar decir que todas las imagenes que subas deberán tener el mismo tamaño que especifiques en css más abajo, si no lo haces darán lugar a deformaciones. Y sin más, pega los links de los archivos que deberías haber subido, tal y como está lo rojo sobre /head:

<!-- Archivos slideshow -->
<script src='http://usuarios.lycos.es/animally/show/jquery.js' type='text/javascript'/>
<script src='http://usuarios.lycos.es/animally/show/s3Slider.js' type='text/javascript'/>
<!-- Archivos slideshow -->
  </head>

Ahora, bajo body, pegamos lo siguiente. el valor 4000 se refiere a los milisegundos entre imagen e imagen.

  <body>
<!-- Archivos slideshow -->
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<!-- Archivos slideshow -->

El siguiente lo ponemos sobre ]]>. En este hay varias variables que determinarán nuestro slideshow, como la fuente de letra que usará, el tamaño de las imagenes, la posición de la barra descriptiva...así que cambialas a tu gusto, o déjalas como están y tendrás el mismo slideshow que yo.

El siguiente tiene las imagenes de 200x120 y el texto en la parte inferior.

<!-- Archivos slideshow -->
#s3slider {
width: 200px; /* mismo ancho que las imagenes */
height: 120px; /* misma altura que las imagenes */
position: relative; /* importante */
overflow: hidden; /* importante */
}#s3sliderContent {
width: 200px; /* mismo ancho que las imagenes */
position: absolute; /* importante */
top: 0; /* importante */
margin-left: 0; /* importante */
}

.s3sliderImage {
float: left; /* importante */
position: relative; /* importante */
display: none; /* importante */
}

.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 200px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad de la caja de texto */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;

/*
si pones
top: 0; -> la caja de texto se mostrará en la parte superior
si pones
bottom: 0; -> la caja de texto se mostrará en la parte inferior
*/
}

.clear2 {
clear: both;
}
<!-- Archivos slideshow -->
]]></b:skin>

Poniendo el Slideshow

Una vez configurado eso, vamos a ponerlo (elementos de página en Blogger, gadget HTML/Java). Para ello, pegamos lo siguiente:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://TUENLACE1"><img src="http://TUIMAGEN1"/></a>
<span>Imagen 1 sobre X temar</span>
</li>
<div class="clear2 s3sliderImage"/>
</ul>
</div>

¿Veis la parte de <li class="s3sliderImage"> hasta </li>? Esa es la parte correspondiente a una imagen y un link más una pequeña descripción. Así que, cuantas más veces pegues esa parte, más imagenes usarás. Recomiendo un máximo de 8 imagenes, para no tener líos. Yo uso 5, y me queda el código del elemento así:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/11/card-sagas-wars.html"><img src="http://img690.imageshack.us/img690/8950/41109.gif"/></a>
<span>Ahruon y Orkimides, son los...</span>
</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/11/en-esta-generacion2.html"><img src="http://img690.imageshack.us/img690/1953/21109.gif"/></a>
<span>Y bueno, todavía quedaron c...</span>

</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/10/tanda-de-videos-24-malas-elecciones.html"><img src="http://img11.imageshack.us/img11/6619/241009.gif"/></a>
<span>Lo que parece bueno muchas...</span>

</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/10/megaman-9-analisis-e-impresiones.html"><img src="http://img687.imageshack.us/img687/7881/211009.gif"/></a>
<span>Por hablar de algo, hoy os...</span>
</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/10/jueguiles-gratuiles-ii-runman-el-sonic.html"><img src="http://img23.imageshack.us/img23/147/41009.gif"/></a>
<span>Para que luego digan que lo...</span>
</li>
<div class="clear2 s3sliderImage"/>
</div></ul></div>

Y el resultado, es el que veis a la derecha arriba.

Como veis es fácil de hacer, confio que os sirva de ayuda, no tenía otra cosa que hacer que escribir esto.

Nos vemos, nakamas.

Tutorial de PixelArt 3-3

Continuación de Tutorial de PixelArt 2-3

Parte 7: Dithering

La conservación del color es algo de lo que los spriters debemos preocuparnos mucho. Una forma de conseguir más sombras sin usar más colores es el "dithering" (punteado). Parecido al entramado en el arte tradicional, coges 2 colores y los intercalas para obtener, en todas las ocasiones, una unión a pasos de 2 colores.

Ejemplo simple

Una pequeña muestra de como usar dos colores para crear diferentes tipos de sombras haciendo dithering.

Ejemplo avanzado


Compara la imagen superior, realizada usando la herramienta de degradado de Photoshop, y la inferior, con sólo tres colores mediante dithering. Fijate en los diferentes modelos que hemos usado para crear los colores intermedios. Experimenta con otros patrones y escalas para conseguir más texturas.

Usando el Dithering

El dithering puede darle a tu sprite un carácter retro, debido a que muchos juegos viejos debían hacer dithering a fondo debido a su limitada paleta (los juegos de Sega Genesis tienen muchos ejemplos de dithering).No es algo que use muy a menudo, pero para aprender, aquí lo tenemos aplicado (muy aplicado) a nuestro sprite.


Puedes usar el dithering tanto o tan poco como quieras, pero, ciertamente es una técnica difícil de dominar y pocos lo hacen excepcionalmente bien.

Parte 8: Contorno Selectivo

El contorno selectivo o "selout", es como sombrear en el contorno. En lugar de usar el negro en toda la línea, usamos colores cercanos al interior del sprite.También, vamos variando el brillo del contorno alrededor del relleno del sprite, usando como fuente de luz la que nos dan los colores aplicados.

Hasta este punto, hemos mantenido el contorno negro. Y no hay nada malo en ello, de hecho el sprite se ve bien y mantiene bien separado las zonas del sprite de las circundantes (las que están cerca). Pero al usar el negro, sacrificamos más realismo del que realmente queremos, porque le da un estilo "dibujos animados". El selout es una buena forma de evitar eso:


Te habrás fijado en que además he usado el selout para suavizar los pliegues de los músculos. Nuestro sprite empieza a parecer un todo coherente, en vez de una masa de piezas separadas. Compáralo con el original.


Parte 9: Anti-alias

El anti-alias funciona bajo una norma: añadir colores intermedios a los finales de la línea que la suavicen hacia fuera con respecto al color de fondo. Por ejemplo, si tienes una línea negra en un fondo blanco, entonces añadirás píxeles grises a los bordes de la línea suavizandola hacia fuera. Parece raro, pero en realidad es simple.

Técnica 1: Suavizando curvas

Generalmente, añadirás tus colores intermedios en los bordes, porque es donde la línea se rompe y se ve desigual. Si sigue viendose desigual, añade otra capa de píxeles más ligera. Manten tus capas intermedias fluyendo en la dirección de la curva, de suave a fuerte.

Bueno...No creo que pueda simplificarlo más de como lo he explicado sin complicaros las cosas. Mira las imágenes y lo verás más claro


Técnica 2: Rodeando los bordes


Técnica 3: Suavizando finales de línea


Usando el anti-alias

Apliquemos la técnica al sprite. Ten en cuenta que si quieres que el sprite se vea bien en cualquier fondo, no debes usar antialias en los bordes exteriores. Si no, verás un lamentable especie de "halo" alrededor del sprite y contrario al fondo, haciendo que se vea tan feo como pegarle a tu padre con la escobilla del báter en navidades a las 7:30 mientras andas desnudo. A menos que el color de fondo no desentone mucho...

El efecto, como ves, es poco apreciable, pero marca la diferencia.

¿Por qué hacerlo a mano? ¿No es mejor con filtros?
Quizás te preguntarás ¿por qué no hemos usado simplemente un filtro de nuestro programa de dibujo para que parezca más suave? La respuesta es que ningún filtro conseguirá JAMÁS un acabado tan limpio como el que tienes al hacerlo a mano. Así tienes el control total, no solo sobre el número de colores usados, sino también donde los usas. Y tu sabes mejor que cualquier filtro que áreas deben ser suavizadas, y que áreas van a perder su calidad pixelada al hacer anti-alias.

Parte 10: Acabado

Bueno, quizás ya sea hora de que dejes un momento el ordenador y te tomes una bebida bien fría...¡pero no te relajes aún! La última parte separa a un novato entusiasta de un veterano experimentado.

Frena y fijate en tu sprite. Puede que aún sea un poco "áspero". Tomate tiempo para perfeccionarlo y afinar cada detalle. En vez de fijarte en lo cansado que puede ser, tómatelo con diversión, como si fuese un juego. Añade esos pequeños detalles que faltan para hacerlo más perfecto. Aquí, es donde se muestra tu experiencia y habilidad pixelando.


Quizás te preguntes porqué los ojos de Lucha Lawyer estaban perdidos todo este tiempo, o quizás porqué el papel estaba en blanco. Bueno, eso es porque eran pequeños detalles que he dejado para el final. Fijate también en las líneas que he añadido a sus muñequeras, las arrugas del pantalon y...bueno, ¿que es una persona sin pezones? También he oscurecido la parte baja del torso y así parece que su mano está más alejada del cuerpo

¡Ya está! Nuestro Lucha Lawyer tiene un peso lumínico de 45 colores (o más pesado, dependiendo de tu paleta) y mide aproximadamente 150x115 píxeles. ¡Ya puedes tomarte esa bebida!

Proceso al completo
Las cosas animadas son siempre divertidas, este gif te muestra la evolución del sprite.


Temas de cierre
1- Aprende los fundamentos del arte y practica con medios tradicionales. Toda la habilidad que tengas sobre dibujo y pintura afectará a tu forma de pixelar.
2- Empieza con sprites pequeños. Lo difícil es cómo meter un montón de detalles en tan pocos píxeles, no hacer sprites enormes (más complejos y trabajosos)
3- Fijate en obras de otros y no tengas miedo de ser poco original. Imitar el trabajo de otros es la mejor forma de aprender. Lleva tiempo conseguir tu propio estilo.
4- Si no tienes una tablet, hazte con una. El hacer clicks repetidamente haciendo que te lleve más tiempo y el stress que conlleva y hayas tenido que pasar no impresionará a las chicas (o los chicos, si quieres) ni a nadie, solo el resultado. Yo uso un Wacom Graphire2 pequeño, barato y viejo que me va muy bien (queda muy bien en la habitación sobre el escritorio y es muy portatil). Quizás con una tablet mayor te sientas más cómodo, ¡pero pruebalas antes de decidir!
5- Comparte tus trabajos con otros y recibe consejos y opiniones. Y quién sabe, ¡quizás conozcas nuevos amigos como tú!
6- Y si consigues dinero con esto del pixelado y el sprite...¡dame algo, que te he ayudado!

///

Y aquí acabamos. Le agrdezco a todo aquel que haya seguido este tutorial si confianza, y a todos aquellos que me han ayudado a entenderlo mejor para traducirlo bien.

Si por alguna razón algo no lo entendeis u os resulta difícil, comentad, encantado intentaré ayudaros.

¡Nos vemos!

Tutorial de PixelArt 1-3
Tutorial de PixelArt 2-3
Tutorial de PixelArt 3-3

Tutorial de PixelArt 2-3

Continuación de Tutorial de PixelArt 1-3

Parte 4: El esquema

Un contorno negro nos proporciona una buena estructura básica para el sprite, por lo que es el lugar perfecto para empezar. La razón por la que elegimos el negro es que es agradable y oscuro. Más tarde, os mostraré cómo se puede cambiar el color de las líneas para darle más realismo.

Dos vistas

Hay dos maneras de abordar el esquema, dibujando el contorno a mano alzada y luego limpiarlo, o ir colocando los píxeles como quieres desde el principio. Ya sabes, con "clic, clic, clic".

El enfoque que uses depende del tamaño de los sprites y tu habilidad al pixelar. Si un sprite es muy grande, es mucho más fácil de trazar las líneas a mano alzada para obtener la forma general y luego limpiarlo mejor que intentar hacerlo bien la primera vez.

En este tutorial, vamos a crear un sprite bastante grande, así que voy a usar el primer método. Es más fácil ilustrarlo con texto e imágenes.

Paso 1 - Esquema en seco
Usando el ratón o la tableta, haz un boceto para el sprite. Asegúrese de que no es muy en seco, aunque debería parecerse más o menos al estilo final que necesitas.

En este caso, el esquema está basado en mi sketch

Paso 2 - Limpiando el esquema
Primero, haz zoom hasta más o menos 6x o 8x de aumento, así podrás ver cada pixel claramente. Luego, ¡a limpiar el esquema! En particular, debes borrar esos pixeles perdidos (tu esquema solo debe tener un pixel de grosor en su contorno), después elimina cualquier escalón y jaggie, y añade los detalles que hayas pasado por alto en el Paso 1.

Incluso sprites grandes no suelen superar los 200x200 px. La frase "hacer más con menos" nunca suena más cierto que cuando pixelamos. Y pronto te darás cuenta de que un pixel puede marcar la diferencia.

Manten tu esbozo con simpleza. Los detalles aparecerán más adelante, pero por ahora, concentremonos en definir las "grandes piezas", como las partes de los músculos, por ejemplo. Puede parecer poco, pero la paciencia es la madre de la ciencia.

Parte 5: El color

Teniendo ya el esquema, tenemos una gran gama de colores para usar. El cubo de pintura y otras herramientas de relleno harán que sea aún más fácil. Escoger los colores puede ser un poco más difícil, y la teoría del color es un tema que está fuera del alcance del tutorial. Sin embargo, aquí hay algunos conceptos básicos que son buenos para saber.

HSB Color Model

HSB significa (H)ue, (S)aturation, y (B)rightness. Es uno de una serie de modelos de color (es decir, representaciones numéricas de color). Otros ejemplos son RGB y CMYK, de los que quizás has oido hablar. La mayoría de los programas gráficos usan HSB para elegir colores, así que vamos a analizarlo:

Hue - Viene a ser el "color". Ya sabes, eso del "rojo", "magenta", "cián", etc

Saturation - ¿Como es de intenso nuestro color? 100% de saturación le da el color más brillante y, a medida que disminuye la saturación, el color se vuelve más gris.

Brightness - Luminosidad de un color. 0% de brillo es de color negro.

Eligiendo el color

La elección del color es por tu cuenta, pero debes tener unas cuantas cosas en mente:

1. Los colores menos saturados e iluminados tienden a ser más "terrenales" y menos caricatura.

2. Fijate en el circulo de colores, cuanto más alejado está un color de otro, más separados parecen. Pero también hay colores, como el rojo y el naranja, que juntos también entonan bien.

3. Cuantos más colores uses, más distraido parecerá tu sprite. Para hacer que un sprite se vea bien, usa solo 2 o 3 colores principales. (Piensa que con solo un poco de rojo y marrón ¡apareció el Super Mario Bros de hoy!)

Aplicando colores

Aplicar colores es fácil. Con Photoshop, solo selecciona el área que vayas a pintar con la varita mágica (atajo "W") y rellena pulsando "Alt-F" (color primario) or "Ctrl-F" (color secundario)


Parte 6

El shading (o sombreado) es un paso crucial en nuestra épica búsqueda para ser semi-dioses del pixelado. Aquí es donde el sprite obtiene más puntos, o se convierte en un engendro horrible. Sin embargo, sigue estos consejos y seguro que no tendrás problemas

Paso 1: Elegir la fuente de luz
En primer lugar, tenemos que elegir una fuente de luz. Si el sprite es parte de un escenario amplio, puede haber todo tipo de fuentes de luz (como lámparas, fuego, bombillas, ojos malignos ansiosos de sangre, etc) que brillan sobre él. Estos se pueden mezclar de manera muy compleja en el sprite. Sin embargo, en la mayoría de los casos, elegir una fuente de luz alejada (como el sol) es mejor. Especialmente para juegos, quizás quieras usar un sprite con una iluminació general para que pueda ser usado en cualquier lugar.

Suelo elegir una fuente de luz distante que esté en algún lugar encima del sprite y ligeramente delante de él, y así todo lo que está por encima o por delante estará bien iluminado y el resto sería sombra. Esta iluminación parece la más natural para un sprite.

Paso 2: Sombreado
Una vez elegida una fuente de luz, comenzamos a sombrear las áreas que estén más alejadas de la luz con un color más oscuros. Nuestro modelo de iluminación "arriba y al frente" nos indican que bajo la cabeza, bajos los brazos y piernass, etc., debe haber sombras.

Recuerda que jugar con las luces y las sombras hace que los objetos no sean planos. Haz una bola de papel, deshazla y estira el papel, y dime, ¿como es que la hoja ha dejado de ser plana? Porque puede ver pequeñas sombras alrededor de las arrugas. Usa el sombreado para marcar los pliegues de lla ropa, musclos, pelo, piel, arrugas.


Paso 3: Sombras suaves
Una segunda capa, menos oscura que la primera, se usa para las sombras suaves. Estas zonas son las que están indirectamente iluminadas, lo que se conoce como "claridad". También se puede usar para pasar de oscuro a luminoso, sobretodo para zonas curvas o esféricas.



Paso 4: Luz fuerte
Los sitios donde la luz recae directamente pueden tener iluminaciones sobre ellos. Debes usar las luces fuertes con moderación, mucha más que las sombras, ya que distraen mucho a la vista.

Ponlas siempre después de las sombras, y te ahorrarás más de un dolor de cabeza. Sin las sombras, siempre tendemos a hacer las luces demasiado extensas


Lo que NO debes hacer
En el shading es donde más principiantes fallan. Aquí os relato unas normas para seguir siempre que sombrees.
1. NO uses gradients (degradados): El último error que deberías cometer. Los gradients se ven horribles, y casi nunca están a juego con la iluminación que hemos dado.
2. NO hagas "pillow shading": Se conoce con este nombre a cuando una de las sombras del contorno entra. Se le llama así porque se ve "almohadillado" e indefinido.
3. NO uses muchos matices: Es muy fácil pensar que "más colores es igual a más realismo". En la realidad, sin embargo, vemos las cosas como grandes manchas con más o menos luces y sombras, que nuestro cerebro interpreta. Usa un máximo de dos tipos de sombra (oscuro y muy oscuro) y dos tipos de luces (iluminado y muy iluminado) como colores importantes.
4. NO uses colores muy similares: No hay razón para usar colores demasiados parecidos, como azul claro y azul un poquito más claro, a menos que quieras hacer un sprite de un estilo muy borroso.
Extra. NO uses negro: O al menos, no el negro puro de #00000. Como su nombre indica, este paso es extra, y puede ser saltado Siempre usa un tono algo menos oscuro, ya que en agunos programas y juegos el negro es el color transparente, y puede dar problemas pero si tienes por seguro que no dará problemas, adelante

///
Y mañana, la última parte, [[aquí]]

Tutorial de PixelArt 1-3
Tutorial de PixelArt 2-3
Tutorial de PixelArt 3-3

Tutorial de PixelArt 1-3

Navegando por sitios dispares, me topé con el blog de Derek Yu, el cual suelo visitar de vez en cuando. Lo que no sabía es que tiempo atrás hizo un excelente tutorial sobre PixelArt, que os traduzco aquí para facilitaros problemas.

Sin más, os dejo con mi traducción. He eliminado partes innecesarias y frases hechas que no tienen ningún sentido en castellano, y he añadido ciertos retoques para entender mejor, pero el contenido está intacto.

Parte 1: Herramientas

Una de las cosas buenas del PixelArt es que no necesitas demasiadas herramientas de dibujo, incluso con el programa de dibujo de serie de tu ordenador bastaría. Para este tutorial usaré Photoshop, que es un bicho muy caro, pero sirve para todas las áreas y es perfeto para pixelar

Usando Photoshop, el principal arma será el lápiz (atajo B) ya que nos permite pintar píxeles de uno en uno y sin anti-alias.


Otras dos herramientas importantes serán el marco rectagular (atajo M) y la varita mágica (atajo W) para seleccionar y mover o copiar y pegar.
Recuerda que pulsando las teclas Shift o Alt mientras haces una selección puedes añadir o quitar elementos de tu selección actual. Esto viene bien cuando quieres seleccionar áreas que no son exactamente cuadradas.

También, con el cuentagotas (atajo I) seleccionaremos los colores. Conservar los colores en un PixelArt es muy importante por muchas razones, así que deberás coger los mismo colores y reusarlos.

Además, con el atajo X cambiaremos entre el botón primario y el secundario. Recordar los atajos es muy importante, ya que pueden ahorrarnos mucho tiempo y esfuerzo.

Parte 2: Líneas

Los píxeles son básicamente pequeños bloques de colores. Lo primero que debes aprender es como usar esos bloques correctamente para lograr el tipo de línea que desees. Veremos 2 tipos de líneas: rectas y curvas.

Líneas rectas

Se lo qe piensas, "esto es muy fácil, no necesito siquiera leerlo". Pero con píxeles hasta las líneas rectas dan problemas. Lo que tenemos que evitar son los "jaggies", pequeños cortes en la línea que la hacen extraña. Los jaggies aparecen cuando un trozo o parte de la línea es más grande que el resto.


Líneas curvas

Para curvar, asegúrate de que la declinación o la inclinación es constante todo el rato. En el siguiente ejemplo, la curva perfecta va bajando el número de píxeles 6>3>2>1, mientras que la curva con el jaggy tiene 3>1<3.


Hacer buenas líneas en píxeles es crucial para hacer pixel art. Más tarde, aprenderemos a usar anti-aliasing para hacer líneas aún más suaves.

Parte 3

Lo primero que debes tener, ¡es una buena idea! Intenta visualizar lo que quieres pixelar, ya sea en tu cabeza o en un papel. Trabajar un poco en el pre-planteamiento te puede ayudar a concentrarte en tu pixelado actual.

Piensa en esto

1. ¿Para qué será usado el sprite? ¿Es para una web o un juego? ¿Tendrá animación después o será estático? Si el sprite será animado, deberás querer hacerlo pequeño y sin demasiados detalles para más facilidad. Por el contrario, puedes hacerlo muy detallado si el sprite es estático ya que no tendrás que animar todos esos detalles. Pero piensa para que servirá tu sprite, y así todo irá mejor.

2. ¿Qué condiciones tengo? Ya os he dicho que la conservación de colores es importante. Una de las razones es que, especialmente si estás trabajando en un juego, tu paleta de colores debe ser limitada. También debes considerar las dimensiones de tu sprite y si encajará en el terreno para el, que será usado.

¡Adelante!

Para este tutorial, no pongo limitaciones, pero quería asegurarse de que el sprite era bastante grande para que pudiesemos ver claramente lo que sucede paso a paso. Para ello, he decidido utilizar a Lucha Lawyer, el abogado luchador más rompeespaldas, como mi modelo! Podría estar en un juego de lucha, o algo así, con movimientos como "Habeas Corpse Blaster" xDD

/////

Siguiente parte 2-3

Tutorial de PixelArt 1-3
Tutorial de PixelArt 2-3
Tutorial de PixelArt 3-3